Design for AI

Kinetic / motion-first: UI design prompt

Palette, type rules and a pasteable prompt for kinetic / motion-first. Also called motion design web, kinetic typography site, animated website, scroll-driven design, awwwards style. 2016 onward (GSAP, Three.js era; scroll-driven animations 2023+).

Traits

  • the animation is the design: text splits and reveals, sections pin and scrub with scroll
  • large type that moves: characters stagger in, words swap, marquees run
  • cursor-following elements, magnetic buttons, custom cursors
  • page transitions with wipes or masks; images reveal via clip-path
  • WebGL or canvas backgrounds (distortion, particles) as accent, not fill
  • palette is usually restrained so motion reads clearly (black, white, one colour)
  • everything has an easing curve; nothing snaps or uses linear

Palette

#0a0a0a page, #f5f5f5 text, #ff4d00 or #c8ff00 one accent, #1a1a1a surface, #666666 muted

Type

Neue Montreal-alike Space Grotesk, Syne, Unbounded or Clash Display (free via Fontshare) for display at 64-160px; Work Sans for body 16px; often uppercase with tight tracking

Do

  • build on CSS scroll-driven animations (animation-timeline: scroll()/view()) first, and only add a JS library for what CSS cannot do
  • use one easing family (e.g. cubic-bezier(0.16,1,0.3,1)) and 3 durations (300, 600, 1200ms) across the site
  • stagger character reveals at 20-30ms and cap total reveal under 1s; users leave otherwise

Don't

  • do not animate layout properties (width, height, top); transform and opacity only
  • do not ship without prefers-reduced-motion handling: every effect needs a static fallback
  • do not let a 3D canvas cost more than 50KB of JS or block first paint

Known for it: Awwwards winners, Locomotive, Active Theory, Igloo Inc, Lusion

CSS seed
:root {
  --bg: #0a0a0a;
   --fg: #f5f5f5;
   --accent: #c8ff00;
   --surface: #1a1a1a;
   --ease: cubic-bezier(0.16,1,0.3,1);
   --dur: 600ms;
   --radius: 0;
   --font: 'Syne',sans-serif
}
Prompt

Build the site motion-first. Background #0a0a0a, text #f5f5f5, one accent #c8ff00, surface #1a1a1a. Font Syne 800 uppercase for display at 140px desktop / 56px mobile with -0.03em and line-height 0.9; Work Sans 400 at 16px for body. Single easing cubic-bezier(0.16,1,0.3,1) with durations 300, 600 and 1200ms. Hero headline splits into characters that rise from translateY(100%) inside an overflow-hidden mask, staggered 25ms, total under 900ms. A full-width accent marquee at 40s linear. Sections use CSS scroll-driven animations (animation-timeline: view()) to fade and translate 40px into place; one pinned section where an image scales from 0.6 to 1 as the user scrolls (animation-timeline: scroll()). Images reveal with clip-path inset(100% 0 0 0) to inset(0). Magnetic primary button: moves up to 8px toward the cursor, accent fill, black text, no radius. Custom 12px dot cursor that grows to 48px over links. Transform and opacity only. Under prefers-reduced-motion, render everything in its final state.
For design.md, .cursorrules or AGENTS.md
## Design direction
Build the site motion-first. Background #0a0a0a, text #f5f5f5, one accent #c8ff00, surface #1a1a1a. Font Syne 800 uppercase for display at 140px desktop / 56px mobile with -0.03em and line-height 0.9; Work Sans 400 at 16px for body. Single easing cubic-bezier(0.16,1,0.3,1) with durations 300, 600 and 1200ms. Hero headline splits into characters that rise from translateY(100%) inside an overflow-hidden mask, staggered 25ms, total under 900ms. A full-width accent marquee at 40s linear. Sections use CSS scroll-driven animations (animation-timeline: view()) to fade and translate 40px into place; one pinned section where an image scales from 0.6 to 1 as the user scrolls (animation-timeline: scroll()). Images reveal with clip-path inset(100% 0 0 0) to inset(0). Magnetic primary button: moves up to 8px toward the cursor, accent fill, black text, no radius. Custom 12px dot cursor that grows to 48px over links. Transform and opacity only. Under prefers-reduced-motion, render everything in its final state.

## Tokens
:root { --bg:#0a0a0a; --fg:#f5f5f5; --accent:#c8ff00; --surface:#1a1a1a; --ease:cubic-bezier(0.16,1,0.3,1); --dur:600ms; --radius:0; --font:'Syne',sans-serif }

Keep hover and focus-visible states on every interactive element. Do not add a CSS framework.