// V1 — MONOCHROME POLISHED SAAS (dark, minimal accents)
// True-dark palette, monochrome surfaces, saffron used ONLY as a precision accent.
// Heavy on motion: scroll-reveal, parallax, marquees, sweep shimmers, typewriter.
const C = window.ROAM_COPY;
// Driven by CSS variables set in index.html from TWEAK_DEFAULTS.
// Raw hex fallbacks used only if index.html script didn't run.
const T = {
bg: 'var(--v1-bg, #050506)',
bg2: '#08080A',
panel: 'var(--v1-panel, #0C0C10)',
panelHi: '#101016',
line: 'rgba(255,255,255,0.05)',
lineHi: 'rgba(255,255,255,0.09)',
white: '#FFFFFF',
ink: 'var(--v1-ink, #EDEDEF)',
ink2: 'var(--v1-ink2, #B8B8BC)',
ink3: '#7C7C82',
ink4: '#4A4A50',
ink5: '#2A2A30',
saffron: 'var(--v1-accent, #FAC761)',
saffronDim: 'var(--v1-accent-dim, rgba(250,199,97,0.35))',
red: '#E5484D',
};
const F = {
display: 'var(--v1-font-display, "Space Grotesk", -apple-system, sans-serif)',
body: 'var(--v1-font-body, Inter, -apple-system, sans-serif)',
mono: 'var(--v1-font-mono, "JetBrains Mono", "Courier New", monospace)',
};
// ══════════════ inject styles & IntersectionObserver scroll-reveal ══════════════
if (typeof document !== 'undefined' && !document.getElementById('v1-styles')) {
const s = document.createElement('style');
s.id = 'v1-styles';
s.textContent = `
@keyframes v1-rise { from { opacity: 0; transform: translateY(24px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes v1-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes v1-pulse { 0%,100% { opacity: .35 } 50% { opacity: 1 } }
@keyframes v1-sweep { 0% { transform: translateX(-100%) } 100% { transform: translateX(400%) } }
@keyframes v1-marquee { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@keyframes v1-grid-drift { from { background-position: 0 0 } to { background-position: 80px 80px } }
@keyframes v1-caret { 0%,49% { opacity: 1 } 50%,100% { opacity: 0 } }
@keyframes v1-orb { 0%,100% { transform: translate(0,0) scale(1) } 50% { transform: translate(40px,-30px) scale(1.08) } }
@keyframes v1-dash { to { stroke-dashoffset: -40 } }
.v1-reveal { opacity: 0; transform: translateY(28px); filter: blur(6px); transition: opacity 1s cubic-bezier(.22,.75,.3,1), transform 1s cubic-bezier(.22,.75,.3,1), filter 1s; }
.v1-reveal.on { opacity: 1; transform: none; filter: none; }
.v1-reveal[data-d="1"] { transition-delay: 80ms }
.v1-reveal[data-d="2"] { transition-delay: 160ms }
.v1-reveal[data-d="3"] { transition-delay: 240ms }
.v1-reveal[data-d="4"] { transition-delay: 320ms }
.v1-reveal[data-d="5"] { transition-delay: 400ms }
.v1-reveal[data-d="6"] { transition-delay: 480ms }
.v1-cta-pri {
position: relative; overflow: hidden;
background: #F5F5F5; color: #050506;
border: 1px solid rgba(255,255,255,0.2);
box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 0 0 1px rgba(255,255,255,0.02), 0 20px 40px -16px rgba(0,0,0,0.8);
transition: transform .3s cubic-bezier(.22,.75,.3,1), box-shadow .3s, background .3s;
font-family: ${F.body}; font-weight: 600;
}
.v1-cta-pri::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(90deg, transparent 30%, rgba(255,255,255,0.9) 50%, transparent 70%);
transform: translateX(-100%);
transition: transform .8s cubic-bezier(.22,.75,.3,1);
pointer-events: none;
}
.v1-cta-pri:hover { transform: translateY(-1px); background: #FFF; box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 28px 50px -16px rgba(0,0,0,0.9); }
.v1-cta-pri:hover::after { transform: translateX(100%); }
.v1-cta-ghost {
background: transparent; color: ${T.ink};
border: 1px solid ${T.lineHi};
transition: border-color .3s, background .3s, transform .3s;
font-family: ${F.body}; font-weight: 500;
}
.v1-cta-ghost:hover { border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.03); transform: translateY(-1px); }
.v1-card {
position: relative;
background: ${T.panel};
border: 1px solid ${T.line};
border-radius: 16px;
transition: border-color .4s, background .4s, transform .4s;
overflow: hidden;
}
.v1-card::before {
content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,0.08) 50%, transparent 70%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
opacity: 0; transition: opacity .4s;
pointer-events: none;
}
.v1-card:hover { border-color: rgba(255,255,255,0.14); transform: translateY(-2px); }
.v1-card:hover::before { opacity: 1 }
.v1-pill {
display: inline-flex; align-items: center; gap: 10px;
padding: 6px 14px 6px 12px;
border: 1px solid ${T.lineHi};
background: rgba(255,255,255,0.02);
border-radius: 999px;
font-family: ${F.mono}; font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
color: ${T.ink2}; font-weight: 500;
}
/* Founder portrait hover reveal */
.v1-portrait__stamp-declass { display: none; }
.v1-portrait:hover .v1-portrait__redact { opacity: 0; }
.v1-portrait:hover .v1-portrait__hint { opacity: 0; }
.v1-portrait:hover .v1-portrait__stamp { color: ${T.white}; border-color: rgba(255,255,255,0.35); }
.v1-portrait:hover .v1-portrait__stamp-redact { display: none; }
.v1-portrait:hover .v1-portrait__stamp-declass { display: inline; }
.v1-pill::before {
content: ""; width: 5px; height: 5px; border-radius: 50%;
background: ${T.saffron}; box-shadow: 0 0 8px ${T.saffron};
animation: v1-pulse 2.2s ease-in-out infinite;
}
.v1-h-sweep {
background: linear-gradient(90deg, ${T.ink} 0%, ${T.ink} 40%, ${T.white} 50%, ${T.ink} 60%, ${T.ink} 100%);
background-size: 200% 100%;
-webkit-background-clip: text; background-clip: text; color: transparent;
animation: v1-fade 1.2s ease-out both;
}
.v1-link { color: ${T.ink}; text-decoration: none; position: relative; display: inline-flex; align-items: center; gap: 6px; }
.v1-link .arrow { transition: transform .3s cubic-bezier(.22,.75,.3,1); display: inline-block; }
.v1-link:hover .arrow { transform: translateX(4px); }
.v1-link::after {
content: ""; position: absolute; left: 0; right: 16px; bottom: -2px; height: 1px;
background: ${T.ink}; transform: scaleX(0); transform-origin: left;
transition: transform .35s cubic-bezier(.22,.75,.3,1);
}
.v1-link:hover::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
.v1-reveal { opacity: 1 !important; transform: none !important; filter: none !important }
.v1-pill::before, .v1-h-sweep { animation: none !important }
}
`;
document.head.appendChild(s);
}
// scroll reveal hook
function useReveal() {
React.useEffect(() => {
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
document.querySelectorAll('.v1-reveal').forEach(el => el.classList.add('on'));
return;
}
const io = new IntersectionObserver((entries) => {
entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('on'); io.unobserve(e.target); } });
}, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
// Belt-and-suspenders: anything already in view on mount reveals immediately.
// IO sometimes defers callbacks past the first frame and users see a blank hero.
const vh = window.innerHeight;
document.querySelectorAll('.v1-reveal').forEach(el => {
const r = el.getBoundingClientRect();
if (r.top < vh && r.bottom > 0) el.classList.add('on');
else io.observe(el);
});
return () => io.disconnect();
}, []);
}
// ══════════════ BACKGROUND — slow orbs + drifting grid ══════════════
const AmbientBg = () => (
{/* slow-drifting grid */}
{/* two faint white-gray orbs, slow drift */}
);
};
// ══════════════ HERO ══════════════
const V1Hero = () => {
// parallax scroll for dashboard
const ref = React.useRef(null);
const [y, setY] = React.useState(0);
React.useEffect(() => {
const h = () => setY(Math.min(window.scrollY * 0.15, 60));
window.addEventListener('scroll', h, { passive: true });
return () => window.removeEventListener('scroll', h);
}, []);
return (
{C.hero.h1_prefix}{' '}
{C.hero.h1_italic}
{C.hero.h1_suffix}
{C.hero.subhead}
{C.hero.scripture.text}
{C.hero.scripture.cite}
{/* dashboard with parallax */}
);
};
const DashboardMock = () => (
{['#ff5f57', '#febc2e', '#28c840'].map(c => (
))}
{/* sweep shimmer over dashboard */}
);
// Live feed ticker (marquee, clickable pause)
const Ticker = () => {
const items = [
{ c: 'PAKISTAN', r: 'Jaranwala, Punjab', k: 'MOB VIOLENCE · CRIT' },
{ c: 'USA', r: 'Nashville, TN', k: 'ACTIVE SHOOTER · CRIT' },
{ c: 'NICARAGUA', r: 'Managua', k: 'NGO EXPULSION · HI' },
{ c: 'INDIA', r: 'Manipur', k: 'TARGETED ATTACK · HI' },
{ c: 'LIBYA', r: 'Tripoli', k: 'KIDNAPPING · MED' },
{ c: 'NIGERIA', r: 'Plateau State', k: 'RAID · CRIT' },
];
const all = [...items, ...items];
return (
LIVE FEED
{all.map((it, i) => (
◆
{it.c}
{it.r}
·
{it.k}
))}
);
};
// Count-up KPI numbers
const CountUp = ({ value, duration = 1600 }) => {
const [n, setN] = React.useState(0);
const ref = React.useRef(null);
const num = parseFloat(String(value).replace(/[^\d.]/g, '')) || 0;
const suffix = String(value).replace(/[\d.,]/g, '');
React.useEffect(() => {
const el = ref.current;
if (!el) return;
const io = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) {
io.disconnect();
const start = performance.now();
const tick = (t) => {
const p = Math.min((t - start) / duration, 1);
const eased = 1 - Math.pow(1 - p, 3);
setN(num * eased);
if (p < 1) requestAnimationFrame(tick);
};
requestAnimationFrame(tick);
}
}, { threshold: 0.3 });
io.observe(el);
return () => io.disconnect();
}, [num, duration]);
const display = Number.isInteger(num) ? Math.round(n).toLocaleString() : n.toFixed(1);
return {display}{suffix} ;
};
const KPIStrip = () => (
{C.hero.kpis.map(([n, l], i) => (
0 ? `1px solid ${T.line}` : 'none',
}}>
{/^\d+\D*$/.test(n) ?
{l}
))}
{cleanPill}
{title}
{titleAccent && {titleAccent} }
{lede && (
{lede}
)}
);
};
// ══════════════ SIGNAL ══════════════
const V1Signal = () => (
{C.signal.cards.map((card, i) => (
{String(i + 1).padStart(2, '0')}
{card.sev}
{card.country}
·
{card.cat}
·
{card.ts}
{card.headline}
{card.sources} SOURCES · {card.region.toUpperCase()}
View incident →
))}
);
// ══════════════ PLATFORM — bento ══════════════
const V1Platform = () => {
const t = C.platform.tiles;
return (
);
};
const Kicker = ({ children }) => (
— {children}
);
const TileTitle = ({ children }) => (
{children}
);
const TileBody = ({ children }) => (
{children}
);
const MiniMap = () => (
))}
{/* connecting dashed path */}
);
// Typewriter Ezekiel
const MiniEzekiel = () => {
const full = "What happened to house churches in Henan?";
const [t, setT] = React.useState('');
const ref = React.useRef(null);
React.useEffect(() => {
const el = ref.current;
if (!el) return;
const io = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) {
io.disconnect();
let i = 0;
const tick = () => {
if (i <= full.length) { setT(full.slice(0, i)); i++; setTimeout(tick, 40); }
};
tick();
}
}, { threshold: 0.5 });
io.observe(el);
return () => io.disconnect();
}, []);
return (
> {t}
▊
3 SOURCES · CONFIDENCE 94%
);
};
// Risk bars animate in
const MiniRisk = () => {
const items = [['PAKISTAN', 82], ['NIGERIA', 74], ['INDIA', 61]];
const ref = React.useRef(null);
const [on, setOn] = React.useState(false);
React.useEffect(() => {
const el = ref.current;
if (!el) return;
const io = new IntersectionObserver(e => { if (e[0].isIntersecting) { setOn(true); io.disconnect(); } }, { threshold: 0.5 });
io.observe(el);
return () => io.disconnect();
}, []);
return (
{items.map(([c, v], i) => (
))}
{C.pricing.tiers.map((tier, i) =>
);
const TierCard = ({ tier, i }) => {
const rec = tier.recommended;
return (
{rec && (
RECOMMENDED
)}
{tier.name}
{tier.price}
{tier.unit && (
{tier.unit}
)}
{tier.features.map((f, j) => (
—
{f}
))}
{tier.ctaStyle === 'primary' ? (
{tier.cta}
) : (
{tier.cta}
)}
);
};
// ══════════════ ROOT ══════════════
function V1App() {
useReveal();
// Sections defined in sections-v1.jsx — pulled from window at render time
// because Babel scripts don't share lexical scope.
const { V1Gap, V1Origin, V1Missions, V1Ezekiel, V1Pipeline, V1Trust, V1Weekly, V1Founder, V1FinalCta, V1Footer } = window;
return (
);
}
// Expose shared helpers + components for sections-v1.jsx (separate Babel scope)
Object.assign(window, { T, F, SecHead, useReveal, LINKS });
// Defer mount until sections-v1.jsx has had a chance to load + register.
// If sections-v1.jsx runs first (unlikely) it's a no-op; if app.jsx runs first
// we wait for it, then force a re-render by mounting after a tick.
(function mountWhenReady() {
const needed = ['V1Gap','V1Origin','V1Missions','V1Ezekiel','V1Pipeline','V1Trust','V1Weekly','V1Founder','V1FinalCta','V1Footer'];
if (needed.every(k => window[k])) {
ReactDOM.createRoot(document.getElementById('root')).render( 
{/* sweep shimmer over dashboard */}