# Kinetic / motion-first

Also called: motion design web, kinetic typography site, animated website, scroll-driven design, awwwards style  
Era: 2016 onward (GSAP, Three.js era; scroll-driven animations 2023+)  
Page: https://designforai.dev/style/kinetic-motion-first

## 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

```css
: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.