HTML Demo

React · DOM/CSS (a vanilla twin is in scripts/step-window.js). No video, canvas, WebGL or screen recording.

It looks recorded, but it's HTML. Each frame is computed, so it stays sharp at any size and pixel density, its words are real text, and it can loop, jump to a step, scrub, freeze for a screenshot and stand still for reduced motion, all from the same code.

Boundary. Use browser-video-recording when you need a real recording of a real browser as an MP4. Use website-to-motion-design when a page becomes a fixed-length film. Use this skill when the deliverable is a live window on a web page that shows an app working.

Provenance. Extracted from fil.design/download (October 2026). There, Fil for Mac's hero window runs four workflows end to end. Eight chapter windows each show one feature step by step: import a URL → Design → the agent; prompt → inpaint → outpaint → layers → angle; record → motion design → edit → transcript; sites; the browser. One lead built the engine and the hero, and one helper agent built each chapter window from a shared brief.

The mechanism

Every frame of the app is a pure function of one number. A step's View({ t }) draws everything inside the window at a fixed 1200 × 750 design size from t alone, where t is seconds into the step. One CSS scale (--k = width / 1200) then fits that stage to the window.

If you take that away, the demo breaks. When state lives in setTimeout chains, animation callbacks or effects, you can't jump to a step. It drifts after a hidden tab, screenshots differ between runs, and reduced motion catches it half-done. Designing responsively inside the window breaks it differently: text reflows at every width, the pointer misses its targets, and phones show a different app.

import StepWindow, { Cursor, ease, typed, glide } from './scripts/StepWindow.jsx';