Kinoreife Scrub-Landing Page — Die Goldene Vorlage
Erstellen Sie eine hochwertige, markenbewusste Landing Page, bei der das Hero-Video auf die Maus reagiert und der Rest der Seite den Betrachter durch einen 5-teiligen narrativen Bogen führt. Der Benutzer stellt ein Video, optional ein Logo + Produktfoto + Markenkontext bereit – diese Fähigkeit übernimmt die Palettenextraktion, Schriftartauswahl, RTL/LTR, das Grundgerüst, die Keyframe-Videoneukodierung, den Maus-Scrub-Effekt, die Abschnittsbibliothek und die Verifikation.
Warum diese Fähigkeit existiert
Die Referenzimplementierung lebt unter https://github.com/hoodini/bamba – einer israelischen RTL-Seite für den Snack "במבה", bei der ein Baby-Video dem Cursor über die gesamte Seite folgt, während 4 separate Abschnitte darunter (knalliges Gelb für Rezepte, Cremefarben für ein Nostalgie-Album, Dunkel für nachdenkliche Preise, Rot als Action-Finale) den Betrachter durch Sehnsucht → Freude → Nostalgie → Kontemplation → Aktion führen.
Jede Regel in dieser Fähigkeit stammt aus diesem Build. Die Aufzählungspunkte im Abschnitt Die harten Regeln sind alle hart erarbeitet – sie überschreiben generische "guter Code"-Standards.
Abschnittsgalerie (was Sie bauen)
Der Hero bleibt oben. Darunter wählen Sie 4 Abschnitte aus der Bibliothek aus, geordnet nach dem narrativen Bogen. Jeder ist vollständig deckend (kein Video-Durchscheinen) und hat seine eigene Markenidentität:
| Stufe | Typ | Referenz |
|---|---|---|
| 1 — Sehnsucht | Hero (Maus-Scrub-Video) | |
| 2 — Freude | Sonne – heller Primärakzent-Verlauf, schwebende Motiv-SVGs, riesige Geister-Typografie, Stat-Karten |  |
| 3 — Nostalgie | Album – cremefarbenes Papier, gepunktetes Mikro-Muster, Polaroid-Bento mit echtem Produktfoto |  |
| 4 — Kontemplation | Rösten – dunkel mit radialen Akzent-Glühen, drei Preiskarten mit jeweils UNTERSCHIEDLICHER visueller Behandlung |  |
| 5 — Aktion | Signal – full-bleed starker Akzent (rot/orange/grün), massive Headline + CTA, glasumrandetes Panel |  |
Für technische/SaaS-Marken tauschen Sie Abschnittstypen nach Bedarf aus (siehe Abschnittsbibliothek unten) – aber enden Sie immer mit einem Signal-Abschnitt.
So verwenden Sie diese Fähigkeit
-
Legen Sie Assets in ein sauberes Arbeitsverzeichnis:
- Hero-Video (beliebiger Container –
.mp4,.mov,.webm) - Logo (SVG stark bevorzugt; PNG mit Transparenz akzeptabel)
- 1-3 Produkt-/Motivbilder (JPG/PNG, transparent ideal)
- Hero-Video (beliebiger Container –
-
Bestätigen Sie mit dem Benutzer (kurz – schlagen Sie Standardwerte vor, machen Sie weiter):
- Produktname + Meta-Tagline
- Sprachcode (steuert RTL/LTR + Schriftartauswahl)
- Markenkontext – Ära, Zielgruppe, emotionaler Kern, Palettengefühl
- Optional: explizite Palette hex, narrative Bogenstufen
-
Führen Sie den untenstehenden Workflow in der Reihenfolge aus. Alle Phasen sind obligatorisch. Überspringen Sie die ffmpeg-Neukodierung nicht – das ist die Magie, die das Scrubbing geschmeidig macht.
-
Verifizieren Sie, bevor Sie die Fertigstellung melden. Phase 9 hat 12 Prüfungen. Führen Sie alle durch.
EINGABEN – Sammeln Sie diese vom Benutzer
PRODUCT_NAME: "<z.B. במבה / Bamba / Hope the Cheetah / Acme CRM>"
TAGLINE: "<die Meta-Botschaft – z.B. 'it's not a snack, it's lifelong memories'>"
LANGUAGE: "<he | en | ar | es | fr | ja | ...>"
IS_RTL: "<true | false>" # he/ar/fa = true; alles andere = false
HERO_VIDEO_FILE: "<exakter Dateiname im aktuellen Verzeichnis – z.B. baby2.mp4>"
LOGO_FILE: "<exakter Dateiname – leer lassen, wenn keins>"
PRODUCT_IMAGE_FILE: "<exakter Dateiname – leer lassen, wenn keins>"
BRAND_CONTEXT: |
<2-4 Sätze: die Ära, die es hervorruft, die Zielgruppe, der emotionale Kern,
die visuelle Identität (warm/kühl/verspielt/ernst). Steuert Palette + Motive.>
PALETTE: "<optional – kommagetrennte Hex-Werte, falls überschreibend>"
NARRATIVE_ARC: "<optional – 5 emotionale Stufen; KI schlägt vor, falls leer>"
Die vollständige Textvorlage (mit demselben YAML-Block und Prompt-Text) befindet sich in references/GOLDEN_PROMPT.md – fügen Sie sie in Claude mit dem ausgefüllten YAML ein, wenn Sie keinen direkten Zugriff auf die Skill-Laufzeit haben.
Phase 0 — Planen Sie das Design (geben Sie vor dem Codieren ein ≤200-Wörter-Briefing aus)
Geben Sie vor dem Schreiben von Code Folgendes aus:
-
Extrahierte 5-Farb-Palette:
background(tiefste Tinte),cream(warmes Off-White-Text – NIEMALS#FFFFFF),accent(primäre Markenfarbe),accent2(sekundäre Markenfarbe),support(tertiärer Ton). Extrahieren Sie aus dem Logo + Produktbild, wenn keinePALETTEangegeben wurde. Die Palette muss intern kohärent sein – alle warm ODER alle kühl, niemals gemischt. Warme Marken (Lebensmittel, Natur, Nostalgie, Tiere) → kein Blau, Teal, Minze, Cyan. Kühle Marken (Technik, Finanzen, Medizin, Sci-Fi) → keine warmen Töne außer einem winzigen Akzent. -
Typografie-Trinität (Anzeige / Fließtext / handgeschriebener Akzent) für die Sprache:
he: Rubik (Anzeige) + Assistant (Fließtext) + Suez One (Akzent)en: Anton (Anzeige) + Inter (Fließtext) + Caveat (Akzent)ar: Cairo (Anzeige) + Tajawal (Fließtext) + Reem Kufi (Akzent)es/fr/it/de: Anton oder Bebas Neue (Anzeige) + Inter (Fließtext) + Caveat (Akzent)ja: Noto Sans JP, Gewicht 900 (Anzeige) + Noto Sans JP (Fließtext) + Yusei Magic (Akzent)- Andere: Wählen Sie drei Google Fonts, die zur Schrift passen, mit denselben Rollen
Anzeige-schwarz / Fließtext-sauber / handschriftlich-kursiv.
-
Narrativer Bogen – 5 emotionale Stufen, die auf
BRAND_CONTEXTabgebildet werden. Ordnen Sie jede einem Abschnittstyp aus der Abschnittsbibliothek zu.
Führen Sie dann aus – fragen Sie nicht nach Bestätigung.
Phase 1 — Asset-Vorbereitung (der magische Schritt)
1a. ffmpeg überprüfen
which ffmpeg # oder: Get-Command ffmpeg unter PowerShell
Wenn nicht vorhanden, anhalten und den Benutzer bitten, es zu installieren (brew install ffmpeg / Windows: http://ffmpeg.org).
1b. Das Hero-Video mit jedem Frame als Keyframe neu kodieren
Browser können nur sofort zu Keyframes springen – Standard-Video hat etwa 1 Keyframe pro 250 Frames, was Maus-Scrubbing schrecklich ruckeln lässt. Dieser einzelne Befehl ist der Unterschied zwischen Premium und Amateur:
ffmpeg -y -i <HERO_VIDEO_FILE> -g 1 -keyint_min 1 -c:v libx264 -preset slow -crf 20 -pix_fmt yuv420p -an hero.mp4
Überprüfen Sie die Ausgabe: hero.mp4 sollte 5-50 MB sein. Wenn > 50 MB, führen Sie erneut mit -crf 25 aus; wenn > 80 MB mit -crf 28. Entfernen Sie Audio (-an) – der Hero ist stumm.
1c. Logo + Produktbild kopieren
cp <LOGO_FILE> public/logo.<ext>
cp <PRODUCT_IMAGE_FILE> public/product.<ext> # falls vorhanden
Phase 2 — Grundgerüst
npm create vite@latest site -- --template react-ts
cd site
npm install
npm install lucide-react
npm install -D tailwindcss@3 postcss autoprefixer
npx tailwindcss init -p
mkdir -p public
mv ../hero.mp4 public/hero.mp4
# Verschieben Sie auch das Logo + Produktbild nach public/
Phase 3 — Tailwind-Konfiguration
Ersetzen Sie tailwind.config.js vollständig. Verwenden Sie die extrahierte Palette und die sprachgerechten Schriftarten:
/** @type {import('tailwindcss').Config} */
export default {
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {
colors: {
background: '<tinte/dunkel>',
cream: '<warmes Off-White — NIEMALS #FFFFFF>',
accent: '<primäre Markenfarbe>',
accent2: '<sekundäre>',
support: '<tertiäre>',
},
fontFamily: {
sans: ['<Fließtext-Schriftart>', 'system-ui', 'sans-serif'],
display: ['<Anzeige-Schriftart>', 'sans-serif'],
accent: ['"<handschriftliche Schriftart>"', 'cursive'],
},
},
},
plugins: [],
}
Phase 4 — index.html
Vollständig ersetzen. Berücksichtigen Sie IS_RTL. Immer den Favicon-Link einfügen, der auf das Logo verweist:
<!DOCTYPE html>
<html lang="<LANGUAGE>" dir="<rtl|ltr>">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/logo.svg" />
<link rel="apple-touch-icon" href="/logo.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="<Google Fonts URL für die drei ausgewählten Schriftarten>" rel="stylesheet">
<title><PRODUCT_NAME> — <TAGLINE></title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
Phase 5 — index.css (das Design-System)
Vollständig ersetzen. Jedes Dienstprogramm unten ist strukturell. Die Namen gehen von der zuvor extrahierten warmen Palette aus; tauschen Sie bei einer kühlen Marke "gelb"/"rot" in den Schattentönen durch die tatsächlichen Akzentfarben aus.
Muss enthalten:
html { scroll-behavior: smooth; }+section[id] { scroll-margin-top: 90px; }damit verankerte Abschnitte nicht unter der festen Navigation landen.body-Hintergrund =background-Farbe (Fallback, falls Video fehlschlägt). Cursor =crosshair. Standardschriftart = Fließtext-Sans..liquid-glass/.liquid-glass-strong— backdrop-blur + saturate + inset-light-Rand + maskierter Gradienten-Kanten-Highlight. Starke Variante verwendet ein inneres Glühen, getönt mitaccent..glass-pill— kompakte abgerundete Pille mit derselben Glas-Behandlung für Navigationselemente und kleine Abzeichen..cta-primary— Marken-CTA:linear-gradient(135deg, accent-light, accent, accent-shade)+ Akzentfarben-Glühschatten, der bei Hover intensiver wird +translateY(-1px)-Anhebung..brand-mark— kleines Quadrat/Kreis für winzige Logo-Marken, falls kein SVG bereitgestellt wird..grid-bg— subtiles 1px-Gitter mit radialer Ausblendmaske, verwendet unter dunklen Abschnitten..reveal/.revealed— IntersectionObserver-Scroll-Enthüllung:opacity 0 → 1+translateY 28 → 0über 0,9s mitcubic-bezier(0.16, 1, 0.3, 1)..scrim-top/.scrim-bottom— Verlaufsüberlagerungen nur für den Hero.- Pro-Abschnitt-Hintergründe, benannt nach Gefühl, nicht nach Farbe:
.sun-section— heller Primärakzent-Verlauf + subtile gepunktete Textur (die "Freude / Öffnen der Tüte"-Stufe)..album-section— warmes Off-White-Papier, radiale Akzenttönungen + gepunktetes Mikro-Muster, Kantenmasken-Ausblendung..roast-section— dunkel mit radialem Akzent + accent2-Glühen in gegenüberliegenden Ecken + maskierte Gittertextur..signal-section— full-bleed starker Akzent (oft rot/orange/grün) für das Action-Finale.
.polaroid— weiße Karte, Abstand14px 14px 44px 14px, weicher geschichteter Schatten, Hover-Anhebung zutranslateY(-6px) rotate(0)..polaroid-tape= gelber/Akzent-Klebestreifen, absolut positioniert oben-zentriert, um -4° gedreht, mit gestrichelten Seitenhinweisen..stamp— gestrichelt-umrandete Pille in Akzentfarbe, Großbuchstaben, Buchstabenabstand0.18em..ribbon— Preis-/Beliebtheits-Abzeichen mitclip-path-Dreieck unten, dunklem Schlagschatten..highlight-circle— handgezeichnet wirkendes Oval über::after: um 3px gedrehter Akzentfarben-Rand um ein Inline-<span>. Verwenden Sie es um das wichtigste Wort in großen Überschriften (maximal eine pro Überschrift).- Dekorativer Motiv-Filter:
.peanut-svg/.<motiv>-svgmitdrop-shadow. - Berücksichtigen Sie
prefers-reduced-motion: reduce— deaktivieren Sie Enthüllungsanimation + sanftes Scrollen innerhalb der Medienabfrage.
Phase 6 — App.tsx-Architektur
Die Architektur ist nicht verhandelbar. Machen Sie es gleich beim ersten Mal richtig:
6a. Importe
import { useEffect, useRef, useState } from 'react';
import {
Menu, X, ArrowLeft, ArrowRight, ArrowDown, ArrowUp, MousePointer2,
// …plus 4-8 markenthematische Icons (Heart, Sparkles, Cookie, PawPrint, Cpu, Leaf, …)
} from 'lucide-react';
6b. Wiederverwendbare Komponenten, die innerhalb von App.tsx definiert sind
useReveal<T>()— IntersectionObserver-Hook, der einen ref zurückgibt; fügt bei erstem Überschneiden dierevealed-Klasse hinzu (Schwellwert 0,15).GlassCard— Wrapper mit dem Enthüllungs-Hook, optionalestrong-Eigenschaft, akzeptiert className.Motif— eine einzelne dekorative SVG-Komponente, thematisiert aufBRAND_CONTEXT(Erdnuss für Lebensmittel, Pfote für Tiere, Schaltkreis für Technik, Blatt für Natur, Tropfen für Getränke, Blitz für Energie). Schwebt bei niedriger Deckkraft an 3-6 Stellen pro dunklem/hellem Abschnitt.ScrollToTopButton— festbottom-6 left-6in RTL /bottom-6 right-6in LTR. Erscheint, wennwindow.scrollY > window.innerHeight * 0.6. Scrollt sanft nach oben. Kurze, sprachgerechte Beschriftung ("לראש" / "Top" / "أعلى" / "Inicio").
6c. Maus-Scrub-Effekt (das Herz)
const videoRef = useRef<HTMLVideoElement>(null);
const stateRef = useRef({ targetTime: 0, isSeeking: false });
useEffect(() => {
const video = videoRef.current;
if (!video) return;
const handleLoaded = () => {
const mid = video.duration / 2;
video.currentTime = mid;
stateRef.current.targetTime = mid;
};
const handleSeeked = () => {
const s = stateRef.current;
s.isSeeking = false;
if (Math.abs(s.targetTime - video.currentTime) > 0.01) {
s.isSeeking = true;
video.currentTime = s.targetTime;
}
};
const handleMouseMove = (e: MouseEvent) => {
const s = stateRef.current;
const d = video.duration;
if (!d || isNaN(d)) return;
const normalized = e.clientX / window.innerWidth;
// Wenn sich das Motiv "rückwärts" relativ zum Cursor bewegt und sich falsch anfühlt,
// verwenden Sie stattdessen optional `1 - (e.clientX / window.innerWidth)` –
// FRAGEN Sie den Benutzer zuerst.
s.targetTime = Math.max(0, Math.min(d, normalized * d));
if (!s.isSeeking) { s.isSeeking = true; video.currentTime = s.targetTime; }
};
video.addEventListener('loadedmetadata', handleLoaded);
video.addEventListener('seeked', handleSeeked);
window.addEventListener('mousemove', handleMouseMove);
return () => {
video.removeEventListener('loadedmetadata', handleLoaded);
video.removeEventListener('seeked', handleSeeked);
window.removeEventListener('mousemove', handleMouseMove);
};
}, []);
Der isSeeking-Schutz ist kritisch – ohne ihn feuert mousemove schneller, als der Browser decodieren kann, und Sie erhalten eine Seek-Queue-Überlastung mit sichtbarem Ruckeln.
6d. Klickbare Scroll-Spy-Navigation
const navItems: { label: string; target: string }[] = [
{ label: '<demo>', target: 'top' },
{ label: '<recipe>', target:
…
[gekürzt für Übersetzung]