weilanx-claude-videos

Explainer videos written entirely in code, plus Claude Code skills that turn a topic into a finished episode.

Remotion + React + SVG visuals, procedurally synthesized sound, animations locked to subtitles or music beats. Distill a style from reference videos, then make an episode in one shot.

English · 简体中文

• Overview
• Style Gallery
• Features
• Quick Start
• Workflow Skills
• Using the Skills
• What Is Not Included
• Making a New Episode
• Project Map
• Agent Quickstart
• License

weilanx-claude-videos is a Remotion project for making short explainer videos (mostly in Chinese) about AI, tech history, science, game theory, FPS games and ancient China. Nothing is drawn in an editor: characters, props, backgrounds, charts, subtitles and sound effects are all generated by code. Voice-over episodes need a voice recording and its subtitles; music-only episodes need just a music track.

The repository contains a reusable component library with eight style kits, a style library, an audio synthesis pipeline, eight Claude Code workflow skills, and the full source of 50+ episodes as worked examples.

Every frame below is rendered by code from this repository. Each style has a recipe card under styles/我的风格/ and reusable components under src/library/.

Black-gold glow · 16:9 · music-only Warm smoke on near-black, gold particles forming titles, neon payoff matrices, spotlit figures, bilingual captions. Kit: src/library/blackgold/ · Skill: blackgold-video · Sample: ep36	Tactical HUD · 16:9 · music-only Game HUD frame, low-poly 3D range replaying the moment, glowing charts, red-crack death screens. Kit: src/library/tactical/ · Skill: fps-video · Samples: ep25–ep51
Lamplight history · 16:9 · music-only Warm night, firelight, pictogram figures, a perspective city lighting up cell by cell, scroll-style statutes. Kit: src/library/lamplight/ · Skill: lamplight-video · Samples: ep28, ep30, ep34, ep41, ep46	Warm-paper desk · 16:9 · voice-over Dotted warm paper, white window cards, step bar, a pixel mascot and an optional host camera. Kit: src/library/warm-desk/ · Skill: desk-video · Samples: ep26, ep27
Halftone case file · 16:9 Old paper or navy night with gradient halftone, misregistered bold serif type, stamps slamming down. Kit: src/library/halftone/ · Preview: library-halftone	Editor room · 16:9 One-take software UI: group chat on the left, canvas in the middle, geometric collaborators dragging clips on the timeline. Kit: src/library/editor-room/ · Preview: library-editor-room
Gilded archive · 16:9 Near-black stage, gold line charts, serif type, year headers and citation seals. Kit: src/library/gilded/ · Preview: library-gilded	Gilded archive · music-only short · 16:9 No voice-over: bilingual captions and an anchor word that lands on the music's downbeat. Example: ep23-wheat-chessboard
Vox timeline scroll · 16:9 Old-paper desk, a timeline ruler with swim lanes, clippings and halftone photos pinned to years. Examples: ep18–ep20	Vox hard-cut collage · 16:9 Black-card A-roll with big type, hard cuts to real footage pinned on the desk (footage not included). Examples: ep21, ep22
Pixel hand-drawn studio · 16:9 Pixel host, thin-line hand-drawn cards, studio A-roll + B-roll. Examples: ep03, ep04	Vector hand-drawn Vector buddy with mouth and accessories, doodle editor UI. Examples: ep00-demo–ep02
Pixel sticker · 3:4 portrait Pixel characters, sticker-style type with white outline and hard shadow, floating doodle background. Examples: ep05–ep17

Recipe cards and scene code for 35 art styles, from cave painting to vaporwave, each with a preview — see styles/艺术风格/. They run on the Canvas engine of huashu-art-motion (MIT) and can be ported into Remotion components.

Explainer-video grammars (3Blue1Brown-like math, Kurzgesagt-like illustration, whiteboard, keynote, finance charts, Vox, storytime, kinetic type, presenter) with grammar cards and demo code — see styles/解说语法/.

