Video Storyboard Demo Animations (One HTML per Shot)

Turn the storyboards of a video project into a series of web animations ready for full-screen recording as final footage: one shot = one independent HTML, with a unified player experience but a completely unique visual style for each page. This Skill has open content—you can demo anything (technical tests, product launches, course explanations, story narration); what remains consistent is the cinematic mechanism, shot language, and completion standards.

Creative Philosophy (Read This First, It Determines All Output Quality)

Style is rotational, not a brand. No two consecutive shots share the same style. For each page, ask yourself: "If this content were a poster/an object/a print/a place, what would it be?"—vintage newspaper, convenience store POS receipt, martial arts manual, airport security, pixel game... Materialize abstract content into a worldview, and the page comes alive.
Ban default tech dark mode. The "dark, shiny, neon-glowing + glassmorphism" style is the biggest failure: stunning on the first page, tiring on the third, cheap on the fifth. Only use it if the content itself is terminal/hacker-themed.
Imagination > rules. After getting the "chassis" of the player mechanism, let loose on the visual layer: unexpected metaphors, physical mechanical structures, falling seals, coins dropping into piggy banks. Users want "surprise".
Completion is discipline: Every element has an entrance animation, exit or freeze frame; no overlapping occlusion; no orphaned elements; replay hint at the end; data has source footnotes. A half-finished product is worse than a plain one.
Audio-visual synchronization: Each key action is paired with WebAudio synthesized sound effects, and shot movements are paired with whoosh sounds. Silence is also design—not every millisecond needs sound.

Workflow

Step 0 · Understand Input and Prepare Materials

First, find and read through the user's video project materials (common types:

大纲.md

口播稿.md

画面设计.md

, or user's verbal descriptions/posts/screenshots). You need to obtain three things:

Storyboard list: What each shot covers, and its duration in seconds;
Script: Timestamps for each line of dialogue—it is the alignment benchmark for the animation timeline;
Assets: Character emoticons, Logo icons, data screenshots, etc.

This Skill comes with a built-in asset library and example library (

assets/

```
assets/examples/anan - emotion rename/
```
— Anan's 15 emotion illustrations (HD PNGs, ~5MB each). When starting a new project, copy the entire folder into the user's output directory, and reference them in pages using relative paths like
```
anan - emotion rename/12_粉颊捧笺_娇羞雀跃.png
```
. See
```
references/character-reactions.md
```
for the emotion-to-scene quick reference table.
```
assets/examples/icons/
```
— Model Logos like
```
GLMicon.png
```
,
```
GPTicon.png
```
, etc. Similarly, copy them to the output directory and reference as
```
icons/GLMicon.png
```
; add new character Logos following this pattern.
```
assets/examples/
```
— 29 production-ready pages + index overview + original player reference (
```
reference/0-1-typewriter.html
```
). The whole set can be run directly by double-clicking. They are "living templates" for all styles: before writing a certain style, read 1-2 finished pages of the same style to learn implementation techniques (see the index at the end of
```
references/style-library.md
```
for style-to-page mapping, or directly open examples/index.html to view style tags).

If materials are incomplete, first create a storyboard table (shot number/title/duration/script segment) for user confirmation before starting. If there is no script, arrange the timeline according to content rhythm yourself, and note the narrative beat corresponding to each cue in code comments.

Step 1 · Style Allocation Table (Must Do Before Starting)

Create a table for all shots:

Shot | Duration | Visual Style | Font Combination | Main Color

. Rules:

Adjacent shots have different styles; try not to repeat styles in the whole series (29 shots can have 29 styles);
Each style corresponds to the content type it excels at (see the list in
```
references/style-library.md
```
);
Consistency across the series: Lock the same color for the same entity throughout the series (e.g., Model A = electric cyan, Model B = amber gold, danger = red). Audiences track characters across pages via color—this is far more sophisticated than changing colors per page.

Show the table to the user for confirmation (one-time confirmation to avoid reworking the entire batch), then implement each page one by one.

Step 2 · Page-by-Page Implementation

Start by copying from
assets/template.html
—it already includes all the chassis (virtual clock player, sound effect engine, 1920×1080 stage, shot layer, timeline engine, HUD, subtitle bar, character position). Then:

Change fonts (Google Fonts, matching the style) and color schemes, redraw the visual layer;
Write cues according to script timestamps (each cue references the corresponding script line via comment, e.g.,
```
// 5:20「正常充值50块钱」
```
);
Arrange shot scheduling (see "Shot Language" below) and sound effect cues;
The duration
```
DUR
```
must equal the specified seconds for the shot, with an error of ±0.5s.

Read subsystem details as needed:

```
references/player-system.md
```
— Principles and customization of black screen startup/virtual clock/HUD/timeline engine/pause and replay
```
references/camera.md
```
— Shot language like camTo/camFocus, opening pull shot, follow shot, slow-motion black bars, etc.
```
references/sfx.md
```
— WebAudio synthesized sound effect engine, cue notation, soundtrack principles
```
references/style-library.md
```
— Style library (29 examples + applicable content), font pairing, anti-patterns
```
references/character-reactions.md
```
— Specifications for character expression close-ups, gag bubbles, subtitle bar synchronization

Step 3 · Quality Inspection (Must Do for Each Page, Final Check Before Recording)

Use

scripts/shot.js

to take headless screenshots at multiple time points (mechanism: virtual clock can fast-forward to any millisecond directly):

bash

node scripts/shot.js 页面.html 5000 _t5s.png          # At 5s
node scripts/shot.js 页面.html 12000 _t12s.png 960 540 1.2   # At 12s + camera locked in zoom-in state

Check each screenshot one by one: overlapping occlusion (text over text, bubbles going out of frame), completion (did all required elements appear?), animation state (are there any glitches in intermediate states?), final frame (is the ending freeze frame decent?). Fix issues and retake screenshots if needed. Finally, play through the page fully yourself.

Step 4 · Overview Page index.html

Create an overview with a style consistent with the main footage (but a unique style itself): group by chapters, list each page as a card (shot number/duration/title/style tag), note locked character colors and data sources. It serves as both navigation and an inspection checklist for the user.

When Revamping Existing Demo Pages

When the user provides a batch of existing pages for "renovation" (instead of building from scratch):

First, inventory: which pages have duplicate styles/poor animations/low completion—create a list for the user, do not modify a single character of pages the user specifies to keep;
Unify the chassis: inject the player bootstrap script/sound effect engine/shot layer from the template into the pages to be modified (replace the fragmented old players);
Redesign the visual layer page by page (following the style allocation table process);
Add character reactions, shot cues, sound effect cues, then go through Step 3 for quality inspection.

Delivery Standards (Incomplete if Any Item is Missing)

Starts with a black screen + "Start Playing" button, fades out of black screen 2s after clicking to begin the show
1920×1080 stage with adaptive scaling; HUD (progress bar/timecode) is hidden by default, appears when mouse moves to the bottom of the screen
Pause/replay available; replay hint appears after playback ends
Each page has an independent clock, resets on refresh; DUR = specified duration
Each page has a different style, font combination, and color scheme from adjacent pages; no default tech dark mode
Replace all emojis with flat SVG icons
Key beats have shot movements (push/pull/follow/pan) + whoosh sounds
Key actions have sound effects; counting scrolls have consecutive key sounds
Character expression close-ups + gag bubbles (when assets are available), fade in to appear
Subtitle bar is synchronized with each line of the script, with keywords highlighted
No overlapping occlusion (verified via screenshots); data has source footnotes
index.html overview can open each page individually

video-shot-demos

NPX Install

Tags

SKILL.md Content (Chinese)