Kapitel 01
Eine Website, die beim Scrollen erzählt
Was du gerade siehst ist keine Video-Schleife. Jede Position deines Scrolls zeigt einen einzelnen Frame, ähnlich wie bei den Apple-AirPods- oder Bugatti-Sites. Der Vorteil: du kontrollierst das Tempo. Schneller Scroll = schnellere Animation. Stehenbleiben = Frame steht still.
Kapitel 02
Vom Video zur Frame-Sequenz
Quell-Material: zwei 15s 4K-Videos aus Higgsfield. ffmpeg extrahiert 24 fps WebP bei q=88 in 2560 Pixel Breite — komprimiert ohne sichtbaren Qualitätsverlust.
ffmpeg -i scene.mp4 \ -vf "fps=24,scale=2560:-2" \ -c:v libwebp -q:v 88 \ frames/%04d.webp
Kapitel 03
Scroll-Position wird Frame-Nummer
Ein vanilla scroll-Listener rechnet die aktuelle Scroll-Position in einen Wert zwischen 0 und 1 um, multipliziert mit der Frame-Anzahl, und zeichnet den Frame ins Canvas. Kein React-State pro Tick — direkt aufs DOM.
const p = scrollY / scrollTotal const idx = Math.round(p * (722 - 1)) ctx.drawImage(images[idx], 0, 0)
Kapitel 04
Sofort scrubbar — auch ohne komplettes Preload
Statt 722 Frames seriell zu laden werden zuerst 25 Anker-Frames mit Stride 30 parallel geholt — alle gleichzeitig, alle in unter 500 ms drin. Jede Scroll-Position hat danach einen Frame ±4 % nahe; nearestLoadedIndex füllt Lücken bis Tier 1, 2, 3 im Hintergrund verfeinern.
Kapitel 05
Wie der Charakter im Viewport bleibt
Der Trick ist position: sticky mit negativem Margin, das die TopNav überdeckt. Die äußere Section ist 800 vh hoch, das innere Element 100 vh — also bleibt das Canvas die gesamte Scroll-Strecke lang im Bild.
Kapitel 06
60 fps trotz 56 MB Frame-Bundle
Drei Optimierungen sorgen dafür, dass das Scrollen flüssig bleibt:
- fetchPriority für die wichtigen Frames
- img.decode() + 1×1 GPU-Warmup pro Frame
- requestAnimationFrame-Coalesce auf Scroll-Events
Kapitel 07
Diese Karten hier — alternierend, mit Margin
Jedes Kapitel besetzt einen Scroll-Range. Innerhalb des Ranges fadet die Karte ein, hält sich, fadet aus. Position abwechselnd links und rechts mit fester Margin zum Viewport-Rand. Wenn der Tab schmaler wird, schrumpft die Karte mit, statt aus dem Bild zu fallen.
Kapitel 08
Wofür man so etwas wirklich baut
Hero-Sections für Produkt-Walks. Tutorials wo Code und Visual zusammen scrollen. Kapitel-getriebene Storytelling-Sites. Die Animation ist nie Selbstzweck — sie ist eine Lese-Geschwindigkeitsregel. Du gibst das Tempo vor, der Inhalt folgt. Das ist alles.