Parallax Landing Page

Was macht Parallax Landing Page?

Verwandle ein kurzes Video in eine cineastische One-Screen-Landing-Page, bei der die Scroll-Geste des Benutzers frame-genau durch das Video blättert, während fünf dramatische Text-Szenen ein- und ausblenden. Das Dokument scrollt nie wirklich – Mausrad-, Touch- und Tastatureingaben werden in JavaScript abgefangen und in einen virtuellen Frame-Fortschritt umgewandelt.

Dieses Skill kodiert die Muster, die in der beigelegten Referenz unter ../../examples/parasites/ (die GitHub/Lion/Hope-Landings – drei funktionierende Seiten, die mit genau diesem Skill erstellt wurden) nachgewiesen sind. Behandle diesen Ordner als die maßgebliche Quelle, falls hier etwas unklar ist.

Wo dieses Skill in der YUV.AI-Pyramide steht

parallax-landing-page befindet sich in der mittleren Ebene der YUV.AI-Skills-Pyramide, zusammen mit yuv-design-system, yuv-decks, yuv-viral-video und video-to-landing-page. Der Top-Level-Orchestrator yuv-pilot leitet hierher weiter, sobald ein 5–15s-Videoclip zu einer einzelnen Hero-Scroll-Scrub-Landing werden soll.

Dieses Skill bringt seine eigene visuelle Sprache mit (Anton + Caveat + Inter, Gold/Amber/Akzent/Creme-Akzentpalette) – es ruft NICHT das yuv-design-system auf. Die beiden Systeme koexistieren: yuv-design-system besitzt die Markenpalette für Web/App/Deck-Oberflächen, parallax-landing-page besitzt den cineastischen Scroll-Scrub-Look speziell für diesen Zweck. Für YUV.AI-Parallax-Landings kannst du OPTIONAL ein Phoenix-Wasserzeichen + die kanonische Linktree-URL im Fußzeilenbereich als durchgehenden Markenanker hinzufügen – siehe yuv-design-system/assets/ für die Wasserzeichen-Datei. Tausche NICHT den Anton/Caveat-Type-Stack gegen die Neon-Palette des Designsystems aus – das würde den unverwechselbaren Look zerstören.

Was du baust

Jede Landing ist ein einzelner gesperrter Viewport mit:

• Einer Canvas, die den gesamten Bildschirm ausfüllt und jeweils ein Einzelbild zeichnet (Cover-Fit, DPR ≤ 2)
• 5 absolut positionierten Text-Szenen (Kicker + Uppercase-Anton-Überschrift + Caveat-handgeschriebene Zeile), jede mit eigenem Scroll-Fortschrittsfenster
• Einer festen Navigation mit PARALLAX // showcase-Logo und Links zu benachbarten Landings
• Einem Ladebildschirm, der jedes Einzelbild vorlädt, bevor der Benutzer interagieren kann
• Einer Vignetten- + Filmkorn-Überlagerung
• Einem unteren Scroll-Hinweis, der ausgeblendet wird, sobald der Benutzer zu scrollen beginnt
• Einem Frame-Zähler unten rechts (z. B. 073 / 145)
• Einer letzten Szene, die gleichzeitig der CTA-Bereich ist – kein separater .end-Bereich darunter

Gesamtgewicht bei q:v 2: ca. 120–220 KB pro Frame × Frame-Anzahl. Ein 6-Sekunden-Clip mit 24fps = 145 Frames ≈ 25 MB. Ein 10-Sekunden-Clip = 241 Frames ≈ 53 MB.

Speicherort

Standard: ~/Documents/yuv-projects/landings/<slug>/ – speichere eigenständige Landings immer hier, damit du sie wiederfindest. Überschreibe nur, wenn der Benutzer explizit einen anderen Ort wählt ODER Modus B (Integration in das bestehende examples/parasites/-Showcase) ausgewählt ist.

mkdir -p ~/Documents/yuv-projects/landings
cd ~/Documents/yuv-projects/landings
# Das Skill erstellt hier <slug>/ und extrahiert dort die Frames und erstellt das HTML.

