Three Tips

Dynamic Template

# Canva Sample — Three Tips An eight-scene vertical tips reel, recreated from a screen recording of a Canva design and then generalised: three aspect ratios, eight colour schemes, one layout carrying all three tips, and **four beats of decreasing density** authored in the same language — two statement cards and two solo lines. ## Where it came from The .mov is 23.2s and loops, so it holds the whole film: a title card and three tip cards, **five seconds each**, cut hard — one frame between the last frame of one photograph and the first of the next, with the incoming chip already at full opacity. There is no cross-dissolve to port, so the scenes carry no `transition`. | # | scene | source | | --- | --- | --- | | 1 | Cover — count chip + chipped promise | measured | | 2 | Statement — upper third | authored in the design's language | | 3 | Solo line — upper third | authored in the design's language | | 4–6 | Tip one / two / three | measured | | 7 | Statement — lower third | authored in the design's language | | 8 | Solo line — lower third | authored in the design's language | The recording began paused on the title card and looped back to it at 20.33s, which is where the cover's own entrance was measured. ## Four beats, and a density ladder The recording has none of these; they exist because a run of three identical tip cards needs somewhere to breathe, and because the layout language already had the parts. They step down in density, and the type steps up to match — with fewer words to carry the frame, each one gets set larger: | scene | layers over the photo | words | type at 9:16 | pinned | | --- | --- | --- | --- | --- | | tip card | heading, plate, disc, quote, paragraph | ~16 | 81px heading | 5.0s | | statement | chip label + two-line chipped statement | ~5 | 112px | 4.0s | | **solo line** | **one chipped line** | **2–3** | **132px** | 2.5s | ### The statement beats A **one-word chip label and a two-line chipped statement, and nothing else** — no body plate, no quote disc, no paragraph. | | type sits in | led by | entrance | | --- | --- | --- | --- | | `statement-top` | the **upper** third — 14–39% of the height at 9:16 | blue statement under a yellow label | both fade up in place, label first (the cover's device) | | `statement-bottom` | the **lower** third — 62–87% | yellow statement over a blue label | the statement rises into a mask, the label follows (the tips' device, without the plate) | ### The solo lines The floor of the ladder: **one chipped line over the photograph, and that is the whole scene.** `solo-top` rises into a mask in the upper third, `solo-bottom` fades up in place in the lower third, and neither carries a label, a plate or a paragraph. Both are single-line, so neither needs the seam pull. They are also the only two scenes in the file marked **`meta.silent`**. A two-word card has nothing to say that the scene after it does not, and a voiceover slot on one only gives the fill somewhere to write filler — so the silence is recorded as a decision rather than left as an omission. That is also why they keep their 2.5s pin: nothing else can size a scene that does not speak. The `maxLength` of 14 on that slot is not a guess — it is the point at which fourteen `M`s, the widest glyph Anton has, still sit on one line at every ratio. Past it the line wraps and the layout stops being this layout. Every one of the four is paired against its opposite edge on purpose: whichever half of a photograph is doing the work, one of them clears it. And the standing site line is untouched throughout — it lives on the common scene and rides across all eight. ## Two devices, and they are different animations The design does **not** animate its two text blocks the same way, and that is the thing worth keeping. - **The heading RISES INTO A MASK.** On every tip scene the yellow chip block's bottom edge never moves (measured at y 512 → 508 of a 682px preview) while its top climbs 480 → 426 over 0.33s. Sampling the chip's interior colour shows it at full opacity in the first frame it exists, so nothing is fading — the two-line block is physically travelling up behind a mask, line one entering first and line two following it in. That is a `container` (which clips) holding one `text` layer whose `yPercent` runs 100 → 0 on `power2.out`; the measured curve fits between `power2` and `power3`. - **The cover's chips FADE, in place.** The same interior sample on the title card shows a clean alpha ramp — 0 → 1 over about 0.55s, `power2.out`, with the chip's geometry already final by the time it is 95% opaque. No travel, no scale. The blue promise follows 0.37s behind it over 0.32s. - **The body TYPES.** The sentence on the blue plate is revealed left-to-right at a constant rate: line one runs x 70 → 314 between 5.63s and 6.40s, line two 6.43s → 7.25s, line three behind that. Thirty-four glyphs in 0.77s is **44 glyphs a second**, with no easing anywhere in the ramp. That is a `{part: "char"}` stagger of 0.023s each, `ease: "none"` — a real typewriter rather than a clip wipe standing in for one. (The player splits glyphs, not spaces, so the 113-character placeholder is 97 targets and finishes 2.6s in.) The plate itself fades up at 0.2s over 0.4s on `power1.out` (measured alpha ramp, almost linear), and the quote disc fades with it. **What was deliberately dropped.** The source blurs and fades its whole title block out at 5.0s — a fade keyed to the authored scene length. Narration is what really sizes a filled scene, so an exit at 4.6s of a 5s scene becomes an exit a quarter of the way into a 20s one. Those exits are gone; every entrance is anchored to the start, and each scene holds its final frame for as long as it runs. ## Type Both faces were identified by rasterising candidates and scoring their cap-normalised advance widths against the recording's own pixels. - **Anton** for every chip heading. At the measured cap height its advance for "KNOW YOUR TARGET" is 200px against 203px measured (1.5% off); Oswald, the other heavy condensed face in the catalogue, misses by 11% and is visibly lighter. - **Nunito Sans** for the plate copy and the standing site line. The measured em is 13.57px, 13.57px and 13.70px across the three body lines — Poppins would need 28% more width for the same string, and Jost, Quicksand and Poppins are all ruled out by the source's double-storey `a`. The source's own body face is Canva Sans, which the catalogue does not carry; Nunito Sans is the closest match on width, x-height and letterform, not an identity. | role | face | 9:16 | 16:9 | 1:1 | | --- | --- | --- | --- | --- | | solo line | Anton | 132px | 112px | 116px | | statement | Anton | 112px | 92px | 96px | | statement label | Anton | 72px | 66px | 70px | | count chip | Anton | 106px | 96px | 96px | | chipped promise | Anton | 100px | 90px | 90px | | tip heading | Anton | 81px | 70px | 74px | | plate copy | Nunito Sans 400, 1.47 | 38px | 34px | 36px | | site line | Nunito Sans 600 | 41px | 32px | 34px | Every heading is a per-LINE pill — `backgroundFit: "line"` plus a `fill` — which is what gives each line its own chip hugging its own width. The pill pads itself 0.16em × 0.4em, so the mask boxes are the measured CHIP bounds, not the line boxes, and the corners survive the clip. **The pills have to be pulled together, and there is no typed field for it.** Canva draws each pill at the face's own content box (Anton: 1.39em) plus the 0.16em padding, on a line pitch of 1.23em — so consecutive pills OVERLAP by about half an em and a two-line heading reads as one continuous stepped shape. The player lays the lines out as flex items, so the pitch IS the pill height and they abut instead, leaving the ground showing in the notch where a narrow line meets a wide one. Three numbers get it back, and they are in em so they travel across all three ratios: - `lineHeight: 16` (1.39em) makes the pill `(1.39 + 0.32)em = 1.71em` tall, which is Canva's own pill. - one rule in the SCENE's css pulls the seam closed — `#<id> [data-part="line"] + [data-part="line"] { margin-top: -0.48em }`, addressing the layer by the `data.attrs.id` the player stamps on its box. `layer.css` is stored and never rendered, so the rule cannot live on the layer. - `radius: 30` (0.30em) keeps the corner BELOW the pull, or the seam re-opens at the corners. That lands the rendered stack at a 1.71em pill on a 1.233em pitch — a 2.945em two-line block against the recording's 2.94em — and the mask boxes are the measured CHIP bounds rather than the line boxes, so the pill corners survive the clip with room to spare. ## Palette — six roles, eight schemes The source is two colours doing every job: a yellow chip carrying black type, a blue plate carrying white. Splitting them into `chip`/`chipInk` and `plate`/`plateInk` is what lets a scheme move the ink and the ground independently, and `mark` keeps the standing site line off `plateInk` so it can stay a step quieter. Eight is the contract's ceiling on variants, and this fills it. The pair that carries a scheme is `chip` against `plate`, so the set is spread by the hue distance between those two rather than by which colours look nice on their own: | scheme | chip | plate | chip→plate hue | | --- | --- | --- | --- | | **Signal** | the authored yellow `#FCD913` | `#0013A0` | 178° | | Punch | hot pink | teal | 158° | | Mint | lime | deep spruce | 84° | | Orchid | rose | violet | 46° | | Tide | aqua | deep marine | 39° | | Ember | marigold | oxide red | 28° | | Cocoa | cream | dark cocoa | 21° | | Mono | near-white | near-black | 0° | Signal and Punch are the two that read as two colours; Ember, Cocoa and Mono are near-monochrome and let the photograph do more of the work. Every variant states every role, no two roles share a value inside one, and both contrast pairs the design depends on — `chipInk` on `chip`, `plateInk` on `plate` — clear 5.9:1 in the tightest scheme and 8:1 or better in the other seven. That matters more here than in most templates: all the type in the file sits on one of those two chips, so a variant that broke either pair would break every scene at once. ## Three ratios 9:16 is the base and carries the measured numbers, taken off a 384 × 682 preview at x × 2.8125 and y × 2.8152. - **16:9** moves the whole tip stack into a **left-hand column** at 6–56% of the width, so the photograph keeps its right half; the cover's chips stay centred. - **1:1** keeps the vertical stack, tightened, with the plate pulled up to leave the disc room above the site line. - The four added beats stay centred in all three and keep their edge: every upper one ends by 54% of the height at every ratio, every lower one starts after 46%. - Sizes are computed against each canvas rather than reused: `font.size` is resolution-independent, so the base 9:16 numbers would render 1.78× too large on a 1080-tall frame. ## Placeholders The copy is placeholder — the tips are generic small-business advice and every line sits in a named slot with a `maxLength`; the layout was measured, not written around these words. The four photographs are generic office stand-ins pulled from the workshop's own masters and cropped to 1080 × 1920; each is a media slot on `backdrop`, replaceable with anything. The four added backdrops were picked for the half they leave free — an upper-third beat sits over a photograph whose subject is low, a lower-third beat over one whose subject is high. One thing is added rather than measured: the site line carries a `textShadow`. It is the only piece of type in the design with no chip under it, and the source only gets away with that because its own photographs happen to be dark at the foot. A slot takes any photograph, so the standing mark carries its own lift. No media slot is marked `broll`. All four scenes are type-led — a chip heading and a sentence typing itself across a plate — and a photograph cutting underneath that competes with the words rather than supporting them, so every backdrop is held.