dsh-drawai 0.3.3 → 0.4.0

package/lib/motion/mgstyles/upstream/prompts/01-flat-vector.md

@@ -0,0 +1,98 @@
+# 扁平矢量动画 Flat / Vector 2D Motion Graphics
+
+**原片**：popwise「One Dot」一个点的一镜到底 · 1920×1080 · 30 fps · 10 秒 · AI 评审终评 7.64 / 10
+
+**源码**：[demos/01-flat-vector/](../demos/01-flat-vector/)
+
+## 怎么用
+
+1. 新建一个空文件夹，在里面打开一个能写代码、能执行命令的 AI 助手（例如 Claude Code）。本机需要能跑网页渲染（Node + Chrome）和 ffmpeg。
+2. 把下面「提示词」整段复制进去发送。
+3. 想换成自己的内容：改 `Creative seed` 里的故事、品牌名、文案和配色，或者改 `Output` 里的尺寸（比如竖屏 1080×1920）。不要删 `Signature features` 那一段，它是这种风格被一眼认出来的依据。
+4. 想再提高：成片出来后，另开一个 AI 用 [rubric.md](../rubric.md) 评审，把评审意见贴回给制作的 AI 再改一轮。原片就是这样改了两轮。
+
+## 提示词
+
+```text
+You are the director, motion designer, engineer and sound designer of ONE 10-second motion-design film.
+The goal is the most classic, yet most stunning form of this style — award-shortlist / high-end commercial quality. A clean,
+template-looking result is a fail. Benchmarks: Buck, ManvsMachine, Ordinary Folk, Giant Ant, Territory Studio, Apple keynote
+motion, Pentagram motion identities, top Behance/Motionographer features, top 抖音/B站 designer accounts.
+
+# Style
+扁平矢量动画 Flat / Vector 2D Motion Graphics
+
+# Output (fixed)
+- 1920×1080, 30 fps, exactly 10.000 s (300 frames), H.264 MP4 with stereo AAC audio (48 kHz), mastered to −14 LUFS
+  integrated, true peak ≤ −1 dBTP. Final file: video.mp4.
+
+# Suggested technical route
+HTML: SVG + GSAP (CustomEase/CustomBounce/MorphSVG); motion blur mb=4 for fast moves
+(You may choose a better route if it clearly raises quality; say why.)
+
+# Creative seed
+「一镜到底的扁平世界」One-continuous-shot brand explainer, the canonical Motion-Ocean/Google-explainer form, pushed to showreel polish.
+- 0.0–1.2s HOOK: empty bold color field; a single saturated circle drops in with the three-phase anticipation → stretch → squash → overshoot → settle. Immediately readable craft.
+- 1.2–3.0s: the circle becomes the sun; a flat city pops up building-by-building with 2–4 frame stagger (each with its own mini overshoot), clouds slide, birds flap.
+- 3.0–5.5s: camera pushes into one window → a geometric character at a desk (limb rig with anchor rotations, head bob, blink) reacts; phone pings.
+- 5.5–8.0s: the notification bubble expands to fill the frame as a SHAPE WIPE transition; inside, icons burst in a choreographed rhythm (bar chart grows, check mark draws, heart pops, coin flips).
+- 8.0–10.0s: element-driven transition — everything collapses/flies into a logo lockup for an invented brand (e.g. "Popwise") + tagline, elastic settle, 1s hold with micro-motion.
+Rules: one hero moves at a time; squash&stretch ~10%; secondary action & follow-through; element-driven transitions (an object flies out and carries the cut); strictly flat (no gradients), bold 5–6 color palette (e.g. ultramarine #2B2BFF, coral #FF5A4E, sunflower #FFC62B, mint #2EE6A8, cream #FFF6E9, ink #151433).
+Sound: upbeat future-bass/pop ~120 BPM; pop/boing/whoosh on each entry, synced to the frame.
+
+You are the director: you may change the concept, copy, story beats and brand names if you find a stronger idea, but the result must remain the CANONICAL, instantly-recognisable form of this style and must hit its signature features below.
+
+# Signature features and key techniques (the result is judged against these)
+MG 动画最主流的基本盘风格，源自 Google Material/企业解释视频（explainer）传统。纯色几何化的人物与场景、无描边或极简描边、大色块撞色，一切元素都是矢量形状。常见于 SaaS 产品宣传、科普解说、企业年报视频。
+视觉特征 纯色大色块, 几何化角色, 无渐变或极少渐变, 干净留白, 高饱和品牌色板, 元素弹性入退场
+关键技法 AE Shape Layer + 父子级 null 控制层级，人物四肢用锚点旋转做 rig
+弹性缓动是灵魂：overshoot 用 cubic-bezier(0.34,1.56,0.64,1) 或 AE 里 70~85% influence 的贝塞尔手柄；入场'预备-冲出-回弹'三段式
+元素错峰入场（stagger 2~4 帧），同一时刻只让一个主体动
+30fps 居多；位移动画带 10% 左右 squash&stretch 增加弹性
+转场常用色块擦除（shape wipe）或元素飞出带动整场切换
+
+# How to work
+1. Treatment. Write down one clear idea: a hook in the first 0.5 s (never open on more than 0.3 s of empty or black), an
+   escalation, one unmistakable hero moment at ~60–75 % of the runtime, and a composed end frame held ~0.8–1.2 s with living
+   micro-motion. Map every signature feature above to a moment. Keep one cue sheet (beats and hit times) that both the
+   picture and the sound read from.
+2. Key frames before motion. Build the look, render stills at 6–10 key times and actually look at them. Each still should be
+   poster-worthy: composition, hierarchy, negative space, type set properly (kerning, line-height, weight contrast, CJK
+   punctuation, ~5 % safe margins). Iterate until nothing looks default, generic, cramped or "AI-template".
+3. Motion. Build the choreography and preview at low resolution. Step through the fastest moves frame by frame: spacing,
+   easing, arcs, overlap, anticipation and follow-through, motion blur. No unintended dead spans; the energy follows the music.
+4. Sound. Write genre-correct music and sound design locked to the cue sheet. Check that visual hits land on audio onsets.
+   Master to the output spec.
+5. Final. Render at full resolution (motion blur where apt), then check: exactly 10.00 s, resolution, fps, audio present and at
+   the right loudness, no black frames, no fallback fonts or tofu, no clipped elements at the frame edges, no shimmer on thin
+   lines, no gradient banding. Fix and repeat until you would submit it to a festival.
+6. Write an honest self-critique: what is strongest, what is weakest, what you would do with more time.
+
+# Rules
+- Rendering must be deterministic: every frame is a pure function of time t. Seeded randomness only; physics and particles
+  precomputed or closed-form; no real-time clocks; no state-triggered CSS transitions. A reliable route: a web page that can
+  draw any time t on request, captured frame by frame with a headless browser and encoded with ffmpeg (or a Blender script
+  that renders a PNG sequence).
+- Assets: only CC0 / public domain / OFL / Apache / free-for-commercial-use. Record each source and licence in CREDITS.md.
+  No real brand trademarks; invent brand names.
+- On-screen text must be correct and natural: idiomatic Chinese, proper CJK punctuation, no typos.
+
+# Craft checklist (what a jury looks for)
+- Style authenticity: an expert names the style in one second; every signature technique is present and executed correctly.
+- Motion craft: purposeful easing (no linear unless mechanical by design), overlap and stagger, anticipation and
+  follow-through, arcs, squash and stretch where the style allows, consistent physics, motion blur where apt; transitions
+  carried by elements, not crossfades.
+- Rhythm: hits locked to the music; contrast between busy and calm; no monotony.
+- Design: strong composition, grid, typographic hierarchy, controlled palette; texture and finishing (grain, glow, vignette)
+  only where the style wants it; nothing looks accidental.
+- Technical polish: no jitter (unless intended), no popping, no aliasing, no banding, no fallback fonts, no half-loaded images.
+- Sound: genre-correct, musical, synced, mastered.
+
+# Before you deliver, score yourself honestly
+1–10 on style fidelity, concept wow, motion craft, design & typography, finish & texture, sound & sync, technical
+(6 = template-level, 8 = high-end agency, 9 = award shortlist). Aim for 9; fix whatever scores lowest first.
+
+# Deliver
+video.mp4, plus a short report: the concept in two sentences; a beat sheet with timecodes; how each signature feature is
+realised; the tech route; check numbers (duration, resolution, fps, loudness, true peak); your honest top-3 weaknesses.
+```

