Setting the file. One moment.
Subchapter 28.15
categories/news/module.mdMarkdown5 KBView on GitHub
Search a real news article → animate it as an article-highlight — a faithful HF port of the centered-emphasis technique. Signature motion: the article text is laid out at a readable size (NOT zoomed), slides + fades up, then the keyword is highlighted in place — a marker band grows left→right behind it. No blow-up zoom. ~5–7s.
Two layouts share that one highlight core — pick by aspect + whether there’s a logo / person to feature:
| Layout | Aspect | Use when | Has |
|---|---|---|---|
| A · centered-emphasis | 9:16 / 1:1 | text-only, social vertical | kicker + one centered sentence + keyword highlight |
| B · full article | 16:9 | there’s a real outlet logo and/or a person in the story | logo + date + multi-line headline highlight + dek + outlet + person cutout |
RWA / web search (or hyperframes capture) → a real article. The Director extracts the keyword (1–2 words / a number / a name — the hook) and, for Layout B, also a brand logo, a date, and a person photo. asset_needs: { kind: news|web|image, query } — request the logo (media-use resolve --type logo, theSVG-first) and the person photo (Wikimedia) as separate asset queries. Run the person photo through hyperframes remove-background <in> -o <out>.png to get a transparent cutout.
The keyword highlight is a marker band grown L→R via background-size (NOT a transform:scaleX bar):
.hl {
--hlw: 0%;
background-image: linear-gradient(var(--hl), var(--hl)); /* --hl: rgba(250,222,99,.6) */
background-repeat: no-repeat;
background-position: 0 72%;
background-size: var(--hlw) 64%;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}box-decoration-break:clone makes the band wrap across line breaks seamlessly — a multi-word keyword spanning 2–3 lines still highlights continuously (the old scaleX bar could not). GSAP tweens the CSS var --hlw 0%→100%, swept on AFTER the text settles — never pre-applied. Optionally scale the duration with keyword length ~0.5–1.5s.
#kicker (e.g. “BBC NEWS · TECHNOLOGY”, brand accent) at top; the key sentence centered, serif, ~70–76px / 700 / line-height ~1.4, max-width ≈ 900. The whole sentence stays legible; the keyword is emphasized within it.… raised <span class="hl" id="kw">$750M</span> at ….set{autoAlpha:0,y:52}→to{autoAlpha:1,y:0,duration:0.8,ease:"power3.out"}, no zoom) → keyword highlight grows (--hlw 0→100%, after the sentence settles) → gentle hold (scale 1.012).Reference: samples/news/_ref-centered-emphasis.html (+ news/v2-*).
The editorial article-card layout (logo top-left + date + big serif headline with a multi-line keyword highlight + dek + outlet bottom-left + a background-removed person cutout bottom-right). 1920×1080, paper-light gradient stage, Georgia serif.
#logo, ~64px) — inline the outlet/brand SVG, fill:currentColor, set color to the mark’s own hue (or near-black for a monochrome mark). Date below it (#date, ~30px, muted).#headline, Georgia 96px / 700, width≈1080, line-height 1.16) with the keyword wrapped in <span class="hl" id="kw"> — the highlight band sweeps across all wrapped lines of the phrase.#dek, Helvetica ~38px gray) under the headline; outlet (#outlet, Georgia bold ~50px) bottom-left.#subject, the bg-removed PNG, height≈860, right:40; bottom:0, drop-shadow) — slides up from bottom-right as the hero beat.back.out @0.15 → date @0.4 → subject slides up (set{autoAlpha:0,x:90,y:60}→to{autoAlpha:1,x:0,y:0,duration:0.85,ease:"power3.out"}) @0.45 → headline @0.7 → dek @1.5 → outlet @1.9 → keyword highlight (--hlw 0→100%, duration:0.8) @2.2. duration ~6.5s.Reference: samples/news/_ref-article-layout.html (a real article rendered with a real outlet logo + a background-removed person + a real story).
Highlight is grown in place, swept on AFTER the text — never pre-applied. The text stays readable — do NOT zoom the keyword to fill the frame (team feedback 2026-06-09: zoom loses context and reads wrong; the technique never zooms — it presents the text and highlights the word). For Layout B, the person MUST be a remove-background cutout (no rectangular photo box). Deterministic; honor references/builder-contract.md.