Slant 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 (name on the left, sheared globe tile on the right, a hairline under both), 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 and the globe fade up on it | | 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 pictures Five, one per beat, generated for this package rather than borrowed — `scripts/slant-breaking-wire-visuals.mjs` regenerates them. | scene | picture | | --- | --- | | Lede | a blue-hour street, broadcast vans and a raised mast | | Detail | a desk of unmarked binders under a cold lamp | | Banner | an empty press podium, microphones, nobody there | | Figure | a records archive aisle of unlabelled box files | | Quote | an empty committee hearing room | They are places a story is reported FROM, not illustrations of one — these are placeholders a user replaces, and a finished picture would make the template look like somebody else's finished video. Every one is a `broll` slot: the design wants a sequence cut to the narration, not a held frame. The frame is constrained harder than it looks, and the constraint is in the prompts rather than discovered afterwards. Working back through `fit: cover`, the design lands its copy in the source's bottom half at every ratio, and lands the white channel mark on the source's right side anywhere from a tenth to nearly half way down — 9:16 sees the mark at 12-19% of the frame, the square crop at ~30-35%, the landscape band at ~40-43%. So one soft source lights every shot from frame LEFT, the right side stays in mid-shadow to the midline, and the bottom half falls to quiet dark mid-tone. Quiet, not crushed: the template paints its own scrim over the foot, and a still already crushed to black plus that scrim is just a black rectangle. Measured after the fact, white type over picture-plus-scrim across all three ratios and both regions — 30 pairs, **no failures**, worst 5.4:1, best 20:1, against the 4.5:1 that WCAG asks of large text. The one shot that had to be re-prompted was the lede: the first street came back functionally fine on contrast but visually murky (median luminance 20 of 255), which undersells the opening frame.