Design for AI

Stil Kinetisch / Motion-first: UI-Design-Prompt

Palette, Schriftregeln und ein einfügbarer Prompt für kinetisch / motion-first. Auch bekannt als Motion-Design-Web, kinetische Typografieseite, animierte Website, scrollgesteuertes Design, Awwwards-Stil. ab 2016 (GSAP-, Three.js-Ära; scrollgesteuerte Animationen ab 2023).

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
: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.
Für design.md, .cursorrules oder AGENTS.md
## Designrichtung
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.

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

Hover- und focus-visible-Zustände auf jedem interaktiven Element beibehalten. Kein CSS-Framework hinzufügen.