• Frame-pure animation — every component computes its look from the frame number; randomness uses a seeded rand(seed), so renders are deterministic.
• Subtitle-driven timing — makeCues turns an SRT into helpers like cf(n) (frame where sentence n starts) and cw(n, 'word') (frame where a word is spoken). Re-record the voice-over, re-import the SRT, and every animation re-aligns.
• Character library — vector or pixel-art buddy (Char), with skins, accessories, expressions and walking/arm animations, switched via a CharStyle context.
• Multiple looks — black-gold glow, tactical HUD, lamplight history, warm-paper desk, gilded archive, halftone, editor room, pixel sticker, pixel hand-drawn, vector hand-drawn, and a Vox-style collage/timeline kit. See the Style Gallery.
• Beat-locked music-only shorts — one timeline.ts per episode holds the bar grid, hit frames, bilingual captions, shots and SFX; climaxes land on the track's measured downbeats.
• One-shot workflow skills — from a topic to an exported video, cover, post copy and subtitle documents, with automated frame and loudness QA.
• Procedural audio — 14 synthesized sound effects plus per-episode background music that automatically ducks under the voice.
• Music library — audio/music.mjs cuts a section of any track in public/music/, fades it and normalizes loudness; music-only shorts align their climax to the track's measured downbeat.
• Clean export — renders voice / music / SFX stems separately and remixes them with a limiter to avoid Remotion's internal clipping.
• Style library — 35 art styles and 9 explainer grammars (recipes and scene code) for picking a look before building an episode.

Requires Node.js (developed on v24) and, for exporting, ffmpeg.

git clone https://github.com/Azure12355/weilanx-claude-videos.git
cd weilanx-claude-videos
npm install
npm run audio      # generates shared SFX and the ep00 demo music into public/audio/
npm run studio     # opens Remotion Studio at http://localhost:3000

Open the ep00-demo composition first: it is a self-contained 30-second demo that needs no external assets.

Other useful commands:

npm test                       # vitest
npm run typecheck              # tsc --noUnusedLocals
npx remotion still src/index.ts ep06-context out.jpg --frame=200 --scale=0.4   # render one frame
npm run export -- ep00-demo    # render into the folder printed by: bash scripts/ep-dir.sh ep00-demo out

npm run audio prints errors for episodes whose voice track or music file is missing (see What Is Not Included); the shared SFX and the ep00 music are still generated. To build one episode's audio, run node audio/episodes/<episode-id>.mjs.

.claude/skills/ contains eight Claude Code skills. Open the project in Claude Code and describe what you want; the matching skill is picked up automatically.

Bundled scripts include analyze.py and strip.py (video breakdown), beats.py (tempo, bar grid and downbeat detection), qa.mjs (frame and loudness self-check for the one-shot skills), subtitle-document generators and commons.py (Wikimedia Commons search with license info).

Some steps originally used the author's private tools (voice clone, speech recognition, text-to-image cover, title formula library). Every skill has a 依赖（开源版说明） section saying exactly what to swap in; the one-shot black-gold workflow needs nothing private except a music track.

• Node.js (developed on v24), npm install done
• ffmpeg for export and loudness checks
• uv for the Python helper scripts (they run as uv run --with numpy --with pillow python …)
• Claude Code opened at the repository root, so it loads CLAUDE.md → AGENTS.md and the skills in .claude/skills/
• Fonts: the newer styles use system CJK fonts (Songti SC, PingFang SC on macOS, falling back to Noto Serif SC / Noto Sans SC). They render best on macOS.

The rule is match the style one-to-one, never copy the content: components are rewritten from scratch, example content is made up, and no frame, caption, title or watermark of the original goes into the repository.

