A Day In My Life

Dynamic Template

# Drop Sample — A Day In My Life A vertical day-in-the-life reel: a full-bleed still under a flat dark veil, an episode label and a byline held along the top, and heavy condensed caps in amber whose words **fall in from above one at a time and settle with a bounce**. Recreated from an 18.3s screen recording of a looping 9:16 reel. That reel carries ONE text animation — a per-word drop with an elastic settle — so every text layer here carries that same mechanism and the scenes vary only in the shape of the copy stack. Nothing else was invented for it. ## Scenes | scene | carries | | --- | --- | | `cover` | the two-line title, huge, with a quoted edition line centred under it | | `chapter-one` | `01.` over a two-line step title over a two-line caption | | `chapter-two` | the same stack, second step | | `chapter-three` | the same stack, third step | The three chapters are one design object — the recording plays it three times with new copy and a new still, and a numbered day-in-the-life needs at least three steps, so they ship as three pickable scenes rather than one. The episode label and the byline are the only marks that do NOT re-animate: their ink is continuous across both cuts in the recording, so they live in the **common scene** at `orderKey` `W`/`X`, above every content scene. The handle at the foot DOES drop again on each cut, so it belongs to each scene. ## The motion One mechanism, every number least-squares fitted to the recording. The .mov is VFR — 597 frames at 1/60 and 210 at 1/30, 44.6fps average — so the fit runs over the container's real `pts_time`, not the frame index. | beat | how | fitted | | --- | --- | --- | | start | every text layer begins together, 0.05s after the cut | 0.051s | | each word | `yPercent` −30 → 0 (22.5% of its own type size) | rms 0.23px over a 45.8px travel | | ease | `elastic.out(1.1, 0.42)` over 1.04s | beat every `power1`…`power6` and `back.out` fit | | stagger | 0.07s per word, running through the `<br>` | 0.0695s over the caption's seven words | | opacity | 0 → 1 in 0.08s, on the same stagger | the ink is full on the word's first frame | The travel is a constant **22.5% of the font size** across all four block sizes (number 45.8px / 202, title 26.2 / 117, caption 6.5 / 30, handle 7.0 / 30), which is why `yPercent` differs per layer — the stored unit is a share of the word's line box, and the line box is tighter on the display type than on the labels. Nothing is keyed to the scene's end: the recording's chapters run 5.05s each, but a narrated scene arrives at whatever length the user's script is, and the block simply holds. ## Type **Roboto Condensed** — 900 for the display type, 700 for the labels and the caption. A substitution: the source face is a heavy condensed grotesque this catalogue does not carry, identified by fitting ink width against cap height over four strings. Roboto Condensed 900 was the closest catalogue face at tracking ≈ 0 (every authored line lands within ±4% of the measured ink width; the one outlier is `01.`, whose digits are 23% wider here than in the source). Sizes are matched by MEASUREMENT, not by eye — each block is sized so its longest authored line fills the column the design gives it: | block | px @1080×1920 | line-height | tracking | | --- | --- | --- | --- | | cover title, step number | 199.5 | 0.744em | 0 | | step title | 117.3 | 0.756em | 0 | | caption, edition, byline, handle | 29.9 | 0.912 / 0.996em | +0.028em | | episode label | 69.1 | 0.996em | 0 | The 0.744em leading is the design's, not a mistake: cap height and line advance are equal in the source, so the two title lines very nearly touch. ## Ratios All three ratios use the same type sizes in PIXELS — only the stored numbers differ, because `font.size` resolves against canvas height. The stack is re-derived per ratio rather than scaled: the caption's last line is anchored at 82.5% of height (the cover's edition line at 80%) and the block is stacked upward using the gaps recovered from the base, each expressed in units of its own type size. 16:9 narrows the text column to 46% so the title still fills it without a 356px headline. ## Placeholders The four stills are neutral generated placeholders, not photography — the brief was to get the text animation, positions and type right first. Each media slot carries the prompt for the picture it wants.