// Shared UI primitives + helpers for America First Defense.AI prototype // Reveal-on-scroll wrapper using IntersectionObserver function Reveal({ children, delay = 0, as: Tag = "div", className = "" }) { const ref = React.useRef(null); const [shown, setShown] = React.useState(false); React.useEffect(() => { const el = ref.current; if (!el) return; // If element is already in (or above) viewport on mount, show immediately. const rect = el.getBoundingClientRect(); if (rect.top < window.innerHeight + 100) { setTimeout(() => setShown(true), delay); return; } const io = new IntersectionObserver( (entries) => { entries.forEach((e) => { if (e.isIntersecting) { setTimeout(() => setShown(true), delay); io.unobserve(el); } }); }, { threshold: 0.05, rootMargin: "0px 0px 10% 0px" } ); io.observe(el); // Failsafe: ensure content is shown after 1s even if observer never fires const failsafe = setTimeout(() => setShown(true), 1000 + delay); return () => {io.disconnect();clearTimeout(failsafe);}; }, [delay]); return ( {children} ); } // Word-by-word kinetic reveal for headlines. // Wrap a string in …; each word slides up + fades in, // staggered. Plays in concert with the parent .reveal.in class so it only // fires when scrolled into view. JSX children are rendered as a single word. function Kinetic({ children, baseDelay = 60, lineDelay = 0, as: Tag = "span" }) { // Flatten children into an ordered list of "tokens": strings split into words, // and elements treated as a single word. We preserve whitespace. const tokens = []; const push = (t) => tokens.push(t); React.Children.forEach(children, (c, i) => { if (typeof c === "string") { const parts = c.split(/(\s+)/); parts.forEach((p) => { if (p === "") return; if (/^\s+$/.test(p)) push({ type: "ws", v: p });else push({ type: "word", v: p }); }); } else if (React.isValidElement(c)) { push({ type: "node", v: c, key: i }); } }); let wIndex = 0; return ( {tokens.map((t, i) => { if (t.type === "ws") return {t.v}; const delay = lineDelay + wIndex++ * baseDelay; return ( {t.type === "node" ? t.v : t.v} ); })} ); } // CountUp — animates a numeric value from 0 to target when revealed into view. // Accepts a number or a string like "1.8" / ">1.8" — animates the numeric // portion and preserves prefix/suffix text. Triggers via IntersectionObserver. function CountUp({ value, duration = 1400, prefix = "", suffix = "", decimals = null }) { const ref = React.useRef(null); const [n, setN] = React.useState(0); // Parse leading non-digit prefix and trailing suffix, plus the numeric core. const str = String(value); const m = str.match(/^(\D*)([\d.]+)(.*)$/); const parsedPrefix = (m ? m[1] : "") + prefix; const target = m ? parseFloat(m[2]) : 0; const parsedSuffix = (m ? m[3] : "") + suffix; const dec = decimals !== null ? decimals : m && m[2].includes(".") ? m[2].split(".")[1].length : 0; React.useEffect(() => { const el = ref.current; if (!el) return; let started = false; let raf; const start = () => { if (started) return; started = true; const t0 = performance.now(); const tick = (now) => { const p = Math.min(1, (now - t0) / duration); const eased = 1 - Math.pow(1 - p, 3); setN(target * eased); if (p < 1) raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); }; const io = new IntersectionObserver((entries) => { entries.forEach((e) => {if (e.isIntersecting) {start();io.unobserve(el);}}); }, { threshold: 0.4 }); io.observe(el); return () => {io.disconnect();if (raf) cancelAnimationFrame(raf);}; }, [target, duration]); return {parsedPrefix}{n.toFixed(dec)}{parsedSuffix}; } // Hook: track cursor over an element and write CSS vars --mx / --my. // Used by platform cards to drive a follow-the-mouse radial highlight. function useCursorGlow() { const ref = React.useRef(null); React.useEffect(() => { const el = ref.current; if (!el) return; const onMove = (e) => { const r = el.getBoundingClientRect(); el.style.setProperty("--mx", `${(e.clientX - r.left) / r.width * 100}%`); el.style.setProperty("--my", `${(e.clientY - r.top) / r.height * 100}%`); }; el.addEventListener("pointermove", onMove); return () => el.removeEventListener("pointermove", onMove); }, []); return ref; } // Section header — eyebrow + title pattern function SHead({ id, eyebrow, children, className = "" }) { const hasLeft = id || eyebrow; return ( {hasLeft ?

{id ?

{id}

: null} {eyebrow ?

{eyebrow}

: null}

{children}

); } // Inline arrow component function Arr({ size = 14, color = "currentColor" }) { return ( ); } // Crosshair / target SVG function CrosshairIcon({ size = 22, color = "currentColor" }) { return ( ); } // Wave / soft robotics SVG function WaveIcon({ size = 22, color = "currentColor" }) { return ( ); } // Shield mark function ShieldIcon({ size = 22, color = "currentColor" }) { return ( ); } // Star function Star({ size = 14, color = "currentColor", filled = true }) { return ( ); } // Brand mark — shield + flag stripes (original abstract) function BrandSeal({ size = 60 }) { return ( ); } // Topographic / contour decoration as SVG overlay function ContourBg({ opacity = 0.08, color = "#ede7da" }) { return ( ); } // Document bar — small column header function DocBar({ left, center, right }) { return (

{left}

{center}

{right}

); } // CTA block reused at bottom of pages function CtaBlock({ tweaks }) { return (

Ready to defend America together.

Partner with America First Defense.AI. Contact us to learn more.

Contact Read Mission

); } // Footer function Footer() { return ( ); } Object.assign(window, { Reveal, SHead, Arr, CrosshairIcon, WaveIcon, ShieldIcon, Star, BrandSeal, ContourBg, DocBar, CtaBlock, Footer, Kinetic, CountUp, useCursorGlow });