Three Rules

Dynamic Template

# Typewriter Sample — Three Rules A deep-work story: protect your focus, three rules, a pull quote and a sign-off. Six scenes in all three ratios, on generated photography. The design is a full-bleed low-key still with the composition parked in the shadowed part of the frame — a Crimson Text headline in acid yellow, Nunito Sans for everything small, a rotated white sticker carrying the rule number, and a white URL chip at the foot. ## Scenes | scene | layout | carries | | --- | --- | --- | | `cover` | left-aligned, three-part headline | white rule flush at the margin, drawn looping arrow, blocked quote | | `tip-marked` | centred | rotated `Rule 1` sticker, small drawn arrow beside it | | `tip-ruled` | left-aligned | rotated `Rule 2` sticker, rule under the second headline line | | `tip-plain` | centred | rotated `Rule 3` sticker | | `pull-quote` | centred | blocked quote mark, centred rule, tracked attribution | | `end-card` | centred | the cover's arrow mirrored, gesturing below the closing line; `meta.silent` | ## The motion Three mechanisms, each measured off the Canva reel this was recreated from rather than assumed: | beat | how | at | | --- | --- | --- | | cover headline | ONE `clipPath` wipe across the whole two-line box | 0.16s, 0.88s | | cover accent | a white plate wipes IN over the accent words then OUT from the same edge, revealing the italic in its wake | 0.66s | | sticker | chip wipes left→right, then the label fades over it | 0.00s / 0.40s | | rule headline | per-WORD staggered fade, no movement | 0.62s, 0.147 stagger | | body copy | per-LINE `clipPath` wipe, one line at a time | 0.68s, 0.85 stagger | | rules | `scaleX` from the left edge | 0.32s / 0.53s | | arrows | `strokeDashoffset` draw-on, head fades in as the stroke lands | 0.10s / 1.00s | | URL chip (cover only) | wipe left→right, `power2.out` | 0.89s | | quote mark | the one thing that pops rather than wipes | 0.99s | Nothing is keyed to a scene's end. The reel exits every scene about 0.8s before its own cut — Canva looping its entrance back out — and none of that is ported, because the narration will not be the length the placeholder is. ## The three renditions Each is designed against its own canvas, not scaled off the base. `9:16` puts the block in the lower band; `1:1` keeps that composition but starts higher, because the square has the same width and 56% of the height; `16:9` drops the whole stack into the vertical middle and lets the centred scenes take more air either side. Every `font.size` is restated per ratio — the same stored number renders 0.5625x on the two short canvases. Ratios (`lineHeight`, `letterSpacing`, `padding`) are em- or width-relative and need no override; `textShadow` is raw px and scales with the type. ## Legibility Every piece of text that floats on the photograph carries a `textShadow` — a soft halo written as the authored ground at 65%, so it travels with the palette. The two chip-backed layers do not: on a white plate a glyph shadow reads as dirt. The stills do most of the work. All six were prompted with one lighting rule — a single lamp high at frame right, the lower half and left third crushed to near-black — because `fit: cover` slices the same file differently at each ratio, and that is the only way to keep all three copy regions dark in one picture. The sweep across every text layer x ratio x variant is 288 pairs, none under 4.5:1 and the worst at 8.4:1, with no scrim anywhere. ## Filling it The photo slot is the one that has to be chosen with the type in mind: dark and low-key, with the shadow falling where the copy sits. `scripts/typewriter-three-tips-visuals.mjs` holds the prompts if the set needs regenerating. The cover headline arrives in three slots (`title`, `title-lead`, `accent`) because the reel animates it as three elements. The rule scenes are the simple shape: `step`, `title`, `body`.