Kinematische 3D-Webszenen

Was macht Kinematische 3D-Webszenen?

Leute, die Animationen beschreiben, benutzen Gefühlswörter („episch“, „glatt“, „es wird verschluckt“, „wie ein Film“). Code braucht exakte Entscheidungen: Was ist auf dem Bildschirm, wo ist die Kamera, was bewegt sich, wie schnell, mit welcher Easung, wie beleuchtet und was macht der Text an jedem Punkt des Scrollens. Wenn diese Entscheidungen dem Zufall überlassen werden, ist das Ergebnis technisch in Ordnung, aber nicht das, was sie sich vorgestellt haben – und jede Korrekturrunde kostet mehr, als es gleich richtig zu machen.

Diese Skill schließt diese Lücke in zwei Schritten: Direkt vor dem Bauen (die Beschreibung in eine präzise, bestätigte Szenen-Spezifikation umwandeln) und auf einer bewährten Basis bauen (eine Architektur und Technikbibliothek, die die Spezifikation zuverlässig umsetzbar und das Scrollen flüssig machen).

Sie funktioniert für jede Szene – die Szenen im gebündelten Portfolio (ein Laptop, der sich öffnet, ein umkreisendes Fähigkeiten-Atom, Logos, die sich entzünden und brennen, ein Schwarzer-Loch-Tunnel) sind ausgearbeitete Beispiele der Methode, kein Menü, aus dem man auswählen kann.

Dateien

references/scene-language.md   Präzises Bewegungsvokabular + Übersetzungen vager Wörter in konkrete Angaben
references/scene-spec.md       Das Szenen-Spezifikations-/Storyboard-Format mit ausgearbeiteten Beispielen
references/techniques.md       Wie man jede Art von Effekt baut (Kamera, Shader, Partikel, Text...)
references/architecture.md     Das Pinned-Scroll-Szenenmuster, Timelines, Leistung, Fallstricke
references/house-style.md      Der Standard-Visualstil und wie man einen Stil aus Referenzen aufgreift
references/effects.md          Die fertigen Szenen der Vorlage, analysiert – kopieren oder daraus lernen
references/portfolio.md        Aufbau eines vollständigen Portfolios aus der Vorlage
references/content-guide.md    Die Inhaltsfelder der Vorlage
references/portrait-rig.md     Das lebende Porträt-Hero der Vorlage
template/                      Komplette Next.js-Portfolio-Website (das Arbeitsbeispiel)
scripts/create-site.mjs        Startet eine neue Einzelseiten-Website (Next.js, Haus-Hintergrund, bereit für Szenen)
scripts/new-scene.mjs          Erstellt eine neue Pinned-Szene (Abschnitt + Timeline, + 3D-Canvas, es sei denn --no-canvas)
scripts/video-frames.mjs       Extrahiert Frames aus einem Referenzvideo, um die Bewegung zu studieren
scripts/create-portfolio.mjs   Kopiert die vollständige Portfolio-Vorlage in einen neuen Ordner
scripts/retheme.mjs            Färbt die Akzentfamilie der Vorlage neu

Der Workflow

1. Verstehen, was sie sich vorstellen

Lies die Anfrage für: wofür die Seite ist, was jede Szene zeigen soll, das Gefühl, etwaige Referenzen (Websites, Videos, Bilder, Filme, Spiele) und alle harten Einschränkungen (bestehende Website, Framework, Markenfarben).

Wenn sie eine Referenz angegeben haben, studiere sie vor allem anderen – sie enthält mehr Informationen als jede Beschreibung. Bilder: Schau sie dir an. Video: Führe scripts/video-frames.mjs aus und betrachte die Frames der Reihe nach (siehe „Ein Referenzvideo lesen“ unten). Website: Wenn du sie öffnen kannst, scrolle und mache in Abständen Screenshots. Notiere den Stil (Farbe, Licht, Typografie, Hintergrundbewegung) getrennt von der Choreografie (was sich wann bewegt) – Leute wollen normalerweise das eine oder das andere aus einer Referenz, und du solltest fragen, welches, wenn es nicht klar ist.

