Animierte Website mit Claude Code: Design, GSAP und Tests

Mehr über die Arbeit mit Modellen erfährst du in der Ailoot-Dokumentation.

Woran erkennt man eine mit KI erstellte Website schon auf den ersten Blick?#

Du bittest einen Agenten, eine Landingpage zusammenzustellen. Vierzig Minuten später hast du eine funktionierende Website: Die Abschnitte sind vorhanden, das Layout ist responsiv und die Buttons funktionieren. Und fast sofort kommt dir das Gefühl, diese Seite schon einmal irgendwo gesehen zu haben.

Der Grund ist mechanisch. Das Modell wurde mit einer riesigen Sammlung fertiger Seiten trainiert, und diese Sammlung war stark verzerrt. Tausende Tutorials und Startervorlagen übernahmen dieselben Standardfarben und verzerrten so die Stichprobe.

Tausende Tutorials und Starter-Templates übernahmen diese Farbe, verzerrten die Stichprobe, und das Modell lernte, dass Buttons violett sind. Derselbe Mechanismus wirkt sich auf Schriftarten, abgerundete Ecken und Schatten aus.

Der „KI-Look“ hat sich inzwischen verändert. In der Dokumentation für den Skill frontend-design beschreibt Anthropic heute andere Looks.

In einer Hacker-News-Diskussion über „Slop“ in Weblayouts brachte jemand das Grundproblem in einem Satz auf den Punkt: Slop entsteht, wenn es nichts Konkretes zum Kopieren gibt und das Modell einfach alle Webstile mittelt. Qt wirkt stimmig, gerade weil es nicht weiß, wie es anders aussehen könnte.

„Slop“ bezeichnet hier maschinell erzeugte Arbeit, die zu einem generischen Ergebnis ohne eigenen Stil gemittelt wurde.

Die praktische Konsequenz: Der Agent braucht eine enge Design-Grammatik statt einer offenen Aufgabe. Sagst du „mach es schön“, nimmt er den Durchschnitt. Gibst du ihm eine konkrete Farbpalette, ein paar Schriftarten und ein prägendes visuelles Gestaltungsmittel, baut er darauf auf.

Bewegung ist in diesem Bild das auffälligste Signal. Selbst eine statische Seite mit perfekter Typografie wirkt noch wie ein Template, denn lebendige Websites atmen: Elemente erscheinen beim Scrollen, der Cursor löst Veränderungen aus und Übergänge zwischen Ansichten brechen nicht abrupt ab.

Was brauchst du, um mit Claude Code eine animierte Website zu erstellen?#

Gehen wir die Werkzeuge einzeln durch, denn bei den Preisen herrscht viel Verwirrung.

GSAP ist die Animationsbibliothek hinter einem beträchtlichen Anteil preisgekrönter Websites. Webflow kaufte sie im Oktober 2024, und fast sofort kamen Gerüchte auf, dass nun alles kostenlos sei. Ganz richtig ist das nicht: Damals bestätigte Webflow, dass die bestehenden Preise bestehen bleiben würden. Ende April 2025 wurde die Bibliothek mit Version 3.13 kostenlos.

Im Release 3.13 steht ausdrücklich, dass auch zuvor kostenpflichtige Plugins wie SplitText und MorphSVG kostenlos wurden, einschließlich für die kommerzielle Nutzung. Die aktuelle Version im Juli 2026 ist gsap@3.15.0.

Kostenlos bedeutet allerdings nicht Open Source. Die Lizenz bleibt proprietär und untersagt es, mit GSAP einen visuellen Animationseditor zu entwickeln, der mit Webflow konkurriert. Für Websites, Kundenprojekte oder kommerzielle Arbeit gibt es keine Einschränkungen.

Anthropics Skill frontend-design besteht aus Anweisungen, die verändern, wie der Agent an einer Oberfläche arbeitet. In der Beschreibung des Repositorys heißt es:

Der Skill enthält eine Methode in zwei Durchläufen. Zuerst erstellt der Agent ein Token-System: vier bis sechs benannte Farben, Schriftarten für mindestens zwei Rollen, ein Layoutkonzept als Textskizze und ein prägendes visuelles Gestaltungsmittel für die Seite. Danach kritisiert er seinen eigenen Plan im Hinblick auf die Aufgabe. Erst anschließend schreibt er Code.

