Motion-Driven
Also called: Motion-first design, Animated UI, Scroll-reveal design
Animation is the structure: content rises in staggered, springy waves, sections reveal on scroll and keyframe marks show the choreography.
Design keywords
Say these words to ask for this style.
Motion-Driven design treats timing as a layout tool. Every block has an entrance — a short fade-and-rise with a spring overshoot — and siblings arrive 60–90ms apart so the eye is led through the page in order. Sections reveal as they scroll into view, charts draw themselves and bars grow from the baseline. The static skin stays clean (warm white, one violet, a coral spark) and borrows the vocabulary of motion tools: dashed motion paths, keyframe diamonds, easing curves and timecode labels. Everything collapses to a still, complete page under reduced motion.
Best for
- Product launch and feature-announcement pages
- SaaS marketing sites that explain a flow step by step
- Onboarding sequences and empty states
- Portfolio case studies with a narrative order
Avoid for
- Dense admin tools where users scan, not watch
- Low-end devices and data-saver contexts
- Audiences with vestibular sensitivity unless reduced motion is honoured
✓ Do
- Keep entrances 600–760ms on a spring with 60–90ms stagger; the hero copy has settled by ~1.1s
- Animate only opacity and transform (translate, scale) so it stays on the compositor
- Wrap every animation in prefers-reduced-motion: no-preference and keep the final state as the default
✕ Don't
- Don’t animate on every hover — reserve motion for entering, ordering and feedback
- Don’t delay the first readable line at all, and don’t let the hero take more than ~1.1s to settle
- Don’t loop decorative animation behind body text
Not to be confused with
On mobile
Keep one entrance per screen: the list staggers in at 50ms, the featured card springs up once, and the tab-bar indicator slides. Skip scroll-linked effects on low-end phones and never block taps while something animates.
Prompt builder
Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.