UI Lingo
Shortlist 0

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.

“Choreographed UI”Interaction‑ledEra: 2020sPlayfulTechyBoldFriendly
Open full screen ↗
motion-driven / landingEN
motion-driven / landingTH
Customize

Try a palette, other colours, radius, density, display size and fonts on the preview. The copied prompt and theme export follow your choices; the style itself never changes.

Palettes

UI Lingo pool

Colours · Light

    Recipes may hard-code decorative colours, sizes or fonts, so a change can apply only in part, and the signature may not hold.

    Design keywords

    Say these words to ask for this style.

    staggered entrancesscroll revealspring easingfade-and-risekeyframe diamondsdashed motion pathsself-drawing chartstimecode labels

    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

    Kinetic Typography →Kinetic Typography makes the letters themselves move; Motion-Driven moves whole blocks in a choreographed order while type stays still once landed.Micro-interactions →Micro-interactions animate feedback on a single control when touched; Motion-Driven animates the page structure as it enters and scrolls.Parallax Storytelling →Parallax moves full-bleed layers at different speeds for depth; Motion-Driven keeps a normal grid and staggers cards into place.

    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.

    Audit
    ✓ Passed
    Rounds
    2
    Builder
    unknown
    Auditor
    unknown
    Copied!
    ↑ ↓ to move · Enter to open · Esc to close