On this page

Huashu Art Motion code-driven art animation and explainer clip rendering workflow

Document type
Field manual
Updated
Reading time
12 min

Configure alchaincyf/huashu-art-motion (version 1.2.0) with 36 implemented art styles, 17 study recipes, 9 explainer animation grammars, and 17 Canvas libraries, including storyboard lint, Playwright rendering, and film_gate delivery.

Source
Document details
alchaincyf/huashu-art-motion
License
MIT

Turn fine-art brushwork and 9 YouTube explainer animation grammars into frame-accurate videos through Canvas and SVG libraries, parameterized JSON clips, and dual QA gates.

Art style recipe cards
5336 implemented styles and 17 study recipes
Explainer grammars
98 parameterized clip grammars and 1 presenter snapshot
Drawing and motion libs
17Covering brushes, camera, typography, charts, and collage

01Style recipes, 9 explainer grammars, and dual-track modes

System purpose

alchaincyf/huashu-art-motion (version 1.2.0), released by Huashu (alchaincyf) under the MIT license, is a code-driven animation Agent skill built from a pure-code breakdown and redraw of X user Tak's (@cherry_mx_reds) 15-second Art History Speedrun. The repository ships a self-contained scripts/engine/ animation workspace that pairs 17 JavaScript drawing and camera libraries, 53 art-style recipe cards (36 implemented styles plus 17 artwork-anchored study recipes), 9 explainer animation grammars, and a verification toolchain covering storyboard linting, frame-by-frame rendering, and anti-PPT delivery gates.

SKILL.md splits execution into two paths by model capability: the Open-field track targets Claude Opus 5.5 or stronger models, allowing free composition of libraries, custom renderers, and routing tables; the Rail track targets other models, enforcing the sequence "write storyboard table → pass storyboard_lint.py red-light gate → render shot by shot (capped at 8 seconds per parameterized clip) → ffmpeg concat and audio mix → qa.py quantitative check → deliver.py delivery".