package/lib/motion/mgstyles/upstream/prompts/02-line-art.md

@@ -0,0 +1,95 @@
+# 线条动画 Line Art / Line Animation
+
+**原片**：ATELIER LINEA「一笔画 One Line」 · 1920×1080 · 30 fps · 10 秒 · AI 评审终评 7.64 / 10
+
+**源码**：[demos/02-line-art/](../demos/02-line-art/)
+
+## 怎么用
+
+1. 新建一个空文件夹，在里面打开一个能写代码、能执行命令的 AI 助手（例如 Claude Code）。本机需要能跑网页渲染（Node + Chrome）和 ffmpeg。
+2. 把下面「提示词」整段复制进去发送。
+3. 想换成自己的内容：改 `Creative seed` 里的故事、品牌名、文案和配色，或者改 `Output` 里的尺寸（比如竖屏 1080×1920）。不要删 `Signature features` 那一段，它是这种风格被一眼认出来的依据。
+4. 想再提高：成片出来后，另开一个 AI 用 [rubric.md](../rubric.md) 评审，把评审意见贴回给制作的 AI 再改一轮。原片就是这样改了两轮。
+
+## 提示词
+
+```text
+You are the director, motion designer, engineer and sound designer of ONE 10-second motion-design film.
+The goal is the most classic, yet most stunning form of this style — award-shortlist / high-end commercial quality. A clean,
+template-looking result is a fail. Benchmarks: Buck, ManvsMachine, Ordinary Folk, Giant Ant, Territory Studio, Apple keynote
+motion, Pentagram motion identities, top Behance/Motionographer features, top 抖音/B站 designer accounts.
+
+# Style
+线条动画 Line Art / Line Animation
+
+# Output (fixed)
+- 1920×1080, 30 fps, exactly 10.000 s (300 frames), H.264 MP4 with stereo AAC audio (48 kHz), mastered to −14 LUFS
+  integrated, true peak ≤ −1 dBTP. Final file: video.mp4.
+
+# Suggested technical route
+HTML: SVG paths + stroke-dashoffset (getTotalLength) + GSAP; a virtual camera that follows the pen tip
+(You may choose a better route if it clearly raises quality; say why.)
+
+# Creative seed
+「一笔画」One-line narrative for a luxury / architecture brand — the whole film is ONE continuous line.
+- Deep midnight ground (#0B1320 or near-black) + a single champagne-gold line (#E9D7A5), constant ~3px, round caps, a softly glowing pen tip that leads the draw.
+- Story (continuous path, the tail of each figure is the start of the next): a seed → sprouts into a sapling → branches become the structural lines of a building → the building outline extends into a skyline/horizon → the horizon line lifts and loops into a monogram logo → LINE-TO-FILL moment (logo fills with gold from its anchor) → thin letter-spaced serif wordmark (e.g. "ATELIER LINEA") fades up.
+- Draw speed eases into corners (cubic-bezier(0.65,0,0.35,1)); the virtual camera drifts/pushes to keep the tip in frame, then dollies out at the end to reveal the whole drawing composed as a poster; older line segments dim to ~35% as the camera moves on.
+Sound: minimal felt piano + soft string swell; a pen-on-paper whisper whose loudness follows tip speed; delicate chime on the fill.
+
+You are the director: you may change the concept, copy, story beats and brand names if you find a stronger idea, but the result must remain the CANONICAL, instantly-recognisable form of this style and must hit its signature features below.
+
+# Signature features and key techniques (the result is judged against these)
+以单色细线为唯一造型语言，线条自我描绘（draw-on）、延伸、转折并变形为下一个图形，一笔连成整支片子。极简高级感强，常见于奢侈品、金融、建筑类品牌片和 logo 动画。
+视觉特征 等宽细线, 单色或双色, 大量负空间, 线条连续生长, 线面转换瞬间
+关键技法 核心是 stroke 描绘：AE 用 Trim Paths 0→100%，Web 端用 SVG stroke-dasharray/dashoffset
+线宽全片恒定（2~4px），转角处让描绘速度略减速，用 easeInOut cubic-bezier(0.65,0,0.35,1)
+'一笔画'叙事：上一图形的尾线即下一图形的起线，路径提前在 Illustrator 里连好
+线转面：描完轮廓后用同路径的 fill 从锚点扩展填充
+配合微小的端点圆头（round cap）与路径抖动可增加手绘感
+
+# How to work
+1. Treatment. Write down one clear idea: a hook in the first 0.5 s (never open on more than 0.3 s of empty or black), an
+   escalation, one unmistakable hero moment at ~60–75 % of the runtime, and a composed end frame held ~0.8–1.2 s with living
+   micro-motion. Map every signature feature above to a moment. Keep one cue sheet (beats and hit times) that both the
+   picture and the sound read from.
+2. Key frames before motion. Build the look, render stills at 6–10 key times and actually look at them. Each still should be
+   poster-worthy: composition, hierarchy, negative space, type set properly (kerning, line-height, weight contrast, CJK
+   punctuation, ~5 % safe margins). Iterate until nothing looks default, generic, cramped or "AI-template".
+3. Motion. Build the choreography and preview at low resolution. Step through the fastest moves frame by frame: spacing,
+   easing, arcs, overlap, anticipation and follow-through, motion blur. No unintended dead spans; the energy follows the music.
+4. Sound. Write genre-correct music and sound design locked to the cue sheet. Check that visual hits land on audio onsets.
+   Master to the output spec.
+5. Final. Render at full resolution (motion blur where apt), then check: exactly 10.00 s, resolution, fps, audio present and at
+   the right loudness, no black frames, no fallback fonts or tofu, no clipped elements at the frame edges, no shimmer on thin
+   lines, no gradient banding. Fix and repeat until you would submit it to a festival.
+6. Write an honest self-critique: what is strongest, what is weakest, what you would do with more time.
+
+# Rules
+- Rendering must be deterministic: every frame is a pure function of time t. Seeded randomness only; physics and particles
+  precomputed or closed-form; no real-time clocks; no state-triggered CSS transitions. A reliable route: a web page that can
+  draw any time t on request, captured frame by frame with a headless browser and encoded with ffmpeg (or a Blender script
+  that renders a PNG sequence).
+- Assets: only CC0 / public domain / OFL / Apache / free-for-commercial-use. Record each source and licence in CREDITS.md.
+  No real brand trademarks; invent brand names.
+- On-screen text must be correct and natural: idiomatic Chinese, proper CJK punctuation, no typos.
+
+# Craft checklist (what a jury looks for)
+- Style authenticity: an expert names the style in one second; every signature technique is present and executed correctly.
+- Motion craft: purposeful easing (no linear unless mechanical by design), overlap and stagger, anticipation and
+  follow-through, arcs, squash and stretch where the style allows, consistent physics, motion blur where apt; transitions
+  carried by elements, not crossfades.
+- Rhythm: hits locked to the music; contrast between busy and calm; no monotony.
+- Design: strong composition, grid, typographic hierarchy, controlled palette; texture and finishing (grain, glow, vignette)
+  only where the style wants it; nothing looks accidental.
+- Technical polish: no jitter (unless intended), no popping, no aliasing, no banding, no fallback fonts, no half-loaded images.
+- Sound: genre-correct, musical, synced, mastered.
+
+# Before you deliver, score yourself honestly
+1–10 on style fidelity, concept wow, motion craft, design & typography, finish & texture, sound & sync, technical
+(6 = template-level, 8 = high-end agency, 9 = award shortlist). Aim for 9; fix whatever scores lowest first.
+
+# Deliver
+video.mp4, plus a short report: the concept in two sentences; a beat sheet with timecodes; how each signature feature is
+realised; the tech route; check numbers (duration, resolution, fps, loudness, true peak); your honest top-3 weaknesses.
+```

