/* global React */ const { useState: useStateW, useEffect: useEffectW, useRef: useRefW } = React; /* ================================================================= WELCOME INTRO v3 — bull charges in, slings flag, wordmark stamps Storyboard: P1 (0–800) Black. Far horizon line. Mono ID ticker types. Distant rumble (visual: ground line trembles). P2 (800–2200) Bull charges in from RIGHT against gold sun. Speed lines, dust kick, slight camera shake on stop. P3 (2200–3300) Bull stops centered. Flag pole in mouth. Bull tosses head — flag UNFURLS violently from its mouth, snapping open to fill the sky. Seven stars settle on the blue field. P4 (3300–4400) Wordmark "BULL CITY / SYSTEMS" stamps in over flag, with letterpress thunk + red SYSTEMS. Subtitle: "Built by an Airborne Ranger. Built for Durham." appears. P5 (4400–5200) Composition compresses into bottom-left flag badge position; site rises into view. ================================================================= */ function WelcomeIntro() { const [phase, setPhase] = useStateW(0); const [done, setDone] = useStateW(() => { try { return sessionStorage.getItem("bcs-intro-seen") === "1"; } catch { return false; } }); useEffectW(() => { if (done) return; document.body.style.overflow = "hidden"; const t1 = setTimeout(() => setPhase(1), 100); // ID ticker on const t2 = setTimeout(() => setPhase(2), 900); // bull enters const t3 = setTimeout(() => setPhase(3), 2300); // flag unfurls const t4 = setTimeout(() => setPhase(4), 3400); // wordmark stamps const t5 = setTimeout(() => setPhase(5), 4500); // compress out const t6 = setTimeout(() => finish(), 5300); function onKey(e) { if (e.key === "Escape") finish(); } window.addEventListener("keydown", onKey); return () => { [t1,t2,t3,t4,t5,t6].forEach(clearTimeout); window.removeEventListener("keydown", onKey); document.body.style.overflow = ""; }; }, []); function finish() { try { sessionStorage.setItem("bcs-intro-seen", "1"); } catch {} document.body.style.overflow = ""; setDone(true); } if (done) return null; return (
= 5 ? " welcome-out" : "")} onClick={finish} role="button" aria-label="Skip intro"> {/* CAMERA — everything inside shakes on impact */}
{/* Distant horizon + sun */}
{/* Speed lines that streak past as bull charges */}
{[...Array(14)].map((_, i) => ( ))}
{/* Dust kick at hooves */}
{[...Array(18)].map((_, i) => ( ))}
{/* THE BULL */}
{/* The flag is a child of the bull-wrap so it emerges from the mouth */}
{/* billow shading */}
{/* WORDMARK — stamps in after flag is open */}
SFC J. GRAY · 3/75 · DURHAM, NC

BULL CITY SYSTEMS

Built by an Airborne Ranger. Built for Durham.
{/* mono ticker bottom-left */}
▌
); } /* ---------------------------------------------------------------- BULL SVG — silhouette, properly proportioned, mouth open w/ pole ---------------------------------------------------------------- */ function BullSVG() { return ( ); } /* ===================================================== Persistent Durham Flag — pinned to viewport ===================================================== */ function DurhamFlagBadge() { const [open, setOpen] = useStateW(false); return (
{open && (
setOpen(false)}>
e.stopPropagation()}> DURHAM, NC
  • Royal blue — courage
  • Red — action & progress
  • Gold — quality in growth
  • White — high ideals

Seven stars · The Pleiades · The New Spirit of Durham

)}
); } function DurhamFlagSVG({ large }) { const w = large ? 240 : 44; const h = large ? 156 : 28; return ( ); } function Star({ cx, cy, r }) { const CX = parseFloat(cx), CY = parseFloat(cy), R = parseFloat(r); const points = []; for (let i = 0; i < 10; i++) { const angle = (Math.PI / 5) * i - Math.PI / 2; const rad = i % 2 === 0 ? R : R * 0.42; const x = CX + Math.cos(angle) * rad; const y = CY + Math.sin(angle) * rad; points.push(x.toFixed(2) + "," + y.toFixed(2)); } return ; } Object.assign(window, { WelcomeIntro, DurhamFlagBadge, DurhamFlagSVG });