← Motion Lab

Motion demos

One pattern per page, each built to settle a single argument. These are the pieces the template prototypes on the Motion Lab homepage are assembled from. Durations, easings, travel and stagger all come from src/motion.css.

Every demo carries a review toolbar. Drop Speed to 0.2x to watch an easing curve resolve, toggle Reduced to review the accessibility fallback as a real design state, and press H to hide the toolbar for screen recordings.

01 Hero reveal Masked line reveal against a settling image, then a two-rate parallax exit. Decides how long the hero holds before the page feels usable. timelinemaskparallax 02 Pinned fabric story FIONx, FORMx and FIBREx in a pinned, scrubbed sequence. Decides the scroll budget per panel — the line between immersive and stuck. ScrollTrigger pinscrubcross-fade 03 Collection grid stagger Row-batched card reveals plus hover and swatch micro-interactions. Decides how much motion a PLP can carry before it fights scanning. batchstaggerhover 04 PDP rail & gallery parallax Native-sticky buy rail against a three-depth gallery, plus the add-to-bag confirmation. Decides where overshoot is earned. stickydepthconfirmation 06 Cart drawer & add-to-bag The most-touched motion on a commerce site. Fly-to-cart, spring confirmation, quantity nudge, success flash. Decides whether overshoot is delight or noise. drawerspringflash 07 Collection landing & lookbook Editorial header with two-depth parallax, filter reveal, FLIP density toggle. First page in the lab to use Lenis and SplitType. parallaxLenisFlip