Small Business

Dynamic Template

# Badge Sample — Small Business A six-scene vertical reel recreated from a Canva screen recording. One device carries the whole template: a **stacked pair of chips** over a full-bleed picture — a narrow cream chip naming the section, a wide lime chip carrying the copy — and every line of type inside them **rises into place** as the chip it sits in finishes fading up. The chips are the same box in all four scenes (900 × 255 for the copy, 530 wide for the label, both stadiums); what changes is where the stack is anchored and how much is said inside it. The cover swaps the label for a two-word badge at double the size and adds a url on a hairline at the foot. ## Scenes | scene | stack | carries | | --- | --- | --- | | `cover` | mid-frame | `3 TIPS` badge, the promise on two lines, url over a rule | | `chapter` | centred | the header chip ALONE — two lines of caps, `meta.silent` | | `strategy` | top | two-line label, three lines of body | | `branding` | foot | two-line label, three lines of body | | `campaigns` | top | two-line label, four lines of body one step smaller | | `note` | centred | the copy chip ALONE — three lines, no label over it | `chapter` and `note` are the pair reduced to one element each, which is what makes the device reusable rather than one frame repeated. Neither introduces a new box or a new type size: `chapter` is the section scene's label chip alone, centred, and `note` is its copy chip alone, centred. `chapter` narrates nowhere — a two-line marker has nothing to say, so the scene carries `meta.silent` rather than a slot for filler. `note`'s copy enters at 0.34s rather than 0.74s, which is the same plate-to-copy offset the stacked scenes use, measured from its own plate instead of the one above it. ## The motion Every scene runs the same four-beat program, measured off the recording rather than assumed — the reel's own frame timestamps, not its nominal 60fps: | beat | how | at | for | | --- | --- | --- | --- | | cream chip | opacity 0 → 1, no movement | 0.00s | 0.45s | | label lines | rise `1.7ch` and fade, per LINE | 0.22s | 0.24s, 0.16s apart | | lime chip | opacity 0 → 1, no movement | 0.40s | 0.45s | | body lines | rise `1.7ch` and fade, per LINE | 0.74s | 0.24s, 0.16s apart | The cover's url follows at 0.95s and its rule fades up at 1.00s. Three things the recording settled that eyeballing had wrong: - **The chips do not scale or wipe.** Their greenness rises uniformly across the whole plate from the first frame they appear on, at full extent — a pure opacity fade. The apparent inset in the first frame is a threshold artefact. - **The type rises, it does not just fade.** Cross-correlating each settled line mask against the frames through its entrance gives a monotonic +12 → 0 px offset. The distance is the same (~33px at 1080 × 1920) for the cover's 86px badge and the sections' 39px labels, so it is absolute, not em-based. - **The stagger is per LINE, not per word.** A line's contrast goes from nothing to two thirds in three frames; a word stagger would smear that over half a second. Canva loops its entrance back out on a ~3s cycle, which the cover is long enough to show. That exit is dropped (motion Rule 5) — the chips draw in and hold. ## Type `barlow` 700 throughout, one face. Six steps, each derived with `template:units` against its own canvas: 86 / 81 / 43 / 39 / 34px at 1080 × 1920. The reference is Canva Sans, which the catalogue does not carry; Barlow was picked by fitting candidate faces to the recording's ink — at 81px it matches the cover headline's measured width to within 0.5% at zero tracking, and its x-height/cap ratio (0.734) is the closest available to the measured 0.73. Line heights are measured off the reel's baseline pitch: 1.0em for the caps labels, 1.10em for the cover headline, 1.16em for the body. ## Colour — five roles, eight schemes | role | what it is | | --- | --- | | `ground` | the file and scene ground — seen only in a gap or under a cut | | `chip` | the cream label chip | | `accent` | the wide chip behind the body — the design's one loud colour | | `ink` | every word in the film | | `rule` | the hairline under the cover's url | `lime` is the recording's own scheme. `citrus`, `lagoon`, `blush`, `solar` and `orchid` keep its structure — a light chip and a saturated accent under dark ink — and `mono` / `graphite` are the minimal pair, one light and one inverted. `graphite` is the one variant that inverts the contrast: light ink on dark chips. It is the only scheme where the cover's url, which sits on the picture with no plate behind it, needs a dark photograph to read. Every other variant keeps ink dark, which is the design's own logic and what makes it safe over the bright lifestyle photography these scenes expect. ## Ratios Authored at 9:16 and laid out again for 16:9 and 1:1. The chips keep their pixel size on every canvas — it is the same design, not a scaled one — and what is re-decided per ratio is where the stack is anchored vertically and the stored `font.size` for the shorter canvas. The photos are generic placeholders. Every one is a `photo` slot; the three section beats mark theirs `broll`, the cover holds its shot because a title card's words carry it.