Breaking Alert

Breaking News

# Canva Sample - Breaking Alert A four-scene news-alert card recreated from a screen recording of a Canva design, then generalised: three aspect ratios, four colour schemes, and one layout that carries every scene. ## Where it came from, and what is authored The .mov holds **one** scene, looped twice - a rainy-street still under a red wash, a sheared BREAKING bar, a four-line headline swept in behind a white block, and a standing url swept in the same way a beat later. That scene is measured. Three more are authored in its language, because a four-second card is a look rather than a template. No two scenes are the same shape, and the two wordless beats are interleaved between the cards rather than stacked at the ends: | # | scene | what it is | source | | --- | --- | --- | --- | | 1 | Alert | the full card - copy, dateline, standing mark | measured | | 2 | Sting | the flag bar alone over a held frame | authored | | 3 | Update | the report card - copy and dateline, clear foot | authored | | 4 | Plate | photograph and wash, nothing else | authored | | 5 | Sign-off | the short card - three lines | authored | The report card is the one to duplicate for a longer story; the two wordless beats are there to break the rhythm, and either can be dropped if the cut is tight. The recording's loop is 6.9s and its motion is over by 0.87s, so the authored `customDuration` is 5.6s: long enough to read, short enough that a narrated fill lengthens rather than truncates it. ## The block sweep The design has one idea and uses it twice. A white rectangle the size of the copy block grows from the block's left edge, then keeps going - its trailing edge sweeping right while its leading edge parks against the hairline - and the type is revealed in its wake. Both halves are fitted to the recording's own per-frame timestamps (the file is variable frame rate, 366 frames over 10.38s): | at | element | what happens | | --- | --- | --- | | 0.15s | headline block | leading edge 92 -> 410px in 0.14s, `power2.in` | | 0.29s | headline block | trailing edge 92 -> 410px in 0.20s, `power2.out` | | 0.29s | headline | `clipPath` opens left to right on the trailing edge | | 0.02s | dateline | its own `clipPath`, 0.24s - it sits outside the block now | | 0.59s | standing bar | leading edge, 0.125s, `power2.in` (opening card only) | | 0.715s | standing bar | trailing edge, 0.155s, `power2.out`, url revealed with it | The leading-edge ramp fits `power2.in` to 0.013 normalised rms over six frames; the trailing edge fits `power2.out` to 0.02 over five. Both halves are `scaleX` on one `generic` - the first from a left origin, the second from a right one, which is only safe because they meet at `scaleX: 1`, where the origin does not matter. Nothing is keyed to a scene's end, so every card holds its final frame for however long its narration turns out to be. Entrances are `fromTo` with both ends stated - an `op: "from"` captures its destination at build time and freezes the layer after a reload. ## Type Montserrat, one family, three jobs. The face was identified by rasterising six geometric sans candidates against the recording's own pixels and scoring IoU on all four headline lines: Montserrat SemiBold scored 0.816 against Figtree's 0.683, Mulish's 0.640 and Poppins' 0.605 - the double-storey `a` rules Poppins out on sight, and the tall x-height rules out the rest. | role | face | 9:16 | 16:9 | 1:1 | | --- | --- | --- | --- | --- | | headline | Montserrat 600, right, 1.428 | 71px | 64px | 58px | | badge flag | Montserrat 700, +0.9px | 38px | 34px | 31px | | standing mark | Montserrat 500, +2.2px | 40px | 36px | 33px | | dateline | Montserrat 500, italic, underlined | 28px | 23px | 21px | | live chip | Montserrat 700, **drawn in the svg** | 7.8 units | | | **The live chip's label is markup, not a text layer**, and that is not a stylistic choice. It measures 7.81px against the 31.8px headline, which is 17.5px on the 1080x1920 canvas - and `font.size` bottoms out at **28px** on a 1920-tall canvas. Stored as a text layer it was pinned 60% oversize and burst the white plate it sits on. Inside the badge's own SVG the size is in viewBox units, where one unit is one source pixel, so the measurement goes in verbatim and holds at every ratio. The word was already `locked` + `ignoreCopy`, so nothing editable was lost. Two details that make that work: the size, weight and family go in an **inline `style`**, because a stylesheet rule on `svg text` outranks a presentation attribute and `font-family="Montserrat"` silently falls back; and the badge box and its viewBox share one aspect ratio by construction (both derive from `BADGE_W`/`BADGE_H`), so `preserveAspectRatio="none"` never stretches the letters. The dateline is the other element the floor touches - it wants 25.8px at 9:16 and gets 28px. That is 8% over inside a box with room to spare, so it is left alone. The headline's measure is exactly **10em** in all three ratios - that is what the source sets, and it is the number that decides where the lines break. Every line of placeholder copy was measured against it with the real face: 0 rewraps, 0 overflows, across all four scenes and all three ratios. ## Three ratios 9:16 is the base and carries the measured numbers. The whole card is expressed in ems of the headline, so the other two ratios are the same design at a different scale rather than a portrait layout letterboxed: the badge, the hairline, the date stamp and the standing bar all re-derive from one font size and one right edge. What changes per ratio is the two numbers a frame actually decides - the headline size and where the copy block's right edge and top sit - plus the scrim, whose first stop tracks the copy block so the wash always starts 18 points of canvas height above the type. ## Palette - five roles, eight schemes The source is a two-colour design: one red and white over a desaturated photograph. Two colours is one scheme, not a system, so the red is split along the seam the recording already has - the **wash** over the photograph measures a shade off the **flag** bar, which sits on the photograph rather than under the gradient. Splitting them is what lets a scheme be multi-coloured at all: the swap matches on VALUE, so two elements can only diverge if they are already two roles on two values. | role | what it paints | | --- | --- | | `wash` | the gradient over the photograph - 90% of the painted colour | | `flag` | the badge bar and the dot in the live chip | | `mark` | the leader stripe at the head of the badge - the second accent | | `ink` | headline, dateline, hairline, sweeping blocks, live chip, flag word | | `ground` | the file and scene ground, and the label inside the live chip | The dateline and the standing url are tints of `ink` (`#FFFFFF8C`, `#FFFFFFA6`) rather than roles of their own, so they follow whatever the scheme makes the headline. | scheme | character | hues | | --- | --- | --- | | **Breaking** | the measured source - news red over near-black | 1 | | Wire | wire-service blue | 1 | | Signal | amber, for a weather or traffic desk | 1 | | Relay | green, for a live-ops or status feed | 1 | | Dusk | magenta wash, violet bar, amber stripe | 3 | | Court | indigo wash, teal bar, mint stripe | 3 | | Ember | orange wash, deep-teal bar, butter stripe | 3 | | Noir | blackout wash, crimson bar, gold stripe | 3 | The four multi-hue schemes hold one constraint the single-hue ones get for free: the flag word is `ink` set **on** the `flag` bar, so `flag` stays mid-dark in every scheme. A pale bar would lose its own label. ## Measurement notes - The recording's frame is 482x842 once its 3px right border is cut - 1.8% wider than 9:16. Geometry is stored as per-axis percentages, so it self-corrects, and type is sized by the width fit, which is what decides whether a line wraps. - The red wash is not flat. Its alpha was recovered per row from the median R-B of the unlit left margin: 0 at 49% of the frame, 0.30 at 62%, 0.72 at 78%, 0.83 at 91%, 0.89 at the foot - the photograph is never fully covered. - The BREAKING bar is a **skew**, not a rotation: its top and bottom edges are level and only the ends lean, 6px over the bar's 27px height. A layer box cannot skew, so the bar, its two leader stripes and the live chip are one `vector` drawn as four parallelograms and a dot; the two labels are ordinary text layers on top. ## Two deliberate departures from the source **The dateline moved.** The source tucks its date into the gap beside the last headline line, which works for the one sentence it was drawn around and collides the moment the last line runs long - and a template's last line is the user's, not the author's. It is now a dateline: small, italic, underlined, flush right to the same edge as the flag bar and the hairline, in the air between them and the headline. The bar moved up from 2.20em to 2.75em above the copy block to open that air, and the dateline's position is derived from the bar's, so the two cannot drift. It is outside the sweeping block now, so it carries its own `clipPath` reveal. **The standing mark runs on the opening card only.** In the source every loop of the one scene repeats the url, because there is only one scene. Across four cards that is the same line four times; it is a standing mark, so it is stated once and the later cards keep the foot clear. ## What the source had that this does not - The backdrop is stock **footage** - a static camera on moving traffic - so there is no camera move to port. Held stills with a slow 2.5% push stand in. - The source's badge and hairline never animate: they are simply present at every loop point. They are static here too. - The corner UI in the recording (star, overflow, pause, crown) is Canva's own chrome and is not part of the design.