FIGS · 2026 Website Redesign

Motion Lab

A sandbox for settling how the new site moves. Every experiment is plain HTML, CSS and JavaScript — no framework, no build-time magic — so whatever gets approved here lifts straight into production. Durations, easings, travel and stagger all come from src/motion.css; nothing is hardcoded.

Every page 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

The vocabulary

Live values, read from src/motion.css at page load. Edit that file and this table and every experiment change together. When the language is settled, that file is the handoff artifact.