Living Screencast 活体实机录屏

A product walkthrough that looks like a real screen recording, where a low-resolution mascot lives inside a high-resolution interface and acts out what the software is doing. References (grammar only):

• Screen Studio-style product recordings: auto-zoom to the cursor, cursor smoothing, click push-ins, and a window floating on wallpaper.
• Apple "Guided Tour" videos: real interface, calm narration, one feature per sentence.
• Duolingo and Headspace mascot motion: squash and stretch, anticipation, a character that performs inside the UI.
• The Browser Company (Arc) launch films: playful tone and fast cutting.

Never copy their characters, UI, music or footage.

A walkthrough of a piece of software, typically 45–75 s. The user gives the product and the features; you decide the story, shots, choreography, sound and music.

1. Essence, and what it is not

The film looks like a screen recording of the real product, but it is not a recording. Every window, menu, diff line and button is redrawn in 2D (HTML/CSS/SVG), so the camera can go anywhere, every pixel is controllable and text stays sharp at any zoom.

A mascot made of big square pixels lives in that high-resolution world. The clash of two resolutions, a hard-edged low-res sprite against anti-aliased UI, is the look.

The mascot is the software's agency made visible: when the software reads, it runs along the rows it reads; when it plans, it holds a pixel pencil; when it tests, it stomps the button.

Two actors, never a hand: the cursor is the user; the mascot is the software.

Not a dark tech keynote (no black stage, no invented abstract UI: this is the real product), not a pixel-art game (the world is hi-res vector UI; only the mascot and its props are pixels), not a real capture (nothing is a screenshot).

2. Materials & rendering

