/* RADAR1 — breakout scenes: opener, bumper, station ID (full-stage overlays) */
const DSb = window.Radar1DesignSystem_1f4661;
/* Expanding radar rings backdrop */
function RingField({ accent = "rgba(31,168,224,0.35)", n = 4 }) {
return (
{Array.from({ length: n }, (_, i) => (
))}
);
}
/* ---------- OPENER (~10s) ---------- */
function Opener({ onDone, duration = 10000 }) {
const now = useNow();
React.useEffect(() => {
const id = setTimeout(onDone, duration);
return () => clearTimeout(id);
}, []);
const outAt = (duration - 900) + "ms";
return (
{/* phase 1: rings + sweep */}
{/* phase 2: wordmark assembly */}
{/* phase 3: tagline + clock */}
YOUR WORLD · EVERY SECOND
{fmtDate(now, "UTC")}
{fmtTime(now, "UTC", true, true)} UTC
LIVE
{/* phase 4: exit wipe */}
);
}
/* ---------- BUMPER (~4.5s) ---------- */
function Bumper({ onDone, duration = 4500 }) {
React.useEffect(() => {
const id = setTimeout(onDone, duration);
return () => clearTimeout(id);
}, []);
const prog = window.R1DATA.programs[0];
return (
COMING UP
{prog.next.charAt(0) + prog.next.slice(1).toLowerCase()}
{prog.nextAt}
);
}
/* ---------- STATION ID (~5s) ---------- */
function StationID({ onDone, duration = 5000 }) {
const now = useNow();
React.useEffect(() => {
const id = setTimeout(onDone, duration);
return () => clearTimeout(id);
}, []);
const trio = window.R1DATA.clocks.slice(0, 3);
return (
GLOBAL NEWS NETWORK · 24 / 7
{trio.map((c, i) => (
{c.label}
{fmtTime(now, c.tz, true)}
))}
);
}
const BREAKOUTS = { opener: Opener, bumper: Bumper, stationid: StationID };
Object.assign(window, { Opener, Bumper, StationID, BREAKOUTS, RingField });