Code Animation Prompts

# Code Animation Prompts

A library of 341 style prompts for making code-built animations, plus a skill for Claude Code and Codex that picks a style and plans the shots. For creators making short videos and openings.

Made by XiaoyeCodes on GitHub. These notes are Mindket's, written from its README; the project's own files and license are in its repository.

## About

What it is: Code Animation Prompts is a collection of 341 visual styles, written as prompts, for animations that a coding assistant builds in code. It comes with 196 reference stills, an offline style picker and a skill for Claude Code and Codex. You choose a look such as ink wash, paper-cut, neon or comic, and the assistant animates it.

Who it suits: It suits creators, teachers and designers who want a styled animation from one sentence of idea, and who already work with a coding assistant.

```table
Industry | Who uses it | How they use it | Example
Short video and content | Creators | Pick a style by number and let the assistant build a short animation | A creator asks for a 12 second New Year opening in paper-cut style at 16:9
Education | Teachers | Make explainers in a whiteboard or hand-drawn style | A teacher asks for a 30 second video on why it rains, in portrait 9:16 for young pupils
Tech marketing | Marketers | Use neon, pixel or oriental cyber looks for product openings | A team picks the neon rainy night style for a product opening
Design and film | Designers | Browse cinematic and magazine-style references to settle a look | A designer looks through the Oscar series for a film-style reference
```

People who want a finished video from a chat without a coding assistant can skip it, since the assistant has to write and render the animation locally.

Where to use it:

- Claude Code and Codex, through the installable skill
- Chrome or Edge, for the offline style picker
- A terminal, for the search script and the render tool
- Playwright, Chromium and FFmpeg, only for exporting HTML to MP4

```table
Use case | Who | What they get back
Browse styles | Anyone | A picker to search, filter, enlarge images and export a list of chosen styles
Plan an animation | Creators | Shots planned by the assistant from the styles you pick
Look up a style | Developers | A search by number, keyword or series, without loading the whole library into context
Export a video | Creators | An MP4 rendered frame by frame from an HTML page, with optional existing audio
```

How to set it up: The manual route needs Git and Python. The one-click route needs a coding assistant that can touch local files and use a terminal.

- Git and Python 3.10 or newer
- Claude Code or Codex
- For video export only, Playwright, Chromium and FFmpeg

1. Clone the repository with Git.
2. From the repository root, run the install script for your assistant, or for both.
3. Ask the assistant to search for a style in the installed folder, to check that it works.

```bash
python scripts/install_skill.py --target codex
python scripts/install_skill.py --target claude
python scripts/install_skill.py --target both
```

The script only copies files and downloads nothing extra. If a skill of the same name already exists, it stops and keeps what is there. The one-click import is a ready-made request you paste into Claude Code or Codex, and the assistant downloads and installs the skill for you.

How to use it: Describe the animation and name a style. Codex and Claude Code take it in these forms.

```text
使用 $code-animation-prompts，用 B3 粒子聚形做一段 12 秒横屏动画。
/code-animation-prompts 用 Z5 剪纸做一段 12 秒的新年片头，16:9。
```

To look styles up yourself, run these from the installed skill folder.

```text
scripts/styles.py search 水墨
scripts/styles.py show B3
```

To export a video, install the renderer's dependencies and run it on the starter page.

```bash
python -m pip install playwright
python -m playwright install chromium
ffmpeg -version
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 1080
```

```table
Tool | What it does
Style library | 341 Markdown prompts with stills, reference implementations and original examples
Offline style picker | An HTML page to search, filter by category, enlarge images and export the chosen styles
Agent skill | Lets Claude Code or Codex read styles on demand, plan shots and build the animation
Search script | Finds a style by number, keyword or series
Render tool | Exports an HTML page that exposes a time interface to MP4, frame by frame
```

Example: You ask Codex for a 12 second wide-screen animation in the B3 particle style, on the theme of turning an idea into reality, in three stages. You set 1920 by 1080 at 30 fps, a dark background with warm gold particles and Chinese subtitles, with no sound. You get editable HTML, keyframe previews and an MP4, or a note that render dependencies are missing.

For newcomers and experts: This is a catalogue of visual styles written for an AI coding assistant. You pick a style by looking at pictures, tell the assistant the topic, length and screen shape, and it writes code that animates the idea. A first small thing to try is opening the offline picker in Chrome or Edge and ticking a few styles.

Each style is a numbered Markdown prompt, and a light search script finds styles by number, keyword or series, so the whole library never has to sit in the assistant's context. The renderer needs the page to expose window.renderAt(t) and to stop its live loop when ?export=1 is set. The trade-off is effort. The original examples need adapting first, and a still shows a visual direction, not the final animation.

```flow
Pick a style in the picker or by search
Give the assistant a topic, length and size
It writes an editable HTML animation
The renderer captures frames one by one
FFmpeg joins them into an MP4
```

Good to know:

- LICENSE.md lists where each part comes from and how it may be used.
- 196 of the 341 styles have a reference still, and the other 145 are text only.
- The B6 example stands apart and does not count among the 341 styles.
- Looking up styles needs no API key or paid image service, and the assistant's own fees depend on its platform.
- The one-click import needs an assistant with local file and terminal access, so a plain web chat cannot install it for you.
- The renderer is not a general screen recorder, and it works only with pages that offer the time interface.

```chart
Title: Styles per series, the largest eight
Oscar film looks (O): 98 styles
Lemo-Opuscar (L): 59 styles
Motion styles (M): 40 styles
Cartoon looks (K): 38 styles
Code videos (X): 31 styles
Code samples (A to G): 26 styles
Chinese styles (Z): 15 styles
mg-styles-15 (V): 15 styles
```

## On GitHub, 6 November 2026

- Stars: 676
- Forks: 168
- Watching: 3
- Open issues and pull requests: 0
- Language: HTML
- License: see the repository
- Topics: agent-skills, animation, claude-code, codex, creative-coding, prompts, video-generation

## Links

- Code: https://github.com/XiaoyeCodes/code-animation-prompts
- Releases: https://github.com/XiaoyeCodes/code-animation-prompts/releases
- Issues: https://github.com/XiaoyeCodes/code-animation-prompts/issues
- Star history: https://www.star-history.com/#XiaoyeCodes/code-animation-prompts&Date

## Get the code

```
git clone https://github.com/XiaoyeCodes/code-animation-prompts.git
```

Then follow the setup in its README. Nothing in this kit runs by itself.

README.md  7 KB