← ClaudeAtlas

demo-assemblylisted

Assembling and rendering a demo video with Remotion and ffmpeg — the timeline, transitions, captions, zoom-to-click, audio ducking, and diagnosing a render that comes out wrong. Use when rendering the final video, customising its look, or fixing timing, black frames or missing audio.
mrieck/demoday-claude-plugin · ★ 3 · AI & Automation · score 76
Install: claude install-skill mrieck/demoday-claude-plugin
# Assembling the video Remotion owns the finished timeline. ffmpeg only prepares inputs (trimming, cropping, normalising). That split is what makes transitions, captions and overlays *on top of* the footage possible in a single deterministic render. ```bash node scripts/render/render.mjs --project demo/<slug> # render node scripts/render/render.mjs --project demo/<slug> --studio # open the editor ``` (`demo/<slug>` is the video's project folder, e.g. `demo/project-overview` — one per video.) The first run copies `remotion-template/` into `demo/<slug>/remotion/` and installs it. **It is never overwritten afterwards**, so any edits the user makes there survive. ## How props reach the renderer `build-props.mjs` turns `demo.json` into props and does three things the renderer should not have to: 1. **Verifies every artifact exists.** A missing clip becomes a clear error rather than a black rectangle. 2. **Inlines the event log and word timings** so components never touch the disk. 3. **Reconciles durations.** Generated video comes back at whatever length the model chose; if a clip is shorter than its scene, the scene is trimmed to the clip rather than freezing on the last frame. Media resolves through `--public-dir <project>`, so `staticFile("clips/x.mp4")` points straight at the pipeline's output. Nothing is copied. ## What the renderer does with the event log `DemoClip` reads the capture's event log and eases the frame toward each click just bef