Holiday Recap

Dynamic Template

# Canva Sample — Holiday Recap A seven-scene vertical travel reel. Four scenes are recreated from a screen recording of a Canva design; three more were authored on top of it to give the type somewhere else to sit. One motion idea carries the whole film — **display type that blurs into focus a character at a time** — and the scenes are cut by where that animation starts again. ## Where it came from The .mov is 12.15s at 314 × 560 and loops, so it holds the whole film twice over. Playback begins at 0.45s and the loop closes at 10.95s: **10.5s of content**. | # | scene | source | recording | | --- | --- | --- | --- | | 1 | Cover — kicker, title, sun mark | measured | 0.45 → 3.4s | | 2 | Collage — three torn bands | measured | 3.9 → 7.0s | | 3 | Hero — title low over one frame | measured | 7.0 → 8.5s | | 4 | Stat — one oversized numeral, centred | authored | — | | 5 | Note — three lines flush left, mid frame | authored | — | | 6 | Quote — three lines flush right, low | authored | — | | 7 | Outro — sign-off | measured | 8.85 → 10.95s | The source treats scenes 2 and 3 as one continuous move — the middle band grows until it fills the frame and the other two leave — which is not a cut at all. They are split here because the brief was one scene per text beat, and because a wordless collage and a titled hero are two different things to fill. The zoom survives as scene 2's `zoom` transition and as opposing crop pushes on the bands. ## The three authored scenes The recording only ever centres its type in the upper or lower third at one of two sizes. Three scenes were added to give the template somewhere else to put a line, so a filled video is not four variations of the same card: | scene | position | size at 9:16 | what it is for | | --- | --- | --- | --- | | **Stat** | centred, mid frame | **431px** — the largest type in the film | one number, one or two digits, with a tracked caption under it | | **Note** | flush **left**, `align: left`, mid frame | 119px over three lines | a dated diary beat, ten characters a line | | **Quote** | flush **right**, `align: right`, lower third | 95px over three lines | the line worth keeping, with its source under it | Each carries a `generic` wash keyed to its own layout — a left-edge gradient behind the note, a foot gradient under the quote, a soft centre band behind the number — because the type no longer sits where the photograph is reliably quiet. Every wash is a tint of the `ground` role, so it moves with the scheme. Column widths were set by measuring the copy rather than picked: `We stopped` is 744px at 119px Titan One, so the note's 9:16 column is 80% of the canvas, not the 62% the layout started at. Same for the quote's `Nothing to do` at 682px. ## The one animation Every piece of type in the film arrives the same way: **each character fades up from a 26px blur**, staggered left to right, `power2.out`. Sampling the title across the entrance shows individual glyphs at different sharpness in the same frame, which is what rules out a whole-block blur or a wipe standing in for one. The stagger is set by the run: 0.055s a character on the two display titles, 0.045s on the longer sign-off, 0.03s on a kicker and 0.02s on the handle, so every line finishes in roughly the same half-second whatever its length. Written as `fromTo` rather than `from`: a `from` tween captures its destination when the timeline is built, which freezes the layer at whatever state a reload catches it in. **What was deliberately dropped.** The source blurs and darkens its cover out at 3.0s and flashes a yellow band across the frame at 8.5s — both keyed to the authored scene length. Narration is what really sizes a filled scene, so those became `scene.transition` (`blur`, then `wipe from-left`), which the timing engine applies at whatever end each scene turns out to have. ## Type Both faces were identified by rasterising candidates and scoring their cap-normalised ink widths against the recording's own pixels. - **Titan One** for every display line. Solving the em from four measured strings gives 62.27 / 62.56px on the cover and 47.04 / 47.54px on the sign-off — a 0.5% spread, which is the match. Archivo Black, the next closest, is 4% out on `Recap` and 9% out on `See You` in opposite directions. - **Oswald 600** for the kicker and the standing handle. At a 12px cap the measurement cannot separate the condensed grotesques on width alone; Oswald is the one whose fitted tracking agrees between the two strings (0.92px against 0.19px, against 1.5px of disagreement for Archivo). | role | face | 9:16 | 16:9 | 1:1 | | --- | --- | --- | --- | --- | | stat numeral | Titan One | 431px | 303px | 303px | | display title | Titan One | 213px | 150px | 150px | | sign-off | Titan One | 161px | 112px | 112px | | note block | Titan One | 119px | 86px | 86px | | quote block | Titan One | 95px | 70px | 70px | | kicker | Oswald 600 | 50px | 36px | 36px | | stat caption | Oswald 600 | 47px | 34px | 34px | | standing handle | Oswald 600 | 34px | 26px | 26px | The leading is the unusual number: measured cap tops 50px apart on a 62px em and 38px apart on a 47px em — **0.80em on both**, tighter than the face's own content box, which is what makes the two lines nest the way they do. Stored as `lineHeight: -33`. Every copy box carries `height: -1`, so it hugs whatever the fill writes rather than the rectangle these particular words happened to fill. ## Lifting the type off the photographs Pale yellow on a sunlit beach is the one contrast pair this design cannot win on colour, so every text layer carries a `style.textShadow` — the GLYPHS' shadow, not `style.shadow`, which would draw a rectangle behind the whole box. Each is derived from the size that layer actually renders at: `top = 0.035em`, `blur = 0.14em`, capped at 10px and 48px so the stat numeral does not smear. The colour is `#0B2A4AA6` — a tint of the `ground` role, so the shadow moves with the scheme instead of staying navy under a coral one. `textShadow` is the one field group emitted in raw pixels, so it does **not** scale across ratios: every layer restates its own value in each `sizeProps` patch, computed against that canvas. A 30px blur under the 213px portrait title is 21px under the 150px landscape one. ## The sun mark — a Graphic layer A line-drawn sun setting behind three waves: a circle, seven rays and three quadratic wave paths on a 158 × 120 viewBox, taken off the recording at 4× and stroked 6 units with round caps. It carries the display colour inline, so it moves with the scheme. It is a `vector`, which is the type the editor calls **Graphic**, and it carries a `slotKey` — so it is a swappable graphic the fill can replace and the user can pick from, not the locked decoration it started as. Its lift matches the type's, but a vector cannot use `textShadow` and `style.shadow` would paint the layer's box, so the shadow goes on the artwork as a `drop-shadow` filter in `data.inlineStyle` — restated per ratio for the same reason the text shadows are. ## The torn seams The collage's bands are separated by paper tears, drawn as two `vector` strips with deterministically jittered polygon edges rather than bundled as images — one less asset, and they recolour. ## Palette — four roles, four schemes The source is one yellow doing every job. Splitting it into `sun` (the display type and the mark) and `mark` (the kicker and the handle) is what lets a scheme move the small type a step off the headline; `seam` and `ground` carry the paper and the backing. Eight schemes, the format's maximum. The first four keep the source's structure — pale type on a dark ground. The last four break it: | scheme | sun | ground | what it changes | | --- | --- | --- | --- | | **Sunny** | `#F8E08C` | `#0B2A4A` | the authored scheme | | Coral | `#FFB4A2` | `#2A0E14` | warm, low-key | | Mint | `#BFF3D6` | `#06231C` | cool, low-key | | Mono | `#F2F2F2` | `#101214` | no hue at all | | **Neon** | `#D8FF3D` | `#080B04` | electric lime on near-black | | **Ember** | `#FF6A2B` | `#1C0803` | saturated orange, not a pastel | | **Ultraviolet** | `#FF4FD2` | `#180734` | hot pink on deep violet | | **Paper** | `#123A2E` | `#FFF4E0` | **inverted** — dark ink on a cream ground | Paper is the one that tests the roles rather than recolouring them. `ground` is not just the backing: it tints every scrim and every text shadow, so flipping it to cream turns the washes from darkening to lightening and the shadows into pale halos — which is exactly right under dark type, and is why the shadows were written as tints of a role rather than as a fixed navy. ## Three ratios 9:16 is the base and carries the measured numbers, taken off the 314 × 560 recording at × 3.4395 horizontally and × 3.4286 vertically. 16:9 and 1:1 keep the centred stack — it is a centred design and squeezing it sideways would be the wrong fix — and are recomputed against their own canvases: the text column narrows to 60% of the width in landscape and 84% in square, the sun mark is re-proportioned from its own 1.317 aspect rather than scaled, and every `font.size` is derived against that canvas height instead of reused. ## Placeholders The copy is placeholder and every line sits in a named slot with a `maxLength`; the layout was measured, not written around these words. The nine photographs are generic coast, road and underwater stand-ins pulled from the shelf's own masters — each is a media slot, replaceable with anything. Three frames are marked `broll` — the hero, the note and the quote, the scenes that narrate over one held picture. The collage is a wordless beat that keeps its own three stills; the cover, the stat and the sign-off are type-led cards where a cutting picture would fight the words.