Remotion Code Motion Explainer
Create polished, code-driven Remotion motion explainers from scripts, narration, subtitles, product specifications, reference videos, UI recordings, diagrams, or abstract concepts. Use for product launches, AI demonstrations, UI interactions, algorithms, scientific principles, electrical systems, data flows, architecture, charts, equations, and concepts best expressed with React, SVG, Canvas, WebGL, or Three.js. Prioritize continuous spatial logic, visible cause and effect, precise interaction states, editable parameters, deterministic rendering, and evidence-backed visual QA.
Install
npx skills add vibe-motion/remotion-code-motion-explainer --skill remotion-code-motion-explainergit clone --depth 1 https://github.com/vibe-motion/remotion-code-motion-explainer.git /tmp/remotion-code-motion-explainer
mkdir -p ~/.claude/skills
cp -r /tmp/remotion-code-motion-explainer/. ~/.claude/skills/remotion-code-motion-explainerPersonal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.
From the SKILL.md
# Remotion Code Motion Explainer Build an abstract explanation as one continuous, editable visual system. Show how each concept changes instead of decorating narration with unrelated motion. Created by Bingo (`@DWCD-Bingo`) and maintained under the Vibe Motion organization. ## Load the relevant guidance - Read `references/code-motion-design.md` for every production. - Read `references/motion-production-patterns.md` for every production. - Read `references/production-and-qc.md` before implementation and final delivery. - Read `references/ui-motion-shot-library.md` for UI, product, AI workflow, neon focus, waveform, dashboard, design-tool, or high-fidelity interface work. - Read `references/reference-reconstruction.md` when studying or reproducing a reference video, After Effects render, prototype, or screen recording. - Use `assets/shot-library` as the bundled editable starter library. Search `assets/shot-library/shot-library.json` before designing a new shot. Copy the library into the target project when a reusable component matches the semantic job; do not edit the installed Skill in place. - Consult the installed Remotion documentation or best-practices skill before using unfamiliar APIs. ## Establish the production contract 1. Resolve the approved script or explanation, narration status, subtitle authority, aspect ratio, frame rate, duration, brand system, technical facts, and delivery format.
Details
- Skill name
remotion-code-motion-explainer- Repository
- vibe-motion/remotion-code-motion-explainer
- License
- MIT
- Repo updated
- 28 July 2026
FAQ
What does the Remotion Code Motion Explainer skill do?
Create polished, code-driven Remotion motion explainers from scripts, narration, subtitles, product specifications, reference videos, UI recordings, diagrams, or abstract concepts. Use for product launches, AI demonstrations, UI interactions, algorithms, scientific principles, electrical systems, data flows, architecture, charts, equations, and concepts best expressed with React, SVG, Canvas, WebGL, or Three.js. Prioritize continuous spatial logic, visible cause and effect, precise interaction states, editable parameters, deterministic rendering, and evidence-backed visual QA.
How do I install the Remotion Code Motion Explainer skill?
skills CLI (Claude Code, Cursor, Codex and more): npx skills add vibe-motion/remotion-code-motion-explainer --skill remotion-code-motion-explainer. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.
Is Remotion Code Motion Explainer popular?
It lives in vibe-motion/remotion-code-motion-explainer, which has 39 GitHub stars and 9 forks.
Related skills
Video Illustrator
42axtonliu/video-illustrator
Turn the user's own voice and real assets (book or course covers, screenshots, logos) plus a chosen visual style into a 20–60 second cinematic promo or concept explainer, or turn a passage, article, idea or script into an animated illustration clip, or (explainer mode) make one passage of an existing narrated video visible as a mechanism insert in 16:9 and 9:16, or (episode mode) make a whole researched, narrated science or tech explainer with real footage. One system where every mode runs the same steps and picks its look from one style atlas (a bright 3D diagram by default for explainers and
Text to 3d
44hec-ovi/text-to-3D-skill
Initialize and operate a fully local text-to-3D toolkit that turns one subject description into a textured GLB, at full density or to a triangle budget, and can rig a generated character with a Mixamo-named skeleton and playable clips. Uses FLUX.2 klein through ComfyUI, TRELLIS.2 on Vulkan, and SkinTokens on ROCm. Use for starting the local generation harness, creating 3D models, meshes, GLBs or glTF assets from words, rigging or animating a generated character, preparing game or three.js assets, batching several models, or opening the local preview gallery.
Video to Skill
41Lum1104/video-to-skill
Turn a video, tutorial, playlist, or course into an installed, evidence-grounded course Skill that can teach, give practice and feedback, apply demonstrated methods, and answer reference questions. Use when the user provides video sources and wants reusable learning or operational capability.
Chapter Progress Bar
42serenawangCU/chapter-progress-bar
根据视频字幕（.srt）或时间戳，用 HyperFrames 生成章节进度条透明 overlay， 支持 Chapter、Dash、Minimal、Text Highlight、Customize、Crab 六种视觉风格， 并在 macOS 上交付轻量、剪辑软件兼容的 HEVC Alpha MOV。用于章节划分、进度条设计、 透明视频预览、渲染与交付；除非用户明确要求，否则不要使用 Remotion。
Spec to Readable HTML
43KeMezz/spec-to-readable-html
Transform Markdown or text specifications into human-readable HTML documents with summaries, reordered structure, visual explanations, diagrams, charts, and traceability to the source. Use when asked to convert a spec, requirements document, API spec, product spec, design doc, or technical document into readable HTML, especially when the user wants summarization, restructuring, diagrams, graphs, images, or visual aids rather than a literal Markdown-to-HTML conversion.
Pronounce Word
47anzy-renlab-ai/pronounce
User asks how to pronounce an English word or project/product name ("how to pronounce X", "pronounce X", "X 怎么读", "X 怎么发音", "读一下 X"). Generate audio via the `say-it` CLI so the user actually HEARS the word — three times by default — instead of only writing IPA/syllable hints. The CLI consults a community-maintained pronunciation dictionary (kubectl → "koob-control", GIF → "jif", JSON → "jay-son", ...) and feeds an English-like respelling to the system TTS engine (macOS `say`, Linux `espeak-ng`, or Windows PowerShell) so project names come out the way engineers actually say them. Triggers on a
Browse the most popular Claude skills, all images, video & audio skills, or write your own with the skills generator.