paper-collage-film

Was macht paper-collage-film?

Ein Collage-Film = eine durchgehende Stop-Motion-Kamerafahrt durch gerissenes Papier, geschnitten zur Musik, endend mit einem Titel, einem Seitenriss zum Logo und einem Call-to-Action. Alles ist Code, außer den fotografischen Ausschnitten. assets/template/ enthält einen vollständigen 10-Sekunden-Film (kaye.creatives YouTube-Launch), der sofort gerendert werden kann – passe ihn an, fang nicht bei null an.

Was Nutzer dieses Skills erwarten (Referenzen/lessons.md enthält die Geschichte)

• Sieh dir zuerst die Referenz an. Öffne jeden gesendeten Link, extrahiere Einzelbilder mit 12 fps, lies die Dokumente. Mehrere Referenzen → finde die, die sie am meisten lieben.
• Technik aus der Referenz, Geschichte von der Marke. Kopiere die Bewegungsgrammatik, niemals die Handlung (kein Erdmännchen-für-Erdmännchen-Mapping).
• Code zuerst; generiere nur Foto-Ausschnitte. Keine generierten Hintergründe, keine Menschen oder KI-Charaktere, es sei denn, es wird danach gefragt, keine Videogenerierung.
• Entscheidungen als gerenderte Dokumente, nicht als Vermutungen: Titelschriftart → tools/font_sheet.sh, Farben → tools/palette_sheet.sh; der Benutzer antwortet mit einer Nummer.
• Schnell und sichtbar: Sende die Schlagzahl-Tabelle, das Ausschnitt-Blatt und einen Entwurf frühzeitig, gib Echtzeit-ETAs an, verwende parallele Agenten (Referenzen/agent_workflow.md).
• Sprich in der Sprache des Benutzers; On-Screen-Text auf Englisch, sofern nicht anders verlangt. Kein Vollbild-Flimmern (Lichtempfindlichkeit).

0 · Aufnahme (frage einmal, in einer Nachricht, nur was du nicht ableiten kannst)

Exakte Marken-/Handle-Schreibweise und jedes On-Screen-Wort · Dauer · Format (siehe unten) · Sprache des Texts (kyrillisch ändert Schriften) · CTA (Abonnieren / Folgen / Besuchen) · Logodatei oder Textlogo · Musik: synthetisiert oder eigener Track · OK, ca. N×2 Credits für Ausschnitte auszugeben.

Format. Die Collage-Layouts sind nur für 1920×1080 gezeichnet (collage.js und scenes.js verwenden absolute Koordinaten). Für ein 9:16-Reel ohne Neulayout: Rendere den 16:9-Film und platziere ihn vollbreit (1080×608) auf einer 1080×1920-Seite zwischen gerissenen Papierbändern, die Titel, Handle und CTA tragen. Ein echtes vertikales Filmformat bedeutet, jede Koordinate neu zu setzen – berechne es als zusätzliche Zeit.

1 · Projekt (1 Min.)

<skill>/scripts/new_project.sh <output_root> <slug>             # neue Marke: Palette aus (ursprüngliche Papierfarben)
<skill>/scripts/new_project.sh <output_root> <slug> --example   # den ausgelieferten kaye.creatives-Film reproduzieren (Nacht-Palette)
cd <project>                                                    # führe jeden folgenden Befehl aus dem Projekt aus (Agenten: jedem Aufruf `cd <project> &&` voranstellen)

