# Kinetisch / Motion-first

Auch bekannt als: Motion-Design-Web, kinetische Typografieseite, animierte Website, scrollgesteuertes Design, Awwwards-Stil  
Ära: ab 2016 (GSAP-, Three.js-Ära; scrollgesteuerte Animationen ab 2023)  
Seite: https://designforai.dev/de/style/kinetic-motion-first

## Merkmale

- die Animation ist das Design: Text teilt sich und erscheint, Abschnitte pinnen und scrubben mit dem Scroll
- große Schrift, die sich bewegt: Zeichen staffeln sich herein, Wörter wechseln, Marquees laufen
- Elemente, die dem Cursor folgen, magnetische Buttons, eigene Cursor
- Seitenübergänge mit Wipes oder Masken; Bilder erscheinen per clip-path
- WebGL- oder Canvas-Hintergründe (Verzerrung, Partikel) als Akzent, nicht als Füllung
- Palette meist zurückhaltend, damit Motion klar lesbar ist (Schwarz, Weiß, eine Farbe)
- alles hat eine Easing-Kurve; nichts snappt oder nutzt linear

Palette: #0a0a0a Seite, #f5f5f5 Text, #ff4d00 oder #c8ff00 ein Akzent, #1a1a1a Fläche, #666666 gedämpft

Schrift: Neue-Montreal-Ersatz Space Grotesk, Syne, Unbounded oder Clash Display (frei über Fontshare) für Display bei 64-160px; Work Sans für Fließtext 16px; oft Versalien mit engem Tracking

## Do

- baue zuerst auf CSS-scrollgesteuerten Animationen (animation-timeline: scroll()/view()) und ergänze eine JS-Bibliothek nur für das, was CSS nicht kann
- nutze eine Easing-Familie (z. B. cubic-bezier(0.16,1,0.3,1)) und 3 Dauern (300, 600, 1200ms) auf der ganzen Seite
- staffele Zeichen-Reveals bei 20-30ms und deckle den gesamten Reveal unter 1s; sonst gehen die Leute

## Don't

- animiere keine Layout-Eigenschaften (width, height, top); nur transform und opacity
- liefere nicht ohne prefers-reduced-motion-Behandlung aus: jeder Effekt braucht einen statischen Fallback
- lass einen 3D-Canvas nicht mehr als 50KB JS kosten oder den First Paint blockieren

Bekannt dafür: Awwwards-Gewinner, 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

Baue die Seite motion-first. Hintergrund #0a0a0a, Text #f5f5f5, ein Akzent #c8ff00, Fläche #1a1a1a. Schrift Syne 800 Versalien für Display bei 140px Desktop / 56px mobil mit -0.03em und line-height 0.9; Work Sans 400 bei 16px für Fließtext. Ein einziges Easing cubic-bezier(0.16,1,0.3,1) mit Dauern 300, 600 und 1200ms. Die Hero-Headline teilt sich in Zeichen, die aus translateY(100%) in einer overflow-hidden-Maske aufsteigen, 25ms gestaffelt, insgesamt unter 900ms. Ein Akzent-Marquee in voller Breite bei 40s linear. Abschnitte nutzen CSS-scrollgesteuerte Animationen (animation-timeline: view()), um 40px einzufaden und an ihren Platz zu gleiten; ein gepinnter Abschnitt, in dem ein Bild beim Scrollen von 0.6 auf 1 skaliert (animation-timeline: scroll()). Bilder erscheinen per clip-path inset(100% 0 0 0) nach inset(0). Magnetischer Primärbutton: bewegt sich bis 8px zum Cursor, Akzentfüllung, schwarzer Text, kein Radius. Eigener 12px Punktcursor, der über Links auf 48px wächst. Nur transform und opacity. Unter prefers-reduced-motion alles im Endzustand rendern.