brand-cut

Was macht brand-cut?

Firma / URL / Repo -> Recherche -> Markenkit -> Drehbuch mit Produktmomenten -> Storyboard -> (VO) -> Archetyp-Aufbau -> (Mischung) -> QA -> Rendermatrix -> ausliefern

Lies LEARNINGS.md vor deinem ersten Film. Es enthält alles, was einen Film hat scheitern lassen oder einen Render hat fehlschlagen lassen.

0. Regeln (bindend)

• Jede Szene ist ein konkreter Produktmoment mit echter UI. Wenn KI erscheint, ist eine echte KI-Antwort auf dem Bildschirm. Keine abstrakten Slogans.
• Wahrheit vor Marketing. Baue aus der Codebasis, Dokumentation und echten App-Bildschirmen; die Website dient nur dem Ton. Jede Behauptung auf dem Bildschirm hat eine Quelle (qa/claims.py).
• Exaktes Logo, Farben aus der Quelle entnommen, niemals angenähert.
• Nicht KI-aussehend. Keine GROSSBUCHSTABEN / text-transform: uppercase, Emojis, kursive Serifen-Displays, lila KI-Verläufe, Glitzer, Kugeln, Partikel, Linsenfackeln, Neon-Konturen, Fake-UI, prozedurale Telefone oder Häuser.
• Blitzsicher. Höchstens eine Vollbild-Blitze alle ~8 s, niemals mehr als 3 Blitze in einer Sekunde. qa/flashcheck.py besteht bei der endgültigen Datei.
• Sound. Ein gestaltetes SFX bei jeder UI-Aktion auf dem Bildschirm; Musik duckt unter SFX und VO; kein Beat-Pumpen.
• Formate sind native Layouts innerhalb der Sicherheitszonen, niemals Zuschnitte. 60 fps; 1080 wird in 4K gerendert und herunterskaliert.
• Veröffentliche, lade hoch oder poste niemals irgendetwas oder kaufe Credits, ohne dass der Benutzer dies sagt.

1. Layout

SKILL.md, LEARNINGS.md              diese Datei, die Fallen
research/RESEARCH.md                Stufe 0: Firmenname / URL / Codebasis -> Markenkit + Wahrheiten + echte UI-Aufnahmen
brand.schema.json                   Markenkit-Schema
brands/demo/                        "Tidewell", eine fiktive Marke; für eine neue Marke kopieren
archetypes/                         CONTRACT.md + 30 Szenenvorlagen (scene.html + README.md)
formats/                            presets.json (Größen, Sicherheitsränder, Render-Voreinstellungen, Lautstärke) + safe-*.png Overlays
shared/                             hf.js (Laufzeit: Format, Auswahl, Seed-RNG), phone.js (fotorealistisches Telefon), type.js, uikit/ (Chat-,
                                    Benachrichtigungs-, Kalender-, Belegkomponenten)
audio/                              vo.py (ElevenLabs + Budgetwächter), mix.py, music.md, sfx/ (INDEX.md, INDEX.json, Dateien)
qa/                                 flashcheck.py, framecheck.py, safezone.py, claims.py, vo_diff.py, contact.py, run-all.sh
scripts/                            new-film.sh, add-scene.py, set-format.py, set-brand.py, brand-css.py, render-matrix.sh,
                                    save-ref.sh, index-refs.py, shazam.py, xcorr.py, beats.py, peaks.py
templates/                          SPEC.md (Filmvertrag), index.html, project/, structures/
reference/                          PATTERNS.md (Archetyp-Bibliothek + Gesetze), RESEARCH-digest.md, studies/ (18 Reel-Analysen + INDEX.md)
examples/                           fertige Beispielfilme mit Markenkit, SPEC und Standbildern

Anforderungen: Node 18+ (npx hyperframes), Python 3.10+, ffmpeg, uv (uvx führt die QA- und Audio-Skripte in Wegwerf-Umgebungen aus). Optional: ELEVENLABS_API_KEY für Sprachausgabe (ohne fällt audio/vo.py auf Open-Source-Kokoro-TTS zurück; siehe audio/VOICE.md), ein Musikordner ($MOTION_LIBRARY/music).

