<!DOCTYPE html>

<head>

<title>VISCERAL CURRENT | Sovereign OS v5.3-Codex</title>

<style>

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,700;0,900;1,900&family=JetBrains+Mono:wght@400;700;800&display=swap');

:root {

--brand-purple: #8b5cf6;

--brand-blue: #3b82f6;

--brand-red: #ef4444;

}

body {

margin: 0;

overflow: hidden;

background-color: #000;

font-family: 'Inter', sans-serif;

color: white;

cursor: crosshair;

}

.font-mono { font-family: 'JetBrains Mono', monospace; }

/* Cinematic Manifold Layers */

#background-engine {

position: fixed;

top: 0; left: 0; width: 100vw; height: 100vh;

z-index: -1;

}

.bg-layer {

position: absolute;

inset: 0;

background-size: cover;

background-position: center;

opacity: 0;

transition: opacity 3s cubic-bezier(0.16, 1, 0.3, 1);

filter: brightness(0.35) contrast(1.25);

}

.bg-active { opacity: 1; }

/* HUD Styling */

.glass {

background: rgba(4, 4, 10, 0.9);

backdrop-filter: blur(60px);

border: 1px solid rgba(255, 255, 255, 0.06);

box-shadow: 0 40px 120px 0 rgba(0, 0, 0, 1);

}

.mission-gradient {

background: linear-gradient(to right, #fff 30%, var(--brand-purple) 100%);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

}

/* Forensic Scanlines */

body::after {

content: " ";

display: block;

position: absolute;

top: 0; left: 0; bottom: 0; right: 0;

background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.02), rgba(0, 255, 0, 0.015), rgba(0, 0, 255, 0.02));

z-index: 100;

background-size: 100% 2px, 3px 100%;

pointer-events: none;

}

.custom-scroll::-webkit-scrollbar { width: 2px; }

.custom-scroll::-webkit-scrollbar-thumb { background: var(--brand-purple); border-radius: 10px; }

.ai-shimmer {

background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.3), transparent);

background-size: 200% 100%;

animation: shimmer 2s infinite linear;

}

@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

#canvas-mount {

position: fixed;

inset: 0;

z-index: 10;

}

.node-active-glitch {

animation: glitch 0.3s infinite;

}

@keyframes glitch {

0% { transform: translate(0); }

50% { transform: translate(-2px, 1px); opacity: 0.8; }

100% { transform: translate(0); }

}

</style>

</head>

<body>

const { useState, useEffect, useRef, useMemo } = React;

const App = () => {

const mountRef = useRef(null);

const [isBooted, setIsBooted] = useState(false);

const [stage, setStage] = useState('threshold'); // threshold, os, prospectus

const [activeNode, setActiveNode] = useState(null);

const [sharedDataCount, setSharedDataCount] = useState(0);

const [depth, setDepth] = useState(0);

const [isAiThinking, setIsAiThinking] = useState(false);

const [aiResponse, setAiResponse] = useState("");

const [aiChallenge, setAiChallenge] = useState("");

const [userInput, setUserInput] = useState("");

const [variance, setVariance] = useState("1.00000");

const [archetype, setArchetype] = useState("Establishing Profile...");

const [audioStarted, setAudioStarted] = useState(false);

const nodes = useMemo(() => [

"Stoic Baseline", "Breath Control", "Capital Flow", "Ego Death", "Strategic Reach",

"Victorville Foundation", "Montana Grit", "Bio-Algorithm", "Sovereign Haven", "Domain Logic",

"Neural Elasticity", "High Stakes", "Grace Under Pressure", "Asset Architecture", "Forensic Mindset",

"Yield Matrix", "Assumption Tracking", "Current Navigation", "Anchor Discipline", "Spiritual Forge",

"Capacity Optimization", "The 33 Vector", "The 9 Completion", "The 3 Foundation", "Digital Dominion",

"Biological Sovereignty", "Market Fluidity", "Cognitive Friction", "Infinite Branching", "Unity in Action",

"The 44th Node", "Pure Potency", "Creative Chaos", "Ordered Flow", "Shadow Integration",

"Practical Mysticism", "Economic Stealth", "Personal Cartography", "Identity Filter", "Grit Synthesis",

"Atmosphere Authority", "Real-Time Alignment", "Presence Protocol", "Final Sovereignty"

], []);

// 1. ENGINE STARTUP

useEffect(() => {

init3D();

setTimeout(() => setIsBooted(true), 2500);

}, []);

// 2. 5D INTERACTIVE ENGINE (THREE.JS)

const sceneRef = useRef(null);

const nodeGroupRef = useRef(null);

const cameraRef = useRef(null);

const init3D = () => {

const scene = new THREE.Scene();

scene.fog = new THREE.FogExp2(0x000000, 0.001);

sceneRef.current = scene;

const camera = new THREE.PerspectiveCamera(65, window.innerWidth / window.innerHeight, 1, 5000);

camera.position.z = 1500;

cameraRef.current = camera;

const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });

renderer.setSize(window.innerWidth, window.innerHeight);

renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

mountRef.current.appendChild(renderer.domElement);

const nodeGroup = new THREE.Group();

scene.add(nodeGroup);

nodeGroupRef.current = nodeGroup;

nodes.forEach((name, i) => {

const geo = new THREE.SphereGeometry(8, 24, 24);

const mat = new THREE.MeshBasicMaterial({ color: 0x8b5cf6, transparent: true, opacity: 0.15 });

const mesh = new THREE.Mesh(geo, mat);

const angle = i * 0.55;

const dist = 280 + (i * 6);

mesh.position.set(Math.cos(angle) * dist, (Math.random() - 0.5) * 500, Math.sin(angle) * dist);

mesh.userData = { id: i, name: name };

nodeGroup.add(mesh);

});

const starGeo = new THREE.BufferGeometry();

const starPos = new Float32Array(7000 * 3);

for (let i = 0; i < 7000 * 3; i++) starPos[i] = (Math.random() - 0.5) * 6000;

starGeo.setAttribute('position', new THREE.BufferAttribute(starPos, 3));

const starField = new THREE.Points(starGeo, new THREE.PointsMaterial({ color: 0x3b82f6, size: 2, transparent: true, opacity: 0.4 }));

scene.add(starField);

const raycaster = new THREE.Raycaster();

const mouse = new THREE.Vector2();

window.addEventListener('mousemove', (e) => {

mouse.x = (e.clientX / window.innerWidth) * 2 - 1;

mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;

gsap.to(camera.position, { x: mouse.x * 80, y: mouse.y * 80 + 50, duration: 3 });

});

window.addEventListener('mousedown', () => {

raycaster.setFromCamera(mouse, camera);

const intersects = raycaster.intersectObjects(nodeGroup.children);

if (intersects.length > 0) triggerInquiry(intersects[0].object.userData.id);

});

const animate = () => {

requestAnimationFrame(animate);

nodeGroup.rotation.y += 0.0004 * (1 + sharedDataCount / 10);

starField.rotation.y += 0.00003;

renderer.render(scene, camera);

};

animate();

window.addEventListener('resize', () => {

camera.aspect = window.innerWidth / window.innerHeight;

camera.updateProjectionMatrix();

renderer.setSize(window.innerWidth, window.innerHeight);

});

};

// 3. AI PROTOCOL LAYER

const callGemini = async (prompt, sys = "") => {

const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=`;

try {

const response = await fetch(apiUrl, {

method: 'POST',

headers: { 'Content-Type': 'application/json' },

body: JSON.stringify({

contents: [{ parts: [{ text: prompt }] }],

systemInstruction: { parts: [{ text: sys }] }

})

});

const data = await response.json();

return data.candidates?.[0]?.content?.parts?.[0]?.text || "Protocol failure.";

} catch (e) { return "Architect Offline."; }

};

const callGeminiTTS = async (text) => {

const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-tts:generateContent?key=`;

try {

const response = await fetch(apiUrl, {

method: 'POST',

headers: { 'Content-Type': 'application/json' },

body: JSON.stringify({

contents: [{ parts: [{ text: text }] }],

generationConfig: {

responseModalities: ["AUDIO"],

speechConfig: { voiceConfig: { prebuiltVoiceConfig: { voiceName: "Charon" } } }

}

})

});

const result = await response.json();

const audioData = result?.candidates?.[0]?.content?.parts?.[0]?.inlineData?.data;

if (audioData) new Audio(`data:audio/wav;base64,${audioData}`).play();

} catch (e) {}

};

// 4. FUNCTIONAL LOGIC

const triggerInquiry = async (id = null) => {

const idx = id !== null ? id : (sharedDataCount % 44);

setActiveNode(nodes[idx]);

setAiResponse("");

setAiChallenge("Generating forensic probe...");

setIsAiThinking(true);

const prompt = `Node: "${nodes[idx]}". Progress: ${sharedDataCount}/44. Pose one intense forensic question.`;

const response = await callGemini(prompt, "Sovereign Architect. Forensic tone.");

setAiChallenge(response);

setIsAiThinking(false);

callGeminiTTS(response);

};

const submitVector = async () => {

setIsAiThinking(true);

const response = await callGemini(`Node "${activeNode}": realization "${userInput}". Critique it for practical grit and provide a 5-digit Variance score.`, "Sovereign Auditor.");

setAiResponse(response);

const vMatch = response.match(/0\.\d+/);

if (vMatch) setVariance(vMatch[0]);

setSharedDataCount(prev => prev + 1);

setDepth(Math.floor(((sharedDataCount + 1) / 44) * 100));

setIsAiThinking(false);

if (nodeGroupRef.current) {

const mesh = nodeGroupRef.current.children[nodes.indexOf(activeNode)];

if (mesh) { mesh.material.color.setHex(0xffffff); mesh.material.opacity = 1; mesh.scale.set(4, 4, 4); }

}

};

const enterOS = () => {

gsap.to(cameraRef.current.position, { z: 800, duration: 4, ease: "power4.inOut" });

setStage('os');

if (!audioStarted) {

Tone.start();

setAudioStarted(true);

}

};