Meng Tos Bibliothek heißt '<OFFICIAL_URL>', steht unter der MIT-Lizenz und hat rund 2.400 Sterne. Der Ersteller stellte sie am 7. Juli 2026 in einem X-Beitrag vor.

Im Beitrag ist von 75 Skills die Rede, die Repository-Beschreibung listet 78 auf, und im Dateibaum sind es heute 91. Der Autor sagt offen, dass die Beschreibung veraltet ist: Prüfe das Repository mit einem Suchbefehl.

Wie bringst du Claude Code dazu, keine Templates mehr zu erzeugen?#

Beginnen wir mit der Regeldatei, denn sie gilt für jede Anfrage und kostet nichts.

Eine nützliche Ausgangsbasis ist ein Block mit Anti-Template-Leitplanken. Die Logik ist einfach: Liste die konkreten Entscheidungen auf, zu denen das Modell standardmäßig tendiert, und verbiete sie ausdrücklich.

## Anti-Generic Guardrails

- Farben: Verwende niemals die Standard-Tailwind-Palette (indigo-500, blue-600).
  Wähle eine eigene Markenfarbe und leite die übrigen Farben davon ab.
- Schatten: Verwende niemals den einfachen Schatten shadow-md. Nutze geschichtete,
  farblich getönte Schatten mit niedriger Deckkraft.
- Typografie: Verwende nie dieselbe Schrift für Überschriften und Fließtext. Kombiniere
  eine Display- oder Serifenschrift mit einer klaren serifenlosen Schrift. Verwende bei
  großen Überschriften enges Laufweiten-Tracking (-0.03em) und beim Fließtext einen
  großzügigen Zeilenabstand (1.7).
- Verläufe: Schichte mehrere radiale Verläufe übereinander. Füge mit einem SVG-Rauschfilter
  Körnung oder Textur hinzu.
- Animationen: Animiere nur transform und opacity. Verwende niemals transition-all.
  Nutze federartige Beschleunigungskurven.
- Interaktive Zustände: Jedes anklickbare Element braucht Zustände für hover, focus-visible
  und active. Ohne Ausnahmen.
- Abstände: Verwende durchdachte, einheitliche Abstandstokens statt zufälliger Tailwind-Stufen.
- Tiefe: Oberflächen sollten ein Schichtungssystem haben (Basis -> angehoben -> schwebend).

Der Block ist absichtlich auf Englisch geschrieben: Das Modell befolgt kurze technische Anweisungen in der Sprache der Dokumentation genauer.

Die Animationsregel steht aus gutem Grund neben den Verboten zu Farben und Schatten. Deckkraft auf dem ersten Bildschirm beeinträchtigt direkt den Geschwindigkeitswert, wie wir weiter unten sehen werden.

Als Nächstes kommt der Skill. Die offiziellen Skills von Anthropic lassen sich über das Plugin installieren:

/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

Ein Detail: Design-Skills lassen sich nicht einzeln installieren; das Plugin example-skills bringt alle zwölf auf einmal mit. Wenn du nur einen davon möchtest, kopiere den Ordner manuell – Claude Code erkennt ihn ohne Neustart der Sitzung:

git clone https://github.com/anthropics/skills.git
cp -r skills/skills/frontend-design ~/.claude/skills/

Andere nützliche Skills aus dieser Sammlung sind theme-factory mit zehn fertigen Themes und einer erforderlichen Bestätigung durch einen Menschen vor ihrer Anwendung, web-artifacts-builder zum Erstellen mit React und fertigen Komponenten sowie algorithmic-art für generative Grafiken. Ein eigener Artikel erklärt ausführlich, wie du Skills für eine Aufgabe auswählst: So wählst du Skills für Claude Code aus.

Die Regeln und der Skill ergänzen sich: Die Regeln verbieten schlechte Entscheidungen, der Skill gibt einen Prozess vor – zuerst das System, dann die Kritik, zuletzt der Code.

