// Masthead & hero const { useEffect, useState, useRef, useLayoutEffect } = React; function useReveal(threshold = 0.12) { const ref = useRef(null); const [seen, setSeen] = useState(false); useEffect(() => { if (!ref.current) return; const io = new IntersectionObserver((es) => es.forEach(e => { if (e.isIntersecting) { setSeen(true); io.disconnect(); } }), { threshold }); io.observe(ref.current); return () => io.disconnect(); }, [threshold]); return [ref, seen]; } // Kinetic digit roller: scrolls through digits and lands on target function KineticDigit({ target, delay = 0, size = 120 }) { const ref = useRef(null); const [pos, setPos] = useState(0); useEffect(() => { const io = new IntersectionObserver((es) => { es.forEach(e => { if (e.isIntersecting) { setTimeout(() => setPos(target + 20), delay); // spin past then land setTimeout(() => setPos(target), delay + 1400); io.disconnect(); } }); }, { threshold: 0.4 }); if (ref.current) io.observe(ref.current); return () => io.disconnect(); }, [target, delay]); const digits = Array.from({ length: pos + 2 }, (_, i) => i % 10); return ( {digits.map((d, i) => {d})} ); } function Counter({ to = 171, duration = 1600 }) { const ref = useRef(null); const [v, setV] = useState(0); useEffect(() => { const io = new IntersectionObserver((es) => es.forEach(e => { if (e.isIntersecting) { const start = performance.now(); const step = (t) => { const p = Math.min(1, (t - start) / duration); const eased = 1 - Math.pow(1 - p, 3); setV(Math.floor(eased * to)); if (p < 1) requestAnimationFrame(step); else setV(to); }; requestAnimationFrame(step); io.disconnect(); } }), { threshold: 0.5 }); if (ref.current) io.observe(ref.current); return () => io.disconnect(); }, [to, duration]); return {v}; } function Wordmark({ light }) { return ( e.preventDefault()} style={{ display: 'inline-flex', alignItems: 'baseline', textDecoration: 'none', color: light ? 'var(--bg)' : 'var(--ink)' }}> grnted .co ); } function Nav() { const [scrolled, setScrolled] = useState(false); useEffect(() => { const f = () => setScrolled(window.scrollY > 60); window.addEventListener('scroll', f); return () => window.removeEventListener('scroll', f); }, []); return (
Library Services About Request a scan →
); } // Masthead hero — big newspaper cover function Masthead() { const [mounted, setMounted] = useState(false); useEffect(() => { const t = setTimeout(() => setMounted(true), 80); return () => clearTimeout(t); }, []); return (
{/* Top dateline */}
Vol. 01 · No. 171 SalemPortlandBendCoos Bay Spring 2026 · Oregon
{/* Eyebrow strip */}
The broadsheet for Oregon public grants Maintained weekly · Last edition Apr 18
{/* Huge masthead title */}

Granted .

{/* Underline rules */}
{/* Hero grid below masthead */}
{/* Left: headline + lede */}
Lead story · Consider it grnted

Every grant your Oregon agency qualifies for, under one masthead.

We maintain a private library of {' '} one hundred and seventy-one{' '} federal, state, and private grant programs for Oregon public entities — and we use it to find the money your agency qualifies for.

Rural school districts, cities, counties, fire districts, water districts, libraries, tribes, ports, and special districts. Every eligible dollar, tracked against primary sources and refreshed as cycles move. The library is our tool. The work we do for you is what matters.

{/* CTAs */} {/* Kinetic stat row */}
{/* Right: vertical program ticker */}
{/* Bottom marquee */}
{Array.from({ length: 2 }).flatMap((_, pass) => TICKER.slice(0, 15).map((t, i) => ( {t} § )))}
); } function KineticStat({ label, n, suffix = '', last }) { return (
{label}
{suffix}
); } Object.assign(window, { useReveal, Counter, KineticDigit, Wordmark, Nav, Masthead });