mukulmunda41-create/cinematic-3d-scroll

Filmisches Scrollen und 3D

Eine kurze Routine zum Hinzufügen einer filmischen Technik zu einer bereits bestehenden Website. Sie ist der filmische Schritt des futuristic-web-design-Skills, der als eigenständiges Paket verpackt wurde.

Wenn ../futuristic-web-design/ neben diesem Skill liegt, lies vor dem Schreiben von Scroll- oder 3D-Code die Datei references/cinematic-moves.md dort. Sie enthält den Code für jedes der folgenden Rezepte, den Befehl zum Neucodieren und den Prozess für eine vollständige Live-3D-Scroll-Story.

Das Budget

Es gibt fünf Techniken: ein Hintergrund-Video-Hero, scrollgebundene Bewegung, einen fixierten Abschnitt, Parallax-Tiefe und ein Live-3D-Objekt. Verwende das Hintergrund-Video-Hero und nicht mehr als zwei der anderen vier. Eine Seite, die alle einsetzt, wirkt wie eine Demo-Reel, ermüdet den Besucher und schwächt jeden Effekt.

Bevor du Code schreibst, gehe die Seite durch und frage bei jeder Platzierung: Würde Bewegung hier etwas klarer machen oder beim Besucher ein bestimmtes Gefühl hervorrufen? Gib an, was du hinzufügst, wo, welchen Beitrag es leistet und was es kostet. Wenn der Benutzer nach mehr fragt, sobald zwei Effekte implementiert sind, sei deutlich über den Kompromiss: zusätzliches Gewicht und weniger Wirkung für die bereits vorhandenen Effekte.

Schutzmaßnahmen für jede Technik

Dekoration darf niemals die Seite mit sich reißen.

• Reduzierte Bewegung. Unter prefers-reduced-motion: reduce gibt es kein Fixieren, kein Scrubbing und keinen 3D-Download. Zeige ein normales gestapeltes Layout oder ein Standbild. Dies gilt auch für sanftes Scrollen und Übergänge, und skriptgesteuerte Bewegung benötigt eine eigene matchMedia-Prüfung, da sie CSS nicht gehorcht.
• Touch. Überprüfe mit Finger-Scrollen: keine Sprünge, kein horizontaler Überlauf, keine Scroll-Fallen.
• Kleine Bildschirme. Unter 768px ersetze 3D durch ein Standbild.
• Verzögertes Laden. Lade Effekt-Code, wenn sich sein Abschnitt dem Viewport nähert, niemals während des anfänglichen Ladens.
• Fehlerfall. Wenn der Effekt fehlschlägt oder WebGL fehlt, bleibt das Standbild erhalten und der Rest der Seite funktioniert.
• Wahrheitsgetreue Zahlen. Ein animierter Zähler darf niemals auf einem falschen Wert stehen bleiben. Animiere die Darstellung, nicht die Daten.
• Versionen. Überprüfe die aktuellen Dokumentationen für GSAP, Three.js, React Three Fiber und Lenis sowie deren kompatible Versionen. Frage vor der Installation jedes Pakets nach.

Rezepte

Hintergrund-Video-Hero

• Ein video-Element mit autoplay, muted, loop, playsinline und einem poster. Handys spielen Video nur automatisch ab, wenn es stummgeschaltet und inline ist.
• Das Poster (hero-poster.webp) wird zuerst angezeigt, sodass kein leerer Rahmen entsteht, während hero.mp4 heruntergeladen wird.
• Für die Lesbarkeit platziere einen Verlaufs-Overlay nur unter dem Textblock. Die gesamte Aufnahme abzudunkeln, macht den Sinn des Videos zunichte. Die Überschrift sollte innerhalb von ein paar Sekunden lesbar sein.
• Halte Text vom fokussierten Motiv der Aufnahme fern. Entscheide dies separat für Desktop und Handy.
• Bei reduzierter Bewegung zeige das Poster und überspringe die Autoplay-Funktion.

Fixierte Scroll-Story

• Der Abschnitt wird fixiert, wenn sein oberer Rand den oberen Rand des Viewports erreicht, durchläuft etwa drei Beats während des weiteren Scrollens und wird dann freigegeben. Beim Hochscrollen wird sie rückwärts abgespielt.
• Jeder Beat besteht aus einer überdimensionalen Zahl, einer kurzen Überschrift und einem Satz echten Textes.
• Baue es mit GSAP ScrollTrigger (pin und scrub) innerhalb von gsap.matchMedia(), sodass es nur existiert, wenn Bewegung erlaubt ist, und sich selbst bereinigt.
• Schreibe das Markup als einfache gestapelte Beats. Wenn kein Skript läuft, ist dieses Markup bereits der Fallback.
• Das Fixieren ist die Technik, die auf Handys am wahrscheinlichsten Probleme macht. Bitte um einen Test mit dem Daumen auf einem echten Gerät, und sage, wenn keiner durchgeführt wurde.

Ein prozeduraler 3D-Akzent

• Ein einzelnes kleines Objekt, einmal platziert, neben dem Inhalt des Abschnitts. Baue die Geometrie im Code aus Primitiven, basierend auf einer verbalen Beschreibung der Form. Keine heruntergeladenen Modelldateien, es sei denn, der Benutzer fragt danach.
• Eine langsame Leerlauf-Rotation plus eine leichte Neigung, gesteuert durch Scrollen. Materialien und Beleuchtung stammen aus dem Designsystem, beleuchtet wie ein Studio-Produktfoto.
• Der Container beginnt mit einem Standbild des Objekts. Die Canvas ersetzt es erst, nachdem der 3D-Code geladen und eingehängt wurde.
• Lade nur bei 768px und breiter, wenn Bewegung erlaubt ist und wenn der Abschnitt nahe am Viewport ist. Pausiere das Rendern, wenn der Abschnitt nicht sichtbar ist, und begrenze das Geräte-Pixelverhältnis auf 2.

Scrollgesteuertes Video

• Ein kurzer Clip, dessen Abspielposition der Scrollposition in beide Richtungen folgt. Es erzeugt einen "Produkt zerlegt sich"-Effekt mit weit weniger Bytes als Live-3D.
• Codiere zuerst neu, sodass jedes Bild ein Keyframe ist, wobei Audio entfernt und der Clip auf die Sekunden zugeschnitten wird, die sich bewegen. Ziel ist etwa 1 MB oder weniger.
• Fixiere den Abschnitt und bilde den Scrollfortschritt auf video.currentTime ab. Markiere das Element als muted und playsinline, und rufe niemals play() darauf auf.
• Zeige Text-Einblendungen nacheinander basierend auf demselben Fortschrittswert an. Gib die Fixierung rechtzeitig frei.
• Bei reduzierter Bewegung zeige das aussagekräftigste Standbild.

Miss, was es gekostet hat

Vergleiche nach dem Hinzufügen einer Technik die Übertragungsgröße vorher und nachher und erstelle eine kurze Tabelle mit den berührten Dateien und hinzugefügten Paketen. Wenn etwas schwer ist, mache es schlanker. Wenn es schwer bleibt, nimm es heraus.