/* global React, DIChart */ const { useState, useEffect, useMemo, useRef } = React; const DI2 = window.DI; // ============================================================ // SHARED HELPERS // ============================================================ const fmt2 = (v, plus=true) => `${v>0&&plus?'+':''}${v.toFixed(v<10&&v>-10?1:0)}%`; const compact = (n) => { if (n >= 1e9) return (n/1e9).toFixed(1).replace(/\.0$/,'') + 'B'; if (n >= 1e6) return (n/1e6).toFixed(1).replace(/\.0$/,'') + 'M'; if (n >= 1e3) return (n/1e3).toFixed(1).replace(/\.0$/,'') + 'k'; if (n >= 1) return n.toFixed(0); if (n >= 0.01) return n.toFixed(2); return n.toExponential(1); }; // Animated count-up hook with IntersectionObserver function useCountUp(target, opts={}) { const { duration = 1400, decimals = 0, prefix='', suffix='' } = opts; const ref = useRef(null); const [val, setVal] = useState(0); const [done, setDone] = useState(false); useEffect(() => { if (!ref.current || done) return; const io = new IntersectionObserver(([e]) => { if (!e.isIntersecting) return; const start = performance.now(); const tick = (t) => { const p = Math.min(1, (t - start) / duration); const eased = 1 - Math.pow(1 - p, 3); setVal(target * eased); if (p < 1) requestAnimationFrame(tick); else setDone(true); }; requestAnimationFrame(tick); io.disconnect(); }, { threshold: 0.4 }); io.observe(ref.current); return () => io.disconnect(); }, [target, duration, done]); const formatted = decimals === 0 ? Math.round(val).toLocaleString() : val.toFixed(decimals); return [ref, prefix + formatted + suffix]; } // Reveal-on-scroll wrapper function Reveal({ children, as='div', style={} }) { const Tag = as; return {children}; } // ============================================================ // THEME — Abundance, with palette variants // ============================================================ const palettes = { warm: { // default — orange + teal on cream bg:'#FFF8EF', bgAlt:'#FFE9C7', bgDeep:'#1A1C2E', ink:'#1A1C2E', inkSoft:'#4A4E6B', inkMute:'#7C809C', line:'#F0D9B0', accent:'#FF7A45', accent2:'#2EB5A1', accentSoft:'#FFD9C5', di:'#2EB5A1', m2:'#FF7A45', cpi:'#7C809C', }, citrus: { // BRAND — ink + gold on paper (matches DI logo) bg:'#FAFAF6', bgAlt:'#F1EEE2', bgDeep:'#1B1B1B', ink:'#1B1B1B', inkSoft:'#4A4640', inkMute:'#8A867A', line:'#E3E1D8', accent:'#B88A2B', accent2:'#2F7A7A', accentSoft:'#EDE0BF', di:'#2F7A7A', m2:'#B88A2B', cpi:'#8A867A', }, forest: { // green + sand bg:'#F5F1E6', bgAlt:'#E8E0CC', bgDeep:'#1F2A1F', ink:'#1F2A1F', inkSoft:'#3F4D3D', inkMute:'#7A7E72', line:'#DCD3BA', accent:'#C95A3F', accent2:'#3F8358', accentSoft:'#F0CFC0', di:'#3F8358', m2:'#C95A3F', cpi:'#7A7E72', }, }; function makeTheme(paletteId) { const p = palettes[paletteId] || palettes.warm; return { ...p, font:"'Fraunces', Georgia, serif", sans:"'Inter', system-ui, sans-serif", mono:"'JetBrains Mono', ui-monospace, monospace", grid:'rgba(26,28,46,0.06)', tooltipBg:'#FFFFFF', }; } // ============================================================ // HERO MOTIFS — illustrated SVG hero objects // ============================================================ function HeroPhone({ T }) { return ( ); } function HeroSolar({ T }) { return ( ); } function HeroBattery({ T }) { return ( ); } function HeroChip({ T }) { return ( ); } const HEROES = { computing: HeroChip, communications: HeroPhone, energy: HeroSolar, transportation: HeroBattery }; // ============================================================ // 2025 PULSE BADGE // ============================================================ function PulseBadge({ T, label='2025 early read' }) { return ( {label} ); } // ============================================================ // SHARED NAV (top + mobile bottom tabs) // ============================================================ function NavV2({ route, nav, T, mobile=false }) { const [page] = route.split('/'); const L = [['home','Home'],['sectors','Sectors'],['explore','Explore'],['stories','Stories'],['method','Method']]; if (mobile) { return (