Funktioniert in jedem Agenten mit einer Shell. Wo diese Datei "Unteragenten" sagt, führe die Schritte nacheinander aus, wenn dein Agent keine hat; "Web-Fetch" bedeutet jedes Fetch/Browse-Tool, das dein Agent hat, oder curl.

2. Pipeline

0. Recherche (research/RESEARCH.md). Codebasis-Modus, wenn du das Repo hast (am genauesten), ansonsten Website-Modus, beide, wenn möglich. Ausgabe: brands/<id>/brand.json, truths mit Quellen, echte UI-Aufnahmen in brands/<id>/assets/ui/ und 5-8 Produktmomente.
1. Briefing. Zielgruppe, Formate, Länge, VO oder nur Musik oder stumm, das eine, das der Betrachter verstehen muss.
2. Markenkit. Kopiere brands/demo/, fülle Paletten (9-Stufen-glowRamp), Schriftarten mit Dateien, Logo, UI-Aufnahmen, Geschichte, Wahrheiten, Stimme. Validieren gegen brand.schema.json.
3. Gerüst. scripts/new-film.sh <marke> <verzeichnis> <format> [format...] [--palette id] -> index.html mit dem Markenblock (Schriftarten, CSS-Variablen, window.BRAND), film.json, SPEC.md, Audio-Stubs. Jederzeit neu thematisieren: scripts/set-brand.py <verzeichnis> <marke> [palette]. Format wechseln: scripts/set-format.py <verzeichnis> <fmt>.
4. Drehbuch. SPEC.md Abschnitt 2: eine Zeile pro Produktmoment (echte UI, Text auf dem Bildschirm, VO-Zeile, Beweis, harte Größenziele). Lesegrenzen: <= 3 Wörter/s, <= 42 Zeichen pro Zeile, max. 2 Zeilen.
5. VO zuerst (VO-Filme). audio/vo/script.txt, eine Zeile pro VO-Zeile, dann python3 audio/vo.py say <verzeichnis> --voice <id> --take <name>. Es macht eine Anfrage mit Zeitstempeln, teilt nach Ausrichtung auf, schneidet Füllwörter und begrenzt Pausen. lines.json gibt Dauern. Prüfen mit qa/vo_diff.py <verzeichnis> <take>. Der Budgetwächter lehnt jeden Aufruf ab, der über das Job-Limit hinausgeht.
6. Storyboard auf der VO und dem Taktgitter (scripts/beats.py <wav> <dauer>). SPEC.md Abschnitt 3: Archetyp, Ein/Aus, Übergang (nicht-blitzend zuerst, PATTERNS Abschnitt 4), SFX-Ereignisse.
7. Musik. Drei Optionen, auf Takt-fenster zugeschnitten (Aufblühen bei der Enthüllung, Auflösung beim Logo); die Auswahl rendern. Siehe audio/music.md.
8. Aufbau aus Archetypen. python3 scripts/add-scene.py <verzeichnis> <archetype> <szene-id> <start> <dauer> [--vars JSON], dann anpassen. Mit Unteragenten: ein Builder pro Szenengruppe, der nur seine Dateien besitzt, dann ein unabhängiger Kritiker an Schnappschüssen, dann Korrekturen.
9. Mischung. audio/events.json (Musik, VO-Zeilen, SFX mit Zeiten aus audio/sfx/INDEX.md, Ducking) -> python3 audio/mix.py <verzeichnis> -> audio/mix.wav bei -14 LUFS / -1 dBTP.
10. QA. npx hyperframes check mit 0 Fehlern, einem Entwurfs-Render, dann qa/run-all.sh <verzeichnis> <video> <fmt> (framecheck, flashcheck, safezone, claims, Lautstärke, fps). Überprüfe qa/contact.py <video> 10 <prefix> Blätter gegen Abschnitt 0.
11. Render-Matrix. scripts/render-matrix.sh <verzeichnis> [--4k 16x9]: pro Format, 4K-Aufnahme herunterskaliert auf 1080, Audio gemuxt, QA-Gattern ausgeführt. Zuerst freien Speicherplatz prüfen.
12. Ausliefern. Ein Ordner mit den Videos, einer index.html-Galerie und einem kurzen REPORT.md (was, verwendete Credits, Musik- und Stimmen-Alternativen, was zu kurz kam). Für den Benutzer öffnen.