Erstellt comp/, audio/score.html, tools/ (kompilierte extract/encode/mux/greenkey), cutouts/, refs/, review/. Benötigt macOS (Swift, AVFoundation, afconvert), Chrome/Brave, Node ≥ 22 (NODE_BIN=/path/to/node erzwingt eine bestimmte Version; falls ein Fallback verlinkt war, export PATH="<project>/tools/bin:$PATH" für direkte node-Aufrufe – tools/*.sh erledigen das selbst), Internet für Google Fonts. Fehlende Ausschnitte werden als beschriftete graue Karten gerendert, daher funktioniert ein Entwurf vor jeglicher Generierung. Das Beispiel lädt: cam_side cam_front car helmet phone plane_front plane_side clap reel laptop headphones midi phone_gimbal cassette cloud_1..4 rocks_a/b/c tree_a/b grass_strip.

2 · Referenz (10–15 Min.)

Lade die Referenz herunter (Pinterest: pin.it auflösen → Pin-Seite → die v1.pinimg.com/videos/…/720w.mp4 oder /mc/720p/ H.264-URL; GIF: Einzelbilder mit ImageIO/Swift aufteilen – kein ffmpeg). tools/extract ref.mp4 refs/f 12 960 0.85, dann Kontaktabzüge mit tools/sheet.mjs (Beschriftungen = frame/12 s; tools/strip.sh nimmt 24 fps an, daher sind seine Beschriftungen halb so lang bei 12 fps-Bildern). ANSCHAUEN. Schreibe refs/analysis.md mit den Überschriften von references/reference_san_diego.md: Schnittzeiten, Bewegungskurven, Palette-Hex-Codes, Schrift-Ähnlichkeiten, Müssen-kopieren-Liste – und ordne jedes Referenzgerät einem CL/CLX-Gerät zu oder markiere es als „neues Gerät"; liste die San-Diego-Geräte, die entfernt werden sollen. Die Referenz des Benutzers überschreibt die folgenden San-Diego-Zahlen.

Bewegungsgrammatik (San-Diego-Messungen – references/reference_san_diego.md)

• Alles auf Zweien (12 Zeichnungen/s): Bewegungszeit q(t) = floor(t*12)/12, 1–2 Pixel Layer-Boil pro Zeichnung.
• Keine harten Schnitte bis zum Logo: Zoom-Durchgänge, Seitenriss, gerissene Wischblende, sechseckiges Loch im Kaleidoskop, Hochkippen hinter einer Streifenrakete.
• Drop-in 3 Zeichnungen (Kante tritt ein -> in der Luft -8° -> landet) + 1 Setz-Zeichnung (1.03→1); Pop-ups in 1–2 Zeichnungen.
• Push in ein Detail: exponentieller Zoom ~1→6× über ~1 s, Zoom-Zentrum lerpt auf das Detail.
• Kaleidoskop: gespiegelte Ringe, keine Rotation, Skalierung verdoppelt sich alle ~0,35–0,38 s; ein wiederholter Sticker nur als ein Ring.
• Titel kommt von oben, Expo-Out über 9 Zeichnungen, kein Überschwingen, weißer Papierumriss + perspektivische Extrusion.
• Seitenriss ~0,42 s mit einer dunklen, sich kräuselnden Rückseite → gerissenes Band mit dem Wortmarke; alternativer Stil-Flicker gehalten 2-1-2-3-2-2 Frames, innerhalb des Bandes.

3 · Geschichte + Schlagzahl-Tabelle (innerhalb von ~15 Min. senden)

Schreibe script.md: Zeit | Musik | Was wir sehen | On-Screen-Text (wortwörtlich), 120 BPM-Gitter (Beat 0,5 s, 24 fps). Wähle die Länge:

10 s (das ausgelieferte Beispiel)

t	Beat
0–1,0	Collage-Seite; ▶ fällt ein (landet 0,5); Kanal-Tag; Cursor drückt ▶ 0,875
1,0	Seite reißt von der Mitte → Welt 1 (F1-Auto durch diagonale Bänder, Mitte 1,75; Helm klatscht 2,0; Tag)
2,5	gerissene Wischblende → Filmkamera, beschleunigter Push ins Objektiv, Papier-Iris 2,9–3,4 (Tag)
3,5–4,5	Kaleidoskop-Ringe, Flyer 4,2/4,3/4,4, sechseckiges Loch → Schreibtisch
4,5–5,5	Schreibtisch: Laptop 4,5, Ausrüstung 4,75/5,0/5,25, Prompt wird getippt, „generieren ✦" 5,15 → Ergebnis
5,5–5,95	Hochkippen, Streifenrakete trägt ▶ weg
6,0	Titel „KAYE / CREATIVES" (Fraunces Black Italic), radialer Ausbruch, Doppeldecker kreuzt
7,5–7,92	Seitenriss → Logo-Band
8,0–8,5	Logo-Flicker innerhalb des Bandes
8,5–10	SUBSCRIBE klatscht, Klick 9,0 → SUBSCRIBED ✓, Glocke 9,15, langsamer Push

6 s Intro (läuft vor jedem Video: kein Riss, kein Schreibtisch, kein CTA): 0–0,5 Held fällt ein · 0,75–1,5 Push in ein Detail, Iris 1,0–1,42 · 1,5–2,5 Kaleidoskop, Flyer 2,17/2,33, Loch 2,33–2,5 · 2,5–2,96 Rakete-Hochkippen · 3,0 Titel (landet 3,75) + Ausbruch · 4,5–4,92 Riss · 5,0–5,5 Band-Flicker · 5,5–6 letzter Schlag + Halten. Score: dur 6, drop 0,5, mid 1,5, build 2,5, vac 2,95, lift 3,0, end 5,5. Logo ≥ 1,0 s auf dem Bildschirm.

15 s Promo (spiegelt die 15 s Referenz): 0–0,5 Held fällt ein · 0,5–2,5 Pop-ups · 2,5–3,5 Push + Iris · 3,5–5,5 Kaleidoskop, Loch 5,33 · 5,5–7,5 Welt 2, Ausbruch angeführt von einem Flyer · 7,5–9,5 Welt 3 / Produktmomente · 9,5–10,5 Rakete · 10,5 Titel (landet 11,25) · 12,5–12,92 Riss · 13,0–13,5 Flicker · 13,5–15 CTA.

30 s: assets/examples/kaye_30s_scenes.js + kaye_30s_score.html (Handy-Werbung, Lösegeldbuchstaben, Thumbnail-Wand).

Neugestaltung für eine andere Marke

Gerät	kaye (YouTube)	z. B. Café
Held fällt ein	▶ Play-Button	Tasse / Bohnenbeutel (CL.sprite + CL.drop)
Pop-ups	Kamera-Requisiten	Croissant, Bohnen
Riss → Welt 1	F1-Auto durch Bänder	Röstertrommel, Bauernhof
Push + Iris	Kameraobjektiv (cam_front)	Crema in der Tasse (Mittelpunkt + Radius in Sprite-Px messen; Iris-Formel in api.md)
Kaleidoskop-Ringe	Autos, Reels	Bohnen, Tassen (ein Ring pro Sticker)
Schreibtisch + Bildschirm	Prompt-UI	Theke + Bestellzettel (CLX.tag / CLX.ransom) – oder weglassen
Rakete	▶ auf Streifen	Tasse auf einer Wolke aus Streifen
Titel / Band	Kanalname / kaye.creatives	Ladenname / Logo oder @Handle
CTA	SUBSCRIBE + Glocke + Cursor	Handle + Adress-Chip (CLX.tag), Öffnungszeiten-Stern (CLX.star)
CLX.play, subscribe, thumb, screen und cursor sind YouTube-Geräte. Hintergründe in collage.js verwenden feste Ausschnitt-Namen (CL.page: grass_strip + rocks_; CL.diag: rocks_ + cassette; CL.cloudsky: cloud_1..4): Die Zero-Code-Neugestaltung besteht darin, Platzhalter unter denselben Namen zu generieren (grass_strip = ein gerissener Streifen Kaffeebohnen, rocks_* = s/w-Halbtonsäcke); andernfalls kopiere pageLayers in scenes.js. Aktualisiere die cuts:-Liste in warm() für neue Namen.

4 · Ausschnitte (5 Min., ~2 Credits pro Stück)

Nur, was Code nicht zeichnen kann – Prompt-Vorlage, das Beispiel-Set und Keying in references/cutouts.md. tools/greenkey keyframes/raw/x.png cutouts/x → Alpha-PNG(s), Multi-Objekt-Blätter werden automatisch geteilt. Rendere ein Prüfblatt auf einem farbigen Hintergrund und sende es. Eine echte Logodatei → cutouts/logo.png, gezeichnet mit CL.sprite innerhalb von drawUnder des Risses; Flicker-Looks = die logoBand Stil-Hintergründe + dieses Sprite. Für ein Textlogo skaliere es min(190, 0,78·W / gemessene Breite).

5 · Bearbeitung im Code

comp/scenes.js ist der Film: COPY (On-Screen-Wörter), Szenenfunktionen (pageScene, f1Scene, camScene, kalDraw, deskScene, titleBg, titleScene, endScene), Übergänge (wipe, ripDraw, tearDone), K.setup({bars}) Punch-Zooms. Wörter außerhalb von COPY: das „PROMPT"/Titel der Prompt-UI (CLX.screen o.title), die Posterglyphen des „Posters"-Flicker-Looks (collage_fx.js) – überprüfe sie. API: references/api.md; geplante Timings und Fallstricke des Beispiels: references/edit_notes_10s.md. Neuzeitlich durch Neuzuordnung der Zeit, nicht durch Bearbeiten von Literalen: Cut(a, b, (ctx, t) => titleScene(ctx, t + (6.0 - a))). Halte Offsets als Vielfache von 1/12 s. Szenen, die einen Nachbarn zeichnen, bewegen sich als ein Block (kalDraw→deskScene via drawNext, titleBg→deskScene vor 71/12, endScene→titleScene/titleBg). Aktualisiere dann K.setup({bars}), die Score-Cues und die Standbildzeiten. Zeiten jenseits der Dauer werden auf den letzten Frame geclamped. Die Titelschriftart lebt an 4 Stellen: dem <link> in comp/index.html (lade EINE Schriftart der Familie), der fonts()-Liste in comp/film.js (sonst werden Sprites mit einem Fallback gebacken), COPY.titleFont und dem <link> von comp/font_sheet.html für Kandidaten. Kyryllischer Text: Ultra, Fraunces, Cinzel, Bevan, Abril Fatface, Shrikhand, Chango, Rye, Lilita One, Bungee, Chewy und Gluten haben kein Kyryllisch – verwende Rubik / Rubik Spray Paint, Unbounded, Yeseva One, Lobster, Playfair Display, Russo One für den Titel und logoBand o.font, und überprüfe die Lösegeld-Chips. Standbilder: node tools/capture.mjs comp/index.html review/st --stills 0.5,1.75,….

6 · Musik

audio/score.html synthetisiert den Score im Browser (keine Samples): Funk-Groove + Papier-Foley (Klapse, Risse, Wusche, Pops, Tippen, Klicks, Glocke), Limiter. Setze window.SCORE_CONFIG {dur, drop, mid, build, vac, lift, end} in seinem ersten <script> aus der Schlagzahl-Tabelle und verschiebe Cues mit window.SCORE_CUES = {…}; lösche die Zeilen in paper() für Ereignisse, die der Film nicht hat (suche CUE.car, CUE.plane, CUE.type, CUE.gen, CUE.subClick, CUE.ding) – das Nullsetzen eines Cues führt zu einem Fehler. Stummschalten von Layern mit ?lv_<name>=0.

node tools/render_audio.mjs "<project>/audio/score.html" audio/score.wav
afconvert -f m4af -d aac -b 256000 audio/score.wav audio/score.m4a
python3 tools/music_window.py audio/score.wav --hits 0.5:0.35,1.0:1.0,6.0:1.0,7.5:0.45,8.5:1.0   # jeder große Hit am lautesten in seinem Fenster
python3 tools/music_window.py audio/score.wav --timeline 0.25

Stattdessen ein eigener Track: python3 tools/music_window.py track.mp3 --len <dur> → ein Fenster auswählen → python3 tools/cut_audio.py track.mp3 <start> <dur> audio/score.m4a → das Bild auf seine Einschläge neu timen (Gitter = der BPM des Tracks). Du kannst Audio nicht hören – überprüfe anhand von Zahlen (references/music_notes_10s.md) und sage dies.

7 · Entwurf → Entscheidungen → Finale

tools/render_film.sh draft                       # ~30 s für 10 s → <slug>_draft.mp4 (+ .frames_draft)
tools/strip.sh .frames_draft review/strip.png 1
tools/font_sheet.sh "LINE1|LINE2"                # nummerierte Titelschriftarten in der echten Bearbeitung und der Palette des Films
tools/palette_sheet.sh 0.75 3.75 6.9 8.75        # jede Palette von comp/grade.js zu Schlüsselbildern (0 = Original)
tools/render_film.sh final audio/score.m4a <slug>_final.mp4   # PNG-Frames, 30 Mbps

Backe die gewählte Palette mit window.PALETTE = '<name>' in comp/index.html (null = Originalfarben). grade.js färbt jedes Pixel neu, einschließlich Fotos und Logo: für Markenfarben füge einen PALS-Eintrag mit den Marken-Hex-Codes in den Rollen (rot → primär) hinzu und überprüfe, ob Produktfotos und das Logo noch echt wirken – oder setze null und bearbeite CL.C / CLX.PAL direkt.

QA vor dem Senden (sieh dir die Frames selbst an)

• Synchronisation: Bildereignisse vs. --hits / --timeline-Spitzen, ≤ 1 Frame.
• Auf Zweien: Frame-Paar-Hashes unterscheiden sich nur bei absichtlichen 1-Frame-Ereignissen.
• Übergänge: keine leeren/springenden Frames; nichts statisch > ~1 s außer Titel-/Logo-Haltezeiten.
• Nichts bedeckt das Heldenobjekt, den Titel, den Button-Label, die URL (Cursor-Pfade!).
• Tags ≥ 36 px auf Papier-Chips, jeder ≥ 0,8 s; Titel ≥ 1,5 s; Logo ≥ 1,5 s (≥ 1,0 s für Filme ≤ 8 s).
• Kein Vollbild-Flicker; Band-Flicker-Helligkeitsschritte nur in eine Richtung. Keine grauen „Ausschnitt fehlt"-Karten übrig.
• Dauer exakt (afinfo), Audio vorhanden, Spitze ≤ −1 dBFS.
• Nur ein Render gleichzeitig pro Projekt (render_film.sh löscht seinen Frames-Ordner).

Dateien

benötigt	wo
gemessene San-Diego-Grammatik, Einstellungen, Palette, Schriftarten	references/reference_san_diego.md
CL / CLX API	references/api.md (+ Header-Kommentare von collage.js / collage_fx.js)
Ausschnitt-Prompts, Beispiel-Set, Keying	references/cutouts.md
Score-Cue-Karte + Messungen	references/music_notes_10s.md
Agenten-Workflow + Aufteilung	references/agent_workflow.md
Bearbeitungshinweise zum 10 s Beispiel	references/edit_notes_10s.md