HTML reel

HTML reel

Read first

Source.md: the source's words word for word, the facts the reel may use, the one idea, the hook, whose work it is, the ask. Look.md: the shape, ground, ink, accent, the type as three roles (setup, payoff, labels), the background, motifs and motion, all taken from the source. Reel.md: the structure and each beat, with its line, what the picture shows and the word each move lands on. A picture wired in is the source as it looks: take its look, never show it. The voiceover wired in: its words are the clock. This skill wins over the usual way of making motion design.

The mechanism

Every frame of a scene is a pure function of one number: draw(t) sets everything on a fixed stage from t, the seconds into the scene, and one CSS scale fits it to any frame. So the scene plays the same in the Video edit, frame by frame, and when the creator records takes it plays again at t = W(τ), word anchors mapping their words to the voiceover's, with nothing animated again. Nothing on the stage keeps its own time: no CSS animations or transitions, no timers, no Math.random.

A scene

One HTML file on Fil's HTML reel kit, its look from Look.md in its own :root: ``html <!doctype html> <html data-mode="dark"><head><meta charset="utf-8"><meta name="fil:duration" content="6"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;600&family=IBM+Plex+Mono:wght@500&display=block"> <link rel="stylesheet" href="https://fil.design/kits/html-reel/1.css"> <style>:root{--reel-bg:#0c0c0c;--reel-ink:#f4f4f4;--reel-accent:#7cf0b0; --reel-setup-font:'IBM Plex Sans',sans-serif;--reel-setup-size:44px;--reel-setup-weight:400; --reel-payoff-font:'IBM Plex Sans',sans-serif;--reel-payoff-size:88px;--reel-payoff-weight:600;--reel-payoff-case:none; --reel-label-font:'IBM Plex Mono',monospace;--reel-label-case:uppercase;--reel-label-track:.12em}</style> </head><body><div id="stage"> <p class="reel-label" data-safe>Fig 1 · one image, six layers</p> <div class="t" data-safe><span class="reel-setup"><span class="reel-mask"><span id="w1">One</span></span> …</span></div> </div> <script src="https://fil.design/kits/html-reel/1.js"></script> <script> const { scene, ease, out, word, mix, pulse } = HTMLReel; // The voiceover's words, in its seconds: every time is named after its word. const T = { one: 0.2, image: 0.5, layers: 1.4 }; scene({ dur: 6, shape: '9:16', anchors: [], draw(t, $) { $('#w1').style.transform = translateY(${(1 - word(t, T.one, 2.2)) * 135}%); } }); </script></body></html> ``

• scene({ dur, draw(t, $), setup, anchors, shape }): dur in the voiceover's seconds; shape '9:16', '4:5', '1:1' or '16:9' as Look.md says; $(sel) finds an element; setup() runs once before the first frame (measure after fonts); anchors stays [] until takes are in.
• Helpers: ease(t, a, b) 0 → 1 eased in and out; out(t, a, b) fast then settling; back(t, a, b) with a small overshoot; mix(t, a, b, from, to); word(t, at, leave) a word rising through its mask on its word and out from leave (hidden at 135%); fit(el) shrinks a one-line payoff to the stage's width, in setup; pulse(t, at) a beat; typed(text, t, a, b); cue(t, [[at, v], …], before).
• Type is three roles, never a font named in the markup: reel-setup (the line that sets up), reel-payoff (the word that lands), reel-label (tags, figures, numbers), each set in :root from Look.md (--reel-setup-font, -size, -weight, -case, -track, the same for payoff and label) and loaded from Google Fonts. A word rises through its reel-mask on its word of the voice; a phrase leaves through its masks before the next.
• Cinematic, at full size: the source gives the fonts, the reel their scale and rhythm. The setup line at about 52 px on the 540 stage, the payoff word at 90 to 110 px, heavy, landing on its word and ending on the accent; the ask's keyword as large as it fits across the stage (fit). Never shrunk into a band.
• Everything read is marked data-safe and stays inside y 140–820 of the 960 stage.
• The background is the source's own: its ground, its light, its texture, and its motifs reused (its cards, frames, figure labels, cursors).

The hook

The source's most surprising true thing in the first second, a line that makes them watch, the payoff before 5 s. Its picture is the source's best moment, drawn in HTML or left to the video under it.

The tail

The thing, named; where to get it; the ask in the payoff type. Someone else's work is credited by name and handle, on screen and in the voice.

The Video edit

• The hook, then the source's video as the story (its pieces cut to the words: split where each word lands, a speed per piece between 0.5 and 2.2, a crop on a detail every 2 to 4 s, in the top half where the creator takes the bottom), then the tail.
• The creator in every camera layout, Reel.md's for each beat, as the camera placeholder wired in (their ink drawing) over the story (overlay: true, motion null): full frame (fit fill, scale 1.3, y -290, the face above the captions), a bubble at the bottom right (fit fit, crop [0.18, 0.12, 0.815, 0.62], scale 0.248, x 315, y 300, corner_radius 30), the bottom half for a split (fit fit, crop [0, 0.15, 1, 0.65], y 480), the top half for the ask (y -480). The face grows as the ask grows: none in the hook. Their takes replace each placeholder later (replace keeps its crop, place and keyframes).
• The voiceover on its own lane; sound effects from Fil's inserts at volume 0.1 to 0.2, on real events.
• Cinematic captions from the voice: a heavy sans at about 78 px (Inter Tight 800, or the source's own heavy face), the ink colour with the spoken word in the accent, a 5 px dark outline, word by word, up to 3 words on one line, on a split's seam or under the picture; none on a full-frame face or under big type that says the same words (remove those lines); the beats as chapters.

Avoid

Words or facts the source doesn't have, someone else's work shown as the creator's own, the kit's default look when the source has its own, titles shrunk to fit a band, small plain captions, an empty space where the creator goes, a framing that never changes, titles over what the video shows, a cut that lands between words.