loading

Springs

A tween asks "how long should this take?". A spring asks "how heavy is this, and how hard is it pulled?" - and the duration falls out of the answer. That is why springs survive interruption: retarget one mid-flight and it carries its current velocity into the new motion instead of restarting. Bm.Spring(...) is the whole API, and it accepts either set of knobs below.

Stiffness and damping

Stiffness is how hard the spring pulls toward the target - raise it and the motion gets faster and more urgent. Damping is the friction that removes energy - lower it and the element overshoots and wobbles, raise it far enough and it eases in without ever crossing the target. Mass (default 1) scales the inertia behind both.

stiffness 400 · damping 40
fast, no overshoot
stiffness 100 · damping 10
the default feel
stiffness 50 · damping 5
loose and wobbly
stiffness 300 · damping 70
overdamped - it crawls in
Razor

Bounce and duration

Stiffness and damping are the physics, but they are not how anyone describes motion out loud. The second form takes the two words you would actually use: bounce (0 = no overshoot at all, 1 = very springy) and duration in visual seconds. Bmotion solves for the constants that produce it, so the same feel is reachable without tuning numbers by trial.

bounce 0 · duration 0.6
bounce 0.3 · duration 0.6
bounce 0.6 · duration 0.6
bounce 0.6 · duration 1.2
Razor

Overshoot on mount

An underdamped spring on an entrance is the cheapest way to make an interface feel alive: the element passes its resting state, comes back, and settles. Re-mount below to replay it - the @key change is what makes Blazor treat it as a new element, which is what makes Initial run again.

Razor

Repeating springs

BmRepeat replays a spring without an int.MaxValue sentinel anywhere in sight. Mirror ping-pongs back through the motion it just played; Loop jumps home and replays from the origin, optionally with a pause between runs.

Mirror · forever
Loop · 3×, 300 ms apart
Razor
Bmotion 0 el ยท 0 active
An unhandled error has occurred. Reload ๐Ÿ—™