Cinematic Web — hochwertige animierte Personal- und SaaS-Sites

Cinematic Web

Behandeln Sie hochwertige Website-Animation als kreativ-entwicklerisches System, nicht als eine Ansammlung von Animationsschnipseln.

Wandeln Sie vage Anfragen wie "Machen Sie es filmisch" um in:

1. Kunstrichtung
2. Asset-Strategie
3. Bewegungssprache
4. Scroll-Choreografie
5. Rendering- und Post-Processing-Plan
6. Leistungs- und Barrierefreiheitsbudget
7. Implementierung
8. Überprüfungszyklus

Workflow

1. Überprüfen Sie den vorhandenen App-Stack, das Routing-Modell, die Rendering-Grenzen und das Styling-System.
2. Identifizieren Sie, ob das Projekt DOM-only, Motion-basiert, GSAP-basiert, R3F/WebGL-basiert, Spline-basiert, Rive/Lottie-basiert oder gemischt ist.
3. Erstellen oder aktualisieren Sie gemeinsam genutzte Bewegungstoken, bevor Sie neues Animationsverhalten hinzufügen.
4. Entwerfen Sie ein Kunstrichtungs-Briefing, es sei denn, der Benutzer bittet explizit um eine schnelle Implementierung.
5. Wählen Sie die kleinste Pipeline, die das Konzept mit den verfügbaren Assets umsetzen kann.
6. Verwenden Sie exakte Choreografie: Scroll-Distanz, Pin-Länge, Scrub-Wert, Label, Staffelwerte, Kamerapositionen, Materialwerte, Easing und Federkonstanten.
7. Instrumentieren Sie vor der Verfeinerung mit Markierungen, Leistungsüberlagerungen, einstellbaren Konstanten, Screenshots oder Budgetprüfungen.
8. Stellen Sie reduzierte Bewegungs- und energiesparende Fallbacks für jede Hauptanimation bereit.
9. Überprüfen Sie das Verhalten auf Desktop, Mobilgeräten und mit reduzierter Bewegung, bevor Sie die Arbeit als abgeschlossen bezeichnen.

Entscheidungsmatrix

• Verwenden Sie CSS für kleine Hover-, Fokus- und Deckkraft/Transform-Effekte.
• Verwenden Sie Motion for React für zustandsgesteuerte UI, Layoutübergänge, geteilte Elemente, Gesten und Mikrointeraktionen.
• Verwenden Sie GSAP ScrollTrigger für gepinnte Geschichten, lange Zeitachsen und präzise Scroll-Choreografie.
• Verwenden Sie Lenis, wenn das Scrollgefühl und die WebGL/DOM-Synchronisation Teil des Erlebnisses sind.
• Verwenden Sie R3F/drei, wenn der Held eine echte 3D-Szene oder Shader-Komposition ist.
• Verwenden Sie Spline, wenn eine designer-eigene interaktive 3D-Szene die Quelle der Wahrheit ist.
• Verwenden Sie Rive für interaktive Vektoranimationen und Zustandsmaschinen.
• Verwenden Sie Video, Bildsequenzen oder statische Medien, wenn echtes WebGL das Leistungsbudget überschreiten würde.

Qualitätsniveau

Ein Ergebnis ist nicht akzeptabel, wenn es:

• Standardmäßig überall Standard-Easing verwendet.
• Globales Bloom auf die gesamte Szene ohne Auswahl anwendet.
• Layout-Eigenschaften animiert, wenn transform/opacity funktionieren würde.
• Ein schweres GLB ohne Inspektion oder Komprimierungshinweise ausliefert.
• Keinen reduzierten Bewegungsmodus hat.
• Von einer riesigen Client-Komponente ohne Lazy Loading abhängt.
• Nur auf dem Entwickler-Rechner beeindruckend aussieht.

Bewegungstoken

Vor der Implementierung erstellen Sie ein gemeinsames Bewegungssystem mit:

• Easing
• Federn (Springs)
• Dauern
• Staffelu00e4ge
• Scroll-Scrub-Werte
• Parallax-Verhältnisse
• Reduzierte Bewegungs-Substitutionen

Verwenden Sie examples/recipes/motion-tokens.ts als Ausgangspunkt.

Referenzen (Bei Bedarf Laden)

• Kunstrichtung und Briefing: references/creative-direction.md
• Referenzanalyse ohne Kopieren bekannter Websites: references/reference-analysis.md
• Easing, Federn, Masse und Choreografie: references/motion-language.md
• GSAP + Lenis Scroll-Systeme: references/scroll-choreography.md
• R3F-Szenenarchitektur: references/r3f-webgl-scenes.md
• Bloom, DoF, chromatische Aberration, Vignette, Shader und Tone Mapping: references/postprocessing-shaders.md
• Blender, Spline, Rive und glTF-Übergabe: references/asset-pipeline.md
• Stack-Auswahl: references/stack-decision-matrix.md
• Leistungsbudgets und mobile Fallbacks: references/performance-budgets.md
• Reduzierte Bewegung und Barrierefreiheit: references/accessibility-reduced-motion.md
• Abschließende Überprüfung: references/qa-rubric.md

Ausgabeanforderungen

Bei der Implementierung berichten Sie:

1. Geänderte Dateien
2. Hinzugefügte oder wiederverwendete Bewegungstoken
3. Choreografie-Zusammenfassung mit Zahlen
4. Asset-Annahmen
5. Leistungsrisiken und Gegenmaßnahmen
6. Verhalten bei reduzierter Bewegung
7. Wie Sie die Implementierung ausführen und überprüfen