Alles Wichtige passiert hier vor der Anfrage. Du gibst dem Agenten die Vorgaben, an denen er sich beim Aufbau orientieren soll, vorab in den Kontext; der genaue Wortlaut des Prompts spielt kaum noch eine Rolle. Dieser Ansatz heißt Context Engineering, und die Datei CLAUDE.md ist sein erster Baustein. Die Kombination aus KI-Klon + Zweitem Gehirn + Context Engineering hilft dabei, Claude von einem Generator durchschnittlicher Ergebnisse in ein Werkzeug zu verwandeln, das deinem Stil treu bleibt.

Wo findest du fertige visuelle Richtungen und Animations-Prompts?#

In Meng Tos Bibliothek gibt es keine Kategorie „motion“, obwohl sie in der Ankündigung erwähnt wird. Die Animations-Skills sind zusammen mit den übrigen Skills unter web-design eingeordnet.

Zu den enthaltenen Bewegungstechniken zählen: animation-on-scroll, gsap, gsap-scrolltrigger-storytelling, cinematic-gsap-lenis-motion-system, cinematic-scroll-storytelling, marquee-loop, masked-reveal, staggered-word-reveal, reveal-hover-effect, scroll-progress-timeline, scroll-scrubbed-visual-sequence, scroll-scrubbed-word-reveal, scroll-world-storytelling.

Als Nicht-Programmierer interessieren dich die fertigen visuellen Richtungen mehr. Statt des vagen „mach es modern“ wählst du eine davon und gibst dem Modell die enge Grammatik, die ihm gefehlt hat:

• clean-minimal-beige-light-mode - heller beiger Minimalismus
• dark-glass-clean-layout - dunkles Glasdesign
• documentary-brutalist-agency - dokumentarischer Brutalismus
• editorial-portfolio-chapters - Portfolio in Kapitel unterteilt, wie ein Magazin
• orange-clean-paper-saas - Service-Website im Papierstil mit orangefarbenem Akzent
• solar-duotone-bold - kräftige Zweifarbigkeit
• tech-green-dark-mode-modern - dunkler Tech-Stil mit Grün
• light-mode-paper-technical - helles technisches Papier

Es gibt auch technische Skills für 3D-Grafiken und Effekte: threejs, matterjs, globe-gl, vantajs, unicorn-studio, progressive-blur, beautiful-shadows, css-border-gradient.

Im Repository gibt es keinen Installationsbefehl – der Autor sagt in der Roadmap ausdrücklich, dass er einen hinzufügt, sobald die Integrationsmethode feststeht. Die einzige Anweisung für Claude Code lautet:

Eine Installationsmöglichkeit ist unten angegeben. Dieser Befehl steht nicht im Repository; er ist eine Installationsempfehlung:

git clone '<OFFICIAL_URL>'
cp -r Skills/agent-skills/web-design/documentary-brutalist-agency ~/.claude/skills/

Kurz zu kostenpflichtigen Prompt-Bibliotheken, weil die Frage immer wieder aufkommt. Der Dienst motionsites.ai verkauft eine Sammlung fertiger Prompts für Abschnitte: Im Juli 2026 kostet sie 239 Dollar pro Jahr oder einmalig 349 Dollar zum Aktionspreis statt 759 Dollar; ein Monatsabo gibt es nicht. Der Autor wird nicht genannt, und eine „Über uns“-Seite gibt es nicht. Außerdem gibt es eine Website mit fast demselben Namen im Singular; nur dort findet sich ein Hinweis auf Claude-Code-Kompatibilität. Im Vergleich zu Meng Tos kostenloser Bibliothek unter MIT-Lizenz würde ich den Kauf nicht empfehlen, aber es ist nützlich, von dieser Option zu wissen.

Wie gibst du Claude Code mit einer Zeile aktuelle GSAP-Dokumentation?#

Ein häufiges Problem bei Animationsbibliotheken: Der Agent erinnert sich an eine veraltete Art, sie einzubinden. Er importiert etwas über einen alten Pfad, registriert ein Plugin wie vor zwei Jahren und der Code läuft nicht.

Die Lösung ist, die Dokumentation selbst in den Kontext zu geben. GSAP stellt sie in einem maschinenfreundlichen Format bereit:

https://gsap.com/llms.txt

Die Datei ist heute etwa 25 Kilobyte groß. Jede Dokumentationsseite gibt es auch als Markdown-Version – hänge einfach .md an die URL an.

In der Praxis sieht das so aus:

Lies https://gsap.com/llms.txt und https://gsap.com/docs/v3/Plugins/ScrollTrigger.md