1. Put one or more reference videos in template/ (git-ignored; they are someone else's work).
2. In Claude Code, say something like: "Distill the style of template/ref.mp4 into a new kit."
3. The skill runs a machine breakdown per video (shots, keyframes, contact sheets, palette and accent colors, motion intensity, beats), writing a report to materials/00-公共/风格蒸馏/<style-id>/.
4. It then cuts motion strips around key moments, writes a recipe card under styles/我的风格/<name>/, builds src/library/<style-id>/, a library-<style-id> preview composition, and registers everything in src/library/README.md and styles/README.md.
5. It compares the preview with the reference for at least two rounds before handing over. Open http://localhost:3000/library-<style-id> in Studio to review.

You can also run the breakdown by hand:

uv run --with numpy --with pillow python .claude/skills/weilanx-creator-distill-video/scripts/analyze.py \
  template/ref.mp4 --out materials/00-公共/风格蒸馏/<style-id>/<video-name>

The one-shot skills (blackgold, fps) take a topic and deliver a finished episode without stopping for confirmation: research → anchor word and storyboard → timeline.ts locked to the music's beats → sound effects → scenes → tests → automatic frame and loudness self-check (fixing issues for up to three rounds) → export → 3:4 cover, post copy and subtitle documents.

1. Provide a music track. The samples are cut to we-never, a track the author is licensed to use; the mp3 is not distributed. Put your own licensed track in public/music/, register it in TRACKS in audio/music.mjs, and measure it:

   uv run --with numpy python .claude/skills/weilanx-creator-gilded-video/scripts/beats.py public/music/<track>.mp3 --to 40

   Then point the episode's timeline.ts grid and hit frames at the measured beats (the skill does this if you tell it which track to use).

2. Give a topic in Claude Code, e.g. "Make a black-gold episode on the boxed pigs game" or "Make an FPS episode: why do I always lose the first duel". Give the topic explicitly: the author's topic pools live in materials/ and are not in the repository.

3. The skill picks the next episode ID, creates the material and output folders with scripts/ep-dir.sh, and starts from the sample episode's code (ep36-boxed-pigs for black-gold, the latest tactical episode for FPS) instead of a blank file.

4. Find the deliverables in the output folder (bash scripts/ep-dir.sh <episode-id> out): <episode-id>.mp4, 封面-3x4.png, 发布文案.md, 字幕稿.md and, for black-gold, 字幕.srt.

The cover for black-gold is rendered by code (CoverTall.tsx); the FPS skill generates its cover with a text-to-image model, which you can replace with any image tool or a rendered frame.

To protect the author's privacy and third-party rights, the following are intentionally not in this repository:

The visuals, captions, timelines and scene code of every episode are included, so you can study or adapt them and plug in your own voice and music.

Prefer the workflow skills. To do it by hand for a voice-over episode:

1. Create the folders: bash scripts/ep-dir.sh epXX-topic materials --new <style-folder> <short-title>, transcribe your voice-over into an SRT file and put it there.
2. Normalize the voice to about −16 LUFS and save it as public/audio/epXX-topic/voice.wav (48 kHz, stereo, 16-bit).
3. Import subtitles: npm run cues -- <materials-folder>/字幕.srt src/episodes/epXX-topic/cues.json.
4. Add audio/episodes/epXX-topic.mjs (music sections) and run node audio/episodes/epXX-topic.mjs.
5. Create src/episodes/epXX-topic/ — use ep02-llm (portrait) or ep03-cc (landscape) as a template — register it in src/Root.tsx, and add tests/episodes/epXX-topic.test.ts.
6. Check frames with npx remotion still, preview in Studio, then npm run export -- epXX-topic.

Music-only episodes use a single timeline.ts per episode instead of subtitles; see the black-gold, FPS, lamplight and gilded skills.

Produce deterministic explainer videos where every visual is a pure function of the frame number and is anchored to subtitle timing. Non-goals: a general video editor, or hosting the author's voice recordings and footage.

• Engineering conventions and pipeline: AGENTS.md
• Component catalogue: src/library/README.md
• Compositions: src/Root.tsx
• Tests: tests/

1. Read AGENTS.md and the library README.
2. Change scenes or library components; never import src/episodes/ from src/library/.
3. Run npm test and npm run typecheck.
4. Verify visuals with npx remotion still ... --scale=0.4 instead of rendering the full video.

npm install
npm test
npm run typecheck
npm run studio

• Never commit voice recordings, rendered videos, real footage, music files, reference videos, .env files or secrets.
• No Math.random(), CSS animations or wall-clock time in components.
• Only add third-party media whose license allows redistribution, and record its source.

Code is released under the MIT License.

Third-party material:

• Fonts in public/fonts/ are under the SIL Open Font License 1.1 — see public/fonts/LICENSES.md. Other styles reference system fonts that are not bundled.
• No music is bundled. we-never, referenced by the music-only samples, is licensed to the author for their own use and is not redistributed here; bring your own licensed track.
• Styles distilled from reference videos reuse only visual grammar (palette, layout, motion, rhythm). All components and example content are original; no frames, captions or watermarks from the references are included.
• Art styles and explainer grammars in styles/ are adapted from alchaincyf/huashu-art-motion (MIT) — see styles/LICENSE-huashu-art-motion.
• Product names and logos that appear in episodes belong to their respective owners and are used for commentary.