Guidelines / Motion

The motion system, playing.

Subtle, elegant, expensive: every interaction the studio ships, rebuilt here as replayable specimens. Hit Replay to watch a pattern again, or hover the ones that react. All on the same curves and durations as the real components, and all reduced-motion safe.

01 · Easings

Four curves, one feeling

Every motion on the site rides one of these. The editorial reveal does the heavy lifting: an expo-out that decelerates into place. The dot travels each track with that curve’s real pacing.

Editorial reveal

cubic-bezier(.19,1,.22,1)

Scroll reveals: transform / clip only, the expo-out settle.

House

cubic-bezier(.32,.72,0,1)

Default UI transitions, hovers, toggles, the everyday.

Decel (state)

cubic-bezier(.59,.01,.28,1)

Deliberate state changes and navigation.

Page transition

cubic-bezier(.76,0,.24,1)

View Transitions on route change + theme toggle.

02 · Durations

Reveals run long, on purpose

UI reacts fast; reveals take their time. The slow end is deliberate: a fashion-house settle, never a snappy 200ms pop.

Fast150ms, micro toggles, taps

Base240ms, default UI transition

Slow380ms, deliberate state change

Reveal0.9–1.25s, scroll reveals, never a 200ms snap

03 · Reveals

Transform & clip in, never just fade

Content rises from a mask or draws itself in. One-shot, settling on the editorial curve (no opacity-only fades, no scroll-scrub).

Masked clip-up

translateY(110%) → 0 · 1s · cubic-bezier(.19,1,.22,1)

Creative, accelerated.

The core reveal: headlines, taglines, footer bands.

Wordmark punch-in

6 letter masks · 0.06s stagger · expo-out

The home hero. Each letter rises in its own clip window.

Line draw

scaleX(0) → 1 from left · 0.95s · 0.12s stagger

The footer hairlines sweep in as you arrive. .hoop-hr

Staggered rows

masked clip-up · 0.07s/row stagger

WorkServicesAboutContact

The mobile menu + footer link columns open in sequence.

04 · Hover gestures

Micro-interactions

Small, legible, rewarding: the texture you feel more than notice.

Underline wipe

scaleX(0) → 1 + ink · 0.45s · expo-out

Learn more about our approach

Every link in the footer + nav. Muted → ink as it wipes.

Logo, per-letter rise

translateY(-12%) · 0.04s/letter stagger

Hover the mark

The header wordmark. The footer mark plays the same wave + inks in.

Arrow view-reveal

swap up-right · 0.5s · house curve

Vucko arrow gesture: plays once on scroll-in, never hover-only.

05 · In the system

How it ships

Page & theme transitions

Route changes run the View Transitions API: slide-up + fade-out-scale at 0.7s on the page curve; theme toggle does a vertical-wipe at 0.5s.

Always

Transform / clip reveals, never opacity-only.
One-shot settles, no scroll-scrub, no parallax.
Composited properties (transform / opacity) only.
Honor prefers-reduced-motion: ship the resolved end state.

Source of truth: design/motion.md. Live in src/components/chrome/chrome.css (header + footer) and the home hero.