We’re Hiring

Corporate

# Canva Sample — We’re Hiring A five-scene recruitment reel recreated from a screen recording of a Canva design, then generalised: three aspect ratios, four colour schemes, and **one scene per text animation** — which is what the reel actually varies. ## Where it came from The .mov is 24.9s at 446 × 442 (a square Canva preview, captured with the player's own controls over the foot of the frame). Playback resumes at 0.68s and loops at 24.78s, so the whole film is in it. Frame differencing puts the five page boundaries at 5.1s, 10.5s, 15.9s and 21.2s — a **5.35s cadence**, authored as 5.0s a scene. | # | scene | what changes | | --- | --- | --- | | 1 | Cover — photo card over a sliding plate | plate slides, then the type arrives word by word | | 2 | Question — chipped lines, lower left | four per-line pills slide in as one block | | 3 | Question — chipped lines, middle right | three pills, against the right edge | | 4 | Question — chipped lines, upper left | five pills, across the head of the frame | | 5 | Closing — call to action over cut shapes | no photograph; shapes and copy slide together | Scenes 2–4 are the same device at three positions, and that is the point of the design: one question a beat, the block moved to whichever corner the photograph leaves free. ## Three animations, measured off the pixels **The question blocks SLIDE, as one block.** Tracking the pill's left edge frame by frame gives 428 → 32 px over about a second on scene 4, and 414 → 216 on scene 3. Those are not the same distance, and they are not the same duration either — which rules out both "each block travels to its own rest" and "each block takes the same time to cross what it crosses". What fits all three scenes at once is a **fixed travel of one canvas width**: each block starts with its left edge exactly 100% of the frame right of where it lands, so a block resting further right becomes visible later in the same move. Fitting nine eases against the three tracks, `power1.inOut` over 1.28s wins at 7px RMS on a 414px travel (1.7%); `power2.out`, the runner-up, is 10px and visibly too fast early. Every line moves together — the left edges of line one and line four are identical in every frame — so there is no per-line stagger to port. **The cover's type arrives WORD BY WORD.** "We’re" is on screen for two frames before "hiring!" appears, and "hiring!" is visibly fainter than "We’re" in the frame they first share. The role list does the same: "Video", "Editor", then a beat, then "Project", "Coordinator", "Producer". That is a `{part: "word"}` opacity stagger of about 0.08s, not a typewriter and not a wipe — the whole two-word headline resolves in 0.15s. **The cover's plate SLIDES, faster and shorter.** Its leading edge is 78% of the way home 0.13s after it appears and then crawls the last fifth — an exponent-4 deceleration, `power3.out` over 0.28s, travelling exactly its own width (`xPercent: 100`, which is also what keeps it right in all three ratios since the plate bleeds off the right edge in each). It lands at 1.01s of the scene, which is the same instant the headline's first word appears. The end card's group is a third speed again — `power2.out` over 0.6s, fitted to within 1% across nine samples of the copy's left edge — so the reel's three entrances are three deliberately different speeds rather than one preset. **What was dropped.** The source slides every element back out to the left at the end of each page, keyed to the page's own 5s 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 are gone; the soft boundary is one `transition` of `fade` 0.6s per scene, which the timing engine applies at whatever end the scene turns out to have. That fade is also what the source's boundary really is: the outgoing page dissolves to the ground and the incoming one dissolves up out of it, with three frames of bare blue between them. Also dropped: the "Canva tip: add a voiceover" instruction box the source leaves sitting on page two. It is scaffolding, not design. ## Type **Lexend 400**, identified by cap-normalised advance width rather than by eye. The recording's "We’re hiring!" measures 286px of ink over a 33.5px cap height — 8.537 cap-widths. Lexend renders 8.582 (0.5% out) and its `W` is 1.355 caps against 1.343 measured (0.9%); of the other eleven grotesques in the catalogue only Poppins comes within 4%, and Poppins is ruled out by the source's **double-storey `a`**. A least-squares fit of eleven measured pill widths against Lexend's advances puts the question type at a 22.25px em with 9.5px of pill padding either side — and 0.427em of padding is the player's own `backgroundFit: "line"` inset of 0.4em, to within a pixel. So the pills need no `font.padding` at all: the player draws Canva's inset by default. The source's own face is Canva Sans, which the catalogue does not carry. Lexend is the closest match on width, cap height and letterform — not an identity. | role | 1:1 & 16:9 | 9:16 | renders (1:1 / 9:16) | | --- | --- | --- | --- | | cover headline | 73 | 55 | 116px / 134px | | brand name | 42 | 22 | 58px / 67px | | brand line / role list | 31 | 15 | 47px / 54px | | question pills | 38 | 19 | 54px / 63px | | closing copy | 53 | 31 | 73px / 84px | Every canvas here is 1080px on its short side, so the same physical type size is available in all three — and `font.size` resolves against the canvas HEIGHT, so 9:16 is a different stored number for the same rendered pixels. Portrait then takes **15% more of it**: a square design's type reads small in a 9:16 reel, and the frame has the width to spend. ## The pills, and the seam Every question is one text layer with `backgroundFit: "line"`, so each authored line gets a pill hugging its own width — which is what gives the block its stepped edge. Two numbers make it match the source: - The measured pill is **34px tall on a 22px pitch**, so consecutive pills OVERLAP by 12px and the block reads as one continuous stepped shape. The player lays the lines out as flex items, so the pitch IS the pill height and they would abut instead, leaving the ground showing in the notch where a narrow line meets a wide one. - One rule in each scene's css closes it: `#<id> [data-part="line"] + [data-part="line"] { margin-top: -0.531em }`, 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. That lands a 1.52em pill on a 0.989em pitch — the source's 34-on-22 exactly — and the total block height comes to 122px against 122px measured. **The line breaks are authored, as `<br>`.** They are not a wrap the box could be sized into: the width window that produces the source's breaks is 12.595em to 13.171em for scene 2 and 8.061em to 8.289em for scene 3 — under 3% wide, which no box can be trusted to hit across three canvases and a browser whose text metrics differ from the measuring tool's by more than that. Each line is a pill, so the breaks are design, and they are written down. ## Three ratios 1:1 is the base and carries the measured numbers, taken off the 446 × 442 capture at x × 2.4215 and y × 2.4434. - **9:16** re-stacks vertically and sets the type 15% larger (above), which is what the tightened insets pay for: the blocks move in to 6% of the width and widen to 80–85% of it, the cover's card grows to 62% of the height with the plate under it and its own inset drops from 17.5% to 10%, and the three question blocks sit at 8% / 44% / 72% of the height so each still clears the half of the photograph its subject is in. - **16:9** keeps every vertical number, because the canvas is the same 1080 tall, and the type therefore keeps its stored size. What moves is the width: the cover card takes the left 52%, and each question block becomes a column at 4% / 68% / 14% of the width rather than most of the frame. - Vertical insets that read as MARGINS rather than positions — the brand lockup, the block insets — are scaled by the canvas WIDTH in every ratio, so they stay the same physical distance from the edge instead of stretching with the frame. ## Palette — six roles, four schemes The source is three colours doing every job: a deep blue ground that is also the pill behind every question, a light blue plate, and two cut accents on the end card. Splitting the type off the grounds is what lets a scheme move ink and ground independently — `ink` is the pale cyan on the plate, `chipInk` the white inside the pills and on the lockup. | scheme | ground | panel | accents | | --- | --- | --- | --- | | **Electric** | the authored `#2F33E2` | `#4675FC` | mint / periwinkle | | Ember | oxide red | burnt orange | wheat / clay | | Forest | deep spruce | jade | citron / mint | | Graphite | near-black | slate | acid lime / grey | Every variant states every role, no two roles share a value inside one, and the two contrast pairs the design leans on — `chipInk` on `ground`, `ink` on `panel` — clear in all four. `ink` on `panel` is the tight one at about 3.6:1 in Electric, which is the source's own pale-on-light-blue and is kept deliberately; the other three schemes are 4.3:1 or better. ## Placeholders The copy is placeholder — a generic hiring reel, every line in a named slot with a `maxLength`. The four photographs are generic workplace stand-ins from the workshop's own masters, cropped square to 1080 × 1080; each is a media slot, replaceable with anything, and each scene's brief says which half of the frame the type leaves free. The three question backdrops are marked **`meta.broll`** — they are the whole visual of a scene whose narration will run much longer than the authored five seconds, so they want a sequence of shots rather than one held still. The cover's card is not: it is a title beat inside a frame, and it holds. The end card's three shapes are `clip-path` polygons, exact on the edges and losing the source's ~25px corner radius — `border-radius` and `clip-path` do not compose. Each polygon is a percentage of its own layer box, so re-boxing the shape per ratio re-cuts it without a second set of coordinates. **Their paint is in `data.inlineStyle`, beside the clip, and that is deliberate.** `style.fill` paints the layer's motion wrapper, which is one level ABOVE the element `data.attrs.id` is stamped on — so a scene-css `clip-path` keyed on that id clips a transparent child and the filled rectangle behind it is what you see. Painting and clipping the same element is the only way to make the two meet, and because the colour is still a plain hex the palette swap finds it: `template:palette` reports 100% of the file's paint covered by the six roles.