Nova workshop / motion standard v1 / 18 Jul 2026

Websites that feel alive.

A self-demonstrating spec sheet: every section of this page is built with the exact technique it documents, using the workshop's dependency-free motion library.


01 / The rule everything else serves

Research across award juries, studio teardowns and motion theory converged on a single sentence. It is the test every decision on this page had to pass.

The gap between competent and world-class is not more effects. It is fewer, deeper decisions.

02 / Motion numbers, counting themselves in

The duration palette is three numbers, not thirty.

One signature easing carries 80 percent of the motion. Each card below arrives on the standard 80ms stagger; each figure is animated by the counter helper it quotes.

160ms

Quick: hovers, presses, toggles. Under 80ms is imperceptible.

300ms

Standard: cards, panels, state changes. Ease-out on every entrance.

700ms

Slow: hero reveals and the one dramatic moment a page has earned.

500ms

The total stagger budget. Past it, choreography reads as queueing.


03 / Page-load choreography, drawn to scale

Structure, then hero, then support. Never everything at once.

This is the timeline the hero above actually used. The bars draw with the same expo-out signature easing, staggered 120ms.

structure
hero words
subtitle
navigation
support

04 / Feedback within 160ms

Interaction is the handshake. It answers instantly.

Press and hover these. The press scales to 0.97 and back; the lift travels 3px. Small, fast, consistent - that is the whole trick.