Erstelle dann eine Szene auf der Startseite: Die Überschrift erscheint beim Scrollen
über den ersten Bildschirm, und das Bild rechts bewegt sich langsamer als der Text.
Verwende nur transform und opacity. Kein transition-all.

Die Motion-Bibliothek (früher Framer Motion) hat dieselbe Datei, und sie ist sogar noch größer. Motion wird unter MIT vertrieben und ist weiterhin wirklich Open Source; die aktuelle Version ist motion@12.42.2. Wenn das Projekt in React erstellt ist und nur einfache Einblendeffekte braucht, kannst du Motion wählen; für komplexe Scroll-Szenen verwende GSAP mit dem Plugin ScrollTrigger.

Es gibt auch reine Browserlösungen, die keine Bibliotheken nutzen. Übergänge zwischen Seitenzuständen mit der View Transitions API wurden am 14. Oktober 2025 zum Baseline-Standard – aber nur innerhalb einer einzelnen Seite; die seitenübergreifende Version wird von Firefox überhaupt nicht unterstützt. CSS-Scroll-Animationen gehören noch nicht zum Baseline-Standard: Chrome unterstützt sie, Safari hat sie erst kürzlich gelernt, aber in Firefox muss man sie in den Einstellungen manuell aktivieren. Für normale Leser funktionieren sie daher einfach nicht. Bitte den Agenten zuerst zu prüfen, ob der Browser sie überhaupt unterstützt, und andernfalls den Standardübergang beizubehalten.

Wie machst du aus einer Website, die dir gefällt, einen Prompt?#

Am häufigsten erklärt man seinen Wunsch mit einem Beispiel. Bei einem Agenten funktioniert das nicht direkt: Er sieht die Website nicht, sondern Text.

Der Skill video-to-superprompt überbrückt diese Lücke. Die Beschreibung im Repository: Ein Videoreferenzmaterial wird in einen detaillierten Prompt zur Nachbildung oder Inspiration verwandelt. Der Skill analysiert die Aufnahme in Ebenen: Erzählung, Layout, Bewegung, Typografie und 3D-Grafiken. Das Ergebnis ist ein sofort verwendbarer Prompt.

Seine wichtigste Regel ist unmissverständlich formuliert:

Der zweite Skill, html-to-interaction-prompts, arbeitet mit Quellcode: Er findet alles, was sich bewegt – Cursorreaktionen, 3D-Grafiken, Scroll-Effekte und Ebenen, die sich mit unterschiedlicher Geschwindigkeit bewegen – und zerlegt die Seite in einzelne Prompts, jeweils einen pro Abschnitt, Button, Hover-Zustand oder Effekt. Sein Grundsatz lautet, das Verhalten im Quellcode als Wahrheit zu behandeln und keine Effekte aus einem Screenshot zu erfinden, wenn der Code verfügbar ist.

Der dritte Skill, stitched-full-page-capture, löst ein praktisches Problem. Ein normaler Screenshot einer ganzen Website mit verzögertem Laden und 3D-Grafiken wird grau und leer, weil die Aufnahme vor dem Rendern erfolgt. Der Skill scrollt Bildschirm für Bildschirm durch die Seite, wartet, bis alles fertig ist, und fügt das Ergebnis zusammen.

Es geht auch ohne Bildschirmaufnahme: Verbinde den Agenten über MCP mit einer Bibliothek echter, aktiver Oberflächenbeispiele. Der offizielle Server von Mobbin lässt sich mit einem Befehl installieren:

claude mcp add mobbin --scope user --transport http https://api.mobbin.com/mcp

Öffne danach eine neue Sitzung, wähle den Server aus der Liste aus und melde dich im Browser an. Der Agent erhält Zugriff auf Screenshots echter, funktionierender Apps; es sind mehr als 621.500 Screens aufgeführt. Dabei handelt es sich um Screenshots fertiger Produkte, nicht um Komponenten oder Code. Wichtiger Hinweis: Der Mobbin-Server funktioniert nicht mit dem kostenlosen Tarif; er ist in kostenpflichtigen Tarifen verfügbar (Stand: Juli 2026). Ein eigener Artikel über Google Stitch beschreibt das Verbinden externer Dienste mit einem Agenten und zeigt, wie du auf dieselbe Weise ein Designsystem in Claude Code einbindest.

