# huashu-art-motion · Art in Motion
Let your coding agent turn art styles into paintings that move.
36 art styles · 9 explainer animation grammars · 8 types of parameterized clips · Reference code for narrated films
```sh
npx skills add alchaincyf/huashu-art-motion
```
[Watch animations](#animation-showcase) · [Explore styles](#see-the-results) · [Get started](#whats-included) · [Download full demos](https://github.com/alchaincyf/huashu-art-motion/releases/latest)
Even eating a mushroom requires choosing a subscription: OpenAI or Claude? Choose Claude, and a starburst power-up drops in to make Huashu grow.
![]() Stomp and kick · Pixel Sam and Dario cameo as enemies |
![]() Down the pipe · Coin chamber and scanline whip transition |
Inside Van Gogh's *Wheat Field with Cypresses*, brushstroke directions come from the original painting's structure tensor, and Clawd is redrawn in impasto.
![]() T. rex skeleton · Chasing the flashlight |
![]() Dawn · Posing as an exhibit, with one blink |
Skipping a stone by the Japanese Bridge.
![]() Ancient Egypt · Scarab beetle |
8-bit · Coins from blocks |
One frame from each of 35 animated demos: the same girl, orange-and-white cat, and table travel from caves in 40,000 BCE to 2026. Every scene moves: Van Gogh's starry sky turns, mosaic colors flow across stones, and ink washes carry the image into the next era.
The shared composition is part of the art-history speedrun: styles change while the scene stays the same. It is not a prescribed composition for these styles. For a new subject, design a new composition rather than reusing this room.
👉 [Download the all-style demo (MP4)](https://github.com/alchaincyf/huashu-art-motion/releases/latest)
The long-scroll demo follows a character walking from left to right. At each boundary, both the world and the character change art style. The repository includes three sample worlds: Egyptian murals → Monet's *Japanese Bridge* → 8-bit.
Eight explainer animation grammars each have a runnable demo film; the images below show one frame per shot. A ninth, presenter-led finance explainers, includes a grammar card and a full-film code snapshot that requires your own character assets. Whiteboard works well for drawing relationships alongside narration; Vox works well for graphics and information collage.
| | |
|---|---|
|
Kurzgesagt: flat shapes without outlines, journeys across scales |
Vox: clippings, red lines, highlighter marks |
|
Whiteboard: a pen tip reveals the line drawing |
3Blue1Brown: one object transforms into the next |
|
Storytime: reaction close-ups and pauses for jokes |
Kinetic type: key words land with impact |
|
Keynote UI: light spots, frosted-glass cards, large numbers |
Finance charts: axes first, then data, with one thing highlighted |
---
## What it can do
| You ask | It does |
|---|---|
| “Recreate this animation” or “Break down this clip” | Runs the breakdown script to measure transitions, a beat grid, and motion heatmaps for each segment, then recreates the underlying mechanisms in code |
| “Make an animation in the style of Van Gogh, Monet, or Bauhaus” | Designs one frame first, then animates it; 36 style recipe cards provide starting points |
| “Make an art animation from my narration” | Builds a shot list → chooses styles → adds a camera to a world canvas → outputs a visual track |
| “Make a film of someone walking through famous paintings” | Uses the long-scroll skeleton: one segment file per world, a hero moving rightward, style changes at boundaries, and a camera that only moves forward |
| “Make an animated segment for an explainer video” | Chooses a grammar for the narration and renders a JSON spec into a frame-accurate clip, in landscape or portrait, with optional transparency |
| “I need a person in the scene” | Uses an image-generation model for character frames; code handles compositing, frame changes, and materials |
| “Add music and time it to the action” | Synthesizes music in code using a BPM grid, motifs passed between instruments, and a closing sequence of sound effects |
Before delivery, `qa.py` measures stability, efficiency, motion, smoothness, and cues for text-box framing. An agent that did not make the film then reviews the finished output. Finally, `deliver.py` handles delivery in one command: the film must first pass an anti-slideshow gate. If almost the entire film lacks fast action within shots, delivery is blocked. Once it passes, the script copies the film and writes delivery notes using measured facts.
---
## What's included
| Component | Quantity / location |
|---|---|
| Art-style recipe cards: parameters, motif motion, signature transitions, and current limitations | 36 cards in `references/风格配方/` |
| Corresponding scene code | 35 scenes in `scripts/engine/scenes/` |
| Explainer animation grammar cards | 9 cards; 8 include demo films, parameterized clips, and example specs |
| Reference code for narrated films | Mixed styles, whiteboard, Vox, and presenter-led explainers; some assets must be supplied separately—see the directory READMEs |
| Long-scroll demo: skeleton, three worlds, and a character frame library | One demo in `scripts/engine/demos/long_scroll/` |
| Transitions | Art-style signature transitions and explainer transitions, including fades, hard cuts, and paper transitions |
| Drawing and animation libraries: brushes, renderers, post-processing, skeletons, cameras, charts, typography, and more | 17 libraries in `scripts/engine/lib/` |
| Method documents: breakdown, mechanisms, frame-first design, code drawing, music and rhythm, characters, long-scroll films, and more | 12 core documents, `references/01`–`12`, plus an [optional voice guide](references/capabilities.md) |
```text
huashu-art-motion/
├── SKILL.md # Classify the task, then read the relevant documents
├── references/ # Methods 01–12, 36 style recipes, 9 grammar cards, proven practices
├── assets/ # Overview images used in the README
└── scripts/
├── engine/ # Portable animation project: engine, transitions, libraries, scenes, demos, clips
├── analyze/breakdown.py # Turn a reference animation into a map you can implement in code
├── qa.py # Run QA in one command
├── film_gate.py # Detect slideshow-like cuts and empty middle sections; reads MP4 only
├── deliver.py # Gate → copy the film → write delivery notes
├── audio/ # Templates for music synthesized in code
└── font_subset.py ... # Font subsetting and green-screen removal
```
Requires [uv](https://docs.astral.sh/uv/), ffmpeg, and Playwright Chromium. Install Chromium before the first render:
```sh
uv run --with playwright playwright install chromium
```
Try rendering a frame from the Van Gogh scene or a finance-chart clip:
```sh
cd huashu-art-motion
uv run --with playwright python scripts/engine/render.py --solo 09_postimp --stills 0.3 --out preview
uv run --with playwright python scripts/engine/render.py --spec scripts/engine/examples/t3_finance_chart.json --out finance-chart.mp4
```
---
## The story behind it
In early October 2026, I saw a 15-second animation on X by Tak ([@cherry_mx_reds](https://x.com/cherry_mx_reds/status/2106095190285144331)): a girl and a cat travel through 40,000 years of art history. Each era lasts only about a second, yet the things inside the paintings keep moving.
I asked Claude to recreate it. The first version just transitioned between still paintings. I rejected it: even when the original spends only a second in an era, the elements within the painting are in motion. So we started with a breakdown—measuring transitions, fitting a beat grid, and checking where each segment moves—then drew and animated the paintings layer by layer in code.
During the process, I told it: “We're not just recreating this. I need you to learn from it.” The skill therefore records both the code and the practices that proved useful (`references/07-正面经验.md`), along with each style's pitfalls and limitations. Later, four groups of agents, given only the skill, built 20 styles it had not seen before. Their reusable components became a shared library. We added eight YouTube explainer animation grammars and connected them to my narrated-video pipeline. Finally, I used the same tools to make *Huashu Walks Through Famous Paintings*: 23 styles over 2 minutes 8 seconds, walking from caves to 2026. Its skeleton and three sample worlds are included here.
---
## Acknowledgments
- **Tak ([@cherry_mx_reds](https://x.com/cherry_mx_reds))** and his *Art History Speedrun* inspired this skill. The scene compositions for 16 art eras and the girl-and-cat journey follow the original's ideas. Every image here is redrawn in code. The music scripts contain original example scores; the repository retains the breakdown method, not a transcription of the original music. It includes no frames, screenshots, or audio files from the original film. Visit his X account to see the original.
- The channels and sources studied in the explainer grammar cards—Kurzgesagt, Vox, 3Blue1Brown, RSA Animate, TheOdd1sOut, and others—are linked under each card's primary references. The repository records measured parameters, not their footage.
- Fonts are open-source under SIL OFL 1.1. See the inventory and copyright notices in `scripts/engine/lib/fonts/LICENSES.md`.
---
## About the author
| | |
|:---|:---|
| 🌐 Websites | [bookai.top](https://bookai.top) · [huasheng.ai](https://www.huasheng.ai) |
| 𝕏 Twitter | [@AlchainHust](https://x.com/AlchainHust) |
| 📺 Bilibili | [花叔v](https://space.bilibili.com/14097567) |
| ▶️ YouTube | [@Alchain](https://www.youtube.com/@Alchain) |
| 📕 Xiaohongshu | [花叔](https://www.xiaohongshu.com/user/profile/5abc6f17e8ac2b109179dfdf) |
| 💬 WeChat public account | Search for “花叔” in WeChat |
## License
Code and documentation: MIT. Use, modify, and build on them freely.
Exceptions: the derived stroke-order data in `scripts/engine/reference_films/spacex/spacex_wb/assets/strokes.js` retains the Arphic Public License, whose text accompanies the file. Fonts in `scripts/engine/lib/fonts/` retain their respective OFL licenses. Huashu's cartoon likeness and character frames (`scripts/engine/demos/_shared/hero/`, `scripts/engine/demos/long_scroll/frames/`, and `assets/角色/`), including the same likeness in overview images and demo videos, are provided only for this skill's demonstrations and are not licensed for other uses under MIT.
Clawd is Anthropic's Claude Code mascot, and the rights to its likeness belong to Anthropic. *Clawd: Night at the Museum* is an unofficial fan demo, not affiliated with Anthropic. Its GIFs and full film are also excluded from the MIT license. The paintings in the film come from The Met's Open Access collection (CC0).
---