Scroll-getriggertes Video

Drei Varianten zum Vergleich. Jede scrubbt die ersten 5 Sekunden des Clips an den Scrollfortschritt.

Variante 1

Video Scrub (einfach)

Pinned <video>, GSAP setzt currentTime direkt aus dem Scrollfortschritt.

Variante 2

Canvas Frame Sequenz

150 JPG-Frames werden auf ein Canvas gezeichnet. Smoothest, wie auf builder.io.

Variante 3

Smooth Video Scrub

Video + Lerp-Glättung — gleitendes currentTime ohne Frame-Stutter.

Variante 4

Ein Video, drei Stopps

Ein einziger Clip scrubbt durch, hält bei 4 s / 11 s / 15 s an. Texte gleiten über das Standbild.

Variante 5

Ein Weg, drei Richtungen

Neue Veo-Clips: Anflug mit Text-Stopps, dann Weggabelung — links herum, rechts herum oder geradeaus zum Altar (Klick oder Cursor-Position beim Scrollen).

Variante 6

Canvas-Sequenz + Lenis

Gleiche Verzweigung wie V5, aber als WebP-Einzelbilder auf Canvas (Terminal-Industries-Methode): 60 fps interpoliert, natives 2048px, Worker-Preload, Lenis.

Vergleich

V5/V6 · HQ vs. Web nebeneinander

Vorgelagerte Vergleichsseite: zwei unabhängig scrollbare Panes, jede Variante in zwei Qualitätsstufen (HQ 2048px / Web 1600px) umschaltbar.