return (

{/* BACKGROUND ENGINES */}

</div>

{/* BOOT LOADER */}

{!isBooted && (

<p className="font-mono text-[10px] uppercase tracking-[0.8em] text-white/40">Syncing Codex Environment...</p>

</div>

)}

{/* STAGE: THRESHOLD */}

{stage === 'threshold' && (

<span className="text-purple-500 font-mono text-xs font-black uppercase tracking-[1em] animate-pulse block">Epistemic Alignment Required</span>

<h1 className="text-8xl md:text-[11rem] font-black italic uppercase leading-[0.8] tracking-tighter mission-gradient">VISCERAL<br/>CURRENT</h1>

</div>

<p className="text-2xl font-light italic text-white/90">"Unifying deep spiritual intelligence with the grit of practical application."</p>

<button onClick={enterOS} className="flex-1 py-8 bg-white text-black font-black uppercase tracking-widest rounded-[3rem] hover:scale-105 active:scale-95 transition-all">Establish Anchor</button>

<button onClick={enterOS} className="flex-1 py-8 bg-purple-600 text-white font-black uppercase tracking-widest rounded-[3rem] hover:scale-105 active:scale-95 transition-all shadow-[0_0_80px_rgba(139,92,246,0.3)]">Establish Current</button>

</div>

)}

{/* STAGE: OS HUD */}

{stage === 'os' && (

<h2 className="text-[11px] font-black uppercase tracking-[0.5em] text-white/30 font-mono">Sovereign Identity</h2>

<p className="text-xs font-bold text-blue-400 font-mono tracking-widest">CODEX_ID: LOCAL_SESS</p>

</div>

<span className="text-[10px] font-mono uppercase text-white/20 tracking-[0.4em]">Manifold Completion</span>

<span className="text-6xl font-black">{depth}%</span>

</div>

</div>

<p className="text-[10px] font-mono text-white/20 uppercase tracking-[0.4em] mb-2">AAT Variance</p>

<p className="text-4xl font-black text-blue-400 tracking-tighter font-mono">{variance}</p>

<p className="text-[9px] text-white/50 uppercase tracking-widest">Environment Mode</p>

<p className="text-xs font-black text-white">{sharedDataCount < 22 ? 'FORGE_GRIT' : 'DEEP_COSMOS'}</p>

</div>

{nodes.map((n, i) => (

<div key={i} className={`glass p-5 rounded-[2.5rem] border border-white/5 transition-all cursor-pointer ${i < sharedDataCount ? 'border-purple-500 bg-purple-500/10' : 'opacity-20 hover:opacity-100'}`} onClick={() => triggerInquiry(i)}>

<span className="text-[9px] font-mono text-white/40 block">VEC {String(i+1).padStart(2,'0')}</span>

</div>

))}

</div>

<h3 className="text-base font-black uppercase tracking-[0.4em] text-white">Initialize New Probe</h3>

<p className="text-xs text-white/30 italic font-mono uppercase">Sync alignment to current reality.</p>

</div>

<button onClick={() => triggerInquiry()} className="px-14 py-7 bg-white text-black font-black uppercase tracking-[0.4em] rounded-[3rem] hover:bg-purple-600 hover:text-white transition-all shadow-2xl active:scale-95">✨ Forensic Inquiry</button>

</div>

)}

{/* MODAL: PROBE */}

{activeNode && (

<button onClick={() => setActiveNode(null)} className="absolute top-16 right-16 text-white/10 hover:text-white transition-all text-[11px] font-mono uppercase tracking-[0.5em]">[ Kill signal ]</button>

<span className="text-purple-500 font-mono text-xs font-bold uppercase tracking-[0.8em] block animate-pulse">// Analysis Protocol Active</span>

<h2 className="text-6xl font-black italic uppercase leading-none tracking-tighter text-white">{activeNode}</h2>

<p className="text-white/60 text-xl italic leading-relaxed font-mono">✨ {aiChallenge}</p>

</div>

<textarea value={userInput} onChange={(e) => setUserInput(e.target.value)} placeholder="Define your practical realization..." className="w-full h-52 bg-white/5 border border-white/10 p-12 rounded-[4.5rem] font-mono text-lg focus:outline-none focus:border-purple-500 transition-all custom-scroll resize-none text-white/90 shadow-inner" spellcheck="false" />

{aiResponse && (

<span className="text-[11px] font-black text-purple-400 uppercase tracking-[0.5em]">Forensic Audit Interpretation</span>

<p className="text-base italic text-white/90 font-mono leading-relaxed">{aiResponse}</p>

</div>

)}

{isAiThinking ? <div className="w-8 h-8 border-2 border-white/20 border-t-white rounded-full animate-spin" /> : "Commit Vector to Forensic Codex"}

</button>

</div>

)}

</div>

);

};

const container = document.getElementById('root');

const root = ReactDOM.createRoot(container);

root.render(<App />);

</script>

</body>

</html>