Communitygithub.com

Papercut Storyboard

Erstellt ein detailliertes Storyboard aus einem Papercut-Skript, bevor Code geschrieben wird. Definiert Kamera- und Schnitt-Tabelle, Szenenblöcke mit Frame-Events, SFX-Plan und Proof-Beat.

Was ist Papercut Storyboard?

Das Papercut Storyboard ist das zentrale Planungswerkzeug für animierte Papercut-Erklärvideos. Es erstellt für jede Szene eine präzise Kamera- und Schnitt-Tabelle, die sicherstellt, dass die nachgelagerten Szenen-Agenten die richtigen Kamerafahrten und Übergänge verwenden, anstatt eigene zu erfinden. Das Skill unterstützt eine breite Palette an Kamerabewegungen (wie OrbitCamera, Crane, DollyZoom) und Schnittarten (wie whip, pageTurn, tearAway) aus einem vordefinierten Kit. Jede Szene wird als Block mit frame-genauen Events für jedes betonte Wort, Ambient-Animationen, SFX und einem Proof-Beat beschrieben. Das Storyboard wird als Markdown-Datei (STORYBOARD.md) ausgegeben, die direkt von `motion-build` weiterverarbeitet werden kann, um `episode.json` und das finale Projekt zu generieren. Das Skill ist Teil des Motion Explainer Kits und setzt eine bestimmte Projektstruktur mit `narration/script.json` und `video/STORYBOARD.md` voraus.

Funktioniert mit~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/boytegar/motion-skills/tree/HEAD/skills/motion-storyboard

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Was macht Papercut Storyboard?

Das Storyboard ist der Plan, nach dem jede Szene aufgebaut wird. Es legt für jede Szene die Kamerafahrt und den Schnitt fest, damit der Szenen-Agent diese nicht selbst erfindet. Ein Kurzbefehl wie "CameraPush or your own transform" würde in jeder Szene nur einen einfachen Push oder eine manuelle Zoom-Bewegung erzeugen, und die Kamerafahrten aus dem Kit blieben ungenutzt.

Vorbereitung

  • Installation: Minimal genügt. Wenn eine Bibliothek vorhanden ist, prüfe style/$MOTION_STYLE/remotion/CATALOG.md (Abschnitte "paper/camera.tsx" und "paper/transitions.tsx") für die Props und Einsatzmöglichkeiten jeder Bewegung. Fehlt die Datei oder ist sie veraltet, führe python3 $MOTION_LIB/core/tools/catalog.py aus. Löse $MOTION_LIB aus der Umgebung, sonst aus der Zeile MOTION_LIB= in ~/.config/motion-explainer/config.env, sonst einmalig nachfragen.
  • Benötigt narration/script.json und video/STORYBOARD.md mit dem HOOK-Block und der Aufstellungstabelle (Banner, Set, Requisite, UI-Moment, Maskottchen, Gag pro Zeile). Fehlt etwas: motion-hook und motion-script ausführen.
  • Hintergrundblatt für die Set-Auswahl: style/$MOTION_STYLE/remotion/public/bg/backdrops/_sheet.jpg. Nur das öffnen, was der Schritt benötigt.

1. Globale Regeln

Füge diese am Anfang von STORYBOARD.md unter dem HOOK-Block ein. Palette nach Rolle (Hintergrundfarben pro Set rotieren): $MOTION_LIB/style/$MOTION_STYLE/docs/style-guide.md Abschnitt 5. Schriftarten: Abschnitt 6. Leinwand und Zonen: Abschnitt 4. Eine Feature-Entsperrung, die zu einer erweiterten Metapher passt, kann Abschnitt 12 verwenden.

  • 1080x1920, 30 fps. Banner bei 14-21% Höhe, Bildunterschriftenband 68-80% (verschiebt sich pro Szene, um Gesichter freizuhalten), untere 20% frei.
  • Licht von oben links. Sättigung nur für Charaktere, Bildunterschriften und Signale.

2. Kamera-/Schnitt-Tabelle

Eine Zeile pro Szene, vor den Szenenblöcken. Jede Zeile nennt eine Komponente aus dem Kit paper/camera.tsx und die CutSeries-Art (aus paper/transitions.tsx) für den Schnitt in diese Szene.

SzeneKamera (paper/camera.tsx)Schnitt rein (CutSeries-Art)
S01HookOrbitCamera + Depth, SnapZoom auf ""none
S04NameCrane Anstieg zu tearAway
S09PeakCrabTrack entlang whip
S10CTARackFocus zu TelefontapePull
  • Kameraoptionen: OrbitCamera + Depth, SnapZoom, Crane, CrabTrack, DollyZoom, RackFocus, ForegroundPass, DutchTilt, FocusPulse, FreezeFrame, PullBack, PovMask, TimeRamp, TiltShift, FocusHunt, Handheld und CameraPush (aus paper/kit.tsx). Der Katalogabschnitt paper/camera.tsx sagt, wann welche passt.
  • Schnittoptionen: hard, whip, zoomThrough, pageTurn, tearAway, tapePull, stampCut, infiniteZoom, popUpBook, keyhole, burnAway.
  • Ein einfaches CameraPush ist auf höchstens einem Drittel der Szenen erlaubt.
  • Kopiere die Kamera jeder Zeile in den Kopf ihres Szenenblocks. Die Schnittspalte wird in episode.json eingetragen als "cuts": {"S04Name": {"kind": "tearAway"}} (kein Eintrag bedeutet harter Schnitt), was von motion-build befüllt wird.

