0–420 ms
Distance
Two approved forms wait on a quiet paper-white field. Nothing anticipates the next movement.
Motion identity v2.1 · The Held Breath
Closing the distance.
The mark does not travel into the website. It becomes complete, waits, and lets light exist on its own before the company is allowed to emerge.
Canonical duration: 4,600 ms · Six movements · Silent · One play per tab session · Reduced-motion safe
Hero intro
Light receives its own moment.
The mark becomes complete and remains untouched. For more than a second, the audience sees only relationship and luminance. The already-finished website is revealed only after that held breath.
Logo animation
The mark never travels.
The approved geometry is unchanged. After convergence, the mark remains optically fixed. It completes its purpose at the centre and is released by the same clarity field that uncovers the permanent identity within the website.
Storyboard
One idea in six patient movements.
420–1,500 ms
Convergence
Both forms close the distance with equal weight. Light begins almost below perception before their relationship is complete.
1,500–2,100 ms
Recognition
The completed mark becomes absolutely still. The light is given time to become emotionally legible.
2,100–2,720 ms
Held breath
Only luminance changes. The website remains completely withheld while expectation gathers without spectacle.
2,720–4,200 ms
Emergence
A broad, back-loaded aperture gradually discloses the already-present world. The mark yields in place; semantic detail arrives slowly.
4,200–4,600 ms
Permanence
The page is fully sharp, interactive, and still. Nothing travels and nothing continues performing.
Timing
Every transition has a reason.
Motion Design System v1.0
Make change understandable.
Everyday product motion inherits the signature’s continuity, stability, and restraint without imitating the opening aperture.
Reveal cause and effect
Motion shows what changed, where it came from, or what now requires attention.
Arrive once
No bounce, overshoot, spring, flourish, or residual ambient movement.
Keep stable things stable
Navigation, controls, and reference frames stay still while the changed region resolves.
Preserve responsibility
Motion never conceals status, delays warnings, or implies completion before evidence exists.
Product motion
One character across the interface.
Routine motion is shorter than the signature. It preserves context, exposes causality, and stops as soon as the state is understood.
Page transition
360 msKeep the application shell still. Fade outgoing content for 120 ms, then reveal incoming content over 240 ms with no more than 4 px of travel.
Button
120 msChange colour and border. A primary action may rise 1 px on fine pointers; it never scales, glows, or delays the action.
Interactive card
180 msUse border or shadow and no more than 2 px of vertical travel. Static information cards do not move.
Loading
After 400 msUse quiet fixed-geometry skeleton luminance or measured progress. No bright sweep and no spinner.
Modal
160 / 240 msFade the backdrop in 160 ms. Resolve the panel from 8 px below over 240 ms while focus moves immediately.
Menu
180 / 120 msEnter together from the controlling edge by no more than 4 px. Exit by opacity; never stagger operational choices.
Drawer
280 / 200 msMove from its connected edge. Drawer content stays still inside it and the transition remains interruptible.
Toast
200 / 160 msEnter by 8 px from the nearest containing edge; leave with opacity and no more than 4 px of travel.
Success
180 / 240 msState the completed outcome. A check path may reveal once; there is no bounce, burst, confetti, or full-screen celebration.
Progress
160–480 msInterpolate only between measured values. Never imply 100 percent before completion or animate unverified numbers.
Dashboard
180–360 msKeep axes, labels, headers, and controls stable. Reveal charts once; crossfade when a scale change would make movement misleading.
Reduced motion: structural movement becomes immediate; colour or opacity feedback may remain for at most 120 ms when it helps recognition. State, focus, and accessibility never wait for animation.
Production sources
One motion. Multiple runtimes.
Every implementation preserves the stationary completed mark, gap-born clarity, single spatial reveal, approved paths, easing family, reduced-motion behavior, and final state.
MP4 referenceH.264 · 1920 × 1080 · 60 fps↓WebM referenceVP9 · 1920 × 1080 · 60 fps↓GIF previewReview-only · single play↓StoryboardSix-stage continuous sequence↓Timing diagramExact stage boundaries↓Animated SVGPortable vector ident↓Lottie JSON60 fps vector timeline↓CSSDependency-free implementation↓CSS referenceStandalone working page↓GSAPFramework-neutral controller↓GSAP referenceStandalone working page↓Framer MotionReact component↓Framer stylesComponent CSS module↓
