Turn any content into a series ofthat looks like a carefully choreographed screen recording of a real phoneweb animations: a phone with vivid 3D posture at the center of a 1920×1080 stage, with content presented through lock screen notifications, chats, settings pages, Control Center, App interfaces, and othersystem componentsshot by shot. The whole series is connected to a cinematic player (black-screen opening / virtual clock / segmented progress jumping / mute toggle), and can be screen-recorded in fullscreen directly for use as a finished video.
and video-shot-demos(storyboard style rotation system) share the same player chassis, but this Skill's visual rules are completely different:not 29 rotating styles, but one unified HyperOS/MIUI design language across the entire series, creating shot variation through "wallpaper gradients + system scenes + phone 3D motion".
Creative philosophy (determines the quality of all output)
- All information must become "things happening inside the phone". It is forbidden to lay out ordinary web elements (ordinary paragraphs/buttons/navigation bars) on the screen—arguments become lock screen notifications, dialogue becomes chat bubbles, data becomes ring sliders, and processes become settings lists. Like a real screen recording, not a PPT.
- The real-device feel comes from details: side buttons and antenna bands on the body, punch-hole camera, screen reflections, real-time status bar, Home indicator, wallpaper parallax. The audience subconsciously believes in this phone, and only then does the presentation become convincing.
- The phone is a living actor: it has 3D postures (swaying/leaning forward/turning sideways/spinning away to exit), leans forward when tapped, vibrates when stamped, and turns toward the audience when emphasized. A static phone = a screenshot.
- Shot continuity is an iron rule: the entire series shares a unified background atmosphere; except for the first shot, the phone is directly present (no replaying of the entrance animation), and each shot's initial posture "continues the lingering motion of the previous shot".
- The large subtitles on both sides are part of the stage: voiceover copy is not placed in a bottom subtitle bar, but in the background layer (below the phone layer) on the left and right sides, with gradient text + multiple entrance effects, large and impactful.
- Each shot tells only one thing: one sentence + one visual subject, a complete system interaction every 6–12 seconds.
Workflow
Step 0 · Understand the input and confirm the storyboard table
Read through the user's materials (product feature list/outline/voiceover script/knowledge points), and break the content into 5–9 shots (6–12s each), output a storyboard table for the user to confirm before starting work:
镜头 | 时长 | 系统场景(锁屏/通知/聊天/设置/控制中心/弹窗/App页…) | 壁纸渐变主题 | 手机 3D 动作设计 | 承载的信息点
Narrative arc reference (proven effective):Lock screen opening (phone enters + notification) → core interaction (App opening/dialogue/process) → data consolidation (dashboard/graph) → lock screen ending (recap + screen off + brand card)。
Step 1 · Implement page by page
Start by copying from assets/template.html Copy Start—Built-in full chassis: virtual clock player, sound effects engine (muted by default + speaker toggle), 1920×1080 stage + unified ambience layer, real phone (all details), phoneTo 3D pose system, large background subtitles (two effect examples), HUD segmented progress + shot jump, camera scheduling. Then only change the visual layer and cues.
Read subsystem specs as needed:
references/player-and-navigation.md— Player chassis / HUD segmented jump / mute toggle / inter-shot navigationreferences/phone-stage.md— Phone anatomy (body details/wallpaper/status bar) and all actions of the phoneTo 3D pose systemreferences/bg-captions.md— Background-layer large subtitles: 11 entrance effect library + per-character split toolreferences/system-ui-patterns.md— System UI component library (notifications/chat/settings/dialogs/App open transitions…) + content translation mapping table + camera continuity rules
Before writing a certain system scene, first read the corresponding shot in example assets/examples/kexue/ (finished-film-level template, double-click index.html to run). cue comments mark the beats (// 通知②：AI 出题), DUR = specified duration ±0.5s.
Step 2 · QC
Headless screenshots (virtual clock can fast-forward to any millisecond):
node ../video-shot-demos/scripts/shot.js 页面.html 6000 _t6s.png
Check one by one:real-device feel(does it look like a screen recording?) / overlap occlusion(side subtitles vs phone, elements within the screen) / mid-state clipping(orphan elements behind glass panels) / continuity(does this shot's initial pose connect to the previous shot's ending?) / ending freeze. Finally play it through completely to listen to the sound-effect rhythm.
Step 3 · index overview
Navigation page in the same design language as the main film: cards grouped by act (number/duration/title/system scene tag/wallpaper color glow), footer notes shortcuts and screen-recording instructions.
Delivery standards (missing any one means incomplete)
- Starts with black screen "Start Playback"; 1920×1080 stage adaptive; HUD hidden by default, summoned at the bottom
- HUD segmented progress bar (one segment per shot) clickable to jump; Space pause / R replay / ←→ switch shots
- Sound effects WebAudio synthesis,muted by default, HUD speaker enabled
- Full phone details: side buttons/antenna bands/punch-hole/reflections/status bar SVG icons/Home bar; wallpaper parallax + Ken Burns
- Unified background ambience across the whole series; independent wallpaper gradient per shot, solid colors locked across the whole series
- First shot has the phone 3D entering the stage; remaining shots have the phone directly present, initial pose continuing from the previous shot
- Each shot has ≥2 phone 3D actions (sway/forward tilt/horizontal rotation…); iconic App open transition ≥1 time
- Voiceover copy on the left and right sides of the background layer: gradient text, large font size, effect changes per shot
- Every element within the screen is a system component; all icons are inline SVG; no emoji, no real brand trademarks
- Elastic entrance cubic-bezier(.34,1.56,.64,1); list stagger 60–80ms; frosted glass layers ≥2
- No overlap occlusion, no mid-state clipping; dignified ending freeze (closing shot screen-off + brand card)
- index.html overview can be opened page by page