One shot = one independent HTML, a unified player chassis + a completely different visual style per page, and full-screen screen recording becomes the final cut. Content is open (technical testing/product launch/course/narrative all work); what stays constant is the cinematic mechanism, shot language, and completion standards.
Creative Philosophy
- Style rotation: consecutive shots must never share the same style. Ask "if this content were a physical object/a place, what would it be"—retro newspaper, POS receipt, interrogation room, pixel game… turn abstract contentinto a concrete worldview, and the page comes alive.
- No default tech dark mode: black background + neon + glassmorphism's "pitch-black glossy shine" gets tiring after two pages, unless the content itself is terminal-themed.
- Imagination first: above the chassis, write freely—stamps that slam down, coins that drop into a piggy bank; users want a sense of surprise.
- Completion is discipline: elements enter and exit (or freeze), no overlapping occlusion, no orphan elements, a replay hint at the end, and source footnotes for data.
- Audio-visual sync: key actions have sound effects, camera moves come with a whoosh; silence is also design.
Token Discipline (Hard Rule)
- No reading through
assets/template.htmlandassets/examples/any finished page (a single one is 20–50KB, reading it exhausts the budget). - Templates are always
cpcopied, thenread only the marked regions(Step 1); for finished pages, only when still stuck after writing, grep to locate and then read a line-number window of ≤80 lines. - Mechanism and style knowledge should be taken first from the
references/three condensed documents; do not read source code on the spot to reverse-engineer.
Workflow
Step 0 · Input and style assignment table: read through the material (outline/voiceover script/visual design/oral account), get the storyboard list + voiceover timestamps (timeline alignment baseline) + character assets. Arrange the table 镜头|时长|视觉风格|字体组合|主色: adjacent shots differ in style, no repeats across the whole set,the same entity locks to the same color across the entire series(viewers track across pages by color). Start work only after the table is confirmed by the user. Asset copying (do not read contents):
cp -r "assets/examples/<项目>/anan - emotion rename" <输出目录>/ # 安安 15 情绪立绘；图标同理
cp -r "assets/shery - emotion rename" <输出目录>/ # 橘雪莉 20 情绪（笨蛋吐槽役，重点页与安安同框）
Step 1 · Implement page by page(start with cp, read only marked regions):
cp assets/template.html "<输出目录>/shot-x-x_名称.html"
grep -n "改这里\|DUR=" "<输出目录>/shot-x-x_名称.html" # 行号地图（7 处改这里 + DUR）
Use Read's offset/limit to read only the area near the marked lines (font link + stage background color / visual layer CSS / visual HTML / cue table + DUR), replacing one by one: ① fonts and color scheme (Google Fonts per style); ② redraw the visual layer; ③ write cues according to voiceover timestamps (comments reference voiceover lines, e.g. // 5:20「正常充值」）；④ DUR=specified duration ±0.5s. The chassis (bootstrap script/sound engine/timeline/shot scheduling/HUD) stays untouched.
Read references as needed (all are small):references/mechanics.md player + shot + sound effect mechanisms ｜ references/style-cards.md 41 style cards (fonts/main colors/materials/sample page numbers) ｜ references/character-reactions.md dual-character banter system (An'an × Orange Shirley emotion table, mid-section flash-cut character art, two-person same-frame cues, bubble hard-constraint template).
Step 2 · Quality check：node scripts/shot.js 页面.html <毫秒> _t.png [fx fy scale] Headless screenshots at multiple time points, checking each one for overlapping occlusion / mid-state glitches / ending freeze frames, and finally play through the whole thing once.
Step 3 · index overview: navigation cards grouped by chapter (number/duration/title/style tag), forming a style of their own.
When renovating an existing page: first inventory and list (pages the user explicitly named to keep are left untouched word for word) → uniformly inject the chassis → redesign the visual layer page by page → add character/camera/sound-effect cues → quality check.
Delivery standards
- Starts with a black-screen "Start Playback", begins after a 2s fade-in; 1920×1080 adaptive; HUD summoned from the bottom; can pause and replay; DUR accurate
- Adjacent shots differ in style/font/color scheme; no default tech dark theme; emoji→inline flat SVG
- Key beats have camera movement (push/pull/follow/pan) + whoosh; key actions have sound effects; count-up scrolling has combo key sounds
- Character entrancesat least 2 times per page(mid-section 30–45% DUR flash cut + ending 75–85% establishing shot, short pages only the ending): flash cut = same element with changed lines and changed character art, 160ms flash swap with re-bounce; key pages have two characters (Shirley complains first → Anan chimes in 1.2s later, exiting in the same frame); speech bubblesmust use the unified strongly constrained template(form locked, only 4 color schemes adjustable, see character-reactions.md)
- No bottom subtitle bar (voiceover is only aligned via cue annotations, not shown on screen); screenshot verification shows no overlapping occlusion; data corner notes cite sources; index can be opened page by page