Numbered Tips

Dynamic Template

# Canva Sample — Numbered Tips A six-scene "four tips" reel recreated from a screen recording of a Canva design and then generalised: three aspect ratios, four colour schemes, and one neon accent doing every job. ## Where it came from The .mov is 20.5 seconds and holds all six scenes before it loops, so every scene here is measured rather than authored in the design's language. The recording is a player 486x842 wide with the 1080x1920 video cover-cropped into it, which is what makes the mapping exact: the horizontal centre of every line, every disc and every bar lands on 540 once the frame is read as `canvas = (recorded + edge) * 20/9`. | # | scene | what the recording shows | | --- | --- | --- | | 1 | Title card | display headline rising line by line, a rotated by-line typing on, a neon bar wiping a subhead in | | 2, 4 | Tip one, tip three | a ringed ordinal, then a headline typed one character per frame | | 3, 5 | Tip two, tip four | no ordinal — the headline alone, typed the same way, flush left and then centred mid-frame | | 6 | Follow card | credit line, two-line call, ringed arrow, handle — each rising in turn | The copy is placeholder: design advice, because the source was a design-tips reel. Every line sits in a named slot with a `maxLength`, and the layout was measured, not written around these words. ## What was measured, and what was dropped Three numbers carry the design and none of them is a guess: - The **rise** every element enters on fits `power3.out` over 0.30s from 103 recorded pixels — the observed offsets are 72, 45, 29, 18, 8, 4, 2, 1, 0 and the curve predicts 72, 48, 30, 18, 9, 4, 1. - The **typewriter** on the tip headlines advances one character per source frame. - The **subhead wipe** is two half-tweens, not a slide: the bar grows right from its own left edge to full width, then collapses right onto its right edge, uncovering type that is the same neon as the bar. Dropped on the way in: every exit. The source un-wipes each headline from the left and fades the ordinal out before the next scene, both keyed to a scene length this template does not own — narration resizes the scene, so an exit at 3.5s of a 3.7s scene becomes an exit a third of the way into a ten-second one. The boundary is a `transition` instead, which lands wherever the scene actually ends. The source's own boundaries are kept in kind: a half-second slide off the title card, a left wipe between the tips, a hard cut into the follow card. ## Type Two families. **Inter** carries the display headlines at 700, the ordinals and the two small marks at 500-600. **Playfair Display Italic** carries the one word the title turns on — loaded as a `url` face with the `ital` axis rather than as the catalogue builtin, because the catalogue ships no italic and a synthesised slant on a Didone is visibly the wrong letterform. Every size is solved from a measured INK WIDTH rather than from an x-height, because a 50-pixel x-height read off a 486-wide recording carries 2% of error and a 650-pixel line carries none. Measuring that way is also what surfaced the design's **tracking**: at the size its x-height implies, Inter sets each of the source's display lines about 5% wide. So the display type carries `letterSpacing: -5` (-0.05em) and the two small marks carry none — which reproduces "level up" at 655px against a measured 651, "style" at 400 against 398, and "guide on" at 625 against 625. Sizes are per ratio, computed against each canvas: the display measures 196px on 1080x1920, and 16:9 and 1:1 are re-laid at 250px and 175px rather than inheriting a number that would render 1.78x too large. ## Palette — three roles, six schemes The source is genuinely monochrome. Every mark in it — the display type, the italic, the by-line, the ordinal ring, the wipe bar, the arrow, the handle — measures the same neon (#F7FF4B at the bar's flat interior, the only region large enough to read past the recording's antialiasing). Splitting that into invented tiers would record a design decision nobody made, so the palette has the two roles the design has — `ink`, and the `ground` the photographs sit on — plus `shade`, the one dark the halo is painted in, held at the same value in every scheme because it sits behind the accent rather than beside it. | scheme | the accent | | --- | --- | | **Neon** | the authored citron-yellow | | Ember | a hot orange over a warmer ground | | Ice | a cold cyan over a blue-black ground | | Bloom | a hard pink over a plum-black ground | | Mint | a cold green over a green-black ground | | Bone | a warm off-white over a near-black brown — the one scheme that reads as ink rather than neon | ## Photography Every mark carries a soft dark halo — `textShadow` on the type, a matching box shadow on the ring and the wipe bar, a wider dark pair under the arrow's own strokes — blurred at 0.22em and offset 0.06em, so it reads as depth on a bright frame rather than as a plate. It is not a scrim: there is **no scrim** anywhere — the neon sits straight on the picture, which is what makes the design feel unlayered and what makes the photography load-bearing. Every text region in every ratio lands in the upper two thirds of the file, so the six backdrops are lit to one rule: a single warm practical low at frame right, the subject in the lower third, the upper two thirds held in soft even shadow at a quarter of that brightness. Median luminance up there is 18-50 out of 255 against neon at ~240. The four tip backdrops are marked `broll`: they are the scene's picture in a scene that narrates. The title card and the follow card hold, because their message is their type.