House Plants

Educational Lesson

# Highlight Sample — House Plants A six-scene vertical reel, recreated from a 16s 9:16 screen recording. One idea carries the whole piece: a **flat plate** that runs off one edge of the frame, with the headline set on it and revealed **one word at a time**. - The plate is an authored rectangle, not a line-fitted chip — the inset is 90px on the text side and 200px+ on the other, which `font.padding` cannot express (it is fixed at 0.6:1), so the plate is its own `generic` layer. - A plate that bleeds off the **left** carries left-aligned type; one that bleeds off the **right** carries right-aligned type. That alternation is the rhythm. - The picture is **full screen**, and the frame is a **translucent ring** over it (`border` at 55% of the ground colour, 62px), so the photo reads through the frame instead of being cropped back by it. - That ring is a per-scene layer, not a common one: the common scene has only a back and a front plane (split at orderKey `V`), so a frame there would sit either under the photo or over the plates. It needs to be between them (`orderKey: aM`), because the plates bleed across it exactly as they do in the source. ## Scenes | scene | lines | layout | | --- | --- | --- | | `hook` | 2 | bottom, bleeds left | | `ask` | 2 | bottom, bleeds right | | `grow` | 3 | top, bleeds left | | `payoff` | 2 | centred, bleeds right, mark right | | `therapy` | 2 | top, bleeds left, mark left | | `outro` | 2 | bottom, bleeds left, mark left | Every scene carries a full-screen picture behind the plate. ## The replaceable mark Every mark is a **`media` slot on `https://cdn.fliki.ai/media.v2/my/6720f7a39c5d83f364ab39c9/6aa135125126b887b6303ded.svg`**, not baked artwork — swap in a logo, an icon or a cut-out and it is fitted (`contain`), never cropped, so any shape works. It carries `style.opacity: 78`, so the mark sits a little translucent over the plate rather than as a hard silhouette, and a replacement inherits that. One consequence worth knowing: **a media asset cannot follow the palette.** So the placeholder leaf is drawn in a neutral near-black (`#1F2124`) that reads on all eight accents, rather than in this scheme's own green — which would clash the moment someone picks a sober variant. Recolouring the mark means replacing the file. ## The motion, as measured Read off the frames of a 332x594 capture (canvas = screen x 1920/582), not guessed: | beat | how | at | | --- | --- | --- | | the plate | opacity 0 -> 1, `power1.out` | 0.00s, 0.18s | | the mark | opacity + `scale` 0.7 -> 1, `back.out(2)` | 0.12s, 0.30s | | the words | per-`word` opacity, no movement | 0.22s, 0.09s each | The recording also removes the words one at a time from the FRONT before each cut. That is keyed to the source's own scene length and is not ported — the narration decides how long a scene runs, so nothing here is anchored to its end. The boundary is one `fade` transition instead. ## Type `inter` at 700. The recorded face is a normal-width bold grotesque: cap-normalised advance widths across seven measured lines put it within a few percent of Inter and Outfit, and rule out the geometric widths (Montserrat is 20-27% too wide). Cap height measured 15.5px at capture scale = 51px on a 1080x1920 board, so `size: 23` (69.1px at Inter's 0.728 cap ratio). Line spacing measured 23px = 76px, so `lineHeight: -10` (1.08em). Plate heights are the measured line boxes plus the measured 41px of padding, so a one-, two-, three- or four-line plate all come out of the same formula. ## Palette Eight variants on four roles. `garden` is the authored scheme, read off the recording. Three are expressive alternates; the four marked **(sober)** — `slate`, `navy`, `graphite`, `sage` — drop the saturation for B2B work: a pale plate, near-black type, and a cool or neutral ground wash. ## Ratios **9:16 only.** The device is edge-bleeding plates on a portrait board; there is no honest landscape or square form of it that is the same design, and the source is a reel. Nothing here needs `sizeProps`. ## Photos Placeholders, borrowed from `step-sample-urban-garden`. Every media box is the whole canvas at `fit: cover`, so any replacement photo fills the frame without stretching, whatever shape it arrives in.