Schritt für Schritt: eine animierte Website an einem Abend#

1. Ein Projekt einrichten

   Wenn du noch kein Projekt hast, beginne mit einem leeren Ordner. Erstelle ihn, öffne ihn in einem Terminal und führe dort claude aus. Bitte den Agenten im ersten Prompt um ein Grundgerüst: „Erstelle ein Grundgerüst für eine einseitige Website für mein Unternehmen (beschreibe, worum es geht), nur HTML und CSS, keine Bibliotheken.“ Es erscheinen mehrere Dateien – das ist das Projektstammverzeichnis, in dem ab jetzt alles geschieht.

2. Die Regeln in CLAUDE.md eintragen

   Kopiere den Block Anti-Generic Guardrails in eine Datei CLAUDE.md im Projektstammverzeichnis. Wenn es dort noch keine gibt, bitte den Agenten, sie anzulegen. Die Regeln sind für Tailwind geschrieben; wenn dein Grundgerüst normales CSS verwendet, sag dem Agenten: „Wende diese Grundsätze auf normales CSS an.“ Die Bedeutung der Regeln ändert sich dadurch nicht. In einer Aufschlüsselung von Karpathys vier Regeln erfährst du, wie die Datei funktioniert und was sonst noch hineingehört.

3. Den Skill frontend-design installieren

   Nutze das Plugin example-skills oder kopiere den Ordner frontend-design wie oben beschrieben. Mit dem Befehl /doctor kannst du prüfen, ob der Skill geladen wurde.

4. Eine visuelle Richtung auswählen

   Aus Meng Tos Bibliothek. Eine, nicht zwei oder drei. Dokumentarischen Brutalismus mit beigem Minimalismus zu mischen, ergibt genau den Durchschnitt, den du vermeiden willst. Die Ordnernamen beschreiben ihren Inhalt, aber du kannst dir keine Vorschau ansehen: Öffne die Datei SKILL.md im Ordner, der dir gefällt, und lies die Beschreibung von Farbpalette und Schriftarten – alles steht dort.

5. Eine statische Seite erstellen

   Ohne eine einzige Animation. Typografie, Abstände und Raster kommen zuerst. Bitte den Agenten, eine lokale Vorschau zu starten, und öffne die angegebene Adresse. Um die Seite auf deinem Smartphone anzusehen, sag: „Starte sie so, dass ich sie auch auf anderen Geräten in meinem Netzwerk öffnen kann.“ Der Agent gibt dir dann eine Adresse.

6. Eine Bewegungsszene hinzufügen

   Nur eine. Meistens ist es der erste Bildschirm: Die Überschrift erscheint, während sich eine Hintergrundebene langsamer als der Vordergrund bewegt. Gib dem Agenten die Datei llms.txt der Bibliothek und beschreibe die Szene konkret – was sich bewegt, wo und über wie viele Millisekunden. Lass die Deckkraft auf dem ersten Bildschirm unverändert; weiter unten gibt es einen eigenen Abschnitt dazu, warum.

7. Eine Regel für reduzierte Bewegung hinzufügen

   Übernimm CSS-Regel und JavaScript-Einrichtung für reduzierte Bewegung aus dem Barrierefreiheitsabschnitt. Prüfe die Seite vor Veröffentlichung mit aktivierter Bewegungsreduktion.

8. Veröffentlichen und die Geschwindigkeit prüfen

   Veröffentliche die Seite auf einem beliebigen kostenlosen Hostingdienst für statische Seiten – Vercel, Netlify oder GitHub Pages. Bitte den Agenten: „Veröffentliche dieses Projekt auf Vercel und gib mir den Link.“ Erst nach der Veröffentlichung solltest du die resultierende URL mit PageSpeed Insights prüfen: Der Dienst arbeitet mit öffentlichen URLs und kann keine lokale Seite sehen. Achte auf „Largest Contentful Paint“ – die Zeit bis zum Rendern des größten Elements; der grüne Bereich reicht bis zu 2,5 Sekunden. Der Agent kann die lokale Version vor der Veröffentlichung messen: Chrome DevTools MCP öffnet sie in Chrome und zeigt denselben Wert.

Bei Schritt sechs lässt sich die Arbeit der vorherigen fünf Schritte am leichtesten ruinieren.

