What the audience sees is a real Win11 computer "operating itself": Bloom wallpaper desktop, acrylic taskbar, File Explorer opening layer by layer, system pop-up errors, blue screen automatic repair — amouse that operates itselfguides the audience through the whole process, with teaching annotations (question mark badges/warning signs/red circles) overlaid on the restored interface to explain. Each shot is an independent HTML, with a cinematic player chassis, and a full-screen recording becomes the final cut.
Creative Philosophy
- Pixel-level restoration is the lifeline: window background
#f3f6fb、accent#0067c0, 10px rounded corners, double-layer shadows, acrylic taskbarrgba(238,244,252,.82)+blur(18px)— the audience subconsciously believes in this computer, and only then does the demo become convincing. Better to make one less screen than to get one pixel wrong. - The cursor is the protagonist: a mouse visible throughout (move → hover → click → double-click) is the narrator, and the audience follows it. A system demo without cursor performance = a collection of screenshots.
- The teaching annotation layer is separate from the restoration layer: the interface belongs to the interface (1:1), and the explanation belongs to the explanation (question mark badges, warning signs, capacity in red, percentage overlays — all are "the teacher's hand" placed on the real interface).
- Real system copy: error codes (0xc0000142), "Insufficient storage space", breadcrumb paths, status bar item counts — the sense of detail comes from real copy.
- Causal chain narrative: reckless deletion → error → blue screen repair; the "dramatic quality" of the system interface is naturally suited to a problem → worsening → resolution arc.
- Each shot is 15–45s, one complete interaction; voiceover alignment only writes cue comments (no subtitle bar).
Token Discipline (Mandatory)
- Do not read through
assets/template.htmlandassets/examples/any final page (20–50KB each). - Template
cpafter copying,grep -n "改这里\|DUR="get line numbers, and only read the marked area for rewriting; for final pages, only when stuck, grep to locate and then read a window of ≤80 lines. - For component specifications and techniques, first check
references/the two condensed documents.
Workflow
Step 0 · Storyboard table: read through the materials (voiceover script/operation process/knowledge points), split into 镜头|时长|系统场景(桌面/资源管理器/对话框/蓝屏…)|交互动作(光标走位)|教学标记 allocation table, and confirm with the user. When wallpapers and characters are needed:
cp -r "assets/examples/wukong-c-clean/material" <输出目录>/ # Bloom 壁纸（或用模板 CSS 渐变兜底）
cp "assets/examples/wukong-c-clean/Shark-GIF/<编号_情绪>.gif" <输出目录>/Shark-GIF/ # 按需 GIF
Step 1 · Implement page by page：cp assets/template.html 输出目录/shot-xx_名称.html → grep to locate → only modify the [modify here] area (desktop icons/window content/pop-ups/cue). The chassis and WIN11 simulation suite CSS remain unchanged. Cue comments reference voiceover beats (// (0:07) 想自己清理一下）。
Step 2 · Quality check：node ../video-shot-demos/scripts/shot.js 页面.html <毫秒> _t.png Take screenshots at multiple time points and check: restoration fidelity (does it look like Win11?) / reasonable cursor trajectory / overlapping occlusion / intermediate-state inconsistencies / status bar, address bar, and view synchronization.
Step 3 · index overview: navigation cards grouped by chapter (number/duration/system scene tags), and retain the statement that "the interface is a demo restoration".
Delivery Standards
- Black screen opening with "start playback"; 1920×1080 adaptive; HUD summoned from the bottom; pausable and replayable; DUR accurate
- Win11 Light Fluent key colors/corner radii/shadows/acrylic accurate (see win11-kit.md); system font stack with zero webfont
- Cursor performance throughout: movement has a fly trail, clicks have scaling feedback, double-click enters the secondary interface
- View switching keeps three in sync (tab/address bar breadcrumb/status bar item count); authentic system copy
- Instructional markers do not overstep (overlaid on the interface but keeping the lightness of a "hand"); character GIF commentary at emotional anchor points
- Footer note includes "interface is a demo restoration · Windows 11 layout"; screenshot verification shows no occlusion or visual glitches