package/lib/motion/mgstyles/upstream/prompts/03-isometric.md

@@ -0,0 +1,97 @@
+# 等轴 2.5D Isometric / 2.5D
+
+**原片**：ISOPOLIS「让城市自己生长」 · 1920×1080 · 30 fps · 10 秒 · AI 评审终评 8.00 / 10
+
+**源码**：[demos/03-isometric/](../demos/03-isometric/)
+
+## 怎么用
+
+1. 新建一个空文件夹，在里面打开一个能写代码、能执行命令的 AI 助手（例如 Claude Code）。本机需要能跑网页渲染（Node + Chrome）和 ffmpeg。
+2. 把下面「提示词」整段复制进去发送。
+3. 想换成自己的内容：改 `Creative seed` 里的故事、品牌名、文案和配色，或者改 `Output` 里的尺寸（比如竖屏 1080×1920）。不要删 `Signature features` 那一段，它是这种风格被一眼认出来的依据。
+4. 想再提高：成片出来后，另开一个 AI 用 [rubric.md](../rubric.md) 评审，把评审意见贴回给制作的 AI 再改一轮。原片就是这样改了两轮。
+
+## 提示词
+
+```text
+You are the director, motion designer, engineer and sound designer of ONE 10-second motion-design film.
+The goal is the most classic, yet most stunning form of this style — award-shortlist / high-end commercial quality. A clean,
+template-looking result is a fail. Benchmarks: Buck, ManvsMachine, Ordinary Folk, Giant Ant, Territory Studio, Apple keynote
+motion, Pentagram motion identities, top Behance/Motionographer features, top 抖音/B站 designer accounts.
+
+# Style
+等轴 2.5D Isometric / 2.5D
+
+# Output (fixed)
+- 1920×1080, 30 fps, exactly 10.000 s (300 frames), H.264 MP4 with stereo AAC audio (48 kHz), mastered to −14 LUFS
+  integrated, true peak ≤ −1 dBTP. Final file: video.mp4.
+
+# Suggested technical route
+HTML: Three.js OrthographicCamera at true isometric angle + soft shadows + AO (three/addons postprocessing), or SVG with SSR matrix faces
+(You may choose a better route if it clearly raises quality; say why.)
+
+# Creative seed
+「微缩智慧城」An isometric miniature city / data campus that builds itself — the School-of-Motion isometric mograph showpiece.
+- True isometric camera (orthographic, 35.264° elevation, 45° azimuth), no perspective, pastel studio palette (lavender ground, mint, peach, sky blue, white) with soft shadows + ambient occlusion so it reads like a premium Dribbble/Behance hero.
+- 0–2s: ground tiles flip/drop in as a wave from the centre (tiny bounce each);
+- 2–5s: buildings GROW — base lands, walls scaleY from 0 with overshoot, roof caps 2–3 frames later; trees pop; windows light up in sequence;
+- 5–8s: life — cars loop along roads, a little train, drones carrying packets, glowing data streams pulse between buildings, a wind turbine spins; camera does parallel slides (no rotation) with 1 : 0.8 : 0.6 parallax layers (foreground clouds);
+- 8–10s: pull back to reveal the whole island floating in a pastel void; title card set ON the isometric plane (text skewed into iso space) e.g. "SMART CITY OS".
+Sound: bright plucky tech melody (FM marimba/pluck), soft clicks/pops for every tile/building landing, airy whoosh on the pull-back.
+
+You are the director: you may change the concept, copy, story beats and brand names if you find a stronger idea, but the result must remain the CANONICAL, instantly-recognisable form of this style and must hit its signature features below.
+
+# Signature features and key techniques (the result is judged against these)
+以 30° 等轴测投影展示微缩世界：小城市、办公室切片、数据机房，无灭点、处处等比。信息密度高又不失可爱，是科技公司架构图动画和 App 功能演示的标配。School of Motion 有专门的 isometric mograph 教程系列。
+视觉特征 30°等角投影, 无透视灭点, 微缩场景, 楼房生长动画, 平行滑轨式运镜
+关键技法 SSR 公式造等轴面：Scale 纵向 86.6% → Shear/skew ±30° → Rotate ∓30°，三个面分别做后拼合
+假 3D 靠图层排序：Z 序=画面 y 坐标，物体沿等轴网格移动时保持 2:1 像素斜率
+楼房'生长'：底面先落位，立面用 scaleY 从 0 拉起 + 顶面延迟 2~3 帧盖上
+运镜是整组平移（无旋转），配合前中后景 1:0.8:0.6 的视差速度
+AE 里可用真 3D 图层+正交相机（无透视）偷懒，Motion Design School 的 Isometric Camera 技巧即此路
+
+# How to work
+1. Treatment. Write down one clear idea: a hook in the first 0.5 s (never open on more than 0.3 s of empty or black), an
+   escalation, one unmistakable hero moment at ~60–75 % of the runtime, and a composed end frame held ~0.8–1.2 s with living
+   micro-motion. Map every signature feature above to a moment. Keep one cue sheet (beats and hit times) that both the
+   picture and the sound read from.
+2. Key frames before motion. Build the look, render stills at 6–10 key times and actually look at them. Each still should be
+   poster-worthy: composition, hierarchy, negative space, type set properly (kerning, line-height, weight contrast, CJK
+   punctuation, ~5 % safe margins). Iterate until nothing looks default, generic, cramped or "AI-template".
+3. Motion. Build the choreography and preview at low resolution. Step through the fastest moves frame by frame: spacing,
+   easing, arcs, overlap, anticipation and follow-through, motion blur. No unintended dead spans; the energy follows the music.
+4. Sound. Write genre-correct music and sound design locked to the cue sheet. Check that visual hits land on audio onsets.
+   Master to the output spec.
+5. Final. Render at full resolution (motion blur where apt), then check: exactly 10.00 s, resolution, fps, audio present and at
+   the right loudness, no black frames, no fallback fonts or tofu, no clipped elements at the frame edges, no shimmer on thin
+   lines, no gradient banding. Fix and repeat until you would submit it to a festival.
+6. Write an honest self-critique: what is strongest, what is weakest, what you would do with more time.
+
+# Rules
+- Rendering must be deterministic: every frame is a pure function of time t. Seeded randomness only; physics and particles
+  precomputed or closed-form; no real-time clocks; no state-triggered CSS transitions. A reliable route: a web page that can
+  draw any time t on request, captured frame by frame with a headless browser and encoded with ffmpeg (or a Blender script
+  that renders a PNG sequence).
+- Assets: only CC0 / public domain / OFL / Apache / free-for-commercial-use. Record each source and licence in CREDITS.md.
+  No real brand trademarks; invent brand names.
+- On-screen text must be correct and natural: idiomatic Chinese, proper CJK punctuation, no typos.
+
+# Craft checklist (what a jury looks for)
+- Style authenticity: an expert names the style in one second; every signature technique is present and executed correctly.
+- Motion craft: purposeful easing (no linear unless mechanical by design), overlap and stagger, anticipation and
+  follow-through, arcs, squash and stretch where the style allows, consistent physics, motion blur where apt; transitions
+  carried by elements, not crossfades.
+- Rhythm: hits locked to the music; contrast between busy and calm; no monotony.
+- Design: strong composition, grid, typographic hierarchy, controlled palette; texture and finishing (grain, glow, vignette)
+  only where the style wants it; nothing looks accidental.
+- Technical polish: no jitter (unless intended), no popping, no aliasing, no banding, no fallback fonts, no half-loaded images.
+- Sound: genre-correct, musical, synced, mastered.
+
+# Before you deliver, score yourself honestly
+1–10 on style fidelity, concept wow, motion craft, design & typography, finish & texture, sound & sync, technical
+(6 = template-level, 8 = high-end agency, 9 = award shortlist). Aim for 9; fix whatever scores lowest first.
+
+# Deliver
+video.mp4, plus a short report: the concept in two sentences; a beat sheet with timecodes; how each signature feature is
+realised; the tech route; check numbers (duration, resolution, fps, loudness, true peak); your honest top-3 weaknesses.
+```