2. In eine Szenen-Spezifikation übersetzen

Lies references/scene-language.md, dann schreibe die Spezifikation im Format von references/scene-spec.md. Für jede Szene: die Idee in einem Satz, die Objekte, der Haus-Stil oder der gewählte Look, und ein Beat-Sheet – was auf dem Bildschirm ist in jedem Scroll-Abschnitt (0–15 %, 15–40 %, …), mit der Kamerafahrt, der Bewegung (Verb + Easung + Dauer), der Licht-/Farbänderung, den Effekten (Partikel, Verzerrung, Glühen) und was der Text tut.

Vage Wörter werden hier aufgelöst, nicht im Code. „Es wird eingesaugt“ wird zu: die Titelbuchstaben spiralförmig zur Bildschirmmitte, jeder beginnt, wenn die Kante des Strudels ihn erreicht, rotiert um 150°, während er auf 15 % schrumpft und auf 6 px über 10 % des Scrollens unscharf wird; der Hintergrund verzerrt sich im selben Fenster zur Mitte hin. Wenn ein Wort zwei ganz verschiedene Dinge bedeuten könnte, biete die beiden konkreten Lesarten an und wähle die wahrscheinlichere als Standard.

3. Vor dem Bauen bestätigen

Zeige die Spezifikation der Person – es dauert eine Minute zum Lesen und spart Stunden. Bitte sie, alles zu korrigieren, was nicht dem entspricht, was sie sich vorgestellt haben, besonders das Tempo (zu schnell / zu langsam) und den Schlüsselmoment jeder Szene. Halte die Nachricht kurz: das Beat-Sheet plus 2–3 gezielte Fragen mit deinen Standardantworten, so dass „ja, los“ eine gültige Antwort ist.

Wenn du nicht fragen kannst (eine einmalige oder automatisierte Anfrage), fahre mit deinen Standardeinstellungen fort und füge die Spezifikation in deine endgültige Nachricht ein, damit die Person präzise umlenken kann.

4. In Schichten bauen

Lies references/architecture.md, bevor du Code schreibst – beginne mit seiner Tabelle „Braucht das überhaupt WebGL?“ – und references/techniques.md für jeden Effekt in der Spezifikation.

Wohin der Code gehört:

• Eine neue Website (Landing Page, Produktseite, jede Einzelseite): node <skill-dir>/scripts/create-site.mjs <ordner> erstellt ein fertiges Next.js-Projekt mit dem Haus-Hintergrund, Schriftarten und Lint-Setup; füge Szenen hinzu.
• Eine bestehende Website: Arbeite in ihrem Projekt und lies zuerst „Arbeiten innerhalb einer bestehenden Website“ in architecture.md.
• Ein vollständiges Portfolio: Beginne mit der Vorlage (references/portfolio.md).

Baue dann jede Szene in dieser Reihenfolge, überprüfe nach jeder Schicht:

1. Blockout – Der Pinned-Bereich, die Scroll-Timeline mit einem Slot pro Beat, Platzhalterformen und der Kamerapfad. scripts/new-scene.mjs <projekt> <Name> --beats N generiert dieses Gerüst, bereits verdrahtet (Scroll-Fortschritt → gemeinsame Timeline → 3D-Kamera und DOM-Beschriftungen, Reduced-Motion-Fallback, pausiert, wenn außerhalb des Bildschirms); füge --no-canvas für reine DOM-Effekte hinzu. Scrolle hindurch: Sind die Beats in der richtigen Reihenfolge und im richtigen Tempo?
2. Bewegung – Die echten Bewegungen und Übergänge mit ihren Easings und Dauern aus der Spezifikation. Timing ist das, worauf die Leute am meisten reagieren; mach es richtig, bevor du es schön machst.
3. Look – Materialien, Licht, Farbe, Glühen, Partikel, Hintergrund, Typografie.
4. Feinschliff – Pointer Lean, Leerlauf-Drift, kleine sekundäre Bewegungen, Mobile-Framing, Reduzierte Bewegung.

Führe npm run lint zusammen mit dem Build aus – die React-Regeln fangen Fehler bei Mutationen pro Frame ab, bevor sie zu subtilen Bugs werden.