Endgültiger Pfad (Modus A – eigenständig): ~/Documents/yuv-projects/landings/<slug>/. Endgültiger Pfad (Modus B – Integration): das vom Benutzer gewählte bestehende Showcase-Verzeichnis.

Teile dem Benutzer den endgültigen Pfad am Ende jedes Builds mit.

---

Arbeitsablauf

Es gibt vier Phasen. Überspringe keine Phasen – jede baut auf der vorherigen auf.

Phase 1 – Ermitteln

Bestätige mit dem Benutzer:

1. Videopfad – wo die Quell-MP4 liegt.
2. Slug – kurzer Ordner-/Dateiname (z. B. hope, marcus, desk). Ein Wort, Kleinbuchstaben, keine Leerzeichen. Dies wird sowohl der Frame-Ordnername (<slug>/) als auch der HTML-Dateiname (<slug>.html).
3. Thema / Thema – worum geht es auf dieser Landing? Eine Produkteinführung? Ein persönlicher Moment? Eine Tierbegegnung? Du brauchst dies, um den Text zu schreiben.
4. Projektmodus – eigenständig (brandneuer Ordner) oder Integration in das bestehende Parasites-Showcase unter examples/parasites/ (oberes Level dieses Repos). Wenn der Benutzer sagt "Füge es zum Showcase hinzu", meint er Modus B unten.
5. Akzentfarbe – für den Skript-/CTA-Highlight: gold (#f5b042), amber (#ff8a3d), accent (pink #ff4d6d), cream (#f5e9d4), oder etwas Neues (füge es in :root in style.css hinzu und schreibe eine neue .script.<name>-Regel).

Wenn der Benutzer einige dieser Angaben nicht gemacht hat, schlage Standardwerte vor und fahre fort – bleibe nicht bei Fragen hängen, die sie beantworten können, sobald sie das Ergebnis sehen.

Phase 2 – Frames extrahieren

Führe das beigelegte Extraktionsskript aus. Es durchsucht das Video mit ffprobe und extrahiert jedes Einzelbild in nativer Auflösung mit -q:v 2 (nahezu verlustfreies JPEG), benannt als frame-001.jpg bis frame-NNN.jpg (3-stellig, mit Nullen aufgefüllt).

python <skill>/scripts/extract_frames.py <video_path> <output_folder>

Beispiel:

python C:/Users/Benutzer/.claude/skills/parallax-landing-page/scripts/extract_frames.py \
    C:/Users/Benutzer/Documents/parasites/hope/hope.mp4 \
    C:/Users/Benutzer/Documents/parasites/hope

Das Skript gibt einen JSON-Metadatenblock auf stdout aus. Erfasse ihn – du benötigst frame_count und suggested_scroll_budget für das HTML.

Warum -q:v 2: ezgif und ähnliche Tools komprimieren aggressiv nach (~55 KB/Frame). Natives ffmpeg mit q:v 2 liefert ~120–220 KB/Frame bei gleichen Abmessungen – sichtbar schärfer. Downskaliere nicht; skaliere niemals hoch (das bläht die Dateien auf, ohne Details hinzuzufügen).

Warum die Scroll-Budget-Formel (≈26 px pro Frame): hält das taktile "Pixel Scroll pro Frame Fortschritt" über verschiedene Clip-Längen konstant. 145 Frames → ~4200, 241 Frames → ~6300, 90 Frames → ~2500 (untere Grenze). Das Skript berechnet es für dich und begrenzt es auf [2500, 8000].

Phase 3 – Seite erstellen

Lies die Vorlage unter <skill>/assets/landing-page-template.html. Es ist eine vollständige funktionierende Datei mit {{PLATZHALTER}}-Markierungen und <!-- TODO: -->-Kommentaren neben kreativen Teilen. Schreibe eine neue Datei unter <target>/<slug>.html mit allen Ersetzungen.

Substitutions-Checkliste (jeder Platzhalter muss ersetzt werden):

Platzhalter	Was einfügen	Beispiel
{{PAGE_TITLE}}	HTML <title>	Hope – Das schnellste Herz der Negev
{{PAGE_DESCRIPTION}}	Meta-Beschreibung, ein Satz	Ein Moment mit Hope, dem Geparden von Midbarium.
{{SLUG}}	Ordnername (kein Pfad, kein Schrägstrich)	hope
{{FRAME_COUNT}}	Ganzzahl Frame-Anzahl	241
{{FRAME_COUNTER_TEXT}}	001 / NNN mit passender Breite	001 / 241
{{SCROLL_BUDGET}}	Ganzzahl aus dem Extraktions-JSON	6300
{{PREVIEW_FRAME_MID}}	Null-aufgefüllter mittlerer Frame	121
{{PREVIEW_FRAME_END}}	Null-aufgefüllter letzter Frame	241
{{LOADER_TITLE}}	Ein Wort, GROSSBUCHSTABEN	HOFFNUNG
{{LOADER_SCRIPT}}	Handschriftliche Zeile, endet mit …	den Läufer herbeirufen…
{{NAV_LINKS_HTML}}	Vollständiger <a>-Tag-Block für die Navigation	siehe unten
{{SCENE_N_*}}	Kicker, Überschrift, handschriftliche Zeile für jede der 5 Szenen	siehe Copy-Leitfaden
{{SCROLL_HINT_TEXT}}	2–4 Wörter, GROSSBUCHSTABEN, Aufforderung	SCROLL ZUM LAUFEN
{{CTA_BUTTONS_HTML}}	2–4 <a class="cta">-Tags	siehe unten
{{ACCENT_CLASS}}	Akzentfarben-Suffix für .script.X und .cta.X	amber

Lies references/copy-guide.md für die cineastischen Textmuster (Kicker-Formulierung, Überschriftenlänge, Ton der handschriftlichen Zeile). Der Text ist der Punkt, an dem dieses Skill seinen Wert beweist – generischer Text würde eine ansonsten schöne Animation ruinieren.

Phase 4 – Assets verknüpfen

Wenn der Zielordner bereits style.css und parallax.js enthält (Showcase-Integration), tue nichts – sie werden gemeinsam genutzt. Andernfalls kopiere beide aus <skill>/assets/ in den Zielordner:

cp <skill>/assets/style.css <target>/style.css
cp <skill>/assets/parallax.js <target>/parallax.js

Bei Integration in ein bestehendes Showcase führe auch die Schritte in references/showcase-integration.md aus – füge eine Karte zu index.html hinzu, füge einen Link zu jeder bestehenden Landing-Navigationsleiste hinzu und füge den Chain-CTA auf der letzten Szene der vorherigen Landing hinzu.

Teile dem Benutzer mit, wie er die Seite anzeigen kann:

Öffne <target>/<slug>.html via python -m http.server 8000 aus dem übergeordneten Ordner (nicht file:// – Chromium kann die Canvas mit lokalen Bild-Ursprüngen beschädigen).

Datei-Kontrakt

<target>/
├── <slug>/                  # Frame-Ordner
│   ├── <slug>.mp4           # die Quelle (erhalten)
│   ├── frame-001.jpg
│   ├── frame-002.jpg
│   └── … frame-NNN.jpg
├── <slug>.html              # die Landing Page
├── style.css                # geteilt (kopieren, wenn eigenständig)
├── parallax.js              # geteilt (kopieren, wenn eigenständig)
└── index.html               # der Hub (nur bei eigenständig oder Integration)

Der Frame-Ordnername und der HTML-Dateiname MÜSSEN denselben Slug verwenden – die folder-Option im new ParallaxPage({folder: '<slug>', ...})-Aufruf der Seite ist der wörtliche Ordnerpfad.

Die ParallaxPage-API (bereits in parallax.js, nicht neu definieren)

new ParallaxPage({
  folder:       '<slug>',     // Ordner, der frame-001.jpg usw. enthält
  frameCount:   145,          // Ganzzahl
  prefix:       'frame-',     // immer 'frame-' für dieses Skill
  scrollBudget: 4200,         // Pixel akkumulierter Eingabe für den vollständigen Durchlauf
  // optional: padWidth (Standard 3), ext (Standard 'jpg')
})

Die Klasse hängt automatisch body.scrub-page an (was Scrollen per CSS sperrt), lädt alle Frames vor, führt einen RAF-gesteuerten Lerp (Faktor 0,22) in Richtung des scroll-abgeleiteten Zielframes aus und überblendet Szenen, deren data-start/data-end-Bereiche den aktuellen Fortschritt einschließen.

Harte Einschränkungen (die nicht verhandelbaren)

Diese sind in die Referenz eingebaut und brechen das Erlebnis, wenn sie verletzt werden:

• 5 Szenen, feste Fortschrittsfenster: 0.00–0.20, 0.22–0.40, 0.42–0.60, 0.62–0.80, 0.82–1.00. Die 0,02-Lücke zwischen den Szenen ist beabsichtigt – ein Moment von "nur das Bild, kein Text" zwischen den Abschnitten. Der Held (Szene 1) und die letzte (Szene 5) verwenden data-fade="0.30" bzw. data-fade="0.18", damit sie an den Rändern länger halten; mittlere Szenen verwenden den Standardwert 0,25.
• Kein .end-Bereich unterhalb des Scrubs. Die letzte Szene enthält die CTAs. Die gesamte Seite ist ein einzelner gesperrter Viewport.
• Anton + Caveat + Inter – Uppercase Anton für alles Fette, Caveat für handschriftliche Akzente (Gold/Amber/Creme), Inter für jeden Fließtext. Niemals ersetzen, niemals eine vierte Schriftart hinzufügen.
• Off-White #f5f1ea, niemals #fff – bereits in CSS als var(--text).
• Frame-Namen sind frame-NNN.jpg null-aufgefüllt auf die Breite der Gesamtanzahl (3 Stellen ist Standard, da Clips < 1000 Frames; das JS berechnet automatisch die Zählerbreite aus der Gesamtanzahl).
• Der Slug ist der Ordnername UND der Basisname des HTML-Dateinamens – hope/, hope.html. Keine Ausnahmen; die Integrationsschritte setzen dies voraus.

Wo du nachschlagen kannst, wenn du nicht weiterkommst

• Das Referenz-Showcase in diesem Repo: examples/parasites/ – github.html, lion.html, hope.html, style.css, parallax.js, index.html. Wenn deine Ausgabe sichtbar von diesen abweicht, bist du abgewichen; lies noch einmal.
• references/copy-guide.md – wie man die 5 Szenen schreibt, damit sie sich wirklich cineastisch anfühlen.
• references/showcase-integration.md – genaue Änderungen, die beim Hinzufügen zu einem bestehenden Hub erforderlich sind.
• assets/landing-page-template.html – die kanonische Struktur mit Platzhaltern.
• assets/hub-template.html – wird nur verwendet, wenn ein brandneues Showcase erstellt wird (3 Karten von Grund auf).

Zwei reale Beispielaufrufe

Eigenständig: Benutzer hat einen einzelnen Clip desk.mp4 und möchte eine Landing Page.

1. Frage nach Slug + Thema. Führe den Extraktor auf desk.mp4 aus → ./desk/frame-NNN.jpg.
2. Kopiere style.css + parallax.js in das Projekt-Root.
3. Erstelle desk.html aus der Vorlage. Navigation hat nur einen Link: sich selbst.
4. Fertig. Sage dem Benutzer, er solle es mit python -m http.server bereitstellen.

Showcase-Ergänzung: Benutzer fügt hope.mp4 zum bestehenden Parasites-Ordner hinzu.

1. Slug = hope. Extraktion → hope/frame-NNN.jpg. (Wiederverwendung von vorhandenem style.css + parallax.js.)
2. Erstelle hope.html aus der Vorlage.
3. Führe die Showcase-Integration durch: Füge eine dritte Karte zu index.html hinzu, hänge einen Hope-Link an die Navigationsleiste in github.html und lion.html an, verlinke die letzte Szene der vorherigen Landing mit einem Weiter: Hope →-CTA.
4. Wenn eine neue Akzentfarbe eingeführt wird, füge sie zu :root hinzu und füge .script.X + .cta.X-Regeln in style.css hinzu.