0.95 ? 'nsp-corner-pulse 4s ease-in-out infinite' : 'none',
}} />
);
})}
);
}
function StatusReadout({ progress, phaseIdx, bootP }) {
const isMobile = useIsMobile();
const bootLine = '[BOOT] CLAUDE.CORE v4.7 ▸ ONLINE';
const persistentLine = isMobile ? 'CLAUDE.CORE v4.7 │ ONLINE' : 'CLAUDE.CORE v4.7 │ UPLINK STABLE │ LATENCY 12ms';
const phaseTags = ['INITIALIZING', 'SCANNING ENVIRONMENT', 'NEURAL UPLINK', 'EXECUTING', 'SYNTHESIS', 'READY'];
// Typewriter for boot line
const bootChars = Math.floor(clamp(bootP * 1.4, 0, 1) * bootLine.length);
const bootText = bootLine.slice(0, bootChars);
const showPersistent = progress > 0.06;
return (
{showPersistent ? persistentLine : bootText}
{!showPersistent && bootChars < bootLine.length && (
)}
▸ {phaseTags[phaseIdx]}
);
}
function PhaseLabel({ phaseIdx, bootP }) {
const isMobile = useIsMobile();
return (
NEURAL SYNC
PROTOCOL · {String(phaseIdx).padStart(2,'0')}/05
);
}
function ScanSweep({ progress }) {
const sweepP = smoothstep(0.06, 0.22, progress);
const opacity = Math.sin(sweepP * Math.PI); // peaks mid-window
return (
);
}
function Crosshair({ progress }) {
const isMobile = useIsMobile();
const SIZE = isMobile ? 130 : 200;
const INNER = isMobile ? 56 : 80;
const v = Math.min(smoothstep(0.06, 0.14, progress), 1 - smoothstep(0.20, 0.26, progress));
return (
{/* rotating ring */}
{/* solid inner circle */}
{/* center dot */}
{/* crosshair lines */}
{[0, 90, 180, 270].map(deg => (
))}
);
}
function ARLabels({ progress }) {
const isMobile = useIsMobile();
const allLabels = [
{ text: 'OPERATOR ▸ HUMAN', pos:{top:'24%', right:'12%'}, anchor:{top:'40%', right:'30%'}, in0:0.10, in1:0.14, out0:0.22, out1:0.26 },
{ text: 'INPUT ▸ INTENT', pos:{top:'68%', left:'10%'}, anchor:{top:'55%', left:'34%'}, in0:0.13, in1:0.17, out0:0.22, out1:0.26 },
{ text: 'ROLE ▸ ARCHITECT', pos:{top:'18%', left:'14%'}, anchor:{top:'34%', left:'36%'}, in0:0.16, in1:0.20, out0:0.22, out1:0.26 },
];
// On mobile, drop the third label (overlaps with the headline area on narrow screens)
const labels = isMobile ? allLabels.slice(0, 2) : allLabels;
return (
<>
{labels.map((l, i) => {
const v = Math.min(smoothstep(l.in0, l.in1, progress), 1 - smoothstep(l.out0, l.out1, progress));
return (
);
})}
);
}
/* Per-character split. inline-block so each char can transform independently. */
function CharSplit({ text, perChar }) {
const chars = Array.from(text);
return (
<>{chars.map((ch, i) => (
{ch === ' ' ? ' ' : ch}
))}
);
}
function ParticleStatement({ visible, progress, window, particles, headline, subtitle }) {
const isMobile = useIsMobile();
const enterP = smoothstep(window.in0, window.in1, progress);
const exitP = 1 - smoothstep(window.out0, window.out1, progress);
const headlineP = smoothstep(window.in0 + 0.02, window.in1 + 0.02, progress);
const subP = smoothstep(window.in1, window.in1 + 0.06, progress);
// Particles converge during enter, scatter during exit
const convergeP = enterP * exitP;
return (
{/* PARTICLES - relative to headline center */}
{particles.map((pt, i) => {
const localProgress = clamp(((convergeP * 1000) - pt.delay) / 600, 0, 1);
const x = lerp(pt.ox, 0, localProgress);
const y = lerp(pt.oy, 0, localProgress);
const op = Math.sin(localProgress * Math.PI) * 0.9;
return (
);
})}
{/* HEADLINE - per-char fade, chromatic during reveal */}
{
const start = window.in0 + 0.04 + (i / n) * 0.04;
const charP = smoothstep(start, start + 0.04, progress);
const settled = smoothstep(start + 0.04, start + 0.08, progress);
const chromaAmt = (1 - settled) * 3;
return {
opacity: charP,
textShadow: chromaAmt > 0.1
? `${chromaAmt}px 0 #ff3b6b, -${chromaAmt}px 0 #2dd4f7, 0 4px 40px rgba(0,0,0,0.7)`
: '0 4px 40px rgba(0,0,0,0.7)',
transition:'text-shadow 120ms linear',
};
}} />
{/* SUBTITLE - monospace typewriter */}
{subtitle.slice(0, Math.floor(subP * subtitle.length))}
{subP > 0.05 && subP < 0.98 && (
)}
);
}
function GlitchStatement({ visible, progress, window, headline, subtitle }) {
const isMobile = useIsMobile();
const enterP = smoothstep(window.in0, window.in1, progress);
const exitP = 1 - smoothstep(window.out0, window.out1, progress);
// Exit: collapse toward pinpoint
const collapseScale = lerp(1, 0.04, 1 - exitP);
const collapseOp = exitP;
// Glitch active during enter only
const glitchOn = progress > window.in0 - 0.02 && progress < window.in1 + 0.05;
const subP = smoothstep(window.in1, window.in1 + 0.06, progress) * exitP;
return (
{
const start = window.in0 + (i / n) * 0.03;
const charP = smoothstep(start, start + 0.03, progress);
return {
opacity: charP * collapseOp,
animation: glitchOn ? `nsp-glitch 320ms cubic-bezier(0.22,1,0.36,1) ${i * 30}ms 1 both` : 'none',
textShadow:'0 4px 40px rgba(0,0,0,0.7)',
};
}} />
{subtitle.slice(0, Math.floor(subP * subtitle.length))}
);
}
function PulseStatement({ visible, progress, window, headline, subtitle }) {
const isMobile = useIsMobile();
const enterP = smoothstep(window.in0, window.in1, progress);
const exitP = 1 - smoothstep(window.out0, window.out1, progress);
// Expand from pinpoint
const scale = lerp(0.04, 1, enterP);
const subP = smoothstep(window.in1, window.in1 + 0.06, progress) * exitP;
// Split headline at last space - pre = everything up to last word, accent = last word (gradient + pulse)
const lastSpace = headline.lastIndexOf(' ');
const before = lastSpace >= 0 ? headline.slice(0, lastSpace + 1) : '';
const accent = lastSpace >= 0 ? headline.slice(lastSpace + 1) : headline;
return (
{before}
0.6 ? 'nsp-pulse 1.6s ease-in-out infinite' : 'none',
}}>{accent}
{subtitle.slice(0, Math.floor(subP * subtitle.length))}
);
}
function Climax({ climaxP }) {
const isMobile = useIsMobile();
// Arc reactor sizes scale down on mobile
const ARC = isMobile ? 220 : 340;
const CENTER = ARC / 2;
const r1 = isMobile ? 48 : 70;
const r2 = isMobile ? 72 : 110;
const r3 = isMobile ? 100 : 150;
const coreR = isMobile ? 40 : 60;
const c1 = 2 * Math.PI * r1;
const c2 = 2 * Math.PI * r2;
// CTA orbit dims
const ctaW = isMobile ? 220 : 280;
const ctaH = isMobile ? 64 : 80;
return (
0.5 ? 'auto' : 'none', zIndex:8,
opacity: climaxP,
}}>
{/* ARC REACTOR */}
{/* rotating spark */}
{/* headline at center */}
תתחיל עכשיו
{/* DEPLOY CTA */}
{/* orbiting arc */}
);
}
function ProgressNodes({ phaseIdx }) {
const isMobile = useIsMobile();
if (isMobile) return null; // too cramped on phone, drop entirely
const labels = ['BOOT', 'SCAN', 'STMT-1', 'STMT-2', 'STMT-3', 'CORE'];
return (
{labels.map((l, i) => {
const active = i === phaseIdx;
const passed = i < phaseIdx;
return (
{l}
);
})}
);
}
function BottomTicker({ phaseIdx, bootP }) {
const isMobile = useIsMobile();
const messages = [
'▸ DECOMPILING_INTENT [OK]',
'▸ ROUTING_THOUGHT [OK]',
'▸ SYNTHESIS [12ms]',
'▸ TOKENS_IN 4128',
'▸ TOKENS_OUT 8214',
'▸ MCP.CHANNELS 6/6 ACTIVE',
'▸ COMPILE [OK]',
'▸ DEPLOY_HOOK READY',
];
const climaxMessages = [
'▸ NEURAL SYNC ▸ COMPLETE',
'▸ ENTER ANYTIME',
'▸ COURSE.LOCK [UNLOCKED]',
'▸ COHORT FEB-2026 ▸ 7 SEATS LEFT',
];
const stream = phaseIdx >= 5 ? climaxMessages : messages;
const line = stream.join(' ');
const doubled = line + ' ' + line + ' ' + line + ' ';
return (
= 5 ? '#FFD777' : 'rgba(238,179,50,0.85)',
textShadow:'0 0 8px rgba(238,179,50,0.4)',
animation:'nsp-ticker 28s linear infinite',
}}>{doubled}
);
}
window.LoopSequence = LoopSequence;