Work From Home

Dynamic Template

# Chip Sample — Work From Home A six-scene vertical reel recreated from a Canva screen recording. One device carries the whole template: **per-line highlight chips**. - **The chip stack.** Every headline is a `text` layer wearing `font.backgroundFit: "line"` over a green `fill`, so each LINE draws its own rounded plate and the plates merge into one stepped block. Nothing behind the type is a separate plate, which is what lets the block grow with filled copy instead of leaving a fixed slab the words rattle around inside. Two rules make it work: split the lines with `<br>` (a line that WRAPS paints one plate around the whole wrapped run — a slab, not a step), and let the scene's css pull each plate up into the one above by `0.49em`. Without that pull the plates only ABUT, their rounded corners leave the photo showing along the seam, and the block reads as two separate chips instead of the source's single shape. - **The white pill.** The second register inverts it — green type on a white chip, one line, set hard under the stack so the two just touch. Its `lineHeight` is what sizes it: the chip pads itself `0.16em / 0.4em`, so once the type size is fixed by the measured cap height, line height is the only lever left on a plate's height. The chip is worked five ways: a two-line headline (`cover`), a single line (`promise`), a figure (`stat`), a small label over a list of pills (`list`) and a three-line statement standing alone (`quote`). **Motion.** Everything enters as a pure opacity fade at its final position — 0.4s on `power1.inOut`, fitted to the recording, which uses no slide, no wipe and no per-word stagger. The site line has no entrance at all: it cuts in whole, as it does in the source. **Where it departs from the source.** A `line` chip's padding also grows its line box, so one number — the leading — sets both a plate's height and its distance from the next. The overlap is capped by line 1's BASELINE, because sibling plates paint in DOM order rather than backgrounds-then-glyphs: any deeper and the chip below slices the letters above. The source overlaps 0.94em, which it can only do because its two lines are one element. Solving the leading for the merged BLOCK instead — 1.416em with a 0.49em pull — lands the two-line shape within 0.5% of the source's height, with the type set a little more openly inside a slightly thinner plate. **The credit line.** Every scene keeps the source's foot-of-frame credit as its own `credit` slot — Poppins Regular, 40px, tracked +0.06em, with a `textShadow` for the photo under it. It is the one element with no plate, so it is also the one element a palette has to hold on its own: `site` is a separate role for exactly that reason. Authored at 9:16 and laid out again for 16:9 and 1:1. Type is Poppins — Bold for both chip registers, Regular with a little tracking for the credit line. The photos are generic placeholders; every one is a `photo` slot. ## Where it came from Recreated from a screen recording of a Canva design — one page, 11.53s, captured at 486x842 with the design occupying x 2..488, y 1..865, which is what makes 486 capture px = 1080 design px and every number below exact rather than eyeballed. The recording holds ONE text composition (a headline, a subline and a credit line building over the first 3.6s); the other five scenes here work that same grammar rather than copying a second layout, because there is no second layout in the source. What was measured, and what it gave: | what | how | result | | --- | --- | --- | | the typeface | single-storey `a` ruled out every other candidate, then width-per-cap matched within 1% | Poppins, Bold for the chips, Regular for the credit | | type sizes | solved from INK WIDTH, not cap height — a 26px cap read off a 486-wide capture carries 2% of error, a 337px line carries none | 84px headline, 39px subline, 40px credit | | the credit's tracking | its ink was 12% wider than its size implies, which only tracking explains | +0.06em (stored `6`) | | the chip | interior sampled flat; corner fitted against a circular arc | `#009045`, 48.9 design px radius on a 164 px plate | | the motion | the first frame a chip appears it already has full extent, and every word ramps together | a pure opacity fade, 0.40s, fitted to `power1.inOut` | | the beats | 1.20s / 2.00s / 3.55s over an 11.5s page | kept in proportion, tightened to 0.50 / 0.95 | | the credit's entrance | 0 to full between two adjacent frames, 33ms apart | no entrance at all — `timing.in`, no tween | Dropped on the way in: the loop. The source's text is gone by 10.9s because the page restarts, not because the design ends — an exit keyed to a length this template does not own. Narration resizes every scene here, so the boundary is a `transition` instead, which lands wherever the scene actually ends.