Video → Scroll-Driven Landing Page

Video → Scrollgesteuerte Landingpage

Erstelle eine kinematische Landingpage, bei der der Hero ein Video beim Scrollen abspielt – nicht zeitbasiert, sondern bildweise wie bei Apple-Produktseiten oder der GitHub Copilot-Seite. Die Einzelbilder werden aus dem Quellvideo extrahiert und je nach Scrollposition ausgetauscht; unter dem fixierten Hero folgen normal scrollbare Abschnitte mit Text und Call-to-Action.

Wann einsetzen

• Benutzer lädt ein Video hoch und wünscht sich eine Landingpage, Scroll-Seite, einen Scroll-Frame-Hero oder eine Website aus einem Video
• Erwähnungen von „Apple-Style Scroll“, „GitHub Copilot Landing“, „Bildwechsel beim Scrollen“
• Hebräische Entsprechungen: „דף נחיתה מסרטון“, „אתר עם גלילה“, „סרטון בגלילה“

Speicherort

Standard: ~/Documents/yuv-projects/landings/<slug>/ – speichere Landingpages immer hier, damit du sie wiederfindest. Erstelle das übergeordnete Verzeichnis, falls es fehlt.

mkdir -p ~/Documents/yuv-projects/landings
cd ~/Documents/yuv-projects/landings
# Erstelle hier <slug>/.

Endgültiger Pfad: ~/Documents/yuv-projects/landings/<slug>/. Teile dem Benutzer am Ende jedes Builds mit, wo die Landingpage liegt.

---

Arbeitsablauf (8 Schritte)

1. Quelle prüfen – ffprobe für Dauer, fps, Abmessungen, Audio.
2. Bildanzahl wählen – Standard 80. Untergrenze 40 (ruckelt bei weniger), Obergrenze 160 (schwere Seite). Wähle nach Dauer: ≤10s → 50, 10–30s → 80, 30–60s → 120, >60s → 160.
3. Ausgabeverzeichnis festlegen – Standard ~/Documents/yuv-projects/landings/<slug>/. Der <slug> ist kurz und leitet sich vom Videodateinamen oder Thema ab. Überschreibe nur auf ausdrücklichen Wunsch.
4. Bilder extrahieren – Führe references/extract-frames.py <source-video> <output-dir> [count] aus. Ausgabe: output-dir/frames/f_0001.jpg … mit einheitlicher JPG-Qualität 82 und einer max. Breite von 1920 (skaliert herunter, falls Quelle größer).
5. Kopiere und passe references/landing-template.html in output-dir/index.html an:
   • Ersetze den Platzhalter __FRAMES__ durch <img>-Tags für jedes Bild (das Build-Skript erledigt dies automatisch, wenn du --build-html übergibst).
   • Fülle __HEADLINE__, __TAGLINE__, __CTA_TEXT__, __CTA_HREF__ und Abschnitte aus.
   • Für hebräische Inhalte: setze <html lang="he" dir="rtl"> und tausche Schriftarten auf Rubik/Assistant (siehe references/design-notes.md).
6. Bilder optimieren – Das Build-Skript skaliert bereits auf max. 1920px. Wenn die Gesamtseite mehr als 12 MB wiegt, senke die Qualität auf 75 oder reduziere die Bildanzahl.
7. Vorschau – python -m http.server im Ausgabeverzeichnis ausführen und http://localhost:8000 im Browser öffnen. Das Scrollen fühlt sich auf einem ordentlichen Rechner buttrig glatt an.
8. Bereitstellen – Den Ordner auf Vercel/Netlify/Cloudflare Pages hochladen. Kein Build-Schritt erforderlich.

Der Scroll-Mechanismus

• Der äußere Scroll-Container .scroll-stage erhält eine Höhe in Viewport-Einheiten (Standard 600vh = 5 Bildschirmlängen scrollen, um alle Bilder zu durchlaufen).
• Der fixierte Hero wird mit position: sticky; top: 0; height: 100vh realisiert, enthält alle Bilder absolut positioniert und ausgeblendet bis auf das aktive.
• Ein Scroll-Listener berechnet progress = scrollPositionImContainer / scrollbareHöhe (begrenzt auf 0–1).
• idx = floor(progress * (N - 1)) – Die Klasse .active wird auf das entsprechende Bild gesetzt.
• Den Listener in requestAnimationFrame einwickeln, um 60fps zu halten.

Gestaltungsregeln

• Wenn das Projekt YUV.AI-markenkonform ist (Yuval persönlich, sein Portfolio, seine Marke): verwende yuv-design-system und wähle einen Modus pro Medium:
  • Neon-Modus (STANDARD für YUV.AI-Web): pink (#FF1464) + cyan (#00E5FF) + weiß oder tiefes Schwarz als Hintergrund. Anton + Inter (Englisch) / Rubik + Assistant (Hebräisch). 0px oder 999px Radien.
  • Warmer Editorial-Modus: nur für Hope, Marcus, bigcats.ai, practical.yuv.ai – pink + gelb + beige, nie reines #fff.
  • Verwende niemals den Decks-Modus (Fly High lila/gelb) für eine Landingpage – diese Palette ist nur für Folien reserviert.
• Wenn das Projekt nicht YUV.AI-markenkonform ist: wende yuv-design-system nicht an. Wähle eine Palette, die zur Stimmung des Quellvideos passt. Anton + Inter bleiben vernünftige Standardeinstellungen, sind aber nicht zwingend.
• Hero-Overlays sollten dezent sein – eine Vignette und eine einzige große Überschrift; überlagere das Bild nicht zu stark.
• Abschnitte unterhalb des Hero: heller Hintergrund (weiß im Neon-Modus, off-white im Warmer Editorial-Modus, beige bei generisch-warmen Farben), große Anton-Überschrift, Fließtext in Inter bei 18–22px, CTA als scharfe Pille (border-radius: 999px) – pink gefüllt im Neon-Modus, ansonsten markenangepasste Farbe.
• Für Hebräisch: RTL beachten, Rubik 900 für Überschriften, Assistant 400/500 für Fließtext verwenden.

Dateireferenzen

Datei	Zweck
references/extract-frames.py	ffmpeg-basierter Bild-Extraktor; erstellt optional das komplette HTML in einem Durchlauf
references/landing-template.html	Eigenständiges Landingpage-Grundgerüst mit dem Scroll-Mechanismus
references/design-notes.md	Typografie, Palette und Bewegungsstandards