Urban Garden

Dynamic Template

# Step Sample — Urban Garden A four-step how-to set: an olive card opens on its own axis over a full-bleed still, and every word climbs into its own line. Five scenes in all three ratios — one full-bleed hook with no card, then four cards that move around the frame. Recreated from an 18.9s screen recording of a single 15.4s reel (five scenes, 3.07s each, hard cuts). The reel carries ONE text mechanism — a per-word masked rise — so every scene here carries that same mechanism and varies only where the card sits, how wide it is, and how much copy it holds. ## Scenes | scene | card | carries | | --- | --- | --- | | `hook` | none | the opening question, centred low over the still, and a tracked kicker | | `space` | foot, flush left | a two-line step title over a three-line paragraph | | `plants` | head, flush right | the same card at the head of the frame, four-line paragraph | | `pot` | foot, full width | the longest title — three lines — over four lines of copy | | `care` | head, flush right | the shortest title over three lines | The card is content-driven: 28px of source padding above the title, 22px between the title's cap bottom and the body's cap top, 25px under the last line, and it docks 24px off the foot or 32px off the head — which is where the reel's four cards each landed, to within a source pixel. ## The motion Three beats per scene, fitted to the reel's own `pts_time` (the .mov is VFR, so the frame index is not a clock): | beat | how | fitted | | --- | --- | --- | | card | `scaleY` 0→1 on its own axis | 0.28–0.55s, 0.2s, `power2.out` | | title | per-WORD `yPercent` 100→0 inside a per-LINE mask | card + 0.06s, 0.34s `expo.out`, 0.07s stagger | | body | the same rise, tighter | title + 0.48s, 0.028s stagger | Each card opens on the axis the reel opened it on: `space` and `pot` downward from their top edge, `plants` outward from its centre, `care` upward from its foot. Measured onsets: 0.50 / 0.28 / 0.55 / 0.33s. The player emits one `[data-part="line"]` per AUTHORED break, not per wrapped row — so a paragraph left to wrap itself is ONE mask over three rows, and a word displaced by one line-height simply lands in the row below it, in full view. Every row is therefore authored: the body's `<br>`s are the wrap this size actually produces, solved per ratio and patched in as `data.content` where the rows differ. The stored box is 4% wider than the width it was wrapped at, so a browser a few percent off this fit cannot re-wrap a row and break its mask. The rise is a MASK, not a fade — the word is at full alpha on the first frame it appears and 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-top: .1em` and a matching negative margin, because the leading here (0.81em of a 1.43em content box) puts Teko's cap tops slightly ABOVE the line box and an unpadded clip would shave them. **Nothing is keyed to a scene's end.** The reel exits each scene by sliding the title out and fading the card — an exit timed off a 3.07s scene, which the narration will not be. Those tweens were dropped rather than ported; each scene holds its last frame for as long as it runs, and the boundary is a hard cut, as it is in the reel. ## The type Two faces, both chosen by measurement rather than by eye. **Titles: Teko 700.** Against the reel's cap-normalised advances for nine title lines and its ink coverage per cap² over three, Teko came in at 5.2% and 8% — ahead of Roboto Condensed, Khand, Oswald 700, Kanit, Archivo, Big Shoulders, Anton and Archivo Black on the two together. **Body and kicker: Roboto Condensed 400 at +0.076em.** Fitted on the two ragged (unjustified) lines in the reel — the rest of the body copy is justified there, so its widths measure the box and not the face. Two concessions to the substitution, both because Teko and Roboto Condensed set those strings wider than the reel's own face: - the step title is 116px where the measurement says 125px, so that `STEP 1: DETERMINE` still clears the card it sits on (96.4% of its column); - the body is 36.5px where the measurement says 38.6px, which is what reproduces the reel's line counts — 3 / 4 / 4 / 3 — rather than one extra line in three scenes out of four. Both keep the measured LEADING: 94.3px of line pitch on the titles, 33.6px on the body, expressed as a ratio of the size that is actually stored. The hook is its own size — 138.5px on 101.7px of pitch, centred, and the only copy in the set that sits on a photograph rather than a card, so it is the only copy carrying a `textShadow`. ## The three renditions `9:16` at 1080×1920 IS the reel. `1:1` keeps the same width and the same stacked card, scaled to 0.85 so the card takes about half the shorter canvas instead of two thirds; the vertical anchoring is preserved rather than recomputed — whatever sat a distance off the foot or the head still sits that distance off it. `16:9` is a different layout, not a squeeze. The design scales to 0.62 and the card becomes a full-bleed band with the title and the body SIDE BY SIDE inside it, because a 550px-tall stacked card on a 1080px canvas is half the frame. The hook, which has no card to keep in proportion, scales to 0.85 there instead. One thing `cover` needed: a single 1080×1920 still fills 9:16 exactly and is cropped hard everywhere else — 56% of its height thrown away at 1:1 and 68% at 16:9 — and the default centred crop kept the wrong band in four scenes out of five (dark soil under the seedling, the pot behind the card). Each slot's `fit.position` is now solved per ratio: the subject's own height in the still, placed in the middle of the strip the card actually leaves over. 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. 26 layer × ratio pairs, no rewraps, no overflows, the tightest at 96.4% of its box. The stored body box is 4% wider than the width it was wrapped at, so a browser a few percent off this fit still cannot rewrap the paragraph. ## Filling it The five stills are placeholders, generated to the reel's own shot list (a watering can in foliage, a terrace from above, a seedling going in, potting mix, a bed being watered). Each is a `broll` slot: the card is opaque, so only the strip it leaves over has to read, and a busy frame is hidden rather than fought. Copy is the constrained part. Title lines run to about seventeen characters at the authored size and the type does not shrink to fit; the `maxLength` on each slot is the number that was measured. The body wraps itself and its box grows downward, but the card's height is authored, so a paragraph much longer than the placeholder will run past the card's foot.