5. Gegen die Spezifikation verifizieren

Baue (npm run build), führe es aus und mache Screenshots von jedem Beat an seiner Scroll-Position. Vergleiche jeden Screenshot Zeile für Zeile mit dem Beat-Sheet: Ist dieses Objekt da, ist die Kamera wie beschrieben eingerahmt, ist der Text drin, ist die Farbe richtig? Korrigiere, was nicht übereinstimmt, bevor du es zeigst. Warte eine Sekunde nach dem Scrollen vor jedem Screenshot – Szenen gleiten an ihren Platz. Überprüfe auch ein Handy-großes Viewport (375×812) und reduzierte Bewegung. Wenn du kein Browser-Tool hast, sage klar, dass die Szenen gebaut, aber nicht angeschaut wurden, und liste auf, was überprüft werden soll.

6. Mit präziser Sprache verfeinern

Wenn die Person reagiert („es fühlt sich billig an“, „zu viel“, „nicht dramatisch genug“), übersetze das Feedback mit scene-language.md genauso wie die ursprüngliche Anfrage, schlage die spezifische Änderung vor („verlangsame den Tauchgang von 8 % auf 14 % des Scrollens und füge einen 0,3s-Haltepunkt davor ein“) und führe sie dann durch. Ändere immer nur eine Sache auf einmal, wenn sie unsicher sind, damit sie sagen können, was geholfen hat.

Ein Referenzvideo lesen

node <skill-dir>/scripts/video-frames.mjs <video> --every 0.25 --out frames/

Es braucht ffmpeg (das Skript erklärt, wie man es installiert, wenn es fehlt). Betrachte die Frames der Reihe nach und schreibe für jeden Zeitabschnitt auf: was auf dem Bildschirm ist, was sich wie bewegt hat (Richtung, Geschwindigkeit, Easung – beschleunigt es, überschießt es, beruhigt es sich?), die Kamera (statisch, Push, Orbit, Schütteln), Schnitte vs. kontinuierliche Bewegungen und die Farbe/das Licht. Diese Liste ist der erste Entwurf des Beat-Sheets. Für schnelle Momente führe es erneut mit --every 0.04 nur über diesen Abschnitt aus (--from, --to).

Unverhandelbar

Diese stammen aus echten Fehlschlägen; jeder hat einen Grund in architecture.md.

• Jede Szene hat eine Reduced-Motion-Version (ein statisches Layout, das trotzdem alle Inhalte zeigt).
• WebGL lädt nur clientseitig und pausiert, wenn sein Bereich außerhalb des Bildschirms oder der Tab ausgeblendet ist.
• 3D- und DOM-Text lesen dieselben Timeline-Funktionen, sodass sie nicht auseinanderdriften können.
• Scroll-gebundene Werte innerhalb von Pinned-Bereichen verwenden Funktions-Transformationen, keine Bereichs-Arrays.
• Vorgetäuschtes Glühen (additive Halos), kein Post-Processing-Bloom, es sei denn, die Person akzeptiert die Kosten.
• Alle Inhalte der Seite sind echter, lesbarer Text im DOM – nicht nur in Canvas gebacken.
• Erfinde niemals Fakten über eine Person oder ein Produkt im Text; Designtext ist in Ordnung, Behauptungen nicht. Preise, Spezifikationen, Daten, Statistiken und Auszeichnungen, die dir nicht gegeben wurden, kommen als sichtbare [Platzhalter].
• Alles, was von selbst abspielt (ein Intro beim Laden), hat ein sichtbares Skip-Steuerelement, und jede Szene hat einen No-WebGL-Fallback (Posterbild oder statisches Layout).
• Ändere in einer bestehenden Website nur das, was der Effekt braucht, und sage, was verschoben wurde.

Beizubehaltende Credits

Die Vorlage würdigt ihren ursprünglichen Autor und die Open-Source-Teile, auf denen sie aufbaut (React Bits für ColorBends und Magnet, die Schriftkombination nach dungyov.com). Behalte diese Credits bei, wenn du diese Teile wiederverwendest.