Daily Vlog

Dynamic Template

# Roll Sample — Daily Vlog Eight scenes of one vlog title system: amber all-caps type over full-bleed footage, every block assembled a LETTER at a time as the characters roll down into their own line box. Scene 1 is recreated from a 16:9 Canva screen recording and measured off it. The other seven extend the same vocabulary — same face, same amber, same roll, same scrim — rather than inventing a second one: | # | scene | what it is | | --- | --- | --- | | 1 | `title` | the recorded title card: eyebrow, huge title, two-line standfirst, handle | | 2 | `chapter` | a one-word chapter title docked to the lower left | | 3 | `beat` | one short line (a time, a number) centred and held | | 4 | `frame` | four small corner marks round one centred line | | 5 | `list` | three numbered rows down the left, each rolling in after the one above | | 6 | `quote` | two display rows centred, credited underneath | | 7 | `note` | a lockup docked top left, two small marks along the foot | | 8 | `close` | the sign-off, handle at the foot — silent by design | ## Type — measured, not eyeballed Scene 1's numbers come off the capture (918x516), converted against the 1920x1080 base with `remToFontSize` / `mapRange`: | block | cap height (capture) | stored size | renders | | --- | --- | --- | --- | | `DAILY VLOG` | 148px | 97 | 361px | | eyebrow | 8.5px | 11 | 26px | | standfirst | 9.5px | 14 | 29px | | handle | 8.5px | 11 | 26px | The small copy fingerprints as Archivo (cap-normalised advance widths of `MEANINGFUL AND INSPIRING EVERY DAY.` land within 1% of Archivo 500), so that is what it is set in — the eyebrow tracked +0.09em, the handle +0.03em, the standfirst at 0 with a 1.52em leading measured off its 21px baseline gap. Scenes 2-8 inherit that scale rather than restating it. The label and body steps ARE scene 1's (26px / 29px at 1080, 33.6px / 31.7px at 1920, 26.3px / 29.4px at 1:1), and every display line is sized by TARGET INK WIDTH — 40% of the canvas for the beat, 50-52% for a docked chapter title, 60% for the quote, 74-84% in portrait — so a line reads the same relative weight at every ratio instead of inheriting a landscape size. The stacks are rebuilt from scene 1's own derived gaps, in display cap heights: a label sits 0.15 cap above the display line, a caption 0.17 cap below it (which reproduces the capture's 46px and 50px gaps to within 3px). Every line was then measured with the browser's `measureText` against its resolved box at all three ratios — no overflow. **A fourth, smaller step for the corner marks.** `frame` and `note` set their marks at 21px / 30px / 21px — below the label step, tracked wide at +0.12em and held at `opacity: 84`, which is what makes them read as frame furniture rather than copy. 30px is the portrait value because the size scale PINS at 28px on a 1920-tall canvas: anything smaller stores as the same number and silently stops shrinking. The marks sit on the frame's own margins (5-6% in from the edge, cap 6.3% down from the top and 90.9% down at the foot in 16:9), the right-hand pair on `align: 'right'` boxes ending at the same margin as the left pair starts. **The headline face is a substitution, and a visible one.** The capture's display type is ultra-condensed AND heavy — cap-normalised ink widths of 0.324 (D) / 0.155 (I) / 0.230 (L), a total ink width of 2.97 cap heights for `DAILY VLOG`. Nothing in the builtin catalogue is that narrow at that weight: Anton is 4.72 cap heights, Big Shoulders 700 is 4.98, Bebas 4.78. Anton is the closest in both proportion and weight, so scene 1 keeps the capture's CAP HEIGHT (28.7% of the canvas) and runs wider than the original — 81% of the frame instead of 48%. Matching the width instead would have cost a third of the type size, which is the design's whole point. Every text layer carries `transform: uppercase`: the design is all-caps, and Anton's content box is taller than a 1.2em line box, so a filled lowercase descender would be clipped by the roll mask. ## Motion — the roll `[data-part="word"] { overflow: hidden }` in each scene's css turns every word span into a mask, and each `char` inside it is thrown 115% of its own line box above the mask and slides back down. That is the capture's animation: the letters are never faded, they are clipped, and they arrive in reading order. Scene 1's staggers are the capture's own, taken off a 60fps frame walk — the headline's nine letters land 0.11s apart (0.88s end to end), and the longer blocks spread over a fixed total instead: 2.4s for the eyebrow, 3.2s for the standfirst, 3.3s for the handle, which is what makes the small copy read as typing while the headline slams. The later scenes reuse those two forms: `each` on a display line, `amount` on anything long. The list's three rows are three layers, so each row rolls as its own beat (0.2 / 0.54 / 0.88s) instead of one stagger rippling across all three. Nothing is keyed to a scene's end — each boundary is one `fade` transition, applied at whatever end the scene resolves to, so every card holds its final frame for however long its narration turns out to be. ## Colour Three roles: `ink` (every text block), `ground` (the file and scene ground under the photo), `scrim` (the legibility gradient). The capture sets its type over a deep blue sky; these slots take any photo, so the scrim is what keeps the amber legible over a pale one — it is the same gradient on all eight scenes. Eight schemes, and they differ in TEMPERATURE as well as ink: Amber (authored), Chalk, Coral, Mint, Ice, Violet, Rose, Moss. Because the scrim carries a role too, a switch re-grades the footage rather than only recolouring the type — Ice cools a warm room to blue night, Rose plums it, Moss pulls it green. Every variant keeps a light ink over a dark scrim, so no scheme can break the one contrast pair the design depends on.