3. Formate (formats/presets.json)

id	Leinwand	Sichere Ränder (o/u/l/r)	für
16x9	1920x1080	108/108/192/192	YouTube, LinkedIn, X, Website
9x16	1080x1920	270/680/70/140	Reels, TikTok, Shorts
1x1	1080x1080	86/86/135/135	IG/LinkedIn Feed
4x5	1080x1350	108/108/86/86	IG/FB Feed
banner	1920x600	60/60/96/96	README / Website-Header-Streifen (stumme Schleife)

Szenen lesen window.BRAND.format und verzweigen das Layout pro Format ([data-fmt="9x16"]). Die kurze Seite ist immer 1080 px, daher bleiben px-Größen erhalten; Helden in vertikalen Formaten hochskalieren.

4. Archetypen (Details in reference/PATTERNS.md)

glow-field (A01, Vollbild-WebGL-Licht) | glass-slab (A02, KI-Panel mit einer echten gestreamten Antwort) | glass-tile-click (A03) | word-blur-in (A04) | tracking-collapse (A05) | chip-marquee (A06) | status-stack (A07, Referenzimplementierung) | wordmark-lockup (A08) | phone-tunnel (A09) | drum-wheel (A10) | card-carousel (A11) | network-lines (A12) | composer-send (A13) | card-burst (A14) | checklist-fix (A15) | orbit-chips (A16) | list-swap-toggle (A17) | object-launch (A18) | brutal-type (A19) | icon-ring (A20) | calendar-pick (A21) | product-hero (A22) | chat-thread (A23) | container-morph (A24) | notification-pile (A25) | docusign-sign (A26) | stripe-paid (A27) | logo-sting (A28) | branch-tree (A29) | counter-pill (A30) | logo-wheel (A31, loopende "funktioniert mit"-Karussell).

Filmstrukturen S1-S8 (SaaS-Erklärvideo, 13 s vertikal, Premium-Polish-Checkliste, dunkel-kinematografisch, Figma-Showcase, Verlaufs-Eröffner, handgemachter Sting, Beweis-Platte) sind in PATTERNS.md Abschnitt 5. Vertrag: archetypes/CONTRACT.md (markenunabhängige CSS-Variablen, window.BRAND, Instanzvariablen, format-nativ, blitzsicher, SFX-Cues in der README).

5. Studieren eines neuen Referenz-Reels

• scripts/save-ref.sh <url> lädt ein Reel mit yt-dlp herunter und erstellt eine 2-fps-Übersicht + Song-ID; scripts/index-refs.py indiziert es.
• Baue 10-fps-Streifen alle 2 s und native-fps-Läufe an Schlüsselmomenten; verfolge ein Element pro Frame, um die Easing-Kurve zu benennen; Taktgitter mit scripts/beats.py; Palette in Hex; Luminanz pro Frame für das Blitz-Profil.
• Schreibe reference/studies/<id>.md: Shot-Liste, Aufbau pro Element, Kamera, Easing-Zahlen, Übergänge, Typografie, Palette, Tiefe, Sound, Kopierstruktur, warum es nicht KI ist, was es KI machen würde, Archetypen. Die 18 Studien dort sind die ausgearbeiteten Beispiele.

6. Bewährte Looks

• Glow (A01): ein WebGL-Shader; Skalarfeld -> 9-Stufen-Rampe, Noise-Warp, Dither; Uniforms aus einer monotonen Hermite-Keyframe-Tabelle, die von einem GSAP-Proxy-Tween angetrieben wird.
• Glass: backdrop-filter: blur(22px) saturate(1.5) brightness(1.15), Verlaufsabschrägung via mask-composite, innere Hervorhebung und Schatten, Kontaktschatten, ein Glanz bei Bewegung.
• Type: eine Grotesk in 500, wortweises Einblurren 14 -> 0 px, Skalierung 1.06 -> 1, power3.out, Zeile zentriert sich, kontinuierlicher Rückzug.
• Echte UI: Erstelle die Komponenten des Produkts in HTML/CSS aus seiner Quelle oder Aufnahmen (shared/uikit/ ist ein Ausgangspunkt); HF.phone bildet einen Bildschirm in das fotorealistische Telefon ab.