package/lib/motion/mgstyles/upstream/prompts/05-cel-boil.md

@@ -0,0 +1,95 @@
+# 逐帧手绘 / 线条沸腾 Cel Animation / Frame-by-Frame & Line Boil
+
+**原片**：手作 HAND MADE · 1920×1080 · 24 fps · 10 秒 · AI 评审终评 8.07 / 10
+
+**源码**：[demos/05-cel-boil/](../demos/05-cel-boil/)
+
+## 怎么用
+
+1. 新建一个空文件夹，在里面打开一个能写代码、能执行命令的 AI 助手（例如 Claude Code）。本机需要能跑网页渲染（Node + Chrome）和 ffmpeg。
+2. 把下面「提示词」整段复制进去发送。
+3. 想换成自己的内容：改 `Creative seed` 里的故事、品牌名、文案和配色，或者改 `Output` 里的尺寸（比如竖屏 1080×1920）。不要删 `Signature features` 那一段，它是这种风格被一眼认出来的依据。
+4. 想再提高：成片出来后，另开一个 AI 用 [rubric.md](../rubric.md) 评审，把评审意见贴回给制作的 AI 再改一轮。原片就是这样改了两轮。
+
+## 提示词
+
+```text
+You are the director, motion designer, engineer and sound designer of ONE 10-second motion-design film.
+The goal is the most classic, yet most stunning form of this style — award-shortlist / high-end commercial quality. A clean,
+template-looking result is a fail. Benchmarks: Buck, ManvsMachine, Ordinary Folk, Giant Ant, Territory Studio, Apple keynote
+motion, Pentagram motion identities, top Behance/Motionographer features, top 抖音/B站 designer accounts.
+
+# Style
+逐帧手绘 / 线条沸腾 Cel Animation / Frame-by-Frame & Line Boil
+
+# Output (fixed)
+- 1920×1080, 24 fps, exactly 10.000 s (240 frames), H.264 MP4 with stereo AAC audio (48 kHz), mastered to −14 LUFS
+  integrated, true peak ≤ −1 dBTP. Final file: video.mp4.
+
+# Suggested technical route
+HTML Canvas2D: custom variable-width brush renderer (centreline + pressure → outline polygon), boil = 3–4 jitter variants cycled every 2 frames; paper texture multiply
+(You may choose a better route if it clearly raises quality; say why.)
+
+# Creative seed
+「手作魔法」Hand-made frame-by-frame magic, Buck/Giant-Ant hybrid (clean shapes + hand-drawn cel FX), animated on 2s at 24 fps.
+- Warm paper ground; ink linework that BOILS (lines redrawn with slight variation every 2 frames); fills slightly off-register like hand colouring.
+- Story: a matchstick strikes (SMEAR frame, on 1s for the fast action) → a flame spirit character jumps out, anticipation + squash, dances (on 2s) → it bursts into cel FX: smoke puffs curling, sparks, star bursts, speed lines → the FX re-form into hand-lettered title (e.g. "HAND MADE" or 手作) that keeps boiling on a 1s hold (on 3s for the hold).
+- Palette 3–4 colours: ink black, tomato red, sunny yellow, cream paper; paper grain multiply 10–15%.
+Sound: playful jazzy pizzicato/xylophone bed + cartoon SFX: strike, fwoosh, pop, poof, sparkle — synced to the frame.
+
+You are the director: you may change the concept, copy, story beats and brand names if you find a stronger idea, but the result must remain the CANONICAL, instantly-recognisable form of this style and must hit its signature features below.
+
+# Signature features and key techniques (the result is judged against these)
+手绘逐帧或在矢量动画上叠加逐帧质感，标志性特征是 line boil——线条每隔几帧轻微抖动，仿佛画面在'呼吸'。Giant Ant、Buck 等工作室大量使用 cel 元素（烟、水花、速度线）点缀主动画，反数字精致感的核心手段。
+视觉特征 线条持续微抖(boil), 一拍二/一拍三节奏, smear拖影帧, 手绘烟火水花点缀, 纸纹底
+关键技法 打帧节奏：24fps 下'一拍二'（实际12fps）为主，快动作切'一拍一'，静止镜头'一拍三'
+line boil 伪造法：AE 用 Turbulent Displace（数量2~5、大小50）+ 每 2 帧随机化 evolution + Posterize Time 12fps；真 boil 则画 3~4 张微差线稿循环
+smear frame：快速位移的中间帧把物体拉长 150%~300% 只保留 1 帧
+cel FX 点缀层：烟/水花/闪电用纯手绘逐帧叠在矢量主体上（Buck 式 hybrid）
+整体叠纸纹（multiply 10~15%）统一手作气质
+
+# How to work
+1. Treatment. Write down one clear idea: a hook in the first 0.5 s (never open on more than 0.3 s of empty or black), an
+   escalation, one unmistakable hero moment at ~60–75 % of the runtime, and a composed end frame held ~0.8–1.2 s with living
+   micro-motion. Map every signature feature above to a moment. Keep one cue sheet (beats and hit times) that both the
+   picture and the sound read from.
+2. Key frames before motion. Build the look, render stills at 6–10 key times and actually look at them. Each still should be
+   poster-worthy: composition, hierarchy, negative space, type set properly (kerning, line-height, weight contrast, CJK
+   punctuation, ~5 % safe margins). Iterate until nothing looks default, generic, cramped or "AI-template".
+3. Motion. Build the choreography and preview at low resolution. Step through the fastest moves frame by frame: spacing,
+   easing, arcs, overlap, anticipation and follow-through, motion blur. No unintended dead spans; the energy follows the music.
+4. Sound. Write genre-correct music and sound design locked to the cue sheet. Check that visual hits land on audio onsets.
+   Master to the output spec.
+5. Final. Render at full resolution (motion blur where apt), then check: exactly 10.00 s, resolution, fps, audio present and at
+   the right loudness, no black frames, no fallback fonts or tofu, no clipped elements at the frame edges, no shimmer on thin
+   lines, no gradient banding. Fix and repeat until you would submit it to a festival.
+6. Write an honest self-critique: what is strongest, what is weakest, what you would do with more time.
+
+# Rules
+- Rendering must be deterministic: every frame is a pure function of time t. Seeded randomness only; physics and particles
+  precomputed or closed-form; no real-time clocks; no state-triggered CSS transitions. A reliable route: a web page that can
+  draw any time t on request, captured frame by frame with a headless browser and encoded with ffmpeg (or a Blender script
+  that renders a PNG sequence).
+- Assets: only CC0 / public domain / OFL / Apache / free-for-commercial-use. Record each source and licence in CREDITS.md.
+  No real brand trademarks; invent brand names.
+- On-screen text must be correct and natural: idiomatic Chinese, proper CJK punctuation, no typos.
+
+# Craft checklist (what a jury looks for)
+- Style authenticity: an expert names the style in one second; every signature technique is present and executed correctly.
+- Motion craft: purposeful easing (no linear unless mechanical by design), overlap and stagger, anticipation and
+  follow-through, arcs, squash and stretch where the style allows, consistent physics, motion blur where apt; transitions
+  carried by elements, not crossfades.
+- Rhythm: hits locked to the music; contrast between busy and calm; no monotony.
+- Design: strong composition, grid, typographic hierarchy, controlled palette; texture and finishing (grain, glow, vignette)
+  only where the style wants it; nothing looks accidental.
+- Technical polish: no jitter (unless intended), no popping, no aliasing, no banding, no fallback fonts, no half-loaded images.
+- Sound: genre-correct, musical, synced, mastered.
+
+# Before you deliver, score yourself honestly
+1–10 on style fidelity, concept wow, motion craft, design & typography, finish & texture, sound & sync, technical
+(6 = template-level, 8 = high-end agency, 9 = award shortlist). Aim for 9; fix whatever scores lowest first.
+
+# Deliver
+video.mp4, plus a short report: the concept in two sentences; a beat sheet with timecodes; how each signature feature is
+realised; the tech route; check numbers (duration, resolution, fps, loudness, true peak); your honest top-3 weaknesses.
+```

