ian-xiaohei-svg-motion

name	ian-xiaohei-svg-motion
description	Create Ian Xiaohei-style HTML/SVG motion illustrations for Chinese articles, scripts, storyboard scenes, workflow explanations, concept metaphors, and short video visual aids. Use when the user asks for 小黑 SVG、漫画感 HTML、分层 SVG 动效、把小黑生图做成 HTML/SVG、可编辑矢量动效、口播流程动画、手绘漫画动效、正文配图动画, or wants a Xiaohei illustration style adapted into controllable HTML/SVG/GSAP output instead of raster image generation.

Ian Xiaohei SVG Motion

把 Ian 小黑正文配图的原则，改造成可控的 HTML + SVG + GSAP timeline 动效。目标不是复刻生图像素，而是把文章里的一个认知动作重建成分层漫画舞台，方便录视频、按字幕 cue 对齐、后续改文案和元素。

Core Rule

Do not auto-vectorize a PNG and animate the resulting path soup. Use raster images only as composition references. Rebuild the scene as semantic SVG groups:

idea -> shot plan -> SVG layer plan -> HTML/SVG template -> GSAP timeline -> static + motion review

Workflow

1. Extract one cognitive anchor from the article, script, screenshot, or storyboard scene.
2. Choose one physical metaphor: sorting, carrying, bridging, leaking, catching, folding, weighing, opening, rerouting, or falling.
3. Make Xiaohei perform the core action. If removing Xiaohei does not change the meaning, redesign.
4. Design a 16:9 white canvas with one main scene, 35%+ whitespace, and 3-5 short handwritten annotations at most.
5. Build semantic SVG groups for every moving object.
6. Animate with GSAP timeline. Use x, y, rotation, scale, opacity, and SVG stroke drawing. Avoid layout animations.
7. Save both a playable HTML page and a static review screenshot.
8. If this is for a 口播成片 project, map timeline segments to subtitle/cue timing before final render.

Read When Needed

• Read references/style-rules.md before designing a new scene or judging whether the result still feels like Ian Xiaohei.