name: html-reel description: Turn a tweet, a video, a YouTube video or a landing page into a 9:16 reel (Instagram Reels, TikTok, Shorts) that says what the source says and looks like it, with every cut on a word. Read the source (its words, its media, its measured fonts and colours), pick a structure (a promo, a showcase, "found this", an explainer, before and after), write the script in the creator's voice from the source's own facts, make the voice with timestamps (their cloned ElevenLabs voice), then build the picture from HTML scenes drawn from one clock (window.__frame(t)) in the source's look, opening on its cover (the hook's best moment as the first frame), its demo video framed and cut to words, and assemble it in Fil's video editor over MCP. The creator is in it from the first draft as a placeholder in the camera layouts (a backlit studio silhouette) (full frame, a bubble, half the frame), swapped for their phone takes when they record, and everything retimed to their own words by word anchors, t = W(τ); a reel can also be faceless. Use when someone wants a reel, a short or a vertical video from a post, a thread, a launch, a landing page, a demo video or a YouTube video, "a reel like this one", or a talking-head promo cut to their own delivery.

HTML Reel

HTML scenes · DreamCut · Fil's video editor over MCP · ffmpeg. A scene engine without a framework is in scripts/reel-clock.js.

A reel is a voice with pictures cut to it. This skill makes one from a source someone already has, a tweet, a landing page, a YouTube video or a video file, so it says what that source says and looks like it: its words become the script, its media the picture, its fonts and colours the titles. Every picture follows the words: a title lands on its word, the demo cuts on the line that names it, a sound effect hits on the reveal. The creator is in it from the first draft, a backlit silhouette standing where their camera goes, so the reel is complete before they record a word; their takes replace it, and because the scenes are HTML drawn from one clock, everything is retimed to their real delivery without animating anything again.

Boundary. Use html-demo for a live app window on a web page (no video file). Use browser-video-recording for a polished screen recording on its own. Use website-to-motion-design to turn a page into a fixed-length motion piece with no voice. Use this skill when the deliverable is a vertical video cut to a voice, from a source.

Provenance. Extracted from Meng To's launch reel for HTML Demo (fil.design/skills/html-demo), October 2026: a 24.7 s reference reel's eight layouts studied, a scratch voice in his cloned ElevenLabs voice, four DreamCut recordings of the skill page, an HTML hook and tail rendered frame by frame, three drafts in Fil's video editor, two blind judges a round, then his two phone takes cut into one 33.7 s reel on his own word timings, and later one landscape take, its pauses cut, retimed the same way into 37.5 s. Then made general: each of three of his posts (MiniMax landing pages, a reverse-engineered smart home, the Anatomy skill) turned into a reel in its own look, first faceless, then again with a placeholder in the camera layouts (first an ink drawing of him, then a backlit studio silhouette), cinematic type and captions, previewed locally before Fil. The files and numbers below are from those runs.

The mechanism

Everything is placed on word times, and everything drawn is a pure function of t. Each HTML scene sets every element from t, the seconds into the scene, through window.__frame(t), at a fixed 540 × 960 stage rendered at 2× (1080 × 1920). A renderer calls it once a frame and screenshots; nothing reads a clock. So when the real take arrives, word anchors give a piecewise-linear map from the real seconds τ to the scratch seconds t, and the scene renders again at t = W(τ): the same animation, on the new delivery, with no judder.

Take that away and the reel can't follow a person. A scene animated with CSS timelines, GSAP timelines or timers plays at its own pace; to fit a new take it has to be re-animated by hand, line by line, and the cuts drift a few frames each time. A screen recording can't be retimed either, so it's cut at its events and each piece gets its own speed.

// hook.js, on reel-clock.js: times are the scratch voice's words.
const T = { look: 0.27, recording: 1.1, zoom: 3.25, sharp: 4.54, html: 7.22 };
HTMLReel.scene({
  dur: 8.6,
  anchors: ANCHORS,                       // [[τ, t], …] once the real take exists
  draw(t, $) {
    $('#win').style.transform = `scale(${1 + 2.8 * ease(t, T.zoom, T.zoom + 1.2)})`;
    $('#w-recording').style.transform = `translateY(${(1 - word(t, T.recording, 2.2)) * 135}%)`;
    $('#tags').style.opacity = ease(t, T.html - 0.3, T.html);
  },
});

scripts/render-frames.mjs renders any such page to an MP4 (and checks the safe area every frame); Fil's video editor plays the same page as an HTML scene, stepping its clock frame by frame; a browser plays it live with ?controls.

Workflow

1. Read the source (scripts/read-source.mjs <tweet | page | YouTube | file> --out source --follow, references/source.md). Finish Source.md: its words word for word, the facts the reel may say, the one idea, the hook, whose work it is, the ask. Finish Look.md from what was measured and the frames: the shape, ground, ink, accent, and type as three roles (setup, payoff, labels), background, motifs, motion.
2. Pick the structure, the shape and the layouts (references/structures.md): a promo (references/formula.md, studied from a reference reel), a showcase, "found this", an explainer, before and after; 9:16, 4:5, 1:1 or 16:9; and for each beat its layout, the creator's face growing as the ask grows (none in the hook, a bubble, half the frame, full for the ask). Faceless only when the creator won't be on camera. A reference reel the creator likes gives structure and timing, never its look.
   • Make the camera placeholder: a backlit studio silhouette photograph, from a photo of the creator (or of any model), lit only from behind against a softly glowing warm cream backdrop, the face in shadow with its features faint, head and shoulders looking into the lens, upright 9:16, the nose at the frame's centre and the chin about 60% down, labelled CAMERA · PLACEHOLDER (in Fil, an image node with Nano Banana editing the photo). It stands in every camera layout until a take replaces it, and a take framed the same needs no reframing.
