faizalmy/brand-film

Markenfilm

Ein 60-Sekunden-Film über die Identität einer Marke: das Zeichen, die Website, das Produkt, der Name. Erster genehmigter Film: ReUI „Refreshed“. template/ ist dessen Code: eine funktionierende Referenzimplementierung zum Kopieren und Anpassen, keine generische Bibliothek.

• brands/<brand>.md: alles markenspezifisch (Palette, Schriftart, Textquellen, Logo, Produkt, Musik, Regeln, Präferenzen). Lies es zuerst. Für eine neue Marke schreibe eine aus brands/_new-brand.md.
• references/example-reui-refreshed.md: die Shot-Map des genehmigten Films mit Frames und Treffern. Es ist die Vorlage zum Anpassen.
• references/reui-frames/: die visuelle Vorlage. 38 Standbilder des genehmigten Films plus sheet.jpg. Sieh dir das Blatt vor dem Entwerfen an und vergleiche deine Standbilder mit dem passenden Frame, wenn du prüfst.
• references/review.md: Checkliste für Schwachstellen und das Briefing für den Unteragenten.

Voraussetzungen (zuerst prüfen, was fehlt installieren)

Führe diese Prüfungen vor dem ersten Build auf einem Rechner durch. Installiere nur, was fehlt, und teile dem Benutzer mit, was du installiert hast.

Benötigt	Prüfen	Installieren
Node 20.19+	node -v	brew install node (oder nvm)
Remotion und sein Renderer	npx remotion versions im Projekt	npm i im Projekt (Versionen sind in template/package.json festgelegt); in einem bestehenden Projekt: npm i remotion @remotion/cli @remotion/renderer @remotion/fonts @remotion/media in einer gemeinsamen Version
Chrome für Remotion	npx remotion browser ensure	derselbe Befehl; lädt Chrome Headless Shell herunter
ffmpeg / ffprobe (endgültige Dateiprüfung)	ffprobe -version	brew install ffmpeg
Python 3 + Pillow (Kontaktblätter)	python3 -c "import PIL"	pip3 install pillow
librosa + numpy (beat.py, nur neue Tracks)	python3 -c "import librosa"	pip3 install librosa numpy
Playwright + Chromium (Aufnahmen)	node -e "require('playwright')" im Projekt	npm i -D playwright && npx playwright install chromium
Ein Musikbett	eine Datei in public/audio/	von der Quelle, die das Markenprofil nennt; niemals erfinden

