Motion's own token file, motion.json — duration scale, a three-curve easing library, weight/importance as duration+curve composition, ambient loops, choreography/stagger, three signature behaviors, and a reduced-motion contract.Every value below is a placeholder — this lab is the control surface, not the tuned result; real numbers get set in a live session.
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 ofduration + 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.
Theme crossfade
Same .themetog control as the stage header above — toggling theme now crossfades rather than snapping instantly. Duration/easing are tunable on the right.
Reduced-motion preview
Simulates prefers-reduced-motion: reduce for the whole lab (no OS setting needed) — same toggle as the stage header's ⟲ reduce motion. When active: all ambient/looping motion (section 5, plus the crosshairs' drift) fully stops — disabled, not dampened. Theme crossfade and entrance choreography still run, but collapse to a fast/near-instant crossfade.
A real @media (prefers-reduced-motion: reduce) block inmotion-lab.css mirrors this behavior for actual OS-level settings — this toggle is a preview, not the only enforcement.