Communitygithub.com

Uerdong/remotion-explainer-video

A complete pipeline for producing Chinese educational animation feature videos using Remotion, covering topic breakdown, narration compression, TTS dubbing, SRT subtitles, BGM beat analysis and snapping, scene cut snapping to beats, code-generated sound effects, TSX project setup, still frame self-checks, final rendering with dual-version delivery, and release materials like cover art, description, and title.

What is remotion-explainer-video?

This skill provides a comprehensive, step-by-step pipeline for creating educational animation videos (横屏 MG videos) in Chinese using Remotion. It is designed for developers and AI agents who need to produce professional explainer videos with precise synchronization between narration, subtitles, background music (BGM), sound effects (SFX), and visual cuts. The pipeline enforces deterministic rendering, a single source of truth for the timeline, and rigorous self-checking via still frames before full rendering. It handles the entire workflow from topic decomposition and script compression (e.g., 50-70 characters per segment) to TTS dubbing with measured real-time durations, BPM beat detection and snapping using librosa (with fallback for half-beat errors), SRT subtitle generation, code-composed SFX pinned to beats, and final delivery of two video versions (with and without BGM) plus release materials like cover images and platform-optimized descriptions. The skill is platform-agnostic (works with Claude Code, Cursor, Codex) and includes concrete conflict-resolution rules (e.g., always compress script before extending duration, trust measured BPM over user-provided values, separate visual style from cover design for platform logic). It references three detailed playbooks for pipeline commands, model selection, Remotion conventions, and restyling existing videos.

Works with~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Uerdong/remotion-explainer-video/tree/HEAD/remotion-explainer-video

Ask in your favorite AI

Open a new chat with this agent skill pre-loaded.

Documentation

Chinese Educational Animation (Remotion Full Pipeline)

Execute the ten steps in order. Each step's output is the input for the next; skipping steps and backfilling is prohibited.

Ten Iron Rules

  1. Duration is determined by dubbing, not by script. The reference script is just intent. First estimate the total length based on the measured speaking rate (Chinese TTS ≈ 3.3 characters/second). If it exceeds the target duration, compress the text and convert to spoken language, then synthesize and measure the real duration segment by segment.
  2. BPM must be measured empirically; never trust user- or reference-provided numbers. librosa often reports 104 BPM as 51.7 (halved). Use autocorrelation or alternative onset parameters for independent verification, and select the value that matches the listening experience.
  3. All cut points snap to beats. Segment boundary = the end time of that segment's dubbing snapped upward to the nearest beat. Frame number = round(beat * (60/BPM) * FPS), hardcoded into the source; never computed at runtime.
  4. Deterministic rendering. Prohibit Date.now() and Math.random(); derive all oscillations using Math.sin(frame). Any given frame must render identically across any number of renders.
  5. Single source of truth for the timeline. Segment boundaries, frame numbers, dubbing offsets, and SFX anchor frames exist in exactly one timeline.ts. Changing script word count → re-run the generation script → synchronize TS; never manually edit two places.
  6. Subtitle line breaks by punctuation into boxes. First split clauses by ,;:。, then box them. Use a fixed pixel container for line width (e.g., width: 1460 + whiteSpace: "pre"); do not let maxWidth let content determine the container.
  7. Three-layer audio separation: BGM, voice, and SFX each have independent levels. Voice starts at 0.8, BGM at 0.24. After rendering, measure the peak; > 0.95 indicates clipping risk.
  8. Self-check each shot with a still frame. Use npx remotion still to review composition frame by frame. Rendering the full video without checking stills is equivalent to rework.
  9. Three hard constraints on Windows: --props must pass a file (e.g., --props=props-nobgm.json); inline JSON will have quotes stripped by the shell. For ffmpeg 9, use -fps_mode passthrough instead of -vsync. If style changes in TSX do not take effect, first delete node_modules\.cache.
  10. Deliver first, then evaluate. Present already-rendered videos and generated images to the user as-is. Record issues and explain them clearly; do not re-generate without authorization.

Ten-Step Pipeline

#StepKey ActionsOutput
1Topic DecompositionDefine the knowledge chain, target duration, aspect ratio, audience toneOne-sentence topic + duration/aspect ratio agreement
2Narration ScriptCompress to target word count following "Hook → Model → Deduction → Conclusion → Implication", convert to spoken languageSegmented script (≈6 segments, 50–70 characters each)
3DubbingSynthesize each segment independently with same voice and parameters; measure real duration and f0 per segments1..sn.wav + segment duration table
4SubtitlesGenerate SRT from segment durations, same source as scene cutssubtitles.srt
5BGMSelect or self-compose a track, measure BPM and beat table; replace if unsuitablebgm.wav + bgm.json (beats_sec)
6Timeline RepositioningSnap segment boundaries to beats, calculate total frame counttimeline.json + timeline.ts
7Sound EffectsAssign a sound to each key action, code-compose, pin to beatssfx/*.wav + anchor frame table
8Visual EngineeringTheme / components / timeline + per-segment scene componentsRemotion project
9Self-Check RenderingStill frames per segment → full video → measure peaksout/*.mp4, QA stills
10Release MaterialsCover art (code-rendered or design tool), title, description, topicsCover image + release-copy.md

Conflict Resolution Decisions

ConflictResolution
Script word count vs. target duration conflictCompress the script, do not change the duration. If compression ratio > 1.3, convert to short spoken sentences while preserving all knowledge points.
User-provided BPM/duration differs from measured valuesUse measured values and proactively inform the user of the discrepancy (e.g., "Spec says 110 BPM / 58s, measured 104 BPM / 53.65s"), and additionally offer a "re-align to spec" option.
User-specified track style mismatchesFirst measure the track's BPM/spectrum/peak, provide the data, then self-compose a replacement. Disclose the deviation reason upon delivery.
Reference visual style conflicts with cover/platform styleKeep them separate: body follows the user's visual style; cover follows the cover platform's distribution logic. Explain the trade-off.

Delivery Checklist

  • Dual-version final video: with BGM / without BGM (for platform native music libraries); identical frame count and duration
  • SRT subtitles (external, consistent with embedded
  • Delivery notes: final video table, BPM and beat methodology, segment boundary table, beat-aligned point table, script, SFX table, mix levels, project structure, run commands
  • Cover (landscape + target-platform portrait), multiple title options, multiple description versions, topic tags

Reference Files

Related Skills