// Paywall — short, punchy, heavily animated one-screen Apollo pitch. // Exponential scroll feel via aggressive easing; 3 tight scenes instead of 6 long ones. function Paywall({ open, onClose, onSubscribe }) { const S = window.SOL; const scrollRef = React.useRef(null); const target = React.useRef(0); const current = React.useRef(0); const velocity = React.useRef(0); const raf = React.useRef(null); const progressBarRef = React.useRef(null); const [y, setY] = React.useState(0); const [closing, setClosing] = React.useState(false); const [purchasing, setPurchasing] = React.useState(false); // Reset transient state when reopened React.useEffect(() => { if (open) { setClosing(false); setPurchasing(false); } }, [open]); const animatedClose = () => { if (closing) return; setClosing(true); setTimeout(() => { onClose(); }, 420); }; const handleBuy = async () => { if (purchasing || closing) return; setPurchasing(true); try { const token = localStorage.getItem('solunce_token'); const r = await fetch('https://api.solunce.com/api/payments/checkout', { method: 'POST', headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` }, body: JSON.stringify({ plan: 'plus' }), }); const d = await r.json(); if (d.url) { window.location.href = d.url; return; } } catch {} setPurchasing(false); }; React.useEffect(() => { if (!open) return; const el = scrollRef.current; if (!el) return; target.current = 0; current.current = 0; velocity.current = 0; el.scrollTop = 0; setY(0); // Exponential velocity scroll: // wheel -> add impulse to velocity // each frame: velocity *= BOOST (>1, exponential growth while active) // then *= DAMPING (<1, smooth decay) // clamp to MAX_V so it can't run away const BOOST = 1.04; // per-frame growth factor while moving const DAMPING = 0.88; // per-frame decay const IMPULSE = 0.55; // fraction of wheel delta applied to velocity const MAX_V = 140; // px/frame cap const STOP_EPS = 0.15; // velocity threshold to stop the loop const onWheel = (e) => { e.preventDefault(); const impulse = e.deltaY * IMPULSE; // keep sign aligned with user intent; if reversing direction, reset exponent if (Math.sign(impulse) !== Math.sign(velocity.current)) { velocity.current = impulse; } else { velocity.current += impulse; } if (!raf.current) raf.current = requestAnimationFrame(tick); }; const touch = { last: 0 }; const onTS = (e) => { touch.last = e.touches[0].clientY; }; const onTM = (e) => { const yT = e.touches[0].clientY; const dy = (touch.last - yT) * 1.4; touch.last = yT; if (Math.sign(dy) !== Math.sign(velocity.current)) velocity.current = dy; else velocity.current += dy * 0.6; if (!raf.current) raf.current = requestAnimationFrame(tick); }; const tick = () => { const max = el.scrollHeight - el.clientHeight; // exponential growth while the user is still feeding it, // then damping pulls it back down velocity.current *= BOOST; velocity.current *= DAMPING; if (velocity.current > MAX_V) velocity.current = MAX_V; if (velocity.current < -MAX_V) velocity.current = -MAX_V; current.current += velocity.current; // clamp at edges and kill velocity against the wall if (current.current < 0) { current.current = 0; velocity.current = 0; } if (current.current > max) { current.current = max; velocity.current = 0; } el.scrollTop = current.current; // direct-write the progress bar to avoid React reconciliation jitter if (progressBarRef.current) { const p = max > 0 ? current.current / max : 0; progressBarRef.current.style.transform = `scaleX(${p})`; } setY(current.current); if (Math.abs(velocity.current) < STOP_EPS) { velocity.current = 0; raf.current = null; return; } raf.current = requestAnimationFrame(tick); }; el.addEventListener('wheel', onWheel, { passive: false }); el.addEventListener('touchstart', onTS, { passive: true }); el.addEventListener('touchmove', onTM, { passive: false }); return () => { el.removeEventListener('wheel', onWheel); el.removeEventListener('touchstart', onTS); el.removeEventListener('touchmove', onTM); if (raf.current) cancelAnimationFrame(raf.current); raf.current = null; }; }, [open]); if (!open) return null; const vh = typeof window !== 'undefined' ? window.innerHeight : 900; const totalH = vh * 16; // longer overall so each scene's animation has more scroll to play out const clamp = (t) => Math.max(0, Math.min(1, t)); const lerp = (a, b, t) => a + (b - a) * t; const range = (s, e) => clamp((y - s) / (e - s)); const progress = clamp(y / Math.max(1, totalH - vh)); // scene ranges — scene 2 gets extra room since there's a lot to read const s1 = range(0, vh * 4); const s2 = range(vh * 4.7, vh * 10.7); const s3 = range(vh * 11.5, vh * 15.5); return (
{/* Ambient background — single animated sun + horizon, no orbit rings, no plum */}
{/* horizon line that rises toward the top as you scroll */}
{/* atmospheric haze on horizon */}
{/* drifting nebula — two soft color washes that parallax on scroll */}
{/* constellation — slow twinkling star field, spread evenly across viewport */} {[ {x:8, y:22, s:1.5, d:0},{x:18, y:64, s:2, d:1.2},{x:26, y:38, s:1, d:2.1}, {x:33, y:82, s:1.5, d:0.6},{x:42, y:18, s:2.5, d:1.8},{x:48, y:72, s:1, d:2.4}, {x:55, y:44, s:1.5, d:0.3},{x:62, y:12, s:1, d:1.5},{x:68, y:58, s:2, d:2.7}, {x:74, y:30, s:1.5, d:0.9},{x:82, y:76, s:1, d:2.0},{x:88, y:46, s:2, d:1.1}, {x:14, y:48, s:1, d:3.0},{x:38, y:58, s:1, d:2.6},{x:58, y:88, s:1.5, d:1.4}, {x:78, y:14, s:1.5, d:0.4},{x:92, y:66, s:1, d:2.2},{x:4, y:84, s:1, d:1.7}, ].map((p, i) => (
))} {/* shooting star — one per ~12s, traverses upper third */}
{/* subtle warm vignette bottom */}
{/* Progress bar */}
{/* Scroll container */}
{/* ============ SCENE 1 — HERO / THE SUN ============ */}
— Solunce Plus —

Meet Apollo.

The unbounded sibling. Longer memory, sharper thinking.

{/* ============ SCENE 2 — THE THREE PROMISES (fan out) ============ */}
0.05 && s2 < 0.95 ? 'auto' : 'none', }}>
— What's inside —

Three things that change everything.

{[ { k: '1M', unit: 'tokens', label: 'Memory', desc: 'The whole book. The whole repo.', delay: 0 }, { k: '∞', unit: 'depth', label: 'Reasoning', desc: 'Thinks it through, shows its work.', delay: 0.08 }, { k: 'HD', unit: 'video', label: 'Vision', desc: 'Upload a clip. Ask about frame 00:42.', delay: 0.16 }, ].map((it, i) => { const t = clamp((s2 - it.delay) * 2.5); return (
{it.k}
{it.unit}
{it.label}
{it.desc}
); })}
{/* ============ SCENE 3 — CTA ============ */}
0.1 ? 'auto' : 'none', }}>

Ten dollars
a month.

Cancel any time. Apollo stays yours while you're in.

Monthly · Cancel anytime
$10 /mo

Secured by Stripe

); } window.Paywall = Paywall;