Motion in enterprise systems is usually where taste falls apart — either everything is bouncy and distracting or completely static. This lab codifies restraint: a six-step duration scale, three purposeful easing curves, and semantic weight composed from duration and curve rather than arbitrary physics.
Preview
Duration scale
Six named steps. Each swatch runs back and forth on its own step's duration, same neutral ease (ambient's curve) across all six, so the only variable your eye is reading is duration.
Easing library
Three named curves — enter, exit, ambient. Click any track to replay. Defaults are restrained: no bounce, elastic, or overshoot anywhere. Weight/importance is expressed by pairing these with a duration step (section 3), not by separate curve variants.
Weight / importance tuner
Three objects, same on-screen distance, each a live example of duration + curve composition — pick any duration step and any curve per tier on the right. "Heavy object entering" = slow + enter; "light object drifting" = fast + ambient. No bespoke per-tier curve or cushion — these three are worked examples, not an enum.
Enter / exit round trip
One card, the actual enter/exit curves from section 2 above at duration.base — arriving and leaving matched together, not a technique bake-off. Tune the curves in section 2; this just shows them working as a pair.
Ambient loop lab
Subtle, low-amplitude looping motion for a "living site, not a distracting one." The three pulsing dots share one desync control: at 0 they pulse in unison ("robotic"); higher values stagger their phase ("organic"). The crosshair only tracks the cursor inside this panel.
breathing glow
pulsing grid nodes (desync)
gradient drift
cursor-lag crosshair (this panel only)
Choreography / stagger lab
A small hero mockup — eyebrow, headline, subhead, CTA, image — enters as one GSAP timeline. Order and interval are tunable on the right.
Signature behaviors
Three named, scoped behaviors — not global page effects.
Grid draw-on
Hand-drawn via stroke-dashoffset (no DrawSVGPlugin), wired to replay every time this section scrolls into view, not just once. Scroll this panel up and back down to see it re-trigger.
Crosshair track
Scoped to this card only — fades out the moment the cursor leaves its bounds. Not a page-wide effect.
Hover to track — leave the card and the reticle fades.
Six named duration steps spaced by semantic role rather than arbitrary milliseconds. Reach for fast, base, or slow when composing component motion.
Cubic bezier coordinates for the system's three core curves. Tuned for physical deceleration without bounce, elastic effects, or overshoot.
enter — entrances, ease-out
exit — exits, ease-in / accelerate
ambient — loops, sine-like ease-in-out
Pairs a duration step with an easing curve for each semantic tier (primary, secondary, tertiary) to create natural visual hierarchy without custom physics.
primary
Duration
Curve
secondary
Duration
Curve
tertiary
Duration
Curve
A live validation stage pairing the enter and exit curves at duration.base to test symmetrical entrance and exit pacing.
Low-amplitude background loops. Adjust amplitude, cycle period, and phase desync to keep ambient motion subtle and organic rather than distracting.
Sequence direction and timing intervals for staggered multi-element entrance animations.
Fine-tune timing for brand-specific interactions: the SVG grid line draw-on, cursor reticle tracking lag, and theme crossfade.
Crossfade easing
Test accessible fallbacks. Ambient loops cleanly disable, while essential navigational transitions collapse to near-instant.