3. Szenenblöcke

Ein Block pro Szene, je 1,5-5 s, Schnitte an Satzgrenzen:

## S03: <takt>  (5,6-8,2 s, 78 f)   BANNER: <TAKEAWAY IN GROSSBUCHSTABEN>
Ort/Hg: <weltort + hg-farbe>     Kamera: <camera.tsx-komponente + parameter, aus tabelle>   Schnitt rein: <art>
Besetzung: <wer, accessoires>                       Bildunterschriftenband: y=0,76
| VO wort (betont) | frame | ereignis                                    | bewegungsspezifikation           |
| "<wort>"         | +6    | <requisite tritt ein / zustand wechselt / agiert> | <spring/slide/swap + frames>    |
Ambient: <LED-Blinken, Idle-Bob, Sterne, Bildschirmwellenform>
Boil: Banner + Labels, +-1,5 px alle 2 Frames
SFX: <pop, chime, click...>
  • Erweitere jede Zeile der Aufstellungstabelle zu Frame-genauen Events: eines pro betontem Wort (alle 0,4-0,8 s), Ambient-Bewegung immer aktiv. Frames sind Offsets vom Wort, später gelesen mit cueOf(ID)(word, n).
  • Produkt-UI ist der grobe Nachbau auf einem Papiermonitor oder -laptop mit Fake-Interaktionen (Cursor-Klick, Tippen, Fortschrittsanzeige, Wellenform, Listen-Scroll).
  • Proof: Einmal pro Filmrolle ein echter Screenshot der Quellseite (Browser-Capture via $MOTION_LIB/core/tools/capture.mjs, keine Neuzeichnung), auf eine Papierkarte geklebt, mit einem roten Marker-Kreis, der sich um die Schlüsselzeile zieht. Alles andere bleibt ein grober Papercut-Nachbau.
  • Ein Rückgriff auf ein früheres Set vor dem CTA.

4. Kamera- und Übergangsregeln

  • Jede Szene hat eine Bewegung. Ein langsamer Push ist die Grundlage. Füge eine parallaxe Orbit-Animation auf beleuchteten Sets für Tiefe hinzu, einen Punch-In oder Snap-Zoom auf dem betonten Wort bei Zahlen und Witzen, einen Vordergrunddurchlauf (verschwommenes Papierobjekt vor der Linse) oder Rack-Fokus, einen Pull-Back zur Größenverhältnis-Enthüllung und einen Freeze-Frame mit Label auf dem kämpfenden-Maskottchen-Takt.
  • Meist harte Schnitte beim Bannerwechsel. Ein Whip-Pan mit Bewegungsunschärfe bei 2-3 Themenwechseln, ein Zoom-Through beim "Betreten" eines Bildschirms, einer Tür oder eines Spiegels, höchstens ein Page-Turn oder Tear pro Filmrolle (beim Catch oder einem Vorher/Nachher-Kontrast), und der Tape-Pull in den CTA (ein einfacher Kraftstreifen, mit optionalem label zum Bedrucken mit einem Wort).
  • Der Ausschnitt aus dem Hook trägt Bewegung durch ihn hindurch. Wende die Regel aus motion-hook auf S01 und S02 an.
  • Übergänge dauern 6-12 Frames, jeder mit eigenem SFX (whip, zoom, page-flip, rip, tape-peel).
  • In einem Bibliotheksprojekt: Verkette Szenen mit der Kit-Übergangsserie, die jeden Szenenstart auf seinem plan.json-Frame hält, sodass die Stimme synchron bleibt.

5. SFX-Plan

  • Luftgeräusche (whoosh, slide, whip, zoom) zusammen: höchstens eines alle 2,5 s Filmrolle. cues.py gibt einen Hinweis darüber aus. Zur Einordnung: 12 in 33 s sind in Ordnung, 24 in 26 s wirken störend.
  • Auftritte erhalten Kontaktgeräusche (pop, thud, stamp) oder Stille. Zähle sie in tools/cues.json vor dem Audio-Rendering.
  • Benenne SFX aus $MOTION_LIB/core/audio/CATALOG.md in der SFX:-Zeile jedes Blocks. Szenen-Agenten schreiben die echten Zeilen in tools/cue_sheet.d/<Scene>.json.
  • Wähle das Hintergrund-Preset (episode.json "bed") und setze cutSfx passend zu den Schnittarten: tearAway rip, tapePull tape-peel.

Qualitätssicherung

  • Jede Szene hat eine Kamera und einen Schnitt rein, und ein einfaches CameraPush wird auf höchstens einem Drittel davon verwendet.

  • Jedes betonte Wort hat ein Ereignis; Ambient-Bewegung ist aufgeführt.

  • Ein Proof-Beat, ein Rückgriff, der Tape-Pull oder Whip in den CTA.

  • Höchstens ein Page-Turn oder Tear; Luftgeräusche im Budget.

  • Benenne die Antizipation und den einen übertriebenen Takt in der Ereignistabelle jedes Szenenblocks. Die 12 Prinzipien, abgebildet auf Kit-Komponenten, sind in $MOTION_LIB/style/$MOTION_STYLE/docs/motion-principles.md.

Übergabe

Als Nächstes: motion-build, das das Projekt einrichtet und die Kamera-/Schnitt-Tabelle sowie die Szenengrenzen in episode.json umwandelt. Es liest STORYBOARD.md und narration/script.json. Der Timing-Abschnitt von STORYBOARD.md wird später nach der Sprachaufnahme generiert, also lasse ihn weg.

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

Verwandte Skills