Spaces:

ParulPandey
/

anycoder-43aa42be

Running

App Files Files Community

ParulPandey commited on Nov 19, 2025

Commit

2e1c6b4

verified ·

1 Parent(s): 389eb3b

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +832 -19

index.html CHANGED Viewed

@@ -1,19 +1,832 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+*Thinking...*
+> **Reimagining the Explainer**
+>
+> I'm currently focused on adapting the 2D explainer into a 3D voxel-based version. The challenge lies in rewriting the HTML, CSS, and JavaScript. I'm exploring lightweight, CDN-friendly approaches for 3D rendering to avoid complex setup, focusing on a voxel grid implementation.
+>
+>
+> **Analyzing New Directions**
+>
+> I've re-evaluated my options, leaning towards Three.js for its robust 3D capabilities. I'm focusing on simplicity, considering BoxGeometry and potentially custom VoxelGeometry to create the reactor's voxelized elements. I'm leaning toward using JavaScript for interactions. However, I still need to evaluate the feasibility of doing this via pure CSS to match the original constraints.
+>
+>
+> **Choosing Three.js Implementation**
+>
+> I've decided to proceed with Three.js, leaning into its power and the prompt's request for a 3D voxel experience. Currently, I'm sketching out the scene, envisioning the reactor as a collection of voxel-based components: the core, pipes, steam generator, turbine, and cooling tower. The goal is to make it interactive, linking the JavaScript logic to the 3D scene's visual elements.
+>
+>
+> **Designing the Reactor**
+>
+> I'm now deep into designing the reactor's visual elements within Three.js. I'm focusing on the "blocky" voxel aesthetic, using BoxGeometry. I have begun creating the core, envisioning grey voxel blocks with a blue inner glow. I'm also planning the control rods, the pipes, the turbine, and adding particles to simulate steam. My focus now is on translating the original 2D elements into these 3D, interactive voxel components.
+>
+>
+> **Developing the Scene Structure**
+>
+> I'm presently building the scaffolding within Three.js. Using the "Blocky/Voxel Art" style with `BoxGeometry`, I'm creating a `createVoxel()` helper function. I have the basic HTML/CSS setup. I am sketching the scene, beginning with the reactor core as a stack of grey cubes with an inner blue glow, and the control rods. I am also working on the structure for the pipes.
+>
+>
+> **Developing Physics Integration**
+>
+> My current focus is integrating the physics-based calculations from the original 2D explainer into the 3D scene. I'm working to tie the power, temperature, and control rod values to visual elements, such as the turbine's rotation speed and the rods' position. I'm also adding particle effects to visualize steam flow between components.
+>
+>
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>3D Voxel Nuclear Reactor</title>
+    <!-- Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&family=Orbitron:wght@400;700;900&display=swap" rel="stylesheet">
+    <!-- Icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <!-- Three.js -->
+    <script type="importmap">
+        {
+            "imports": {
+                "three": "https://unpkg.com/three@0.160.0/build/three.module.js",
+                "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"
+            }
+        }
+    </script>
+    <style>
+        :root {
+            --bg-dark: #0b0c15;
+            --panel-bg: rgba(15, 23, 42, 0.75);
+            --primary: #00d2ff;
+            --accent: #ff0055;
+            --warning: #ffcc00;
+            --success: #00ff88;
+            --text-main: #e0e6ed;
+            --text-muted: #94a3b8;
+            --border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+        body {
+            background-color: var(--bg-dark);
+            color: var(--text-main);
+            font-family: 'Inter', sans-serif;
+            overflow: hidden; /* Hide scrollbars, canvas covers all */
+            height: 100vh;
+            width: 100vw;
+        }
+        /* Canvas Container */
+        #canvas-container {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 1;
+            background: radial-gradient(circle at 50% 50%, #1a202c 0%, #020205 100%);
+        }
+        /* UI Overlay Layer */
+        #ui-layer {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 10;
+            pointer-events: none; /* Let clicks pass through to canvas where empty */
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+        }
+        /* Header */
+        header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 1rem 2rem;
+            background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, transparent 100%);
+            pointer-events: auto;
+        }
+        .logo {
+            font-family: 'Orbitron', sans-serif;
+            font-weight: 900;
+            font-size: 1.5rem;
+            letter-spacing: 2px;
+            color: var(--primary);
+            text-shadow: 0 0 10px rgba(0, 210, 255, 0.5);
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .anycoder-link {
+            text-decoration: none;
+            color: var(--text-muted);
+            font-size: 0.9rem;
+            transition: color 0.3s;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            background: rgba(255,255,255,0.05);
+            padding: 8px 16px;
+            border-radius: 20px;
+            border: 1px solid rgba(255,255,255,0.1);
+        }
+        .anycoder-link:hover {
+            color: var(--primary);
+            background: rgba(255,255,255,0.1);
+        }
+        /* Main UI Grid */
+        .main-ui {
+            display: grid;
+            grid-template-columns: 300px 1fr 350px;
+            padding: 2rem;
+            height: 100%;
+            align-items: end; /* Align items to bottom */
+            gap: 2rem;
+        }
+        /* Left Panel: Controls */
+        .control-panel {
+            background: var(--panel-bg);
+            backdrop-filter: blur(12px);
+            border: var(--border);
+            border-radius: 16px;
+            padding: 1.5rem;
+            pointer-events: auto;
+            display: flex;
+            flex-direction: column;
+            gap: 1.5rem;
+            box-shadow: 0 8px 32px rgba(0,0,0,0.3);
+            margin-bottom: 2rem;
+        }
+        .panel-title {
+            font-family: 'Orbitron', sans-serif;
+            font-size: 1.1rem;
+            color: white;
+            border-bottom: 1px solid rgba(255,255,255,0.1);
+            padding-bottom: 0.5rem;
+            margin-bottom: 0.5rem;
+        }
+        .control-group {
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
+        }
+        .label-row {
+            display: flex;
+            justify-content: space-between;
+            font-size: 0.85rem;
+            color: var(--text-muted);
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+        .value-display {
+            font-family: 'Orbitron', sans-serif;
+            color: var(--primary);
+            font-weight: bold;
+        }
+        input[type=range] {
+            width: 100%;
+            -webkit-appearance: none;
+            background: transparent;
+        }
+        input[type=range]::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            height: 18px;
+            width: 18px;
+            border-radius: 2px; /* Square for voxel feel */
+            background: var(--primary);
+            margin-top: -7px;
+            cursor: pointer;
+            box-shadow: 0 0 10px var(--primary);
+            border: 2px solid white;
+        }
+        input[type=range]::-webkit-slider-runnable-track {
+            width: 100%;
+            height: 4px;
+            background: rgba(255,255,255,0.2);
+        }
+        .bar-container {
+            height: 6px;
+            background: rgba(0,0,0,0.5);
+            border-radius: 3px;
+            overflow: hidden;
+        }
+        .bar-fill {
+            height: 100%;
+            width: 50%;
+            background: var(--success);
+            transition: width 0.3s, background 0.3s;
+        }
+        .btn-scram {
+            background: rgba(255, 0, 85, 0.1);
+            border: 1px solid var(--accent);
+            color: var(--accent);
+            padding: 0.8rem;
+            border-radius: 4px;
+            font-family: 'Orbitron', sans-serif;
+            font-weight: 700;
+            cursor: pointer;
+            transition: all 0.2s;
+            text-transform: uppercase;
+            letter-spacing: 2px;
+        }
+        .btn-scram:hover {
+            background: var(--accent);
+            color: white;
+            box-shadow: 0 0 20px var(--accent);
+        }
+        /* Center: Just spacing for the 3D model visibility */
+        .center-spacer {
+            pointer-events: none;
+        }
+        /* Right Panel: Info Cards */
+        .info-panel {
+            pointer-events: auto;
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+            margin-bottom: 2rem;
+            max-height: 60vh;
+            overflow-y: auto;
+            padding-right: 5px;
+        }
+        /* Scrollbar styling */
+        .info-panel::-webkit-scrollbar { width: 6px; }
+        .info-panel::-webkit-scrollbar-track { background: rgba(0,0,0,0.1); }
+        .info-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 3px; }
+        .step-card {
+            background: var(--panel-bg);
+            backdrop-filter: blur(12px);
+            border: var(--border);
+            border-radius: 12px;
+            padding: 1.2rem;
+            transition: transform 0.2s, border-color 0.2s;
+            cursor: pointer;
+        }
+        .step-card:hover, .step-card.active {
+            border-color: var(--primary);
+            background: rgba(20, 24, 36, 0.9);
+        }
+        .step-header {
+            display: flex;
+            align-items: center;
+            gap: 0.8rem;
+            margin-bottom: 0.5rem;
+        }
+        .step-number {
+            background: rgba(0, 210, 255, 0.1);
+            width: 24px;
+            height: 24px;
+            border-radius: 4px; /* Square */
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: 700;
+            color: var(--primary);
+            font-family: 'Orbitron', sans-serif;
+            font-size: 0.8rem;
+            border: 1px solid rgba(0, 210, 255, 0.3);
+        }
+        .step-title {
+            font-weight: 600;
+            color: white;
+            font-size: 0.95rem;
+        }
+        .step-desc {
+            color: var(--text-muted);
+            font-size: 0.85rem;
+            line-height: 1.5;
+        }
+        /* Loading Screen */
+        #loader {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: var(--bg-dark);
+            z-index: 100;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+            transition: opacity 0.5s;
+        }
+        .loader-spinner {
+            width: 50px;
+            height: 50px;
+            border: 3px solid rgba(255,255,255,0.1);
+            border-top-color: var(--primary);
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+            margin-bottom: 1rem;
+        }
+        @keyframes spin { 100% { transform: rotate(360deg); } }
+        /* Responsive */
+        @media (max-width: 1024px) {
+            .main-ui {
+                grid-template-columns: 1fr;
+                grid-template-rows: auto 1fr auto;
+                padding: 1rem;
+                gap: 1rem;
+                overflow-y: auto;
+                display: block;
+            }
+            .control-panel, .info-panel {
+                width: 100%;
+                margin-bottom: 1rem;
+            }
+            #ui-layer {
+                overflow-y: auto;
+                pointer-events: auto; /* Enable scrolling on mobile */
+            }
+            #canvas-container {
+                position: fixed;
+            }
+        }
+    </style>
+</head>
+<body>
+<!-- Loading Screen -->
+<div id="loader">
+    <div class="loader-spinner"></div>
+    <div style="font-family:'Orbitron'; letter-spacing:2px;">INITIALIZING VOXEL ENGINE...</div>
+</div>
+<!-- 3D Canvas -->
+<div id="canvas-container"></div>
+<!-- UI Overlay -->
+<div id="ui-layer">
+    <header>
+        <div class="logo">
+            <i class="fa-solid fa-cube fa-spin-pulse" style="font-size: 1.2rem;"></i> VOXEL REACTOR
+        </div>
+        <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
+            Built with anycoder <i class="fa-solid fa-arrow-up-right-from-square"></i>
+        </a>
+    </header>
+    <div class="main-ui">
+        <!-- Controls -->
+        <div class="control-panel">
+            <div class="panel-title">CONTROL CENTER</div>
+            <div class="control-group">
+                <div class="label-row">
+                    <span>Control Rods</span>
+                    <span class="value-display" id="rodValue">50%</span>
+                </div>
+                <input type="range" id="rodSlider" min="0" max="100" value="50">
+            </div>
+            <div class="control-group">
+                <div class="label-row">
+                    <span>Core Temp</span>
+                    <span class="value-display" id="tempValue">300°C</span>
+                </div>
+                <div class="bar-container">
+                    <div class="bar-fill" id="tempBar"></div>
+                </div>
+            </div>
+            <div class="control-group">
+                <div class="label-row">
+                    <span>Output Power</span>
+                    <span class="value-display" id="powerValue">450 MW</span>
+                </div>
+                <div class="bar-container">
+                    <div class="bar-fill" id="powerBar" style="background: var(--primary); width: 45%;"></div>
+                </div>
+            </div>
+            <div class="control-group" style="margin-top: 10px;">
+                <div class="label-row">
+                    <span>Status</span>
+                    <span class="value-display" id="statusText" style="color: var(--success);">STABLE</span>
+                </div>
+            </div>
+            <button class="btn-scram" onclick="scramReactor()">
+                <i class="fa-solid fa-radiation"></i> SCRAM (EMERGENCY)
+            </button>
+        </div>
+        <!-- Spacer to keep center clear for 3D view -->
+        <div class="center-spacer"></div>
+        <!-- Explainer -->
+        <div class="info-panel">
+            <div class="step-card active" onclick="focusCamera(0)">
+                <div class="step-header">
+                    <div class="step-number">1</div>
+                    <div class="step-title">Reactor Core</div>
+                </div>
+                <div class="step-desc">
+                    Uranium fuel blocks undergo fission here. The blue glow represents Cherenkov radiation.
+                </div>
+            </div>
+            <div class="step-card" onclick="focusCamera(1)">
+                <div class="step-header">
+                    <div class="step-number">2</div>
+                    <div class="step-title">Control Rods</div>
+                </div>
+                <div class="step-desc">
+                    Grey blocks on top. Lowering them (Slider right) absorbs neutrons and stops the reaction.
+                </div>
+            </div>
+            <div class="step-card" onclick="focusCamera(2)">
+                <div class="step-header">
+                    <div class="step-number">3</div>
+                    <div class="step-title">Heat Exchange</div>
+                </div>
+                <div class="step-desc">
+                    Red pipes carry superheated water to the Steam Generator, boiling the secondary loop.
+                </div>
+            </div>
+            <div class="step-card" onclick="focusCamera(3)">
+                <div class="step-header">
+                    <div class="step-number">4</div>
+                    <div class="step-title">Turbine</div>
+                </div>
+                <div class="step-desc">
+                    Steam spins the turbine blades (Fan) to generate electricity. Faster spin = More Power.
+                </div>
+            </div>
+            <div class="step-card" onclick="focusCamera(4)">
+                <div class="step-header">
+                    <div class="step-number">5</div>
+                    <div class="step-title">Cooling Tower</div>
+                </div>
+                <div class="step-desc">
+                    Excess heat is released as steam. The water is cooled and pumped back in.
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<script type="module">
+    import * as THREE from 'three';
+    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+    // --- 1. Simulation Logic (The Brains) ---
+    const state = {
+        rodPosition: 50, // 0-100
+        targetTemp: 300,
+        currentTemp: 300,
+        powerOutput: 0,
+        isScrammed: false
+    };
+    // DOM Elements
+    const els = {
+        rodSlider: document.getElementById('rodSlider'),
+        rodValue: document.getElementById('rodValue'),
+        tempValue: document.getElementById('tempValue'),
+        tempBar: document.getElementById('tempBar'),
+        powerValue: document.getElementById('powerValue'),
+        powerBar: document.getElementById('powerBar'),
+        statusText: document.getElementById('statusText'),
+        stepCards: document.querySelectorAll('.step-card')
+    };
+    // Event Listeners
+    els.rodSlider.addEventListener('input', (e) => {
+        state.rodPosition = parseInt(e.target.value);
+        state.isScrammed = false; // User interaction cancels scram state visually
+    });
+    window.scramReactor = () => {
+        state.isScrammed = true;
+    };
+    // --- 2. Three.js Setup (The Visuals) ---
+    const container = document.getElementById('canvas-container');
+    const scene = new THREE.Scene();
+    // Fog for depth
+    scene.fog = new THREE.FogExp2(0x0b0c15, 0.008);
+    const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
+    camera.position.set(80, 60, 120);
+    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+    renderer.shadowMap.enabled = true;
+    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+    container.appendChild(renderer.domElement);
+    const controls = new OrbitControls(camera, renderer.domElement);
+    controls.enableDamping = true;
+    controls.dampingFactor = 0.05;
+    controls.maxPolarAngle = Math.PI / 2 - 0.1; // Don't go below ground
+    controls.target.set(30, 10, 0);
+    // --- 3. Lighting ---
+    const ambientLight = new THREE.AmbientLight(0x404040, 1.5); // Soft white light
+    scene.add(ambientLight);
+    const dirLight = new THREE.DirectionalLight(0xffffff, 1);
+    dirLight.position.set(50, 100, 50);
+    dirLight.castShadow = true;
+    dirLight.shadow.mapSize.width = 2048;
+    dirLight.shadow.mapSize.height = 2048;
+    scene.add(dirLight);
+    // Reactor Glow Light (Point Light)
+    const coreLight = new THREE.PointLight(0x00d2ff, 0, 50);
+    coreLight.position.set(0, 15, 0);
+    scene.add(coreLight);
+    // --- 4. Voxel Builder Helper ---
+    const boxGeo = new THREE.BoxGeometry(1, 1, 1);
+    function createVoxel(x, y, z, color, size = 1, opacity = 1) {
+        const mat = new THREE.MeshStandardMaterial({
+            color: color,
+            roughness: 0.3,
+            metalness: 0.1,
+            transparent: opacity < 1,
+            opacity: opacity
+        });
+        const mesh = new THREE.Mesh(boxGeo, mat);
+        mesh.position.set(x, y, z);
+        mesh.scale.set(size, size, size);
+        mesh.castShadow = true;
+        mesh.receiveShadow = true;
+        scene.add(mesh);
+        return mesh;
+    }
+    function createVoxelGroup(positions, color, size = 1) {
+        const group = new THREE.Group();
+        positions.forEach(pos => {
+            const v = createVoxel(pos[0], pos[1], pos[2], color, size);
+            scene.add(v); // Add to scene, but we want to group them?
+            // For simplicity in this script, we just create meshes.
+            // If we need to move them together, we add to group.
+            scene.remove(v);
+            group.add(v);
+        });
+        scene.add(group);
+        return group;
+    }
+    // --- 5. Build The Scene ---
+    // Floor
+    const gridHelper = new THREE.GridHelper(200, 20, 0x333333, 0x222222);
+    scene.add(gridHelper);
+    const floor = createVoxel(30, -1, 0, 0x1a1d29, 1, 1);
+    floor.scale.set(200, 2, 100);
+    floor.receiveShadow = true;
+    // A. REACTOR CORE (x: 0)
+    // Base
+    createVoxel(0, 5, 0, 0x334155, 14); // Outer Shell
+    // Inner Core (Translucent Blue)
+    const reactorCore = createVoxel(0, 12, 0, 0x00d2ff, 10, 0.8);
+    reactorCore.material.emissive = new THREE.Color(0x0044aa);
+    // Control Rods (Group to move)
+    const rodGroup = new THREE.Group();
+    // Create a 3x3 grid of rods
+    for(let i=-2; i<=2; i+=2) {
+        for(let j=-2; j<=2; j+=2) {
+            const rod = new THREE.Mesh(boxGeo, new THREE.MeshStandardMaterial({color: 0x94a3b8}));
+            rod.position.set(i, 5, j);
+            rod.scale.set(1.5, 12, 1.5);
+            rodGroup.add(rod);
+        }
+    }
+    rodGroup.position.set(0, 15, 0); // Start position
+    scene.add(rodGroup);
+    // B. PIPES (Connecting 0 to 40)
+    // Hot Pipe (Red) - Top
+    const hotPipe = createVoxel(20, 15, 0, 0xff0055, 1);
+    hotPipe.scale.set(25, 2, 2);
+    // Cold Pipe (Blue) - Bottom
+    const coldPipe = createVoxel(20, 5, 0, 0x00d2ff, 1);
+    coldPipe.scale.set(25, 2, 2);
+    // C. STEAM GENERATOR (x: 40)
+    createVoxel(40, 10, 0, 0x475569, 12); // Main block
+    createVoxel(40, 20, 0, 0x64748b, 8); // Top dome
+    // Steam Pipe to Turbine
+    const steamPipe = createVoxel(60, 18, 0, 0xffffff, 1);
+    steamPipe.scale.set(25, 2, 2);
+    // D. TURBINE (x: 80)
+    const turbineBase = createVoxel(80, 8, 0, 0x1e293b, 12);
+    turbineBase.scale.set(12, 16, 12);
+    // The Spinning Blades
+    const turbineRotor = new THREE.Group();
+    const bladeMat = new THREE.MeshStandardMaterial({color: 0xcccccc, metalness: 0.8});
+    for(let i=0; i<4; i++) {
+        const blade = new THREE.Mesh(boxGeo, bladeMat);
+        blade.scale.set(14, 2, 4);
+        blade.rotation.x = (Math.PI / 2) * i; // 4 blades
+        blade.position.set(0, 0, 0); // Center
+        // We actually want them radial.
+        const bladeGroup = new THREE.Group();
+        bladeGroup.add(blade);
+        bladeGroup.rotation.x = i * (Math.PI/2);
+        turbineRotor.add(bladeGroup);
+    }
+    turbineRotor.position.set(80, 18, 0);
+    turbineRotor.rotation.y = Math.PI / 2; // Face sideways
+    scene.add(turbineRotor);
+    // Generator box next to it
+    createVoxel(95, 8, 0, 0x0f172a, 8);
+    // E. COOLING TOWER (x: 120)
+    // Build a hollow-ish shape using stacked rings of voxels would be expensive.
+    // Let's use a simple tapered geometry but render it "flat" shading to look low poly.
+    const towerGeo = new THREE.CylinderGeometry(10, 18, 30, 8);
+    const towerMat = new THREE.MeshStandardMaterial({color: 0xe2e8f0, flatShading: true});
+    const tower = new THREE.Mesh(towerGeo, towerMat);
+    tower.position.set(120, 15, 0);
+    tower.castShadow = true;
+    scene.add(tower);
+    // Steam Particles System (Simple Cubes)
+    const particleCount = 20;
+    const particles = [];
+    for(let i=0; i<particleCount; i++) {
+        const p = new THREE.Mesh(boxGeo, new THREE.MeshBasicMaterial({color: 0xffffff, transparent:true, opacity:0.6}));
+        p.scale.set(1.5, 1.5, 1.5);
+        p.position.set(120, 30, 0);
+        p.userData = {
+            speed: 0.1 + Math.random() * 0.2,
+            offset: Math.random() * 100
+        };
+        scene.add(p);
+        particles.push(p);
+    }
+    // --- 6. Camera Focus Logic ---
+    window.focusCamera = (stepIndex) => {
+        // Update UI
+        els.stepCards.forEach((c, i) => {
+            if(i === stepIndex) c.classList.add('active');
+            else c.classList.remove('active');
+        });
+        // Move Camera
+        const targets = [
+            { x: 0, y: 15, z: 0, cx: 40, cy: 30, cz: 60 },   // Core
+            { x: 0, y: 20, z: 0, cx: 30, cy: 40, cz: 50 },   // Rods
+            { x: 40, y: 15, z: 0, cx: 40, cy: 30, cz: 60 },  // Heat Ex
+            { x: 80, y: 18, z: 0, cx: 80, cy: 30, cz: 60 },  // Turbine
+            { x: 120, y: 15, z: 0, cx: 120, cy: 40, cz: 70 } // Tower
+        ];
+        const t = targets[stepIndex];
+        // Use simple interpolation in update loop or GSAP if available.
+        // Since no GSAP, we'll snap or use a simple lerp target variable.
+        camTargetPos.set(t.cx, t.cy, t.cz);
+        controlsTargetPos.set(t.x, t.y, t.z);
+    };
+    const camTargetPos = new THREE.Vector3(80, 60, 120);
+    const controlsTargetPos = new THREE.Vector3(30, 10, 0);
+    // --- 7. Main Loop ---
+    function updatePhysics() {
+        // Physics Logic (Same as 2D version)
+        let reactionPotential = (100 - state.rodPosition);
+        let targetT = 50 + (reactionPotential * 8);
+        let changeRate = 1.5;
+        if (state.currentTemp < targetT) state.currentTemp += changeRate;
+        if (state.currentTemp > targetT) state.currentTemp -= changeRate;
+        let efficiency = 0;
+        if(state.currentTemp > 100) {
+            efficiency = (state.currentTemp - 100) / 500;
+            if(efficiency > 1) efficiency = 1;
+        }
+        state.powerOutput = Math.floor(efficiency * 1000);
+        // SCRAM Logic
+        if(state.isScrammed && state.rodPosition < 100) {
+            state.rodPosition += 2;
+            if(state.rodPosition > 100) state.rodPosition = 100;
+            els.rodSlider.value = state.rodPosition;
+        }
+        // UI Updates
+        els.rodValue.innerText = state.rodPosition + "%";
+        els.tempValue.innerText = Math.floor(state.currentTemp) + "°C";
+        let tempPercent = Math.min(100, (state.currentTemp / 800) * 100);
+        els.tempBar.style.width = `${tempPercent}%`;
+        if(state.currentTemp < 300) {
+            els.tempBar.style.background = 'var(--primary)';
+            els.statusText.innerText = "WARMING UP";
+            els.statusText.style.color = "var(--primary)";
+        } else if (state.currentTemp < 600) {
+            els.tempBar.style.background = 'var(--success)';
+            els.statusText.innerText = "OPTIMAL";
+            els.statusText.style.color = "var(--success)";
+        } else {
+            els.tempBar.style.background = 'var(--accent)';
+            els.statusText.innerText = "CRITICAL";
+            els.statusText.style.color = "var(--accent)";
+        }
+        els.powerValue.innerText = state.powerOutput + " MW";
+        els.powerBar.style.width = `${state.powerOutput / 10}%`;
+    }
+    function animate() {
+        requestAnimationFrame(animate);
+        updatePhysics();
+        // 1. Animate Rods
+        // Map 0-100% to Y position.
+        // 0% inserted = High Y (out). 100% inserted = Low Y (in).
+        // Let's say range is Y=15 (out) to Y=8 (in)
+        const rodY = 15 - (state.rodPosition / 100) * 7;
+        rodGroup.position.y += (rodY - rodGroup.position.y) * 0.1; // Smooth lerp
+        // 2. Animate Glow
+        // Intensity based on reaction (inverse of rod pos)
+        const glowIntensity = (100 - state.rodPosition) / 20; // 0 to 5
+        coreLight.intensity = glowIntensity;
+        reactorCore.material.emissiveIntensity = glowIntensity / 5;
+        // Color shift based on temp
+        if(state.currentTemp > 600) {
+            coreLight.color.setHex(0xff0055); // Red alert
+            reactorCore.material.emissive.setHex(0xff0055);
+        } else {
+            coreLight.color.setHex(0x00d2ff); // Blue normal
+            reactorCore.material.emissive.setHex(0x0044aa);
+        }
+        // 3. Animate Turbine
+        if(state.powerOutput > 0) {
+            const speed = state.powerOutput * 0.0005;
+            turbineRotor.rotation.x += speed;
+        }
+        // 4. Animate Steam Particles
+        particles.forEach(p => {
+            if(state.powerOutput > 50) {