Project Overview and Architecture
XiaoyeCodes/code-animation-prompts is an installable code-animation skill and asset library for Claude Code and OpenAI Codex (verified at commit 2e6396abb45c2d183e91bc5a6583597411860217). The project packages the free code-animation collection curated by Bilibili creator Fuyang Guanzhao, together with community-contributed reference cards, into a standard Agent Skill directory (skills/code-animation-prompts/) containing 341 Markdown style prompts, 196 matched reference stills (193 from the original bundle plus 3 cards K1 to K3 added in PR #1), and 145 text-only references.
On top of the raw library, the repository provides a zero-dependency Python search script (scripts/styles.py), a skill installer (scripts/install_skill.py), a deterministic time-interface starter (assets/starter/index.html), and a Playwright + FFmpeg video exporter (scripts/render_video.py). Coding agents query the lightweight index references/catalog.json to locate target style IDs without loading all 341 prompts into the context window.
Stage 1 · Style Selection and Lightweight Index Lookup: catalog.json & styles.py
- Open the offline style picker HTML under assets/library/ in a browser to select and export style IDs
- Or run scripts/styles.py search / show / list via the Agent to query references/catalog.json
- Read only the selected Markdown prompt and matching JPG still without loading all 341 files
Stage 2 · Parameter Injection and Deterministic Time Interface: window.renderAt
- Extract user topic, duration, aspect ratio (default 1920x1080, 30 fps, 12 s), and caption settings
- Implement visual motion in HTML + Canvas / SVG / CSS / Three.js with seeded randomness
- Expose the window.renderAt time function and disable live timer loops when ?export=1 is present
Stage 3 · Local Headless Frame Capture and MP4 Muxing: render_video.py
- scripts/render_video.py starts a static HTTP server on 127.0.0.1 with a random port to load the page
- Playwright Chromium steps through t = frame / fps frame by frame and pipes PNG screenshots
- FFmpeg encodes libx264 (CRF 18, yuv420p) with optional AAC audio into the final MP4 deliverable
Decouples style lookup, code generation, and headless browser rendering so Playwright and FFmpeg are required only when exporting MP4 files.
Overview of the 10 Series and 341 Style Prompts
The library is organized into 10 series by use case and upstream origin (defined in docs/STYLES.md and references/catalog.json), while assets/library/ also preserves standalone examples B6 (warp, explosion, and reassembly, with 2 MP4s) and X7 (hero comic, with 1 MP4):
| Series ID | Series Name | Style Count | Core Visual and Narrative Focus | Representative IDs and Style Examples |
|---|---|---|---|---|
AG | A–G Code Demos | 26 | Typography, particles, lines and ink, light and weather, shapes and paper, explainers, textures | A1 Character Rain, B2 Firefly Dust, B3 Particle Assembly, C1 Ink Wash, F1 Chart Growth, G2 Signal Glitch |
M | Motion Styles | 40 | Full-video movement pacing, transition editing, and narrative structure | M1 Whiteboard Explainer, M8 Talking-Head Captions, M18 Math & Science Explainer, M23 Universal Explainer Template |
K | Cartoon Styles | 38 | Character design and flat illustration visual languages | K1 Flat Vector, K2 Chibi, K3 Kawaii, K13 Comic Halftone, K15 Rubber Hose 1930, K25 Pixar-Style 3D |
Z | Chinese Styles | 15 | Traditional ink wash, gongbi brushwork, paper-cut, shadow puppetry, and Dunhuang murals | Z1 Ink Wash, Z2 Gongbi, Z5 Paper-Cut, Z7 Shadow Puppet, Z8 Dunhuang, Z9 Blue-and-White Porcelain, Z12 Calligraphy |
H | Ready Layouts | 12 | Editorial color palettes paired with coordinated typography systems | H1 Biennale Yellow, H2 BlockFrame, H8 Cobalt Grid, H12 Editorial Forest |
L | Lemo-Opuscar | 59 | Multi-genre editorial, data, and fine-art styles with implementation guides (MIT) | L1 Caption News, L10 Engineering Comparison Wall, L14 Exploded View, L28 Risograph Screenprint |
V | mg-styles-15 | 15 | Motion graphics styles derived from Vincentwei1021/mg-styles-15 (MIT) | Covers 15 motion-design prompts including flat vector, isometric, Bauhaus construction, and cyberpunk HUD |
X | code-video | 31 | Code-driven video styles derived from Bae-ChangHyun/code-video (MIT) | X7 Hero Comic and high-impact storyboard and code-driven visual templates |
R | Reference Studies | 7 | Cyberpunk cityscapes and comic visual references recreated in code | R1 Neon Rain Night, R3 American Comic, R5 Pixel Cyberpunk, R6 Eastern Cyberpunk |
O | 98 Oscar Films | 98 | Classic cinema color grading, lighting, and framing references organized from source notes | Covers 98 film color palettes and camera-language text references |
Environment Requirements and Installation
Installing the skill and searching the style catalog requires only Git and Python 3.10 (or later, standard library only). Cloning the repository with reference stills and sample videos downloads approximately 75 MiB.
Step 1: Clone the Repository and Run the Skill Installer
scripts/install_skill.py installs into Codex (~/.agents/skills/code-animation-prompts), Claude Code (~/.claude/skills/code-animation-prompts), or both 2 environments (--target both), and supports --scope project --project-dir <path> for project-scoped installation:
git clone https://github.com/XiaoyeCodes/code-animation-prompts.git
cd code-animation-prompts
# Preview target paths without writing files
python scripts/install_skill.py --target both --dry-run
# Install to Claude Code or Codex user skill directory
python scripts/install_skill.py --target claude
python scripts/install_skill.py --target codexStep 2: Verify Lightweight Catalog Search and Prompt Retrieval
After installation, run scripts/styles.py inside the installed skill directory to verify catalog filtering and prompt inspection:
python ~/.claude/skills/code-animation-prompts/scripts/styles.py list --series Z --limit 5
python ~/.claude/skills/code-animation-prompts/scripts/styles.py show B3Step 3: Install Optional HTML-to-MP4 Rendering Dependencies
Install Playwright, Chromium, and FFmpeg only when using scripts/render_video.py to export deterministic HTML animations to MP4 video:
python -m pip install playwright
python -m playwright install chromium
ffmpeg -versionCore Skills and Toolchain
The repository includes 6 core modules for offline visual browsing, CLI lookup, Agent Skill instructions, and headless browser rendering.
Phase 01 · One-Click Import
prompts/one-click-import.md
Ready-to-paste import prompt for Claude Code or Codex to clone, install, and verify
Paste the prompt into a coding agent with local file and terminal access to inspect directories, run install_skill.py, verify styles.py queries, and report invocation examples.
Phase 02 · Offline Style Picker
skills/code-animation-prompts/assets/library/
Offline browser picker with keyword search, series filters, still zoom, and list export
Open the style picker HTML under assets/library/ in Chrome or Edge to browse 196 stills and 341 entries offline, check candidate styles, and copy the selected ID list for your AI assistant.
Phase 03 · Catalog Search CLI
python scripts/styles.py search|show|list
Lightweight JSON catalog search CLI that avoids loading all prompts into context
Queries references/catalog.json across ID, name, category, tags, and use cases, supporting --series (AG/M/K/Z/H/L/V/X/R/O), --limit 20, and --json structured output.
Phase 04 · Agent Skill Workflow
/code-animation-prompts · $code-animation-prompts
Production workflow separating primary art style, motion structure, and layout roles
Defined in SKILL.md, instructing agents to query the catalog first, read selected prompts, fill template placeholders, centralize editable parameters, and inspect start, middle, end, and transition frames.
Phase 05 · Deterministic HTML Renderer
python scripts/render_video.py <html_path> --output <mp4_path>
Frame-by-frame MP4 exporter built on the window.renderAt time function and Playwright Chromium
Starts a local HTTP server, appends ?export=1 to stop live animation loops, captures frames at t = frame / fps, and muxes H.264 MP4 output with optional --audio tracks via FFmpeg.
Phase 06 · Baseline Integrity Validator
python scripts/ build_catalog.py & validate_repo.py
Maintenance scripts that rebuild the catalog index and verify 555 baseline SHA-256 hashes
Extracts metadata from the offline picker to regenerate references/catalog.json and docs/STYLES.md, and validates docs/source-manifest.json against references/library-changes.json.
scripts/styles.py and scripts/render_video.py Parameter Reference
| Script and Command | Supported Flags | Defaults and Constraints |
|---|---|---|
styles.py search <query> | --series, --limit, --json | Matches space-separated keywords across id, name, category, description, fit, and tags; shows top 20 by default |
styles.py show <id> | --json | Exact case-insensitive style ID match (such as B3, Z5, H1) and prints the full Markdown prompt |
styles.py list | --series, --limit, --json | Lists entries in a target series (AG, M, K, Z, H, L, V, X, R, O) |
render_video.py <html> | --output (required, .mp4 suffix) | Refuses to overwrite an existing output file and exits with an error |
render_video.py video spec | --duration, --fps, --width, --height | Defaults to 12 seconds, 30 fps, 1920x1080; width and height must be positive even numbers, frame count is ceil(duration * fps) |
render_video.py audio mux | --audio <path> | Optional external audio file (narration or music WAV), padded or trimmed to video duration via FFmpeg aac and apad |
Power Tips
The practices below are distilled from skills/code-animation-prompts/SKILL.md, references/rendering.md, and docs/INSTALL.md.
Assign Clear Roles When Combining Multiple Style IDs
In the library, A–G are code demos, M defines motion and narrative pacing, K/Z/R define visual art direction, H provides color and typography layouts, and O supplies cinema lighting references. Instead of stacking all constraints from multiple IDs, assign 1 primary art style (such as Z5 Paper-Cut), 1 motion structure (such as M5 Continuous Shot), and 1 layout system (such as H1 Biennale Yellow).
Read the Examples Folder Directly When Requesting B6
B6 (warp, explosion, and reassembly) is preserved as a standalone example and is not part of the 341 catalog entries (querying B6 in styles.py returns a reminder). When using B6, point your agent directly to the B6 prompt and its 2 reference MP4 files under assets/library/.
Halt Live Loops on ?export=1 and Seed Randomness Before Exporting MP4
render_video.py loads the target page with ?export=1 and invokes the window.renderAt time function each frame. When building custom HTML animations, detect ?export=1 to stop requestAnimationFrame, timers, and CSS self-playing animations, and compute particle states from a fixed seed or pure function of time t so frame captures never freeze or jump.
Move Old Backups Outside .agents/skills/ or .claude/skills/ Before Updating
install_skill.py stops when a destination directory already exists to protect local edits. Before updating, move any previous backup outside the skill discovery directories; leaving a backup folder with SKILL.md inside skills/ causes Claude Code or Codex to scan duplicate entries.
Worked Example
This walkthrough searches the H series and B3 Particle Assembly prompt, renders a 1920x1080 MP4 from the bundled starter assets/starter/index.html, and runs the repository integrity validator.
Step 1: Search the Style Index and Inspect the B3 Prompt
Run scripts/styles.py to search for Biennale layouts or list the AG series, then print the full prompt for B3 (Particle Assembly):
python skills/code-animation-prompts/scripts/styles.py search Biennale
python skills/code-animation-prompts/scripts/styles.py list --series AG --limit 10
python skills/code-animation-prompts/scripts/styles.py show B3Step 2: Render a 12-Second 1080p MP4 From the Bundled Starter
With Playwright Chromium and FFmpeg installed locally, run render_video.py to render assets/starter/index.html into output/demo.mp4 (360 frames):
python skills/code-animation-prompts/scripts/render_video.py \
skills/code-animation-prompts/assets/starter/index.html \
--output output/demo.mp4 \
--duration 12 \
--fps 30 \
--width 1920 \
--height 1080Step 3: Rebuild the Lightweight Catalog and Verify 555 SHA-256 Baseline Hashes
After maintaining or adding community reference cards locally, run build_catalog.py and validate_repo.py to verify entry counts, internal links, and SHA-256 baseline hashes:
python scripts/build_catalog.py
python scripts/validate_repo.pyGotchas & Licensing Boundaries
Next Path
After setting up code-animation-prompts for 341-style lookup and deterministic rendering, pair it with these manuals to expand into soundtrack synthesis, interactive art-motion components, and character storyboarding:
15 Motion Design Styles and Code Rendering Pipeline (
skills-atlas-mg-styles-15): The upstream source for theVseries in this repository, providing source code for 15 10-second films, themgaudio103-sample soundtrack synthesizer, and therubric.md2-round AI review workflow.HuaShu AI Art and Motion Design Skills (
skills-atlas-huashu-art-motion): Covers 53 art style recipe cards, 9 explainer animation grammars, and 17 Canvas/SVG visual libraries rendered with Playwright that complement the style prompts in this collection.AI Pose Gallery Prompt Library (
skills-atlas-ai-pose-gallery-zh): Provides structured character pose and camera-framing prompts suited for storyboardingKseries cartoon styles andR3/X7comic animations.