Slow Roast

Dynamic Template

# Frame Sample — Teaser Six scenes for a vertical social teaser, recreated from a Canva card and extended into a run. Every scene is one full-bleed still with a thin rule drawn over it and a few lines of type — nothing else. The kit is three things: Poppins, a rule that draws itself, and copy that slides in horizontally from alternating sides. The placeholder run is a specialty coffee roastery launch. ## Type Poppins throughout, on one scale derived from a content column that holds ~857px in all three canvases: display 125px, claim 100px, figure 190px, line 62px, body 58px, label 47px, mark 40px (9:16 values; the other ratios scale by how much the column narrows). Display copy runs Bold at a 1.05 line-height with no tracking; the eyebrow and the standing mark are Regular, tracked out to 0.095em and 0.067em. **Every line of type carries the same `textShadow`** — 26px of blur, no offset to speak of, in the palette's `shade` role. It is the only thing holding white copy legible over an arbitrary photograph, so it is not dressing: a variant that lightens `shade` has to darken the type to match, which is why the two move together in the palette. ## The drawn rule One stroke language across all six scenes: a `vector` path with `pathLength="1"`, a dash of `1`, and a single eased `strokeDashoffset` from 1 to 0 — `power2.inOut` over 0.45s, measured off the source. Normalising the dash means the same tween serves every aspect and no perimeter is ever recomputed. Each scene draws a different fragment of that language, and the full rectangle bookends the run: | # | scene | what is drawn | | --- | --- | --- | | 1 | Teaser | the whole frame, clockwise from the top-right corner | | 2 | Statement | one short rule above the claim, left to right | | 3 | Three marks | three ticks, one per line, staggered | | 4 | Figure | two corner brackets, top-left then bottom-right | | 5 | Detail | one bottom-left corner around the caption | | 6 | Close | the whole frame again | ## Motion Every entrance is **one** `fromTo` carrying opacity and the horizontal settle together — `power1.out`, 0.48s to 0.77s, each duration fitted to the source's own curve. Consecutive lines alternate direction: on the teaser the top word comes from the right and the bottom word from the left. That cross is the character of the entrance, and it is why a two-line headline is two layers — one text layer can only stagger its lines one way. The three-point scene drops the cross for a single left-hand stagger, because a list reads better in one direction. One tween per layer is not tidiness. Splitting the fade from the slide needs `immediateRender: false` on the second tween, and a tween that does not immediate-render never resolves when a timeline is SEEKED rather than played — so the bench on open, and any thumbnail, shows every line parked at its full entrance offset and the card looks badly mis-centred. One tween has nothing to disagree with. Distances are `xPercent`, which needs no per-ratio override: every box holds the same width in pixels across the three canvases. Nothing is anchored to a scene's end. The source loops its entrance out again on a 2.9s cycle; that exit is dropped, because a scene sized by narration has no end to count back from. Each card draws in and holds, and the boundaries are `scene.transition`. ## Palette Six roles, so a variant recolours the design rather than only tinting the type: `display` for the largest copy, `accent` for every drawn rule and the four dots, `support` for the second-rank lines, `mark` for the brand furniture, `ground` for the file, and `shade` for the shadow under all of it. Seven variants. Roast, Noir, Sage and Ink are the current set and all keep LIGHT display type, differing by hue and by what the accent does. Bright, Paper and Sand are the three this package shipped with earlier, refitted to the six roles. **Paper is the one to watch.** It is the only inverted scheme — espresso type on a paper ground — and the type sits on a PHOTOGRAPH, not on `ground`, so the swap does not lighten what is behind it. Measured against the placeholder stills it averages 1.8:1 and fails 52 of 57 layer-by-ratio pairs; its white `shade` is doing all the work. It is kept because a user who replaces the backdrops with bright photography wants it; on this photography, pick another. ## The furniture The eyebrow and the standing mark appear on the INTRO and the OUTRO only. They were in the common scene and therefore on all six, which is a lot of standing brand on a thirty-second teaser — the four scenes in the middle are now just the photograph and the copy, and the mark bookends the run instead of hovering over it. Each pair fades in on its own scene; that reads as intentional at two points where it read as a glitch at six. ## Aspect ratios The composition is expressed relative to a content column that keeps roughly its pixel width at all three ratios, so the type sits the same way inside it and only `font.size` — the one resolution-dependent value — is restated per canvas. Every text box was measured with `measureText` at all three ratios: nothing rewraps, and each `maxLength` is the count an arbitrary phrase of that size actually reaches.