// Full-bleed animated hero background — rich, layered substrate visualization. // Five depth planes, dense wireframe grids, scanning beams, flowing data, // atmospheric depth cues. Pure SVG/CSS. const HeroBackground = () => (
{/* Deep space base — subtle nebula glow */}
{/* Starfield — multi-layer with twinkle */}
{/* Main wireframe substrate */} {/* Vertical atmospheric depth lines — subtle vertical beams */} {Array.from({length:20}).map((_,i)=>( ))} {/* DEEPEST PLANE — tiny, far on horizon */} {Array.from({length:7}).map((_,i)=>{ const t = i/6; const y = -20 + t*40; const halfW = 140 + t*40; return ; })} {Array.from({length:9}).map((_,i)=>{ const t = (i-4)/4; return ; })} {/* FAR PLANE — Agency Web */} {Array.from({length:11}).map((_,i)=>{ const t = i/10; const y = -40 + t*80; const halfW = 240 + t*70; return ; })} {Array.from({length:13}).map((_,i)=>{ const t = (i-6)/6; return ; })} AGENCY_WEB · 219K PAGES {/* MID PLANE — SAM.gov */} {Array.from({length:13}).map((_,i)=>{ const t = i/12; const y = -70 + t*140; const halfW = 380 + t*120; return ; })} {Array.from({length:17}).map((_,i)=>{ const t = (i-8)/8; return ; })} SAM_GOV · 7.7M OPPORTUNITIES {/* NEAR PLANE — USASpending, most prominent */} {/* Horizontal lines with depth fade */} {Array.from({length:17}).map((_,i)=>{ const t = i/16; const y = -110 + t*220; const halfW = 560 + t*220; return ; })} {/* Converging diagonals */} {Array.from({length:21}).map((_,i)=>{ const t = (i-10)/10; return ; })} USASPENDING · 12.6M AWARDS · FY05–FY25 {/* Horizon glow band — bright seam at horizon */} {/* Scanning beam — sweeps horizontally across */} {/* Vertical data flow — particles falling along convergence lines */} {/* Flowing packets along convergence lines */} {[500, 650, 800, 950, 1100].map((x, i)=>( ))} {/* Pulsing data nodes across planes */} {[ {cx:420, cy:340, r:2, delay:0}, {cx:1180, cy:340, r:1.8, delay:2}, {cx:620, cy:340, r:1.6, delay:1.2}, {cx:980, cy:340, r:1.8, delay:2.6}, {cx:500, cy:490, r:2.6, delay:1}, {cx:1100, cy:490, r:2.2, delay:3}, {cx:700, cy:490, r:2.8, delay:0.5}, {cx:900, cy:490, r:3, delay:1.8}, {cx:350, cy:740, r:3.5, delay:1.5}, {cx:1250, cy:740, r:3, delay:2.5}, {cx:600, cy:740, r:4, delay:0.8}, {cx:1000, cy:740, r:3.5, delay:3.5}, {cx:800, cy:740, r:4.5, delay:1.2}, ].map((n,i)=>( ))} {/* Corner tick marks — technical readout feel */} FPDS · SUBSTRATE v2.2 {/* Depth haze — distant objects fade */}
{/* Vignette */}
{/* Top fade for nav legibility */}
{/* Bottom fade — for transition to next section */}
); // Transition strip between dark hero and light problem section. // Horizon line glows, wireframe grid fades into white, vertical beams catch light. const HeroToLightTransition = () => (
{/* Dark-to-light gradient backdrop */}
{/* Converging grid lines — top view of near plane extending into distance */} {Array.from({length:6}).map((_,i)=>{ const t = i/5; const y = t*70; const halfW = 800 + t*400; return ; })} {Array.from({length:21}).map((_,i)=>{ const t = (i-10)/10; return ; })} {/* Horizon glow seam at top */} {/* Bottom fade markers — subtle dots as grid meets white */} {Array.from({length:24}).map((_,i)=>{ const x = i * 66.6 + 33; return ; })}
); window.HeroBackground = HeroBackground; window.HeroToLightTransition = HeroToLightTransition;