Warum lässt zu viel Animation eine Website noch stärker nach KI aussehen?#

Hier gerät die Denkweise fast aller ins Wanken, die sich mit dem Thema beschäftigen: Zu wenig Animation wirkt billig, also muss man mehr hinzufügen.

Das steht ausgerechnet in dem Skill frontend-design, den du installiert hast, um das Design zu verbessern. Anthropic warnt im Werkzeug, das der Agent zum Ausschmücken der Seite nutzt, vor Übertreibung.

Anthropic führt auch andere abgedroschene Techniken auf: eine große Zahl mit kleiner Bildunterschrift und Farbverlauf als Standardantwort auf jede Aufgabe sowie nummerierte Blöcke wie 01 / 02 / 03, die nur dann passen, wenn tatsächlich eine Abfolge vorliegt.

So sieht Übertreibung in der Praxis aus: Der Agent bekommt die Aufgabe „Animationen hinzufügen“ und versieht jeden Abschnitt mit einer Scroll-Einblendung. Die Überschrift gleitet herein, drei Karten ploppen nacheinander auf, die Testimonials gleiten von der Seite herein und die Fußzeile blendet ein. Jeder Effekt für sich ist in Ordnung. Zusammengenommen entsteht eine Seite, die nie aufhört, sich zu bewegen, und nichts hervorhebt.

Eine aktive Website funktioniert anders: eine gezielte Szene, meistens auf dem ersten Bildschirm, und danach Zurückhaltung. Bewegung wirkt wie Betonung – sie ergibt Sinn, solange sie auf ein einzelnes Wort fällt.

Daraus ergibt sich eine Regel für den Prompt. Formuliere ihn so: „Erstelle eine Szene auf dem ersten Bildschirm und lass alles andere statisch.“ Das sind nur ein paar Wörter mehr als „Füge Animationen hinzu“, aber das Ergebnis ist um Größenordnungen besser.

Wie beeinträchtigen Animationen die Geschwindigkeit einer Website?#

Die drei Kennzahlen, mit denen Google eine Seite bewertet, sind: die Zeit bis zum Rendern des größten Elements – höchstens 2,5 Sekunden; die Reaktionszeit auf eine Interaktion – höchstens 200 Millisekunden; und die Layoutverschiebung – höchstens 0,1. Gemessen wird am 75. Perzentil realer Besuche.

Schauen wir uns an, warum das hier wichtig ist. Standardmäßig erstellt der Agent einen Einblendeffekt so: Er setzt einen Abschnitt auf Deckkraft null und entfernt diese Einstellung, sobald der Abschnitt in den sichtbaren Bereich gelangt. Befindet sich dieser Effekt auf dem ersten Bildschirm, ist das Bild möglicherweise vollständig geladen und decodiert, aber der Messwert zählt es erst ab Beginn des Renderings. Noch schlimmer ist es, wenn ein Skript die Deckkraft erst nach dem Laden entfernt – dann wartet der Messwert auf das gesamte Skript.

Das lässt sich auf zwei Arten beheben. Entweder beginnt der Einblendeffekt mit einer kleinen Deckkraft ungleich null, damit das initiale Rendering mitgezählt wird. Oder du lässt die Deckkraft auf dem ersten Bildschirm unverändert und animierst nur die Verschiebung.

Das zweite Problem ist, was sich günstig und was sich teuer animieren lässt.

Einfach gesagt: Der Browser setzt das Bild aus Ebenen zusammen, und Änderungen an Position und Deckkraft erfolgen im letzten, günstigsten Schritt. Alles andere zwingt ihn, die Seite neu zu berechnen. Messungen aus derselben Dokumentation: Eine Animation mit den Versatzwerten top und left dauert 37 Millisekunden fürs Layout und 79 Millisekunden fürs Rendering; derselbe visuelle Effekt mit transform benötigt für beides null Millisekunden.

Und hier ist ein Widerspruch, den du im Kopf behalten solltest: Deckkraft lässt sich günstig zusammensetzen, schließt ein Element aber von der Geschwindigkeitsmessung aus. Eine Animation, die für den Browser günstig und für die Performance unbedenklich ist, sind also zwei verschiedene Dinge.

