Breaking Wire

Breaking News

# Slant Sample — Breaking Wire A five-beat news bulletin over one full-bleed picture. A sheared orange chip in the lower third, a channel mark top right, one fixed hairline closing the frame — and copy that rises into place **a word at a time**, at a different point on the type scale in every scene. ## Where it came from, and what is authored Scenes 1 and 2 are recreated from a 22.3s screen recording of the original, captured at 314 x 560 with no letterboxing — so that frame IS the design frame, and the 9:16 base is every measured pixel times 1080/314 across and 1920/560 down. The recording holds **two** text beats over one continuous set, which is why those are two scenes and not one: the picture, chip, channel mark and rule never move across the cut, and only the copy changes. That is authored literally — every scene after the first carries the same furniture with no entrance of its own, and no scene declares a transition, so the cuts are invisible exactly as they are in the source. | # | scene | type scale | source | | --- | --- | --- | --- | | 1 | Lede — headline word by word | 80px | measured | | 2 | Detail — the standfirst | 30px | measured | | 3 | Banner — two words at display size | 150px | authored in the design's language | | 4 | Figure — a number over a small caption | 246px + 30px | authored | | 5 | Quote — mid-size copy over an attribution | 58px + 30px | authored | Scenes 3-5 are the same design at other points on its scale, which is what the deck was missing: the recording only ever shows two. The widest contrast is scene 4, where a poster-size figure sits over the smallest line in the deck. | measured | stored | | --- | --- | | headline ink 209px wide, 4 lines, 29.33px pitch | Poppins 400, 80.3px, lineHeight 1.248 | | body ink 212px wide, 7 lines, 14.0px pitch | Poppins 400, 29.9px, lineHeight 1.572 | | kicker / channel cap 10px / 5px | Poppins 700, 48.6px / 28px | | chip 153 x 33px, edges offset 10px over 31 rows | 48.72% x 5.89%, sheared -18deg | | both hairlines 1-2px | 5px | The **font is not a guess**: solving Poppins 400 against the headline's ink width gives 80.7px, and a 760px column at that size reproduces the recording's four-line headline wrap AND the paragraph's seven-line wrap word for word. Two independent wraps out of one column width is what identifies the face and both sizes together. Poppins's single-storey `a` rules out Montserrat, the other geometric sans whose cap height fits. ## Layout — the rule is the anchor The closing hairline is fixed in every scene and every ratio. Scenes 1 and 2 keep their measured cap tops; scenes 3-5 are stacked **up** from that rule instead, which is the design's own logic — the rule does not move, the copy grows towards it. That is why `style.height` is `-1` on every copy layer: the box hugs its words, so a longer script lengthens the paragraph rather than moving the headline. Scene 4 is the one place the chip itself moves: at 16:9 and 1:1 a figure that size plus its caption will not fit beneath the chip where it normally sits, so that scene lifts it — per ratio, in its own `sizeProps`. Re-deciding beats re-scaling. ## Motion Everything is an entrance, anchored to the start. Scene 1 builds the set once: | at | what | | --- | --- | | 0.10s | the chip grows down out of nothing, 0.26s | | 0.34s | the kicker fades up on it | | 0.44s | the channel hairline wipes out from the left, then the name drops in and the globe fades | | 0.72s | the closing rule fades in | | 0.75s | the headline, `{part: "word"}`, 0.16s apart — 24% of a line box up, fading | Every later scene animates only its copy, with the stagger set to the type size — 0.068s for the paragraph's forty-seven words, 0.22s for the display line's two. The word stagger is the design, and it was measured rather than guessed: the headline's nine words land 0.16s apart over 1.3s, the paragraph's forty-seven 0.068s apart over 3.2s. **Two things in the recording are deliberately NOT ported**, both anchored to the end of a fixed-length composition (motion.md rule 5): the headline's word-by-word fade-OUT at 9.2s, and the whole set collapsing at 18.9s. Narration resizes these scenes, so either would fire a third of the way into a longer one and leave the viewer watching an empty background. Each scene holds its final state instead. The shear is a **held `fromTo`** on `skewX`, not an `op: "set"`. A program whose only tween is zero-duration never renders — the paused timeline cannot step past a zero-length child sitting at 0 — so the plate came out square on every scene without an entrance. It is not a css transform either, because GSAP owns `transform` on the layer box and the chip also scales on entry; the two channels compose in GSAP and would fight anywhere else. ## Aspect ratios Three, each laid out on its own canvas rather than scaled. The headline is 4 lines at 9:16, 2 at 16:9 and 3 at 1:1; the display line is 2 lines in portrait and 1 in both others. `font.size` is recomputed per canvas, never reused — the same stored number renders 1.78x larger at 1920 tall than at 1080. Worth knowing at 9:16: the channel name at 28px is **pinned at the scale's floor** (`(1.75 + 0) * (1920/1920) * 16 = 28px`), so it cannot go smaller on that canvas. The body and the figure caption at 29.9px are one step above it. At 16:9 and 1:1 the floor is 15.75px, so those ratios set their small copy freely. ## Colour Four roles, eight variants — the format's maximum. Every variant is complete and no two roles share a value inside one. The constraint that shaped them: `ink` sits **on** `accent` — the kicker is white type on the chip — so the two are a contrast pair, and every accent has to be dark enough to carry it. That is why there is no bright amber and no pale ice in the set, tempting as both were for a news bug. ## The picture One placeholder — a wet city street at night, borrowed from `canva-sample-breaking-alert` — standing in for the reporter footage the recording used. It is a `broll` slot in all five scenes: the design wants a sequence cut to the narration, not one held frame.