Sticker Explainer Video

Sticker Explainer Video (Sticker Explainer)

Turn a voiceover script and voice recording into an "investigation board" style explainer video. Visual backbone: a large dark blue-gray board, each scene is a panel on the board, the camera slides along an orange dashed line from one panel to the next; characters are cutout stickers with a white border, locations and objects are photo stickers, information is paper cards and labels with icons; at each new chapter, the video pauses, a mind map pops up, and the next clue lights up.

This skill builds on motion-showreel (ConardLi/garden-skills): it provides the render(t) page convention, frame-by-frame rendering, sound synthesis, and final output checking. First ensure it's installed (npx skills add ConardLi/garden-skills, or copy to ~/.claude/skills/motion-showreel). This skill only adds style, workflow, and Chinese long-form video tools; it does not duplicate its code.

Full example: examples/huang-resignation/ (13 min 43 sec final video, see the repo Release). Commands for each step are in references/workflow.md; scene functions are in references/engine-api.md; visual rules are in references/style.md.

Ask Before Starting (Ask All at Once, Max 4 Questions)

1. Voiceover: Does the user generate it themselves with ElevenLabs (recommended; [serious] [short pause] in the script are labels for v3), or produce a silent version first? For multiple voice segments, ask how to splice them (e.g., "use the short one at the beginning, then attach the long one to match subtitles later").
2. Aspect Ratio: Default 16:9, 1920×1080.
3. People: Default is to only use public domain or CC-licensed photo cutouts (official photos of US government officials are public domain); for people without licensed photos, use only name cards.
4. Subtitles: Default is Chinese, single line, max 14 characters per line.

When the user says "ask me about anything uncertain," ask only the questions that truly change the outcome; do not ask things that can be determined from the recording, code, or common sense.

Workflow

Go by the recording, not the script. Recordings often differ from the provided script (missing sentences, changed words, reordered content). Subtitles and visuals follow the recording, and list the differences in a brief for the user. For chapter positions, if you cannot find the corresponding sentence in the script, choose the closest position in the recording and explain the adjustment.

1. Set up project: export MOTION_SHOWREEL=$(realpath <motion-showreel directory>), then sh scripts/new_project.sh <dir>, place the voice recording in audio/src/, fill in video.config.json. Always use absolute paths for the project.
2. Splice voiceovers (when multiple segments): First use transcribe.py <dir> --take <file> to see sentences and timings for each segment, choose cut points at the pauses between sentences, write them in voice.splice, then splice.py.
3. Transcribe and align: transcribe.py, then align.py. Whisper.cpp's timestamps for a full transcription drift after a few minutes, so the script splits it into ~40-second segments and re-transcribes for accurate timing. Whisper occasionally outputs traditional Chinese characters; the script uses OpenCC to convert them to simplified Chinese. Read timeline/segments.json and add misheard names, pronouns, etc., to fixes, then re-run.
4. Edit pacing: voedit.py. Chapter pauses (7.5 seconds before the first chapter during the overview, 4 seconds for others) and whole-segment speed adjustments (e.g., 1.1× at the beginning) are done here. It only inserts silence and changes speed; it never cuts or reorders sentences. Output is vomap.json; all subsequent timings are converted through it, so changing pacing won't cause misalignment.
5. Subtitles and timeline: timeline.py generates timeline.js. Subtitles are one per screen, max 14 characters (Latin characters count as 0.55 characters), only break between words; names, institutions, amounts, book titles in subtitles.protect are never split.
6. Keyframes: First create 3 keyframes for user style confirmation, then write the full video.
7. Write scenes: In episode.js, write PANELS with element times as V(sentence_number, offset). After each batch of scenes, generate a contact sheet (render.mjs --still … --sheet) to self-check for occlusion.
8. Sound: events.mjs reads the sound effect times registered in the page; use motion-showreel's audio.mjs build score.mjs --raw --out audio/sfx.wav to synthesize sound effects; mix.py mixes audio.
9. Render: build.sh sequentially performs deterministic checks, frame-by-frame rendering, and final output checks (approx. 10 minutes for a 13-min 1080p video). After rendering, spot-check mind maps, subtitles, and photos for occlusion.