Explainer grammar ID and nameTypical shot durationPrimary easing and transitionsTarget content and core mechanism
y1_kurzgesagt (Flat science explainer)Hard-cut 7–9 s; visual unit 4.6–6.7 sMO.k75, lensReveal / matchCutTurns abstract concepts into concrete objects inside a logarithmically scalable world where the camera travels across scales
y2_vox (Investigative collage)Slow median 3.3 s (3–7 s); fast 1.4–1.8 sMO.sineInOut, 12 fps stepped elements, same / cutLays archival documents, news clippings, and screenshots on a desk with 12 fps stepped red strings and highlighter strokes
y3_whiteboard (Hand-drawn whiteboard)Median hold 6.6 s per board zoneMO.sineInOut (1.2–2.4 s pan), 0.8 s whip panStep-by-step reasoning chains where drawing starts roughly 0.5 s after the spoken phrase and pulls back at the end
y4_storytime (Storytime character)Mean 2.43 s (median 1.87 s)MO.expoOut (0.1 s pose swap) + MO.settle, 24 fpsFirst-person anecdotes and punchlines using 0.1 s pose snaps followed by still holds and reaction close-ups
y5_kinetic_type (Kinetic typography)Roughly 2 s per bar at 120 BPMMO.expoOut, MO.springHz, fillZoom / bandsLists, key quotes, and chapter cards where primary words slam in on downbeats with a single visual focal point
t1_3b1b (Math and mechanism morph)Single animation 1–3 s + 1 s hold; concept 8–20 sMO.smooth, zoomThrough / fadeShiftMorphs one concept directly into the next on a dark background via Transform while locking colors to concept names
t2_keynote_ui (Keynote product UI)Keynote screen 5–8 s; fast cut 1.5–3 sMO.spring, MO.appleOut, blurPush / expandRectFull-frame product screenshots or hardware with zoom focus, landing nouns and numbers on spoken cues with optional glass cards
t3_finance_chart (Finance chart)Single chart 2.5–6 sMO.quintOut, MO.smooth, slidePush / zoomThroughDraws axes first, grows data second, and annotates a single takeaway last; bar charts always start from 0
y6_presenter_explainer (Presenter explainer)Configured per full-film narration sectionCombines whiteboard, charts, and presenter character framesGrammar 9, shipping a grammar card and full-film reference code snapshots (reference_films/) that require user-supplied character and audio assets
Huashu Art Motion dual-track animation production and gate architecture

  1. Storyboard and style definition layer

    • 36 implemented styles (35 Canvas scenes + 37_rick_morty SVG)
    • 17 artwork-anchored study recipes (IDs 38 to 55, skipping 54)
    • storyboard_lint.py style lock, palette, and 6 anti-pattern checks

  2. Engine and rendering layer (scripts/engine/)

    • 17 libraries (MO / CAM / DG / TY / CH / UI / CL / MD / TOON, etc.)
    • 8 parameterized JSON clips (clip.html + clips/*.js) and long-scroll rig
    • Playwright Chromium + render.py outputting H.264 MP4 or ProRes 4444 MOV

  3. Quantitative QA and delivery gate layer

    • clip_lint.py and render.py --audit (checks overflow and overlap every 0.25 s)
    • qa.py stability, frame cost, motion, and text-framing diagnostics
    • film_gate.py and deliver.py (blocks PPT slideshows, 0.3 s blank frames, and 30% blue-purple backgrounds)

The Rail track requires passing storyboard_lint.py before coding; delivery requires passing film_gate.py and independent Agent review before copying the final video and writing a fingerprinted manifest.

While the README.md inventory table lists 53 style recipe cards and 53 scripts/engine/scenes/ scene files, line 3 of the SKILL.md front matter and line 1 of the style master index retain the earlier phrase "36 implemented styles + 16 study recipes"; inspecting the "New study recipes (17 types)" table at line 13 of the style master index (IDs 38_giotto through 55_dunhuang, with ID 54 unused) confirms 17 study cards (self-scored 65–82 and independently reviewed at 53–74, remaining study recipes because none reached the 80 threshold), bringing the total to 53 style recipe cards.

02Skills CLI setup, Playwright Chromium, and dependencies

Installation and verification

  • Not completed:

    Install the Python package manager uv, ffmpeg, and Playwright Chromium for headless frame-by-frame screenshot rendering.

  • Not completed:

    Base code animations require no voice or image API keys; enable optional voice cloning or image generation on demand via scripts/capabilities.py and scripts/images.py.

  • Not completed:

    Bundled fonts live under scripts/engine/lib/fonts/ (licensed under SIL OFL 1.1, where PuHui and LXGWWenKai-500 cover all 6,763 GB2312 Chinese characters).

This report inspected source code, recipe cards, and script logic only; it did not launch Playwright Chromium locally to render video files.

Route One: Install the skill via npx skills or Git

bash
npx skills add alchaincyf/huashu-art-motion

To clone the repository directly or mount it manually under ~/.claude/skills/:

bash
git clone https://github.com/alchaincyf/huashu-art-motion.git
cd huashu-art-motion
uv run --with playwright playwright install chromium

Route Two: Minimal verification with a single-frame still and parameterized clip

From the repository root, render a single still frame of the Van Gogh scene (09_postimp) and a parameterized finance chart clip (t3_finance_chart):

bash
uv run --with playwright python scripts/engine/render.py \
  --solo 09_postimp \
  --stills 0.3 \
  --out preview_stills

uv run --with playwright python scripts/engine/render.py \
  --spec scripts/engine/examples/t3_finance_chart.json \
  --out preview_chart.mp4

03Rendering engine, breakdown tools, and three delivery gates

Core capabilities

Reference video breakdown

uv run scripts/analyze/breakdown.py

Map a reference animation into a code-ready blueprint

Measures cut timestamps, beat grids (BPM), and per-segment motion heatmaps from a reference video to guide mechanism recreation and shot planning.

Storyboard red-light linter

uv run scripts/storyboard_lint.py

Block non-compliant storyboards before coding starts

Validates the header style lock, palette hex values, character policy, concrete nouns and motion verbs per shot, 3 consecutive zoom-ins, ending title cards, and number parity with the narration script.

Dual-mode frame renderer

uv run --with playwright python scripts/engine/render.py

Render art scenes, long-scroll films, or JSON clips

Supports --solo single scenes, --film full films, --spec parameterized clips, --alpha ProRes 4444 transparent exports, and --audit layout checks every 0.25 seconds.

Clip lint and stress testing

clip_lint.py / stress_clip.py / regress_clips.py

Validate JSON specs and stress-test 4 layout variants

clip_lint.py checks schema fields and timing; stress_clip.py tests 4 variants (portrait, extra-long text, English, and square) to prevent layout breakage.

Quantitative QA analysis

uv run scripts/qa.py

Measure determinism, frame render cost, motion, and framing

Evaluates single-clip specs or full projects for pixel determinism, motion distribution, and isolated jumps (smooth pans or zooms under 2 seconds count as camera events rather than jumps).

Anti-PPT gate and delivery

uv run scripts/deliver.py

Run film_gate.py and emit a fingerprinted delivery manifest

Fails with a red light if fast-motion frames fall below 0.035, mid-film blank frames last 0.3 seconds, or blue-purple backgrounds reach 30%; copies the final MP4 and writes a verifiable hash manifest on pass.

The 17 core libraries under scripts/engine/lib/ expose global namespaces shared across all scenes and parameterized clips:

Library filesNamespaceCore capabilities and representative functions
motion.js / util.jsMO / UCamera duration constants PULSE, slam curve slam, 12 fps stepped timing step, Manim easing smooth, Bezier k75 / appleOut, SwiftUI spring, and beat alignment onBeat
camera.jsCAMLogarithmic zoom zlerp, aperture zoom coverZoom, keyframe path at, camera action table track (push / pull / glide / punch / pan / slam / shake / cut), and parallax layer
diagram.js / chart.jsDG / CHProgressive stroke drawing drawPartial, hand jitter hand, shape morphing morph, Manim equation write, whiteboard timeline board; axes grid, bar charts bars, candlesticks candles, and callout
typo.js / ui.jsTY / UIAuto-shrinking line wrapper fit (keeps long English words inside bounds), character rise charsIn, typewriter typed, number counter count; mesh glow mesh, frosted card glass, sheen, and pseudo-3D persp
collage.js / media.jsCL / MDPaper grain fillPaper, torn edge tornRect, halftone photo halftone, red string string, rough highlighter highlight; full-bleed asset cover, Polaroid print print (errors immediately on missing files)
brush.js / paint.js / medium.js / post.js / finish.jsArtistic media layerFlow-field strokes, watercolor washes, pointillist mixing, gold-leaf embossing, ink diffusion, Protocol 16 media channels, and whole-clip finishing finish (soft / film / punch)
toon.js / rig.js / rig_huashu.jsTOON / rigsTwo-tone shading flat, pose-to-pose switching with settle poseAt, and lip-sync envelope mouth (the bean mannequin is restricted to previsualization and barred from final cuts)

04Camera cadence, style lock, and six failure modes

Operating principles

Cap each parameterized clip at 8 seconds and lock a single theme

Letting duration exceed 8 seconds holds a single layout on screen too long and creates a slide-deck feel. Split a film into multiple shots (2 to 6 seconds each), assign the same theme palette name (paper, poster, ink, navy, bauhaus, snow, wood, chalk) across all specs, and mix at most 2 explainer grammars per film.

Use gentle pushes and pulls for transitions and save snaps for accents

Keep the camera still while elements move on their own or while viewers read text; use gentle pushes (push), pans (glide), or pulls (pull, 0.6 to 1.5 seconds) to guide attention, and never push in across 3 consecutive shots without pulling back or cutting. Reserve fast pushes (camera=snap, 0.28 seconds) and slams (0.17 seconds) for reveals and key numbers.

Display real screenshots and photos full-bleed instead of redrawing in code

When product screenshots, photographs, recordings, or source documents exist, present them full-bleed at native aspect ratio via MD.cover or MD.print and use code only for annotations, leader lines, and zoom focus. Redrawing real interfaces in code or inserting generic chibi stick figures triggers the six anti-pattern checks.

Avoid blue-purple gradients and never reuse the 35-grid room layout

film_gate.py rejects any film where blue-purple backgrounds cover 30% or more of frames (unless justified with --allow-blue-purple). Furthermore, the shared room composition across the 35 art-history samples exists only for the speedrun premise; design fresh compositions for new topics and present 3 distinct layout options before locking a new style or character direction.

For human or mascot characters, SKILL.md specifies that unless 37_rick_morty or 52_south_park flat cartoon style is explicitly selected for original semantic SVG characters, all other styles must composite AI-generated character frames with code or show only hands and back views when no image generator is configured.

05Rail-track workflow from clip audit to gated delivery

Worked example

The following sequence copies scripts/engine into a project workspace and runs JSON linting, --audit layout verification, standard MP4 and ProRes 4444 alpha rendering, qa.py scoring, and deliver.py gated packaging.

1. Copy the engine workspace and run spec and layout audits

bash
mkdir -p projects/demo_clip
cp -R scripts/engine projects/demo_clip/engine
cp scripts/engine/examples/t3_finance_chart.json projects/demo_clip/clip01.json

python3 scripts/clip_lint.py projects/demo_clip/clip01.json
uv run --with playwright python projects/demo_clip/engine/render.py \
  --spec projects/demo_clip/clip01.json \
  --audit

2. Render the standard H.264 MP4 and transparent overlay clip

bash
uv run --with playwright python projects/demo_clip/engine/render.py \
  --spec projects/demo_clip/clip01.json \
  --out projects/demo_clip/clip01.mp4 \
  --stills 0.5,2.0

uv run --with playwright python projects/demo_clip/engine/render.py \
  --spec projects/demo_clip/clip01.json \
  --alpha \
  --out projects/demo_clip/clip01_alpha.mov

3. Run quantitative QA and gated delivery

bash
uv run scripts/qa.py \
  --spec projects/demo_clip/clip01.json \
  --out projects/demo_clip/qa/clip01

uv run scripts/deliver.py projects/demo_clip/clip01.mp4 \
  --spec projects/demo_clip/clip01.json \
  --qa projects/demo_clip/qa/clip01 \
  --out projects/demo_clip/output/

uv run scripts/deliver.py --verify projects/demo_clip/output/

06License exceptions, study recipe status, and test boundaries

Limitations and caveats

LimitationTechnical boundary and compliance requirement
Separate stroke-order and font licensesDerived stroke-order medians in reference_films/spacex/spacex_wb/assets/strokes.js remain under the Arphic Public License; fonts in scripts/engine/lib/fonts/ retain their respective SIL OFL 1.1 licenses (LICENSES.md)
17 study recipes are below production scoreThe 17 study cards (38 through 55) include single-scene prototypes (--film style_studies), but independent review scores range from 53–74 (below the 80 production threshold) and require validation under Protocols 15 and 16 before cross-scene reuse
Style 36 uses a standalone SVG pipeline37_rick_morty (assigned internal ID 37 because 36_picasso_blue is already occupied) uses a standalone SVG renderer and HTML preview excluded from the 35-cell Canvas gallery and omits a walking rig
Full-narration reference films require user assetsreference_films/ and grammar 9 (y6_presenter_explainer) are code snapshots requiring user-supplied character and audio files; copying compositions, characters, or assets directly from demo films into new productions is prohibited
Cross-agent online regression coveragePer references/compatibility.md, installation and reinstallation pass across three agent platforms and Codex online regression passes, whereas Claude Code and Kimi online regressions remain pending due to test-account constraints

07Long-scroll rig, style distillation, and official references

Next steps

  • To build a horizontal long-scroll animation where a character walks left to right across multiple art eras, copy scripts/engine/demos/long_scroll/ and follow reference guide 11 to configure world boundaries and character frame swaps.

  • To transfer an artist's style to a new subject, fetch original works with scripts/analyze/fetch_reference.py, route shapes through lib/medium.js under Protocols 15 and 16, and generate side-by-side comparison sheets with scripts/engine/compare.py.

  • To composite --alpha transparent explainer clips from this skill over a talking-head timeline, pair it with the Digital Human Koubo Guide.

Source pinned at 8a0d7d72ca65fcce6f8ba82c4a6c8dfe35b8422c. Official reference files:

References