learning-path-animated-video¶

Turn staged screenshots into a branded walkthrough video.

Area: Foundational
Category: documents
Level: advanced
Input: conversation
Output: document
Setup: install
Roles:

Creates tutorial videos, demo walkthroughs, and training videos from learning path screenshots using Remotion.

How you ask¶

“Create a tutorial video from my learning path screenshots”
“Build an animated demo walkthrough from these screen captures”
“Generate an onboarding video from the learning path stages”

Inputs¶

screenshots — Staged screenshot sequence produced by learning-path-deck; filename order is the walkthrough order.
video-quality — Delivery preset passed to render.sh --video-quality. The choice trades resolution and re-encode CRF against file size, so pick it from where the video will be published. (original | hd | tiny)
request — The walkthrough to build — stage range, aspect ratio, and whether narration is caption-only or caption plus audio.
screenshots — Screenshot sequence staged into public/ so the studio preview shows the same assets a render would use.
request — What is under review — which stage, crop, or timing the preview is meant to settle before a render is paid for.
request — The failure being repaired, including the failing command and its error, so the fix targets the real blocker instead of reinstalling blindly.
screenshots — Current screenshot set; a re-render is only meaningful against the sequence the stale output was built from.
video-quality — Preset for the re-render. Changing it is the usual reason to re-render at all, so state it explicitly rather than inheriting the previous run's value. (original | hd | tiny)
request — What changed since the stale output — timings, captions, aspect ratio, or screenshot set.
source-video — Approved output of the render or rerender route; compression runs only after that render passes visual review.
crf — x264 constant rate factor for the compression pass — raise it to shrink the file, at visible quality cost.
request — The delivery constraint driving compression — target file size or the platform upload limit that the source render exceeds.
project-root — Remotion project directory under the projects root (project.root) that the narration, slideshow, and render commands are run from.
module-data — ChatMessage[] array plus the narration script dict; it drives the slideshow and the TTS pass alike, so both read the same source.
module — Module number selecting the data file, narration folder, and Remotion composition for this run — never mixed across modules.
request — The demo to build — which module, any narration constraints, and whether the MP4 render is deferred.

Outputs¶

Compressed delivery variant written alongside the source render, which is left intact.
Focus and zoom targets regenerated before the studio opens, so the preview reflects current screenshots.
Focus and zoom targets regenerated from the current screenshots; render.sh has no option to reuse a previous map.
One MP3 per non-user message, generated by generate_narration.py; user messages carry a narrator description for the Explain button and produce no audio.
Per-screenshot focus and zoom targets computed by analyze_focus.py; imported by src/Root.tsx at build time.
Re-rendered walkthrough MP4. render.sh regenerates public/focus-map.json and overwrites learning-path.mp4; copy prior artifacts aside before running when they must be retained, and report whether they were preserved.
Remotion Studio dev-server URL and composition list printed for interactive review; no video file is written.
Rendered chat-simulation MP4 with narration audio synced to the message sequence.
Rendered walkthrough MP4 with stage transitions, captions, and focus crops applied at the chosen preset.
Self-contained HTML slideshow with per-message Explain buttons, viewable without Remotion.
Which dependencies were missing, what was installed, and whether scripts/patch-remotion-wsl.sh was applied.
prefer a permanent directory)
public/focus-map.json
{project.root}/public/narration/module-N/