User's Repeated Requests (Do This by Default)

• Transitions must be smooth: All scenes are on one board; the camera pans along the clue line, and the main character sticker moves as an actor into the next scene, without cutting.
• Chapter mind maps: At chapter boundaries, the voiceover pauses, the board dims, lines are drawn, nodes turn orange with a scanning box, and completed nodes are checked. On first appearance, do an "overview": branches pop up one by one, then light up the first chapter, before showing the next scene's content.
• Progress bar is placed below the subtitles; each segment between chapters shows the chapter name.
• Use icons and images heavily: Labels and cards have line icons; locations and institutions use photo stickers. Conceptual photos are labeled "illustrative."
• Elements must not block subtitles or the top-left chapter title: The bottom ~200 px is reserved for subtitles; the top-left area (approx. x < 700, y < 120) is for the title; large fonts should not go into these zones.
• Sound effects must not overpower voiceover and music: Mind maps use gentle marimba "pluck" sounds (one pentatonic note per branch during the overview) and a single click sound during activation. Do not use risers, glitches, or similar "tech" sound effects.
• Music: The last track should have a natural ending so it stops exactly at the video's end; the beginning fades in at a chapter pause. At chapter pauses, music is lowered by 6 dB.
• Volume: Use only linear gain. Default: voice −15 LUFS, music −26 LUFS (voice is ~11 dB louder than music); sound effects are ~12 dB lower than voice; peak limit −1.5 dBFS, so the entire video passes the −14 ± 1.5 loudness check. When the user says "lower voice / raise BGM," change levels and music.lufs by dB; if the overall result falls below the check standard, inform the user that this is expected (the example video used −19.3 / −30 as per the author's request).

Facts, Copyright & Safety

• News content events often occur after the model's knowledge cutoff: verify online and cite sources in the ending credits; if the original text cannot be found, add the numbers to a "to-verify list" in the brief for the user.
• Unsubstantiated claims must be labeled visually ("Under investigation," "Denied by [entity]," "Illustrative"); correlation is not evidence. Do not attach labels like "spy" next to anyone's photo.
• Photos: only use public domain or CC-licensed ones; record license information in assets/credits.json and include it in the ending credits. Background music from Pixabay etc., can be used in the final video, but the audio files themselves cannot be redistributed.
• Disk space: Rendering, audio intermediate files, and the final video together require about 1 GB. Check free space first; if insufficient, delete only intermediate files that can be rebuilt. Ask before deleting user files or downloaded models.

Files

sticker-explainer-video/
├── SKILL.md
├── scripts/
│   ├── new_project.sh       Create project (motion-showreel scaffold + this template)
│   ├── cfg.py               Common functions (read video.config.json, ffmpeg, loudness, pause detection)
│   ├── splice.py            Splice multiple voice segments
│   ├── transcribe.py        whisper.cpp two-pass transcription → sentence text + word timings + pauses
│   ├── align.py             Align → timeline/sentences.json
│   ├── voedit.py            Chapter pauses, speed changes → audio/vo-edit.wav + vomap.json
│   ├── timeline.py          Time mapping + subtitle splitting → timeline.js
│   ├── events.mjs           Read sound effect times from the page
│   ├── mix.py               Voice + music + SFX → audio/final.wav
│   └── cutout.swift         Apple Vision portrait cutout (macOS)
├── assets/template/         index.html, engine.js, episode.js (example scenes), score.mjs, video.config.json, fonts
├── references/
│   ├── workflow.md          Commands and checkpoints for each step
│   ├── engine-api.md        Drawing functions and start() parameters for engine.js
│   └── style.md             Color, typography, transition, and sound rules
└── examples/huang-resignation/    Full example (code, config, timeline, photos, voice)