Word Rise Showing Up

Dynamic Template

# Word Rise Sample — Showing Up A five-beat motivational reel in all three ratios: white caps over full-bleed gym footage, the words climbing into their own lines one after another. There is no plate and no scrim — the type sits straight on the picture under a tight offset shadow, and the only thing that changes between scenes is WHERE the lockup sits and how many lines it holds. Recreated from a 15.5s screen recording of a looping 13.1s reel. That reel carries ONE text mechanism — a per-word masked rise — repeated at three different anchors. Two more anchors were added on the same grid to complete the frame, so the set now walks the copy through five positions without ever changing the mechanism. ## Scenes | scene | anchor | align | lines | dur | source | | --- | --- | --- | --- | --- | --- | | `reps` | indented, mid-frame | left | 4 | 3.2s | measured | | `centre` | centred, mid-frame | centre | 3 | 3.6s | added | | `showing-up` | bottom-left margin | left | 3 | 3.6s | measured | | `bottom-right` | bottom-right corner | right | 3 | 3.2s | added | | `strength` | top-left margin | left | 4 | 6.25s | measured | The three measured anchors are as found, not tidied: `reps` sits 24.9% in from the left where `showing-up` and `strength` sit at 10.0%, which reads as an indent and is what the reference does. Its block starts at 40.1% of the height against 63.9% and 6.2%. The two added scenes take the two anchors the reel leaves empty — dead centre, and the bottom-right corner — and are the only ones that are not left-aligned; `bottom-right` reuses `showing-up`'s box width and vertical anchor exactly, so the two bottom beats mirror each other across the frame. They are interleaved rather than appended (setup, aside, payoff, turn, close) so `strength` still closes the film. It runs nearly twice as long as any other scene and is the one media slot marked `broll`: in the reference the copy holds while the footage cuts three times under it. ## The motion One mechanism, every number fitted to the recording (which is 30fps doubled to 60, so the frame index is read in pairs). | beat | how | fitted | | --- | --- | --- | | every word | `yPercent` 100 → 0 inside a per-LINE mask | starts 0.28s, `power2.out` over 0.22s, 0.142s stagger | The five word onsets in scene 1 land on 0.1417s to within a frame and a half (7, 9, 8, 10 frames), and the first word starts 17 frames after each of the three cuts — 0.283s, the same in all three measured scenes, which is what lets one set of numbers serve the whole pack. The rise itself was fitted against six sampled positions of the first word: `power2.out` over 0.21s comes out at a residual under half a pixel, ahead of every other `power1`…`power4`. It is a MASK, not a fade — the word is at full opacity on the first frame any of it is visible, and `yPercent: 100` is exactly one line box, which is the distance measured. That is why the copy carries explicit `<br>` breaks: the player emits one `[data-part="line"]` per authored break, so a width-wrapped block would be a single line element and the mask would clip the whole stack instead of each line. The mask is the scene css, with 0.03em of padding and a matching negative margin so the comma in "LITTLE, I’M" clears the clip without moving the next line. **The reference's exit is deliberately NOT ported.** In the recording every block slides down out of frame over the 0.27s before each cut — motion keyed to the authored scene length, which the narration replaces. The boundary is one `transition: fade` of 0.4s instead, which lands wherever the scene actually ends. Each scene holds its last frame until its script finishes. ## The type The face is `roboto` 700, chosen by measurement rather than by eye. Nine ink widths were measured off the .mov to half-max subpixel and least-squares fitted against ten catalogue grotesques with tracking free; Roboto 700 lands at 1.8% rms with tracking at zero AND puts the cap height within 0.6% of the 20.9px measured off three separate stems. Inter and Outfit fit the widths as well or better but come out 5% short on cap, which is a different face. The side bearings settle it: the recording's `S`-initial lines sit 0.73px left of its `I`-initial ones, and only a grotesque with Roboto's bearings does that. `101.2px` of type on `102.0px` of leading at 9:16 — `size: 40, lineHeight: -16` — against 101.5px and 102.0px measured. The line boxes then land within 0.35px of the reference at every one of the eleven measured lines, checked in the bench against the .mov rather than assumed. Every line in the two added scenes was checked the same way against its own box: the widest fills 85% of it, inside the 96% the player needs. ## The shadow Measured first, then deliberately overdriven. Over the one stretch of bright window in the reel the glyph edges carry a dark band ~2.4px wide at the 314px capture scale, on both axes equally; modelling that edge as a black shadow at alpha A, offset d, Gaussian σ and fitting the two profiles gives **d = 1.75px, A = 0.18, σ = 0.5px** on both, at a residual under one grey level — a hard letterpress lift, not a glow. That is what the reference does and it is not enough: at 18% the type is still hard to read where a frame blows out to white, which is most of the top third of two of these shots. So the shipped shadow keeps the reference's down-right direction and its proportions but carries **65% black at 0.16em of blur** — `5px 7px 16px #000000A6` at 9:16. Verified against the worst frame in the set (a centred lockup straight over a blown-out window wall), where it reads cleanly. `textShadow` is one of the two field groups stored in raw pixels, so it does not scale with the canvas: each ratio restates it, scaled with its own type size (5/7/16 at 9:16, 4/6/13 at 1:1, 5/6/15 at 16:9). ## The palette Three roles — `ground`, `ink`, `shade` — and eight variants, the format's maximum. `shade` is the shadow, given a role of its own rather than baked, because the tint it wants follows the ink: the warm inks carry a warm shadow and the cool ones a cool one, all at the same 18%. Every variant keeps a light ink, because there is no plate anywhere in this design: a dark ink on unscrimmed footage has nothing to sit on and disappears on the bright half of every frame. ## The three renditions | | 9:16 | 1:1 | 16:9 | | --- | --- | --- | --- | | canvas | 1080×1920 | 1080×1080 | 1920×1080 | | type | 101.2px (`size: 40`) | 84.5px (`size: 61`) | 92.5px (`size: 65`) | | side margin | 10% w | 8% w | 6% w | `font.lineHeight` is a ratio, so `-16` is the same 1.008em in all three and needs no override; `font.size` is resolution-independent, which is the trap — the same stored number renders 1.78× larger on the 1920-tall canvas than on the two 1080-tall ones, so the short ratios are solved against their own canvas rather than reused. **The reflow is derived, not retyped.** Scaling the base's percentages is what puts a bottom-docked lockup in the middle of a frame half as tall, so instead each scene is reduced to the ANCHOR it actually docks to — `reps` and `centre` are centred on the block's own middle, `showing-up` and `bottom-right` hang from their bottom edge, `strength` hangs from its top — and then re-stacked against the new canvas from that anchor. The box keeps the base's own FILL fraction rather than its width, so the ragging survives the change of type size. Feeding the base ratio back through those rules reproduces its five authored positions to 0.000%, which is the check that the anchors were read correctly rather than guessed. Verified in the bench at both new ratios: line counts 4/3/3/3/4 unchanged (no rewraps), fill fractions identical to the base at 71/77/90/85/86%, the bottom-docked pair landing on 90.2% and the top-docked one on 8.0%. **The crop needed solving too.** `cover` keeps the whole height of a 2:3 still at 9:16 but only 67% of it at 1:1 and 37.5% at 16:9, so the default centred crop decides by accident whether the copy lands on the dark band each shot was lit to give it. Three passes got this wrong before the fourth worked, and the failures are the useful part: minimising the band luma cropped the head off every shot (darkness is monotone in the crop here — the darkest band is always the floor); snapping to the subject threw away a crop on `centre` that was both dark AND centred; and a fixed "the subject is in the upper third" home framed `strength` on window mullions, because that shot's subject is bent over and sits low. Nothing about the subject is assumed now: these stills are backlit, so the subject IS the dark mass, and its vertical centroid is measured per file and becomes that file's home crop. The rule is then a hard legibility ceiling plus a cost for drifting off that measured home. Every one of the ten resulting bands sits under the ceiling, seven of them well under. ## Filling it `scripts/wordrise-showing-up-visuals.mjs` holds the prompts for all five stills. The type is unscrimmed white straight on the picture, so every shot is backlit — bright windows behind, subject and foreground in shadow — and each prompt names the part of the frame that has to stay dark, because the copy moves between scenes and the dark band has to move with it. `centre` is the awkward one: its band is the MIDDLE of the frame, so that shot puts a rack across the middle and pushes the window light out to the top and bottom edges. Copy is the constrained part. Each `<br>` is a line the type does not shrink to fit: about ten characters a line in the left-aligned scenes, twelve in `strength`, and the `maxLength` on each slot is the measured capacity rather than a guess.