package/lib/motion/mgstyles/upstream/prompts/06-collage.md

@@ -0,0 +1,95 @@
+# 拼贴剪贴 Collage / Cutout Animation
+
+**原片**：NOGGIN 脑洞季刊「脑洞大开 The Mind Is a Collage」 · 1920×1080 · 30 fps · 10 秒 · AI 评审终评 8.14 / 10
+
+**源码**：[demos/06-collage/](../demos/06-collage/)
+
+## 怎么用
+
+1. 新建一个空文件夹，在里面打开一个能写代码、能执行命令的 AI 助手（例如 Claude Code）。本机需要能跑网页渲染（Node + Chrome）和 ffmpeg。
+2. 把下面「提示词」整段复制进去发送。
+3. 想换成自己的内容：改 `Creative seed` 里的故事、品牌名、文案和配色，或者改 `Output` 里的尺寸（比如竖屏 1080×1920）。不要删 `Signature features` 那一段，它是这种风格被一眼认出来的依据。
+4. 想再提高：成片出来后，另开一个 AI 用 [rubric.md](../rubric.md) 评审，把评审意见贴回给制作的 AI 再改一轮。原片就是这样改了两轮。
+
+## 提示词
+
+```text
+You are the director, motion designer, engineer and sound designer of ONE 10-second motion-design film.
+The goal is the most classic, yet most stunning form of this style — award-shortlist / high-end commercial quality. A clean,
+template-looking result is a fail. Benchmarks: Buck, ManvsMachine, Ordinary Folk, Giant Ant, Territory Studio, Apple keynote
+motion, Pentagram motion identities, top Behance/Motionographer features, top 抖音/B站 designer accounts.
+
+# Style
+拼贴剪贴 Collage / Cutout Animation
+
+# Output (fixed)
+- 1920×1080, 30 fps, exactly 10.000 s (300 frames), H.264 MP4 with stereo AAC audio (48 kHz), mastered to −14 LUFS
+  integrated, true peak ≤ −1 dBTP. Final file: video.mp4.
+
+# Suggested technical route
+HTML: DOM/Canvas with PNG cutouts from /assets/images (rembg), SVG/CSS white-edge + halftone filters; stepped 12 fps (render 30 fps, hold motion on 12 fps grid)
+(You may choose a better route if it clearly raises quality; say why.)
+
+# Creative seed
+「脑洞拼贴」Surreal Dada/Monty-Python cutout collage in a modern editorial magazine finish.
+- Newsprint/kraft paper ground; a public-domain Victorian portrait cutout with rough white scissor edge + halftone; the top of the head FLIPS OPEN like a lid (Terry Gilliam homage) revealing deep space (NASA PD imagery) from which flowers, birds, planets, pointing hands and a vintage rocket spill out.
+- Jaw/mouth on a separate cut flaps with the sound; hands slap elements onto the page; torn-paper strips; bold constructivist red/black diagonal typography (e.g. "THE MIND IS A COLLAGE" / 脑洞大开).
+- Motion on 12 fps (even 6 fps for some holds) with ±2px hand-placement jitter; paper-flip / torn-paper transition to the end card.
+Sound: vinyl crackle, jazzy boom-bap bed, paper rustles, scissors snips, slaps and a comic 'pop' when the lid opens.
+
+You are the director: you may change the concept, copy, story beats and brand names if you find a stronger idea, but the result must remain the CANONICAL, instantly-recognisable form of this style and must hit its signature features below.
+
+# Signature features and key techniques (the result is judged against these)
+把老照片、报纸、手撕纸片剪出来重新拼装的复古超现实风格，源头是 Monty Python 和苏联构成主义海报。人物头身比例失衡、嘴巴单独开合、半调网点纹理是标志。近年与'杂志风'合流，成为音乐类、街头潮流类短视频的高频风格。
+视觉特征 照片剪影白描边, 半调网点, 报纸纹理, 比例失衡的超现实拼装, 定格式抽帧运动
+关键技法 素材处理：人物/物件抠图后加 2~4px 白描边（剪刀剪出来的感觉）+ 半调 halftone 滤镜
+关节动画：锚点设在肩/肘/颌，做 puppet 式分段旋转，嘴巴用两三张替换帧开合
+刻意降帧：主体运动 12fps 甚至 6fps（stop-motion 感），位置加 ±2px 随机抖动模拟手摆
+图层结构：背景纸纹 → 大形色块 → 照片剪影 → 手写涂鸦/胶带贴纸 → 颗粒调整层
+转场用'手把元素拍上来'或整页翻纸
+
+# How to work
+1. Treatment. Write down one clear idea: a hook in the first 0.5 s (never open on more than 0.3 s of empty or black), an
+   escalation, one unmistakable hero moment at ~60–75 % of the runtime, and a composed end frame held ~0.8–1.2 s with living
+   micro-motion. Map every signature feature above to a moment. Keep one cue sheet (beats and hit times) that both the
+   picture and the sound read from.
+2. Key frames before motion. Build the look, render stills at 6–10 key times and actually look at them. Each still should be
+   poster-worthy: composition, hierarchy, negative space, type set properly (kerning, line-height, weight contrast, CJK
+   punctuation, ~5 % safe margins). Iterate until nothing looks default, generic, cramped or "AI-template".
+3. Motion. Build the choreography and preview at low resolution. Step through the fastest moves frame by frame: spacing,
+   easing, arcs, overlap, anticipation and follow-through, motion blur. No unintended dead spans; the energy follows the music.
+4. Sound. Write genre-correct music and sound design locked to the cue sheet. Check that visual hits land on audio onsets.
+   Master to the output spec.
+5. Final. Render at full resolution (motion blur where apt), then check: exactly 10.00 s, resolution, fps, audio present and at
+   the right loudness, no black frames, no fallback fonts or tofu, no clipped elements at the frame edges, no shimmer on thin
+   lines, no gradient banding. Fix and repeat until you would submit it to a festival.
+6. Write an honest self-critique: what is strongest, what is weakest, what you would do with more time.
+
+# Rules
+- Rendering must be deterministic: every frame is a pure function of time t. Seeded randomness only; physics and particles
+  precomputed or closed-form; no real-time clocks; no state-triggered CSS transitions. A reliable route: a web page that can
+  draw any time t on request, captured frame by frame with a headless browser and encoded with ffmpeg (or a Blender script
+  that renders a PNG sequence).
+- Assets: only CC0 / public domain / OFL / Apache / free-for-commercial-use. Record each source and licence in CREDITS.md.
+  No real brand trademarks; invent brand names.
+- On-screen text must be correct and natural: idiomatic Chinese, proper CJK punctuation, no typos.
+
+# Craft checklist (what a jury looks for)
+- Style authenticity: an expert names the style in one second; every signature technique is present and executed correctly.
+- Motion craft: purposeful easing (no linear unless mechanical by design), overlap and stagger, anticipation and
+  follow-through, arcs, squash and stretch where the style allows, consistent physics, motion blur where apt; transitions
+  carried by elements, not crossfades.
+- Rhythm: hits locked to the music; contrast between busy and calm; no monotony.
+- Design: strong composition, grid, typographic hierarchy, controlled palette; texture and finishing (grain, glow, vignette)
+  only where the style wants it; nothing looks accidental.
+- Technical polish: no jitter (unless intended), no popping, no aliasing, no banding, no fallback fonts, no half-loaded images.
+- Sound: genre-correct, musical, synced, mastered.
+
+# Before you deliver, score yourself honestly
+1–10 on style fidelity, concept wow, motion craft, design & typography, finish & texture, sound & sync, technical
+(6 = template-level, 8 = high-end agency, 9 = award shortlist). Aim for 9; fix whatever scores lowest first.
+
+# Deliver
+video.mp4, plus a short report: the concept in two sentences; a beat sheet with timecodes; how each signature feature is
+realised; the tech route; check numbers (duration, resolution, fps, loudness, true peak); your honest top-3 weaknesses.
+```