{L.map(([k,lbl])=>( ))}

); } return ( ); } // ============================================================ // THEN→NOW CARD (animated) // ============================================================ function ThenNowV2({ entry, T, onClick }) { return ( ); } // ============================================================ // HOMEPAGE // ============================================================ function HomeV2({ nav, T }) { const H = DI2.headline; const [diRef, diVal] = useCountUp(96.25, {decimals:1, suffix:'%'}); const [m2Ref, m2Val] = useCountUp(550, {suffix:'%'}); const [cpiRef, cpiVal] = useCountUp(155, {suffix:'%'}); const [gapRef, gapVal] = useCountUp(522, {suffix:'pp'}); const sectorEmoji = { computing:'💻', communications:'📡', energy:'☀️', transportation:'🔋' }; return (

{/* HERO */}

{/* Decorative curve */}

· retrieved {DI2.early2025.retrieved}

Technology got radically cheaper.
Here's where the abundance went.

Across 35 years, the cost of computing, communications, energy and transportation collapsed by 96.5%. Money supply rose 576%. Consumer prices rose 150%. The Deflation Index puts all three on one chart so the divergence is visible at a glance.

{/* HERO MOTIFS — rotating */}

The four motifs

What a hundred dollars buys now.

Same hundred dollars. Different decade. The unit on the box is the same; the multiplier is real.

{DI2.sectors.map((s,i)=>{ const Hero = HEROES[s.id]; return ( ); })}

{/* THE FOUR NUMBERS */}

1990 → 2025

Four numbers, three decades.

{[ {label:'Tech got cheaper', val:'96.5', sym:'−', suffix:'%', color:T.accent2, ref:diRef, anim:diVal, sub:'Deflation Index, weighted'}, {label:'Money supply', val:'576', sym:'+', suffix:'%', color:T.accent, ref:m2Ref, anim:m2Val, sub:'M2, FRED measured'}, {label:'Consumer prices', val:'150', sym:'+', suffix:'%', color:'#FFFFFF', ref:cpiRef, anim:cpiVal, sub:'CPI-U, BLS measured'}, {label:'The abundance gap', val:'522', sym:'', suffix:'pp', color:T.accent, ref:gapRef, anim:gapVal, sub:'|Tech| + Money − Prices'}, ].map((s,i)=>(

{s.label}

{s.sym}{s.anim}

{s.sub}

))}

{/* THE THREE LINES */}

Three lines

One chart that explains the gap.

{/* THEN → NOW DOLLAR TEST */}

The $100 test

Hundred dollars, two decades, four sectors.

Same money. Same unit of capability. The multiplier is what technology bought you.

{DI2.dollarTest.map((it,i)=>( nav('explore')}/> ))}

{/* TIMELINE */}

How we got here

Six inflection points.

{DI2.timeline.map((t, i) => (

{t.year}

{t.title}

{t.text}

{t.year === 2025 && }

))}

{/* STORIES */}

Stories

Going deeper.

{DI2.stories.map((st,i)=>(

{st.kicker} · {st.readMins} min

{st.title}

{st.dek}

))}

{/* CTA */}

An occasional newsletter.

New sector data, methodology updates, occasional findings. No upsell.

); } window.AbundanceV2Home = HomeV2; window.AbundanceV2Theme = makeTheme; window.AbundanceV2Nav = NavV2; window.AbundanceV2Pulse = PulseBadge; window.AbundanceV2Reveal = Reveal; window.AbundanceV2Heroes = HEROES; window.AbundanceV2Palettes = palettes;