Remotions Lizenz: kostenlos für Einzelpersonen und kleine Teams; Unternehmen über der Größenbeschränkung benötigen eine Unternehmenslizenz (https://remotion.dev/license). Erwähne es einmal, wenn die Marke ein Unternehmen ist.

Die Sprache (gleich für jede Marke)

• Eine Leinwand und eine Tinte aus den eigenen Neutralfarben der Marke. Farbe nur dort, wo die Marke sie wirklich hat, oder innerhalb ihrer echten UI. Kein Glas, Gold, 3D oder Glanz, es sei denn, die Marke besteht daraus.
• Ein Element führt. Es fliegt auf einer dünnen Linie, trägt die Schnitte und landet im endgültigen Logo. Jeder Shot übergibt es an den nächsten an derselben Bildschirmposition. Im ReUI-Zeichen ist dies der Punkt. Finde dieses Element in einem neuen Zeichen: ein Punkt, eine Ecke, ein Strich-Ende.
• Jede Linie ist echt. Konstruktionshilfslinien stammen aus den eigenen Pfaden des Logos. Jede Zahl auf dem Bildschirm ist gemessen (Logo-Einheiten, DOM-Boxen in px). Nichts ist Dekoration.
• Die eigene Schriftart der Marke (diejenige, die ihre Website verwendet). Eine Monospace nur für Maße.
• Kein Logo oder Text über der Produkt-UI. Beschriftungen sitzen außerhalb der UI, im freien Raum.
• Lange Standbild-Halten sind Teil davon. Ruhe ist in Ordnung, tot nicht.

Story-Form (anpassen, nicht blind kopieren)

Teil	Beats (von 60)	Aufgabe
Linie	0-8	Das führende Element wird zu einem Cursor und tippt die eigene Zeile der Marke
Zeichen	8-20	Das Element öffnet sich zum Zeichen; das Zeichen wird aus seiner Konstruktion gezeichnet
Website	20-32	Das Logo zoomt heraus und ist das eigene Nav-Logo der Website, dann eine kurze Tour; eine echte Website-Interaktion auf einem Treffer
Name	32-36	Der Schriftzug, ein Buchstabe pro Beat
Produkt	36-49	3-4 echte Produktansichten, echte Ziehbewegungen, gemessene Abmessungen, harte Schnitte, etwa 3 Beats pro Stück
Looks	49-52	Das Zeichen wird jedes Mal anders gezeichnet; das führende Element bewegt sich nie
Ende	52-60	Logo landet, Buchstaben setzen sich auf dem letzten Treffer, dann die Zeile und Domain der Marke

Gib Zeit für das, worauf die Marke stolz ist. Kürze die Looks vor der Konstruktion oder dem Produkt.

Harte Regeln

• Markentext wird kopiert, nie geschrieben. Slogans, Zeilen und Namen stammen wörtlich von der eigenen Website oder Dokumentation der Marke. Niemals erfinden, kombinieren oder kürzen.
• Demodaten innerhalb der Produkt-UI sind nie Inhalt: keine Nennung von Namen, Zahlen oder Personen.
• Nur echte UI, aufgenommen mit einer echten Maus. Niemals das Produkt mocken.
• Audio:
  • Musik stammt von der Quelle, die das Markenprofil nennt, niemals eine neue Generierung, es sei denn, das Profil erlaubt es.
  • Treffer sind ein paar Einschläge und Schläge auf den Synchronisationspunkten.
  • Keine Klick- oder Tipp-Geräusche, es sei denn, das Profil verlangt danach.
• Niemals rendern oder exportieren, wenn nicht in dieser Runde danach gefragt. Nach einer Bearbeitung die Studio-Vorschau übergeben und kein Rendering anbieten. Wenn gefragt: 4K, gleicher Dateiname, überschreiben.
• Ideen für Experimente gehen in eine duplizierte Komposition. Beweise, dass die genehmigte unverändert ist, indem du Standbilder vergleichst. „Alles reparieren“ oder „X entfernen“ geht direkt in die Hauptversion.
• Der Benutzer zeigt auf Frames („entferne 3150“). Rendere diesen Frame und benenne den Shot, bevor du etwas änderst.

Timing-System (leicht zu brechen)

Alle in src/Refreshed.tsx:

• Takt.
  • BPM des Bettes. SLOW = 2: Die Geschichte läuft mit halber Musikgeschwindigkeit. Lokales useCurrentFrame() gibt verlangsamte Frames zurück.
  • T = ein Story-Beat. b(n) = Beat n, auf halbe Beats gerastert: b(0.25) ist kein Viertel, verwende T / 4.
  • real(n) = b(n) * SLOW = der Film-Frame von Beat n.
• ramp(f, from, to, ease) ist die einzige Möglichkeit zu animieren. Es rastet from/to auf das T / 8-Raster ein und gibt 1 zurück, wenn sie zusammenfallen. Niemals 0-1-Brüche übergeben; verwende clamp01((x - a) / (b - a)).
• Shots. SHOTS = [[fromBeat, toBeat, Component]]. Verschiebe eine Grenze zusammen mit jedem Beat-Konstanten innerhalb dieses Shots.
• Sound.
  • HITS = Soundeffekte auf Beats.
  • BED_FROM = Start-Offset in den Track. BED_VOL, mit einem volume-Callback für Ducking.
• Kick. KickBump pulsiert den Frame pro Kick bis zu den Looks. STILL = Beat-Bereiche ohne Puls.
• Synchronisationspunkte sind das Rückgrat: Jede große Änderung sitzt auf einem Treffer. Einen zu verschieben bedeutet, die Shots darum herum neu zu setzen.
• Neuer Track: python3 scripts/beat.py <track.wav> gibt Tempo, Phase des ersten Beats und den Drop aus. Setze BPM und BED_FROM, setze dann die Synchronisationspunkte auf seine Betonungen.

Anpassen der Vorlage an eine Marke

Ersetzen	Wo
Logo-Pfade (Ring, innere Form, führendes Element), die Mittellinie und der Strich der Form, Buchstaben und Positionen des Schriftzugs, viewBox	src/logo.tsx (RING_D, U_D, DOT, U_LINE, U_STROKE, LETTERS, LETTER_X, VB, uPoint)
Palette, Schriftart, Tracking	oben in src/Refreshed.tsx (INK, PAPER, LIGHT_INK, DIM, FONT, TRACK) und public/fonts
Zeile und Domain der Marke	LINE, DOMAIN
Website-Aufnahmen	ein Aufnahme-Skript wie scripts/reui/site-object.mjs, das public/cap/site-object/ schreibt
Produktansichten	Aufnahme-Skripte wie scripts/reui/live.mjs, dash.mjs, block-live.mjs. Jedes schreibt einen Screenshot pro Mausschritt plus gemessene Boxen in public/cap/live/<dir>/ und meta.json. Bearbeite dann die NAMES_UI/BLOCK_UI-Einträge und die dir-Vereinigung in WITH_UI
Looks	LOOKS: 3-4 Möglichkeiten, das Zeichen zu zeichnen (als Pfaddaten, Halbton, Konstruktionslinien)
Musik und Treffer	public/audio/, BPM, BED_FROM, HITS

Ein Zeichen mit einer anderen Struktur (kein Punkt, kein Ring) benötigt eigene Construct, Opening und Final. Behalte die Idee: Zeichne es aus seiner echten Geometrie, geführt von einem Element.

Workflow

1. Lese brands/<brand>.md (oder schreibe es). Miss das Logo-SVG und die Website; sammle die wörtlichen Zeilen der Marke.
2. Neuer Film:
   • cp -R ~/.claude/skills/brand-film/template <project> und npm i.
   • Lege das Bett in public/audio/ ab.
   • Aufnahme-Skripte laden Playwright aus dem Projektordner (npm i -D playwright) oder aus dem Ordner in PLAYWRIGHT_FROM.
3. Aufnahme von Website und Produkt mit einer echten Maus. Sichere meta.json vor einer erneuten Aufnahme. Wähle Produktansichten, die sich voneinander unterscheiden, und ziehe etwas Reales; niemals eine Hover-Tour.
4. Bearbeite nur das, was die Marke ändert (Tabelle oben). Behalte die Helfer (Flight, Wipe, Dim, Lead, Disc, Live, LiveRun).
5. Prüfen.
   • npx tsc --noEmit. Nur TS6192 bei ungenutzten Importen ist akzeptabel.
   • Aus dem Projektordner: ~/.claude/skills/brand-film/scripts/qa.sh <scratch>/q1 0.4 <frames...>, dann sheet.jpg lesen.
   • Beispiele für jeden Shot, beide Frames jedes Übergangs, jeden Synchronisations-Frame und das Ende.
   • Lege dein Blatt neben references/reui-frames/sheet.jpg. Alles, was spärlicher, lauter oder überfüllter ist als der entsprechende Shot der Vorlage, ist ein Befund.
   • Einzelne Standbilder können flackern; rendere eines neu, bevor du es korrigierst.
6. Review (immer, vor der ersten Übergabe eines neuen Schnitts):
   • Starte einen Unteragenten mit dem Briefing in references/review.md. Es bekommt den Code, nicht deine Schlussfolgerungen.
   • Es gibt eine Rangliste der Schwachstellen mit Frames und einer „Nicht anfassen“-Liste zurück.
   • Überprüfe seine wichtigsten Befunde in den Frames selbst und verwerfe alles, was die Frames nicht zeigen.
   • Zeige dem Benutzer die kurze Rangliste und frage, was repariert werden soll, es sei denn, er hat „alles reparieren“ gesagt.
   • Überprüfe die reparierten Frames erneut. Mache niemals rückgängig, was dem Benutzer gefallen hat (Markenprofil).
7. Vorschau im Remotion Studio (http://localhost:<port>/Refreshed). Gib die Vorschau weiter, kein Rendering.
8. Rendern (nur wenn gefragt): npx remotion render src/index.ts Refreshed out/<name>.mp4 --scale=2 --codec=h264 --crf=16 --pixel-format=yuv420p --overwrite --log=error im Hintergrund. Dann ffprobe: 3840x2160, 60 fps, Frame-Anzahl, Audiostream.

Jede Runde abschließen mit

Was sich geändert hat (nach Frame), was nicht geprüft wurde (Bewegung und Ton zeigen sich nie in Standbildern), und ob das gerenderte mp4 veraltet ist.