ian-xiaohei-svg-motion

1# Ian Xiaohei SVG Motion
2 
3把 Ian 小黑正文配图的原则，改造成可控的 `HTML + SVG + GSAP timeline` 动效。目标不是复刻生图像素，而是把文章里的一个认知动作重建成分层漫画舞台，方便录视频、按字幕 cue 对齐、后续改文案和元素。
4 
5## Core Rule
6 
7Do 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:
8 
9```text
10idea -> shot plan -> SVG layer plan -> HTML/SVG template -> GSAP timeline -> static + motion review
11```
12 
13## Workflow
14 
151. Extract one cognitive anchor from the article, script, screenshot, or storyboard scene.
162. Choose one physical metaphor: sorting, carrying, bridging, leaking, catching, folding, weighing, opening, rerouting, or falling.
173. Make Xiaohei perform the core action. If removing Xiaohei does not change the meaning, redesign.
184. Design a 16:9 white canvas with one main scene, 35%+ whitespace, and 3-5 short handwritten annotations at most.
195. Build semantic SVG groups for every moving object.
206. Animate with GSAP timeline. Use `x`, `y`, `rotation`, `scale`, `opacity`, and SVG stroke drawing. Avoid layout animations.
217. Save both a playable HTML page and a static review screenshot.
228. If this is for a 口播成片 project, map timeline segments to subtitle/cue timing before final render.
23 
24## Read When Needed
25 
26- Read `references/style-rules.md` before designing a new scene or judging whether the result still feels like Ian Xiaohei.
27- Read `references/svg-layering.md` before writing or editing the SVG structure.
28…