package/lib/motion/mgstyles/upstream/prompts/07-liquid.md

@@ -0,0 +1,98 @@
+# 液态流动 Liquid Motion
+
+**原片**：drop.「万物始于一滴」 · 1920×1080 · 30 fps · 10 秒 · AI 评审终评 7.57 / 10
+
+**源码**：[demos/07-liquid/](../demos/07-liquid/)
+
+## 怎么用
+
+1. 新建一个空文件夹，在里面打开一个能写代码、能执行命令的 AI 助手（例如 Claude Code）。本机需要能跑网页渲染（Node + Chrome）和 ffmpeg。
+2. 把下面「提示词」整段复制进去发送。
+3. 想换成自己的内容：改 `Creative seed` 里的故事、品牌名、文案和配色，或者改 `Output` 里的尺寸（比如竖屏 1080×1920）。不要删 `Signature features` 那一段，它是这种风格被一眼认出来的依据。
+4. 想再提高：成片出来后，另开一个 AI 用 [rubric.md](../rubric.md) 评审，把评审意见贴回给制作的 AI 再改一轮。原片就是这样改了两轮。
+
+## 提示词
+
+```text
+You are the director, motion designer, engineer and sound designer of ONE 10-second motion-design film.
+The goal is the most classic, yet most stunning form of this style — award-shortlist / high-end commercial quality. A clean,
+template-looking result is a fail. Benchmarks: Buck, ManvsMachine, Ordinary Folk, Giant Ant, Territory Studio, Apple keynote
+motion, Pentagram motion identities, top Behance/Motionographer features, top 抖音/B站 designer accounts.
+
+# Style
+液态流动 Liquid Motion
+
+# Output (fixed)
+- 1920×1080, 30 fps, exactly 10.000 s (300 frames), H.264 MP4 with stereo AAC audio (48 kHz), mastered to −14 LUFS
+  integrated, true peak ≤ −1 dBTP. Final file: video.mp4.
+
+# Suggested technical route
+HTML WebGL2 fragment shader: 2D SDF metaballs (smooth-min) + fake 3D lighting from field gradient normals, text SDF for the logo
+(You may choose a better route if it clearly raises quality; say why.)
+
+# Creative seed
+「液态创世」Liquid logo genesis — glossy, organic, high energy.
+- Deep plum ground; glossy candy liquid (hot orange → pink → violet) with specular highlights and fresnel rim so it reads like thick 3D liquid, not flat blobs.
+- 0–2s: droplets fall and splash with squash on landing; 2–4s: blobs merge via metaball fusion — stretched necks, snap, 2–3 frame rebound; secondary droplets follow 2–3 frames late;
+- 4–6s: a big liquid wave floods across the frame as a transition (wavy front with 3–5 phase-offset bulges);
+- 6–8.5s: the liquid coalesces into a wordmark (e.g. "FLUX") — text SDF blended with the metaballs;
+- 8.5–10s: a last drip falls from the logo and ripples; hold.
+Ease: flung, never uniform (cubic-bezier(0.22,1,0.36,1)).
+Sound: bubbly gloops, pour, splash, drip, deep bass swell under a glossy synth bed.
+
+You are the director: you may change the concept, copy, story beats and brand names if you find a stronger idea, but the result must remain the CANONICAL, instantly-recognisable form of this style and must hit its signature features below.
+
+# Signature features and key techniques (the result is judged against these)
+图形像液体一样流动、拉丝、滴落、融合：转场是一泼颜料漫过屏幕，logo 从一滴液体聚合成形。有机、解压、高能量，广泛用于音乐视频、食品饮料广告和转场包装。
+视觉特征 波浪边缘转场, 拉丝与滴落, metaball融合, 次级液滴跟随, 有机曲线永不直线
+关键技法 液态转场：遮罩路径手 K 波浪形前沿扫过画面，前沿加 3~5 个错相位的凸起
+metaball 融合的通用伪造法：高斯模糊(20px+) → 提高对比度阈值（AE 用 Levels 收紧、Web 用 feColorMatrix alpha 阈值），两球靠近即自动'粘连'
+拉丝-断裂-回弹：主形离开时留一条细颈，断裂瞬间两端各回弹 2~3 帧
+缓动前快后慢 cubic-bezier(0.22,1,0.36,1)，液体只会被'甩'出去不会匀速
+次级液滴延迟主体 2~3 帧跟随（follow-through），落地做扁平化 squash
+
+# How to work
+1. Treatment. Write down one clear idea: a hook in the first 0.5 s (never open on more than 0.3 s of empty or black), an
+   escalation, one unmistakable hero moment at ~60–75 % of the runtime, and a composed end frame held ~0.8–1.2 s with living
+   micro-motion. Map every signature feature above to a moment. Keep one cue sheet (beats and hit times) that both the
+   picture and the sound read from.
+2. Key frames before motion. Build the look, render stills at 6–10 key times and actually look at them. Each still should be
+   poster-worthy: composition, hierarchy, negative space, type set properly (kerning, line-height, weight contrast, CJK
+   punctuation, ~5 % safe margins). Iterate until nothing looks default, generic, cramped or "AI-template".
+3. Motion. Build the choreography and preview at low resolution. Step through the fastest moves frame by frame: spacing,
+   easing, arcs, overlap, anticipation and follow-through, motion blur. No unintended dead spans; the energy follows the music.
+4. Sound. Write genre-correct music and sound design locked to the cue sheet. Check that visual hits land on audio onsets.
+   Master to the output spec.
+5. Final. Render at full resolution (motion blur where apt), then check: exactly 10.00 s, resolution, fps, audio present and at
+   the right loudness, no black frames, no fallback fonts or tofu, no clipped elements at the frame edges, no shimmer on thin
+   lines, no gradient banding. Fix and repeat until you would submit it to a festival.
+6. Write an honest self-critique: what is strongest, what is weakest, what you would do with more time.
+
+# Rules
+- Rendering must be deterministic: every frame is a pure function of time t. Seeded randomness only; physics and particles
+  precomputed or closed-form; no real-time clocks; no state-triggered CSS transitions. A reliable route: a web page that can
+  draw any time t on request, captured frame by frame with a headless browser and encoded with ffmpeg (or a Blender script
+  that renders a PNG sequence).
+- Assets: only CC0 / public domain / OFL / Apache / free-for-commercial-use. Record each source and licence in CREDITS.md.
+  No real brand trademarks; invent brand names.
+- On-screen text must be correct and natural: idiomatic Chinese, proper CJK punctuation, no typos.
+
+# Craft checklist (what a jury looks for)
+- Style authenticity: an expert names the style in one second; every signature technique is present and executed correctly.
+- Motion craft: purposeful easing (no linear unless mechanical by design), overlap and stagger, anticipation and
+  follow-through, arcs, squash and stretch where the style allows, consistent physics, motion blur where apt; transitions
+  carried by elements, not crossfades.
+- Rhythm: hits locked to the music; contrast between busy and calm; no monotony.
+- Design: strong composition, grid, typographic hierarchy, controlled palette; texture and finishing (grain, glow, vignette)
+  only where the style wants it; nothing looks accidental.
+- Technical polish: no jitter (unless intended), no popping, no aliasing, no banding, no fallback fonts, no half-loaded images.
+- Sound: genre-correct, musical, synced, mastered.
+
+# Before you deliver, score yourself honestly
+1–10 on style fidelity, concept wow, motion craft, design & typography, finish & texture, sound & sync, technical
+(6 = template-level, 8 = high-end agency, 9 = award shortlist). Aim for 9; fix whatever scores lowest first.
+
+# Deliver
+video.mp4, plus a short report: the concept in two sentences; a beat sheet with timecodes; how each signature feature is
+realised; the tech route; check numbers (duration, resolution, fps, loudness, true peak); your honest top-3 weaknesses.
+```