Rise Sample — Take a Break

Dynamic Template

# Rise Sample — Take a Break A slow-living set: a terracotta plate wipes in over a full-bleed still, two hairlines draw themselves in, and the headline's words rise into their own lines one after another. Nine scenes in all three ratios — six on the full plate, three on a small corner card carrying minimal credits. Recreated from a 7.2s screen recording of a single 6.2s reel. That reel carries ONE text animation — a per-word masked rise — so every scene here carries that same mechanism and varies only the plate, the copy shape and where the plate sits in the frame. Nothing else was invented for it. ## Scenes | scene | plate | carries | | --- | --- | --- | | `statement` | upper band | the recording, verbatim — two-line headline between the rules | | `kicker` | upper band | a tracked caps label that rises first, then the headline | | `chapter` | centred | one line only; the photograph reads above and below | | `three` | upper band | three lines, the stagger running right through them | | `support` | lower band | headline plus a quieter three-line paragraph | | `credit-line` | small card, foot | one tracked role and one name; ONE rule; `meta.silent` | | `credit-pair` | small card, head | two role-and-name pairs in reading order; `meta.silent` | | `credit-caption` | small card, foot | a two-line caption with the tracked line UNDER it; `meta.silent` | | `close` | centred | one line with a handle under it; `meta.silent` | The three cards are the same design object at `card` scale (0.54 / 0.54 / 0.62 of the plate) with one hairline instead of two and a tighter frame — a card that keeps the plate's airy padding just reads as an empty plate. They dock to the page margin in whichever corner they sit, at an equal inset on both axes, and they carry no voiceover: credits are read, not narrated. ## The motion Four mechanisms, every number least-squares fitted to the recording. The .mov is VFR — 215 frames at 1/60 and 100 at 1/30, 44.2fps average — so the fit runs over the container's real `pts_time`, not the frame index. A first pass on the nominal 60fps came out about 35% fast, and looked entirely plausible in the bench. | beat | how | at | fitted | | --- | --- | --- | --- | | plate | `scaleX` 0→1 from the left edge | 0.01s / 0.50s | `power2.out`, rms 0.035 | | upper rule | `scaleX` 0→1 from the left | 0.31s / 0.50s | `power2.out`, rms 0.021 | | lower rule | `scaleX` 0→1 from the left | 0.49s / 0.50s | `power2.out`, rms 0.015 | | headline | per-WORD `yPercent` 100→0 inside a per-LINE mask | 0.92s, 0.15s stagger | `expo.out` 0.56s, rms 0.057 — it beat every `power1`…`power6` fit, and the six word starts land on a 0.150s mean (0.128–0.173) | The three wipes came out on the same ease at the same duration to within 0.01s, which is one wipe grammar at three offsets rather than three tunings. The rise is a MASK, not a fade: peak glyph alpha is already 1.0 on the first frame a word appears, and the word is clipped to its own line box until it has travelled into it. `yPercent: 100` is exactly one line-height, which is the distance measured. The mask is the scene css — `overflow: hidden` on each `[data-part="line"]`, with `padding-bottom: .04em` and a matching negative margin so Playfair's descender clears the clip without moving the next line. Nothing is keyed to a scene's end. Every scene holds for 2.6s past its last word, which is roughly the hold the reference kept; `statement` carries the reference's own 6.2s. ## The type **The stored font scale has a floor.** `interpolateExp(1) * 16` is 28.0px on a 1920-tall canvas, so anything smaller pins there silently — no lint, no visible error. The credit roles were authored at 19.5px and rendered 28px at 9:16 while 1:1 and 16:9, whose floors are 15.75px, honoured 17px: the portrait cut had the LARGEST small-caps of the three. So every block's size is now one design number solved at the base ratio with the floor applied, and the short ratios scale off that. The generator round-trips every stored size back to px and reports any that pin; the count is zero. The source face is not on Google Fonts. `playFairDisplay` is the closest thing in the catalogue, chosen by measurement rather than by eye — against the source's x-height/cap of 0.721, ink coverage of 3.43 x-heights² and advance of 11.00 x-heights for `take a break`, Playfair Display 400 comes in at 0.726 / 3.64 / 10.71, ahead of Marcellus, Lora, Noto Serif, Spectral and Prata on the three together. The stored sizes then solve the exponential scale backwards from the measured pixels: 134.0px of type on 157.8px of leading at 9:16, which is `size: 55.3, lineHeight: -1.88`. ## The three renditions The plate is ONE design object and `k` scales it whole — width, height, type and leading together — so a reflow never leaves a full-size headline rattling around inside a shrunken box. Each ratio has a nominal `k` (1.00 / 0.90 / 0.88) which is pulled down per scene until the plate fits its share of the canvas (62% of the height at 9:16, 66% at 1:1, 80% at 16:9). `9:16` at `k = 1` IS the recording, to the pixel — including the plate's horizontal centring, which fell out of the measurement rather than being imposed on it. `16:9` docks the plate to the left margin and lets the photograph run out to the right; `1:1` keeps it centred and steps the type down, hardest on `support`, which carries the most copy. Every text layer was checked by measuring it: the stored `font.size` resolved back to px against each canvas, a greedy wrap at the box width, and a flag on any rendered line count that differs from the authored one. 45 layer × ratio pairs, no rewraps and no overflows, the tightest at 92.8% of its box — inside the 96% the player needs. `statement` at 9:16 is asserted against the recording rather than trusted to a comment: thirteen alpha-weighted pixel measurements off the .mov, scaled 1080/486, checked on every run. Worst deviation 1.13px, which is half a source pixel. That assertion is what caught the upper rule sitting 16px low in an earlier pass — a derived constant read as 0.734 lh where the measurement says 0.630, i.e. exactly half the top padding. One thing the crop needed: a single 1024×1536 still serves all three ratios, and `fit: cover` keeps the whole height at 9:16 but only 66.7% at 1:1 and 37.5% at 16:9. Every still in the set puts its subject in the lower third, so the default centred crop threw it away and left plain wall — hardest on the three cards, where the photograph is the frame. Each file's `fit.position` is now solved from its own detail centroid. ## Legibility No scrim anywhere and none needed: every word in this template sits on an opaque plate, so the photograph only has to read in the strip the plate leaves over. That also frees the photography brief from the usual crushed-band rule — these six are bright, airy and evenly lit, with the subject low and the upper half deliberately empty. ## Filling it `scripts/rise-take-a-break-visuals.mjs` holds the prompts for all nine stills if they need regenerating. The photo slot wants a bright interior with nothing important where the plate lands; the plate is opaque, so a busy frame is hidden rather than fought. Copy is the constrained part, because the plate is sized off the line count and the type does not shrink to fit. Headline lines run to about twelve or thirteen characters at the authored size; the `maxLength` on each slot is the number that was measured, not a guess.