Motion
Only transform and opacity animate. Content fades and rises once as it scrolls into view, large visuals drift with the page, and hover states change colour or nudge by a few pixels. Everything respects reduced motion and renders fully without JavaScript.
Reveal
Fade + rise 20px, 0.8s opacity / 0.9s transform with the soft ease, children staggered 90ms in DOM order, fired once at 20% in view.
Headline
Copy
Buttons
Visual
Easings
ease-out-soft · cubic-bezier(0.22, 1, 0.36, 1)
ease-standard · cubic-bezier(0.4, 0, 0.2, 1)
ease-out-soft for reveals, slides and crossfades. ease-standard for colour changes on buttons and tabs.
Durations and rules
| Pattern | Motion | Timing |
|---|---|---|
| Reveal | opacity 0 → 1, translateY 20px → 0 | 0.8s / 0.9s ease-out-soft, stagger 90ms |
| Parallax | hero visual drifts down up to 60px as it leaves (exit); other visuals ±30px (through) | scroll-linked, transform only |
| Buttons, tabs | fill colour change, no lift | 150ms ease-standard |
| Cards | lift 2 to 4px; clipped images scale to 1.03 | 200ms ease-out |
| Stat and list rows | value nudges 5px right on hover | 200ms ease-out |
| Links | fade to 60% opacity | 200ms ease-out |
| Sticky nav | after 8px of scroll: translucent, hairline, scaleY 0.84 + content up 6px | 300ms ease-out |
| Carousel | cards slide and scale; the active pagination line slides | 500ms ease-out-soft / spring |
| Accordion body | fade + rise 6px | 0.45s ease-out-soft |
| Reduced motion | no reveals, no parallax, no autoplay, no transitions | motion-reduce:transition-none |