• Real UI, redrawn: every label, mode name and shortcut matches the real product; no screenshots, no lorem ipsum. Demo content (code, data, test output) is coherent, and the app under test really changes.
• Pixel grid is sacred: the mascot, its props (pencil, "!", sparkles, heart, dust) and trails share one square-pixel grid with crisp edges. It scales with the camera; its position snaps to half-pixels, so its motion feels stepped.
• Gravity = top edges of UI: the mascot only stands on the top edge of a real element (input box, menu, list row, code line, button, status bar, the letters of a heading). Its position comes from measuring the live DOM every frame, never hand-placed coordinates.
• Window on wallpaper: the app floats on a desktop with a soft shadow; zoom never shows beyond the monitor.
• Depth only where it serves attention: rack focus (blur the pane that doesn't matter), a vignette spotlight. Never blur text the viewer must read.
• Motion blur is derived from camera speed and applied as an anisotropic blur on an untransformed wrapper, only on whips. Slow moves stay sharp.

3. Colour logic

• The product's own interface colours rule: follow its real light and dark themes exactly.
• The mascot keeps the product's or brand's mascot colour, or one saturated hue that no UI element uses, so it finds the eye in any frame.
• Overlays (chapter pill, key HUD, captions) are neutral frosted glass; one accent at most, taken from the product.
• A theme switch can be a story event: the whole film may change state with it.

4. Type & subtitles

• UI type follows the product (or licence-free look-alikes such as Inter, JetBrains Mono, a serif for editorial UIs).
• Information layers only: a chapter pill (01–04), a KeyCastr-style keystroke HUD, frosted-glass caption pills, an optional "▶▶ 4×" time-lapse tag. Nothing else overlays the screen.
• Captions sit in a pill at the bottom, never over the element being discussed and never under the mascot; hold ≥ max(1.8 s, speech + 0.6 s).
• A title, if any, is diegetic: it appears as part of the UI (an empty-state heading, a window title, a notification).

5. Motion quality

• 30 fps; UI on ones; mascot position stepped to its pixel grid.
• Mascot acting: jumps with anticipation crouch, stretch on take-off, tucked legs, landing squash with a damped bounce and dust. Idle breathes (a tiny squash) on the score's beat and blinks irregularly. Walks by leg alternation, flipping the sprite for direction.
• Eyes carry the acting (neutral / left / right / up / down / wide / happy / shut / blink): they look at what matters. Arms: down / up (cheer) / wave.
• Cursor: smoothed, spring-eased paths, small push on click, never teleports.
• Cause and effect: every mascot action triggers a real UI state change; every user action is a cursor move, click or keystroke shown on the HUD.
• UI animates like the real product (its own menus, popovers, diff reveals); don't invent flourishes the product doesn't have.

6. Camera grammar

A recording-software camera: one continuous take inside the screen, zoom ≥ 1, cuts only under chapter transitions. Opening and ending come from the topic.

Move	What it expresses	Can serve
Push-in to the cursor or caret	"this is where it happens"	typing a prompt; choosing a menu item; a setting
Slow drift at rest	the app is alive while we listen	a line of narration; waiting for a result
Whip-pan between panes (with blur)	cause here, effect there	sending a message → a result appearing; code → preview
Push-in + vignette freeze	the one promise to remember	a safety guarantee; a price; an undo
Rack focus between panes	attention moves, nothing else does	reading files; logs scrolling while chat waits
Pull back to the full window	the whole workflow in view	a summary; parallel tasks; before/after
Follow the mascot along a list	the software working through items	scanning results; a checklist; a migration
Split-window reframe	two things at once	parallel sessions; compare two versions

Framing: the thing being discussed and its caption never overlap; the mascot never covers text to be read. Transitions: chapter pill wipes, pixel wipes, a theme reveal circle; never dissolves or screenshots.

7. Sound palette

• Two resolutions in the music: a hi-fi layer (piano, upright or electric bass, brushed or tight kit, glockenspiel, real samples) is the world; a chiptune square or pulse voice is the mascot. They can trade, duet or merge.
• Options: a low-passed "night" version of the band for a dark theme; a tom fill and crash at chapter seams; dropping the drums to build tension; the mascot's notes on words it lands on; a stereo split for split screens; a single held pad under a freeze.
• Foley: keyboard (a thock plus a click, human timing jitter), trackpad clicks, pane swishes, popup pops, notification chimes, CI ticks, a shutter for screenshots. Mascot steps, jumps and landings are 8-bit.
• Silence: a short drop to room tone before the key promise makes it land.
• Voice: calm, one feature per line; product names verified with whisper. Keep effects off word onsets. Duck music under voice; −14 LUFS.

8. Native moves

A menu: use the ones your walkthrough needs.

• Match-cut origin. The mascot is born from something already in the UI (a logo's block characters, an icon, a loading spinner) and climbs out, leaving an outline. Fits content like: a CLI tool moving into an app; an icon becoming an assistant; a spinner becoming a helper.
• Diegetic title. The name appears as a real UI element; the mascot lands on it on a downbeat. Fits content like: an empty state; a new-project dialog; a welcome email.
• Moving floor. The mascot rides a caret, a popup, a sent message, a progress bar. Fits content like: a message flying into a thread; an upload bar; a drag-and-drop.
• Time-lapse with a tag. Long work runs at N× with a flashing tag and rack focus. Fits content like: indexing a library; a data import; a build.
• Spotlight freeze. Push in and vignette the one badge that holds the promise. Fits content like: "Saved"; "Encrypted"; "No charges until…".
• The film changes state. A toggle's effect escapes the preview and takes over the whole film, and returns later. Fits content like: dark mode; a language switch; offline mode.
• Cell division. A new session or window splits the screen and the mascot splits with a pixel burst. Fits content like: parallel tasks; multiple accounts; team members.
• Cursor and mascot as characters. The cursor pets, pokes or drags the mascot, and it reacts. Fits content like: approving a suggestion; undoing; onboarding delight.
• Karaoke-ball words. The mascot hops from word to word as they are spoken. Fits content like: a slogan; a shortcut list; step names.

9. Pitfalls of the medium

• Invented features or renamed modes → check every button, mode and shortcut against the product's documentation; if it isn't in the docs, it isn't in the film.
• The mascot floats or drifts off its element → measure the DOM every frame, stand only on top edges.
• The mascot covers text or sits under a caption → reserve a text-free lane for it.
• Blur-filter "fake depth" on text you want read, or zooming out past the screen → rack focus only on panes not being read; zoom ≥ 1.
• A hand, arm or finger on screen → the cursor is the user.
• Motion blur applied to a transformed layer smears the pixel sprite wrong → blur an untransformed wrapper, and only on whips.
• A keypress or pop landing on a product name masks it → shift foley off word onsets; re-check with whisper on the final mix.
• TTS mispronounces the product name → try voices and spellings, verify with whisper.

10. Engine

In demo/: film.js (timeline: VO at fixed times, every visual beat hung on a spoken word with W(id, word), camera moves, Actor mascot segments, Cursor, sound events), ui.js (state → HTML for each interface), clawd.js (sprite grid, poses, pixel props: replace the sprite with your own mascot), main.js (light/dark layers, DOM anchor measurement, motion blur, HUD: captions, keys, pixel wipes, spotlight), sound.py (score, foley and VO from events.json, with ducking). Build notes: DEMO.md.

11. Variation space

You decide the features and their order, the mascot (the product's own, or an original pixel character), the story, the opening, the ending, the camera path, the chapters and the music. All far from our demo:

• Structures: a bug hunt (the mascot chases one error through logs, code and a fix, a single chapter); a day of one user (morning to evening in one app, the theme and music shifting with the hour); a race (two windows side by side, old way vs. new way, the mascot winning on the right).
• Openings: mid-task (a half-written document; the mascot is already pushing the cursor's selection); the notification (a system toast lands; the mascot is inside it); empty state (a blank app, a caret blinking; the mascot drops from the menu bar).
• Endings: the mascot goes to sleep on the finished item as the window dims; the app closes and the mascot is left standing on the dock; a real share (the result is sent and the mascot rides it out of frame).

---

How our demo was made (story, shots, score, end card, build): DEMO.md. Read it after your treatment exists.