Noch etwas zur Eigenschaft will-change, die Agenten gern „zur Optimierung“ überall einsetzen. Die Dokumentation von MDN sagt das Gegenteil:

Laut MDN ist die Eigenschaft außerdem als letzter Ausweg bei bestehenden Performanceproblemen gedacht. Zur Vorbeugung funktioniert sie nicht. Eine Zeile wie will-change: transform, opacity auf fünfzig Elementen ist ein typisches Erkennungsmerkmal generierten Codes.

Bei Layoutverschiebungen ist die Sache einfacher. Googles Dokumentation gibt nicht Animationen die Schuld – im Gegenteil: Durchdachte Übergänge helfen, Inhalte zu aktualisieren, ohne den Leser zu erschrecken. Das Rezept ist dasselbe: Ändere die Größe mit transform statt mit width und height und verschiebe Elemente mit Versatzwerten statt mit Koordinaten.

Was ist mit Menschen, denen Bewegung körperlich schadet?#

Dieser Abschnitt ist nicht nur eine Frage der Höflichkeit. Die Zielgruppe, an die ein Unternehmer verkauft, besteht genau aus Menschen ab vierzig.

Für Menschen mit vestibulären Störungen können Scroll-Animationen Beschwerden auslösen. Das W3C-Konsortium beschreibt die Folgen unverblümt: Übelkeit und Migräne, manchmal so schwer, dass man sich hinlegen muss.

Für CSS-Animationen und Übergänge hilft folgende Regel; JavaScript-Zeitachsen benötigen die anschließend beschriebene gesonderte Einrichtung:

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Drei Punkte solltest du beachten.

Schreibe die Animation als Standardverhalten und schalte sie innerhalb dieser Regel ab – so ist die Seite sicherer, wenn die Unterstützung fehlt, als bei umgekehrter Reihenfolge.

Die Spezifikation sagt „entfernt, reduziert oder ersetzt“ – vollständiges Entfernen ist nicht einmal die erste Möglichkeit. Einen abrupten Einflug durch ein kurzes Einblenden zu ersetzen, funktioniert besser, als den Effekt ganz abzuschneiden: Werden alle Animationen deaktiviert, funktionieren Ladeanzeigen und Fortschrittsbalken nicht mehr.

JavaScript-gesteuerte Animationen benötigen eine eigene Behandlung der Einstellung. Eine CSS-Dauerüberschreibung bricht keine GSAP-Zeitachse ab. Das Speichern von matchMedia(...).matches in einer Variable ändert nichts, solange die Einrichtung nicht danach verzweigt. Halte bei GSAP das Element im normalen HTML/CSS sichtbar und erstelle Bewegung nur bei erlaubter Animation:

// Run after GSAP and the page elements have loaded.
function mountMotion() {
  const mm = gsap.matchMedia();
  mm.add('(prefers-reduced-motion: no-preference)', () => {
    gsap.from('.hero-title', { y: 24, duration: 0.35 });
  });
  return () => mm.revert();
}

const cleanupMotion = mountMotion();
// Call cleanupMotion() when this page or component is removed.

Der Titel darf keinen ausgeblendeten oder verschobenen Grundstil haben. Bei reduzierter Bewegung bleibt er sichtbar und statisch. Ändert sich die Einstellung bei offener Seite, nimmt GSAP die Animation zurück, sobald die Abfrage nicht mehr zutrifft. mm.revert() entfernt beim Abbau außerdem die erfasste Animation. Implementiere in Motion die entsprechende Verzweigung bei der Einrichtung; die CSS-Regel allein reicht nicht. Siehe die GSAP-Dokumentation zu matchMedia-Lebenszyklus und Aufräumen.

Außerdem gibt es ein formales Barrierefreiheitskriterium, das du beachten solltest. WCAG 2.2.2, ein Kriterium der Stufe A, verlangt, dass Nutzer bewegte, blinkende oder automatisch scrollende Inhalte anhalten können, wenn sie länger als fünf Sekunden laufen und parallel zu anderen Inhalten angezeigt werden. Das gilt für automatisch rotierende Karussells und endlose Laufbänder, die Agenten gern einfügen.

Sieben Stellen, an denen es schiefgeht#