3. Write the script in the creator's voice from Source.md, one line per beat: their own sentences, shortened; only the facts Source.md lists; other people credited by name. Size it to the voice's pace, not a reader's: a cloned voice reads about 2.2–2.4 words a second with its sentence pauses (a person on camera about 2.6), so 30 s holds about 65–70 words. Write for the ear: numbers and names as they're said ("five point oh", "Rea"), capitals only on screen. Mark each line with its layout, what the picture shows and the word each move lands on.
4. Make the voice with word timestamps (scripts/vo-words.py: ElevenLabs with-timestamps, the creator's cloned voice, the key from the environment and never printed; it saves the whole reply, so the words can be made again for free, and prints the pace). For a faceless reel it's the final voice; with takes coming, a scratch voice. Then:
   • check what it said before building on it: Fil's captions on it, or a local whisper, word by word against the script (names and numbers above all);
   • too long by a second or two: scripts/tighten-voice.py cuts the middle of every long pause and moves the words with them, instead of paying for another take;
   • name every word (scripts/named-times.py: T.zoom, T.skill2, T.htmlEnd), and cut everything to those names from here on. Ask before any spend over $1.
5. Build the picture in the source's look, every scene on scripts/reel-clock.js with Look.md's variables in its :root and HTMLReel.scene({ shape }):
   • its cover first: the hook at its best moment (its whole title landed over its best picture) as the reel's first 0.2 s, then the hook from there (HTMLReel.scene({ cover: T.payoffEnd }) in a full scene, scripts/frame-video.mjs --cover 3.6 on a body with a title layer), its title inside the 3:4 crop the grids show;
   • the cursor out of a screen recording before it's framed: a recording of a 3D scene or a canvas usually shows the macOS hand, and scripts/decursor.py finds it (the grab and open hands, six sizes) only in the spans the pieces play (scan src.mp4 track.json --pieces pieces.json), tiles its finds before and after (sheet), and paints it out into src-clean.mp4 (clean), the video frame-video frames from then on (--video src-clean.mp4); it needs OpenCV in a venv (references/source.md);
   • a demo video framed and cut to words: its pieces (from, to, and the word each lasts until) into scripts/frame-video.mjs, several videos in one body (a post's and the post it quotes), a full-frame card spliced in as a piece, a title layer drawn from t over it (scripts/render-frames.mjs --alpha), checked as stills over the body first (--test … --under body.mp4);
   • full scenes for the hook, a title card or the tail, rendered with scripts/render-frames.mjs; a hook that shows the source's video inside its own frame draws the video's frames as pictures (extracted once at 60 fps, decoded in setup, draw setting the one for t and awaiting it), so it retimes like the rest;
   • a product the source doesn't show, recorded with DreamCut (scripts/record-window.mjs, scripts/flash-crop.mjs), the pointer's moves timed to words. Everything read stays inside the safe area (y 280–1640 of 1920 on 9:16).
6. Preview it locally (scripts/preview-reel.mjs plan.json): the picture, the placeholder in each camera layout at the editor's own set values, cinematic captions word by word, the voice and the sound effects, at −14 LUFS, with a contact sheet. Judge the layouts with words on them here, where a change costs a minute; an export costs a window and a wait.
7. Assemble in Fil's video editor over MCP (references/fil-editor.md): the picture as the story; the placeholder over it as overlays in each camera layout (full, the bubble with its shrink, a half), so a take can replace it later keeping every crop, place and keyframe; the voice on its own lane; sound effects at volume 0.1–0.2; cinematic captions on the seam or under the picture, under the chin for a full-frame face (a caption range), never on the face; the beats as chapters. Export, download, look at the frames.
8. Score it to 8/10 with blind judges (references/judging.md): two absolute judges on frames and a contact sheet, the lower score counts, plus a paired judge on before/after. Fix what both name; stop when two rounds come back flat.
9. The creator records: put the script in a canvas document as a teleprompter (headings and [directions] show but aren't read), add Record on your phone, and hand them the QR code as a picture. Their takes land on the canvas, the voice cleaned. replace each placeholder with its take, then retime everything to their words (references/retime.md):
   • join the takes (scripts/join-takes.py): pauses over ~0.45 s trimmed, 15 ms fades, each join on a layout change;
   • word times from Fil's captions (look.max_words: 1, then get_video captions list, scripts/fil-words.py);
   • align scratch and real words into anchors (scripts/timemap.py), render the scenes again on them, split and speed the video pieces;
   • lay in the camera: the bubble (set.corner_radius in the editor, or scripts/bubble.mjs) and the split (scripts/split-flip.mjs);
   • captions again from the real voice, chapters, export, and scripts/verify-export.mjs.

Rules, each with the failure i