# Motion-Driven > Animation is the structure: content rises in staggered, springy waves, sections reveal on scroll and keyframe marks show the choreography. - Nickname: Choreographed UI - Also called: Motion-first design, Animated UI, Scroll-reveal design - Category: Interaction‑led - Moods: Playful, Techy, Bold, Friendly - Industries: SaaS, Startup & Tech, Creative & Portfolio, AI Products, Media & Entertainment - Style page: https://uilingo.dev/styles/motion-driven/ 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 ## Audit Passed after 2 rounds · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, light mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "Motion-Driven" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line Animation is the structure: content rises in staggered, springy waves, sections reveal on scroll and keyframe marks show the choreography. Design keywords: staggered entrances, scroll reveal, spring easing, fade-and-rise, keyframe diamonds, dashed motion paths, self-drawing charts, timecode labels. ## Visual language A clean, warm-white product site whose real material is time. Blocks never just appear: they fade and rise 28px with a spring that overshoots slightly, siblings arriving 80ms apart so the page reads in a deliberate order; sections reveal as they scroll into view, line charts draw themselves and bars grow from the baseline. The still frame borrows the language of motion software — a dashed motion path with bezier handles and keyframe diamonds in the backdrop, timecode-style mono eyebrows, easing-curve illustrations — in one confident violet with a coral spark. Calm when still, choreographed when moving. ## Signature details (must be visible) - Entrance = opacity 0→1 + translateY(28px)→0 + scale(.98)→1 over 600–760ms on the spring (CSS linear() spring or cubic-bezier(.34,1.56,.64,1)); sibling stagger 80ms via a --i index; the first readable line (hero headline) starts by 0ms and the whole hero copy has settled by ≤1.1s; the mock's side cards may finish by 1.4s; charts draw over 1.6s starting at 300ms - Scroll reveals with animation-timeline: view() and md-rise; columns ripple left to right with the exact CSS: column 1 animation-range: entry 5% entry 85%; column 2: entry 15% entry 95%; column 3: entry 25% entry 100% - Line charts draw in: stroke-dasharray/offset 2400→0 over 1.6s ease-in-out starting at 300ms; bars scaleY from 0 with the spring, 60ms apart - Hero ghost trail, hero headline only: text-shadow: 0 .1em 0 color-mix(in srgb,#5B2CF5 14%,transparent), 0 .2em 0 color-mix(in srgb,#5B2CF5 6%,transparent); add padding-bottom .1em so the trail is not clipped - Keyframe diamonds: 10–12px diamonds in violet #5B2CF5 and coral #FF6B3D joined by a 2px border-colour rule, used before eyebrows, above pull quotes and on step markers; draw them as SVG data-URI diamonds (path M5 0L10 5 5 10 0 5Z), never as a 45° linear-gradient (that renders a stripe) - Backdrop: one large dashed motion path (1px dots every 12px, 28% violet) with bezier handle lines, hollow handle circles and filled anchor diamonds, plus a faint violet glow top-right - Mono timecode labels (JetBrains Mono 500, 0.74rem, 0.12em tracking, uppercase): step numbers read 00:01, 00:02…. Timecode eyebrows use JetBrains Mono only for Latin and digits; any label containing Thai switches to the Thai body font at 0.85rem, weight 600, letter-spacing 0, no uppercase (:lang(th) .eyebrow {...}) - CSS only; a ≤15-line inline script is allowed only for showcase tabs. Pre-entry states may start at opacity 0 only inside @media (prefers-reduced-motion: no-preference) and @supports (animation-timeline: view()) for scroll reveals; otherwise the default state is fully visible, and under prefers-reduced-motion: reduce everything is the finished, still layout ## Design tokens — use these exact values Colours (light mode): - background #F7F6F2 - surface #FFFFFF - surface-2 #EFEDE7 - text #15131A - text-muted #5A5664 - primary #5B2CF5 (text on it #FFFFFF) - secondary #FF6B3D (text on it #1A0A03) - accent #00A877 - border #E1DED6 - success #0E8A5F · warning #B86A00 · danger #D93636 - chart series #5B2CF5, #FF6B3D, #00A877, #B79CFF, #15131A Radius: sm 8px, md 12px, lg 18px, xl 26px, pill 999px Border width: 1px Shadows: sm `0 1px 2px rgba(21,19,26,0.06), 0 2px 6px rgba(21,19,26,0.04)`, md `0 10px 30px -10px rgba(48,22,140,0.22)`, lg `0 30px 60px -20px rgba(48,22,140,0.32)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1.05 density Motion: 520ms cubic-bezier(.34,1.56,.64,1) ## Typography (Latin + Thai) - Headings: Bricolage Grotesque 700/800 with Thai fallback Prompt 600/700 - Body: Instrument Sans 400/500/600 with Thai fallback Noto Sans Thai 400/500/600 - Mono: JetBrains Mono - Google Fonts URL: https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@700;800&family=Instrument+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Prompt:wght@600;700&family=Noto+Sans+Thai:wght@400;500;600&display=swap - CSS stacks: heading `"Bricolage Grotesque", "Prompt", system-ui, sans-serif`; body `"Instrument Sans", "Noto Sans Thai", system-ui, sans-serif`; mono `"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, "Noto Sans Thai", monospace` (the mono font has no Thai glyphs, so Thai inside mono labels falls back to Noto Sans Thai — drop uppercase and tracking there) — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(2.9rem, 6.4vw, 5.4rem), heading weight 700, heading tracking -0.035em (Latin only), uppercase small labels (Latin only). - Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side. - Why this pairing: Prompt’s loopless, slightly squared geometry carries the same punchy grotesque energy as Bricolage, while Noto Sans Thai matches Instrument Sans’s calm, open body text. ## Components - Hover: hover motion is allowed only as a ≤2px button lift, a 6px card lift (with its −0.4° tilt) and a 4px arrow slide; colour and border changes may fade, but nothing else moves on hover - Primary button: violet #5B2CF5 pill, white text, coloured glow shadow 0 8px 20px -8px; hover lifts 2px with a springy transform and the arrow icon slides 4px right; active scales to .96 - Secondary button: white pill with a 1px #E1DED6 border that turns violet on hover and lifts 2px - Cards: white, 18px radius, 1px warm border, tiny shadow; a 3px coloured 'keyframe track' segment sits on the top edge at a different offset per card; hover lifts 6px with a −0.4° tilt - Inputs: 12px radius, white; focus ring 4px violet at 16% that eases in on the spring - Nav: translucent warm bar with a hairline; the current link has a 2px violet underline that grows from the left on load - Steps: mono timecode pill (00:01) with a coral diamond, connected to the next step by a dashed violet line - Dashboard: KPI cards and widgets stagger in, line draws itself, bars grow; active sidebar item is a solid violet pill with a glow - Art panels: violet gradient with a white easing curve, bezier handles and coral control points on a faint 40px grid - Mobile tab bar: floating ink-black capsule; the active tab gets a coral diamond indicator that slides between items ## Layout for this web page Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer. Hero: two columns — copy left, product visual right. Navigation: bar style. Sections in order: hero → logos → features → steps → showcase → stats → testimonials → cta. Feature section as grid. Split hero: headline (with a faint two-step rising ghost trail in violet) and copy on the left, a product mock of cards on the right that assembles itself after the copy — main card first, side cards 80ms apart, all settled by 1.4s. Below: logo row, a 3-column feature grid that ripples in on scroll, timecoded steps connected by a dashed line, a tabbed showcase, stat numbers alternating violet and ink, testimonials and an ink-black CTA panel with a dashed orbit. Keep the grid conventional — the structure comes from order and timing, not from unusual layout. Dashboards use a sidebar; widgets enter in reading order and charts animate once. ## Content Use realistic product copy (fictional brand) suited to: Product launch and feature-announcement pages. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## 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 - Constant looping or ambient animation behind text — motion here always has a start and an end - Animating width, height, top/left or box-shadow on scroll (layout thrash); stick to transform and opacity - Letter-by-letter text animation and marquees — that is Kinetic Typography - Multi-speed full-bleed background layers — that is Parallax Storytelling - Hiding content forever if JS or scroll timelines fail: the default CSS state must be visible - Ignoring prefers-reduced-motion ## Stack notes One self-contained HTML file with a