1. Der erste Bildschirm bleibt verborgen, bis er eingeblendet wird. Ein Element mit Deckkraft null zählt nicht als möglicher Kandidat für den Rendering-Messwert. Das ist der kostspieligste Fehler, weil er eine Kennzahl beeinträchtigt, die sich auf das Suchranking auswirkt.

2. Alles wird animiert. Jeder Abschnitt gleitet herein, jede Karte ploppt auf. Anthropic sagt ausdrücklich, dass dadurch der Eindruck eines generierten Designs verstärkt wird.

3. Scrolljacking. Dabei ersetzt eine Website das normale Verhalten des Mausrads durch ihre eigene „filmische“ Logik.

In derselben Studie erlebte die Mehrheit der Teilnehmenden zumindest leichte Desorientierung.

4. Layout-Eigenschaften werden animiert. Koordinaten und Abmessungen statt Transformationen. 37 und 79 Millisekunden statt null.

5. Animationen dauern zu lange. Die sinnvolle Dauer beträgt 100 bis 400 Millisekunden; 400 Millisekunden sind bereits sehr lang und eignen sich nur für große Bewegungen. Agenten verwenden standardmäßig gern eine ganze Sekunde.

Seinen Erkenntnissen zufolge liegt der sinnvolle Bereich zwischen 100 und 400 Millisekunden; 400 ist bereits sehr langsam und eignet sich nur für große Bewegungen. Agenten verwenden standardmäßig gern eine ganze Sekunde.

6. Es gibt keine Regel für reduzierte Bewegung. Der Agent fügt sie nicht selbst hinzu.

7. Die Website wird mit jeder Interaktion langsamer. Das betrifft speziell React: Eine Animation, die ohne Referenz auf das Element und ohne Bereinigung erstellt wird, vervielfacht sich bei jeder Aktualisierung der Komponente. Die Seite wird allmählich und ohne erkennbaren Grund langsamer.

Es gibt noch eine achte Falle. Der Ansatz „Der Agent macht einen Screenshot und korrigiert, was er sieht“ funktioniert bei statischen Seiten hervorragend, führt bei animierten Elementen aber in eine endlose Bearbeitungsschleife: Der Agent sieht ein Zwischenbild, hält es für einen Fehler, korrigiert es und sieht das nächste Zwischenbild. Außerdem verbraucht jeder Screenshot Kontext.

Was kostet das, und wie vermeidest du, das Monatslimit für eine Website aufzubrauchen?#

Eine typische Geschichte aus englischsprachigen Vibe-Coding-Communities: Jemand erstellt eine auffällige Seite mit einer Reise durchs Weltall, postet das Ergebnis, und in der Diskussion stellt sich heraus, dass diese eine Website das gesamte Monatskontingent aufgebraucht hat.

Das ist zu erwarten. Animationen kosten aus mehreren Gründen mehr als gewöhnliche Layoutarbeit. Das Ergebnis lässt sich nicht durch Lesen des Codes überprüfen; es braucht mehrere Durchläufe. Bei jeder Änderung müssen die Dateien erneut gelesen werden. Eine Screenshot-Schleife bei bewegten Elementen fügt unnötige Durchläufe hinzu.

Was hilft:

Erstelle eine Szene nach der anderen und sichere das Ergebnis. Eine einmalige Anfrage wie „Füge auf der ganzen Website Animationen hinzu“ führt garantiert zu überhöhten Kosten. Du kannst die Screenshot-Überprüfung für animierte Elemente abschalten und sie selbst visuell prüfen. Halte CLAUDE.md kurz, damit die Regeln nicht bei jeder Anfrage Kontext verbrauchen. Gib dem Agenten außerdem vorab die Datei llms.txt der Bibliothek, sonst erfindet er eine veraltete Einbindungsmethode und behebt anschließend seine eigene Erfindung.

Der Artikel Warum Claude Code das ganze Projekt erneut liest erklärt, wohin die Tokens bei der Arbeit an einem Projekt gehen; So schöpfst du dein Claude-Code-Limit nicht aus beschreibt, wie sich der Verbrauch kontrollieren lässt.

Wie geht es weiter?#

Erstelle deine erste Seite anhand der acht Schritte. Wähle eine visuelle Richtung, gestalte eine Szene auf dem ersten Bildschirm und prüfe die Geschwindigkeit.

Für deine nächsten Schritte – Ailoot.