diff --git a/connecting sun/connecting.html b/connecting sun/connecting.html
new file mode 100644
index 00000000..27674fba
--- /dev/null
+++ b/connecting sun/connecting.html	
@@ -0,0 +1,454 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Connected Sun</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            overflow: hidden;
+            background: #000;
+            font-family: Arial, sans-serif;
+        }
+        
+        canvas {
+            display: block;
+            cursor: move;
+        }
+        
+        .info {
+            position: fixed;
+            top: 20px;
+            left: 20px;
+            color: #fff;
+            background: rgba(0, 0, 0, 0.7);
+            padding: 15px;
+            border-radius: 8px;
+            font-size: 14px;
+            z-index: 1000;
+            pointer-events: none;
+        }
+        
+        .info h3 {
+            margin-bottom: 10px;
+            color: #ffd700;
+        }
+        
+        .lightning-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100vw;
+            height: 100vh;
+            pointer-events: none;
+            z-index: 9999;
+        }
+    </style>
+</head>
+<body>
+    <canvas class="lightning-overlay" id="lightningCanvas"></canvas>
+    <canvas id="canvas"></canvas>
+    <div class="info">
+        <h3>⚡ Multi-Tab Sun Network</h3>
+        <p>Open this in multiple tabs!</p>
+        <p>Drag the sun to move it</p>
+        <p id="tabInfo">Tab ID: Loading...</p>
+        <p id="connectionInfo">Connected tabs: 0</p>
+    </div>
+
+    <script>
+        const canvas = document.getElementById('canvas');
+        const ctx = canvas.getContext('2d');
+        const lightningCanvas = document.getElementById('lightningCanvas');
+        const lightningCtx = lightningCanvas.getContext('2d');
+        
+        canvas.width = window.innerWidth;
+        canvas.height = window.innerHeight;
+        lightningCanvas.width = window.innerWidth;
+        lightningCanvas.height = window.innerHeight;
+        
+        // Generate unique tab ID
+        const tabId = 'tab_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
+        
+        // BroadcastChannel for cross-tab communication
+        const channel = new BroadcastChannel('sun_network');
+        
+        // Sun object for this tab
+        const sun = {
+            x: canvas.width / 2,
+            y: canvas.height / 2,
+            radius: 50,
+            dragging: false,
+            offsetX: 0,
+            offsetY: 0,
+            exploded: false,
+            explosionProgress: 0
+        };
+        
+        // Store other tabs' data
+        const otherTabs = new Map();
+        
+        // Persistent lightning connections (one per connected tab)
+        const activeLightnings = new Map();
+        
+        // Update UI
+        document.getElementById('tabInfo').textContent = `Tab: ${tabId.substr(4, 8)}`;
+        
+        // Get window position relative to screen
+        function getScreenPosition() {
+            return {
+                screenX: window.screenX || window.screenLeft || 0,
+                screenY: window.screenY || window.screenTop || 0,
+                sunX: sun.x,
+                sunY: sun.y,
+                windowWidth: window.innerWidth,
+                windowHeight: window.innerHeight
+            };
+        }
+        
+        // Broadcast sun position and window position
+        function broadcastPosition() {
+            const pos = getScreenPosition();
+            channel.postMessage({
+                type: 'position',
+                tabId: tabId,
+                ...pos,
+                timestamp: Date.now()
+            });
+        }
+        
+        // Handle messages from other tabs
+        channel.onmessage = (event) => {
+            const data = event.data;
+            
+            if (data.tabId === tabId) return;
+            
+            if (data.type === 'position') {
+                otherTabs.set(data.tabId, {
+                    screenX: data.screenX,
+                    screenY: data.screenY,
+                    sunX: data.sunX,
+                    sunY: data.sunY,
+                    windowWidth: data.windowWidth,
+                    windowHeight: data.windowHeight,
+                    timestamp: data.timestamp
+                });
+            } else if (data.type === 'disconnect') {
+                otherTabs.delete(data.tabId);
+                activeLightnings.delete(data.tabId);
+            }
+        };
+        
+        // Calculate the exact position of another tab's sun in this tab's viewport
+        function calculateOtherSunPosition(otherTabData) {
+            const myPos = getScreenPosition();
+            
+            // Absolute screen positions (accounting for browser chrome ~70px)
+            const myAbsoluteX = myPos.screenX;
+            const myAbsoluteY = myPos.screenY + 70; // Browser chrome height
+            
+            const otherAbsoluteX = otherTabData.screenX + otherTabData.sunX;
+            const otherAbsoluteY = otherTabData.screenY + 70 + otherTabData.sunY;
+            
+            // Convert to this tab's canvas coordinates
+            const relativeX = otherAbsoluteX - myAbsoluteX;
+            const relativeY = otherAbsoluteY - myAbsoluteY;
+            
+            return { x: relativeX, y: relativeY };
+        }
+        
+        // Generate lightning path between two points
+        function generateLightningPath(x1, y1, x2, y2) {
+            const segments = [];
+            const distance = Math.sqrt((x2-x1)**2 + (y2-y1)**2);
+            const steps = Math.max(15, Math.floor(distance / 25));
+            
+            for (let i = 0; i <= steps; i++) {
+                const t = i / steps;
+                let x = x1 + (x2 - x1) * t;
+                let y = y1 + (y2 - y1) * t;
+                
+                // Add jagged displacement (less at endpoints)
+                if (i > 0 && i < steps) {
+                    const displacement = Math.sin(t * Math.PI) * 50; // Max displacement in middle
+                    x += (Math.random() - 0.5) * displacement;
+                    y += (Math.random() - 0.5) * displacement;
+                }
+                
+                segments.push({ x, y });
+            }
+            
+            return segments;
+        }
+        
+        // Update lightning connections in real-time
+        function updateLightningConnections() {
+            const now = Date.now();
+            
+            // Clean up stale tabs
+            otherTabs.forEach((tab, id) => {
+                if (now - tab.timestamp > 2000) {
+                    otherTabs.delete(id);
+                    activeLightnings.delete(id);
+                }
+            });
+            
+            // Update or create lightning for each connected tab
+            otherTabs.forEach((otherTab, otherId) => {
+                const targetPos = calculateOtherSunPosition(otherTab);
+                
+                // Check if we need to regenerate the path (every few frames for animation)
+                if (!activeLightnings.has(otherId) || Math.random() < 0.1) {
+                    activeLightnings.set(otherId, {
+                        segments: generateLightningPath(sun.x, sun.y, targetPos.x, targetPos.y),
+                        targetX: targetPos.x,
+                        targetY: targetPos.y,
+                        intensity: 0.7 + Math.random() * 0.3
+                    });
+                } else {
+                    // Update endpoints if positions changed
+                    const lightning = activeLightnings.get(otherId);
+                    const dist = Math.sqrt((lightning.targetX - targetPos.x)**2 + (lightning.targetY - targetPos.y)**2);
+                    
+                    // Regenerate if target moved significantly
+                    if (dist > 5) {
+                        lightning.segments = generateLightningPath(sun.x, sun.y, targetPos.x, targetPos.y);
+                        lightning.targetX = targetPos.x;
+                        lightning.targetY = targetPos.y;
+                    }
+                }
+            });
+        }
+        
+        // Draw sun
+        function drawSun(x, y, radius) {
+            // Outer glow
+            const gradient = ctx.createRadialGradient(x, y, 0, x, y, radius * 3);
+            gradient.addColorStop(0, 'rgba(255, 220, 100, 0.9)');
+            gradient.addColorStop(0.2, 'rgba(255, 180, 50, 0.6)');
+            gradient.addColorStop(0.5, 'rgba(255, 100, 0, 0.3)');
+            gradient.addColorStop(1, 'rgba(255, 50, 0, 0)');
+            
+            ctx.fillStyle = gradient;
+            ctx.beginPath();
+            ctx.arc(x, y, radius * 3, 0, Math.PI * 2);
+            ctx.fill();
+            
+            // Middle layer
+            const midGradient = ctx.createRadialGradient(x, y, 0, x, y, radius * 1.5);
+            midGradient.addColorStop(0, 'rgba(255, 255, 200, 1)');
+            midGradient.addColorStop(0.5, 'rgba(255, 200, 50, 0.8)');
+            midGradient.addColorStop(1, 'rgba(255, 150, 0, 0)');
+            
+            ctx.fillStyle = midGradient;
+            ctx.beginPath();
+            ctx.arc(x, y, radius * 1.5, 0, Math.PI * 2);
+            ctx.fill();
+            
+            // Core
+            const coreGradient = ctx.createRadialGradient(x, y, 0, x, y, radius);
+            coreGradient.addColorStop(0, '#ffffff');
+            coreGradient.addColorStop(0.3, '#ffeb3b');
+            coreGradient.addColorStop(0.7, '#ff9800');
+            coreGradient.addColorStop(1, '#ff5722');
+            
+            ctx.fillStyle = coreGradient;
+            ctx.beginPath();
+            ctx.arc(x, y, radius, 0, Math.PI * 2);
+            ctx.fill();
+            
+            // Pulsing ring
+            const pulse = Math.sin(Date.now() / 400) * 8;
+            ctx.strokeStyle = `rgba(255, 255, 255, ${0.3 + Math.sin(Date.now() / 400) * 0.2})`;
+            ctx.lineWidth = 3;
+            ctx.beginPath();
+            ctx.arc(x, y, radius + 10 + pulse, 0, Math.PI * 2);
+            ctx.stroke();
+            
+            // Energy particles
+            const time = Date.now() / 1000;
+            for (let i = 0; i < 8; i++) {
+                const angle = (i / 8) * Math.PI * 2 + time;
+                const distance = radius + 15 + Math.sin(time * 3 + i) * 5;
+                const px = x + Math.cos(angle) * distance;
+                const py = y + Math.sin(angle) * distance;
+                
+                ctx.fillStyle = 'rgba(255, 255, 150, 0.6)';
+                ctx.beginPath();
+                ctx.arc(px, py, 2, 0, Math.PI * 2);
+                ctx.fill();
+            }
+        }
+        
+        // Draw lightning
+        function drawLightning(lightning) {
+            lightningCtx.save();
+            
+            const flicker = 0.8 + Math.random() * 0.2;
+            lightningCtx.globalAlpha = lightning.intensity * flicker;
+            
+            // Main bolt - outer glow
+            lightningCtx.strokeStyle = '#00b4ff';
+            lightningCtx.shadowColor = '#00d4ff';
+            lightningCtx.shadowBlur = 25;
+            lightningCtx.lineWidth = 5;
+            lightningCtx.lineCap = 'round';
+            lightningCtx.lineJoin = 'round';
+            
+            lightningCtx.beginPath();
+            lightning.segments.forEach((seg, i) => {
+                if (i === 0) {
+                    lightningCtx.moveTo(seg.x, seg.y);
+                } else {
+                    lightningCtx.lineTo(seg.x, seg.y);
+                }
+            });
+            lightningCtx.stroke();
+            
+            // Bright core
+            lightningCtx.strokeStyle = '#ffffff';
+            lightningCtx.shadowBlur = 15;
+            lightningCtx.lineWidth = 2;
+            lightningCtx.stroke();
+            
+            // Inner bright line
+            lightningCtx.strokeStyle = '#e0f7ff';
+            lightningCtx.shadowBlur = 5;
+            lightningCtx.lineWidth = 1;
+            lightningCtx.stroke();
+            
+            lightningCtx.restore();
+        }
+        
+        // Animation loop
+        function animate() {
+            // Clear canvases
+            ctx.fillStyle = 'rgba(0, 0, 0, 0.15)';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            
+            lightningCtx.clearRect(0, 0, lightningCanvas.width, lightningCanvas.height);
+            
+            // Update lightning connections
+            updateLightningConnections();
+            
+            // Draw all active lightnings
+            activeLightnings.forEach((lightning) => {
+                drawLightning(lightning);
+            });
+            
+            // Draw this tab's sun
+            drawSun(sun.x, sun.y, sun.radius);
+            
+            // Update connection count
+            document.getElementById('connectionInfo').textContent = `Connected tabs: ${otherTabs.size}`;
+            
+            requestAnimationFrame(animate);
+        }
+        
+        // Mouse events
+        canvas.addEventListener('mousedown', (e) => {
+            const rect = canvas.getBoundingClientRect();
+            const mouseX = e.clientX - rect.left;
+            const mouseY = e.clientY - rect.top;
+            const dx = mouseX - sun.x;
+            const dy = mouseY - sun.y;
+            
+            if (Math.sqrt(dx * dx + dy * dy) <= sun.radius * 2) {
+                sun.dragging = true;
+                sun.offsetX = dx;
+                sun.offsetY = dy;
+            }
+        });
+        
+        canvas.addEventListener('mousemove', (e) => {
+            if (sun.dragging) {
+                const rect = canvas.getBoundingClientRect();
+                sun.x = e.clientX - rect.left - sun.offsetX;
+                sun.y = e.clientY - rect.top - sun.offsetY;
+                broadcastPosition();
+            }
+        });
+        
+        canvas.addEventListener('mouseup', () => {
+            sun.dragging = false;
+        });
+        
+        canvas.addEventListener('mouseleave', () => {
+            sun.dragging = false;
+        });
+        
+        // Touch events for mobile
+        canvas.addEventListener('touchstart', (e) => {
+            e.preventDefault();
+            const touch = e.touches[0];
+            const rect = canvas.getBoundingClientRect();
+            const touchX = touch.clientX - rect.left;
+            const touchY = touch.clientY - rect.top;
+            const dx = touchX - sun.x;
+            const dy = touchY - sun.y;
+            
+            if (Math.sqrt(dx * dx + dy * dy) <= sun.radius * 2) {
+                sun.dragging = true;
+                sun.offsetX = dx;
+                sun.offsetY = dy;
+            }
+        });
+        
+        canvas.addEventListener('touchmove', (e) => {
+            e.preventDefault();
+            if (sun.dragging) {
+                const touch = e.touches[0];
+                const rect = canvas.getBoundingClientRect();
+                sun.x = touch.clientX - rect.left - sun.offsetX;
+                sun.y = touch.clientY - rect.top - sun.offsetY;
+                broadcastPosition();
+            }
+        });
+        
+        canvas.addEventListener('touchend', () => {
+            sun.dragging = false;
+        });
+        
+        // Window resize and move
+        window.addEventListener('resize', () => {
+            canvas.width = window.innerWidth;
+            canvas.height = window.innerHeight;
+            lightningCanvas.width = window.innerWidth;
+            lightningCanvas.height = window.innerHeight;
+            broadcastPosition();
+        });
+        
+        // Detect window movement
+        let lastScreenX = window.screenX;
+        let lastScreenY = window.screenY;
+        setInterval(() => {
+            if (window.screenX !== lastScreenX || window.screenY !== lastScreenY) {
+                lastScreenX = window.screenX;
+                lastScreenY = window.screenY;
+                broadcastPosition();
+            }
+        }, 100);
+        
+        // Disconnect on close
+        window.addEventListener('beforeunload', () => {
+            channel.postMessage({
+                type: 'disconnect',
+                tabId: tabId
+            });
+        });
+        
+        // Broadcast position regularly
+        setInterval(broadcastPosition, 50);
+        
+        // Start
+        animate();
+        broadcastPosition();
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/epic universe/universe.html b/epic universe/universe.html
new file mode 100644
index 00000000..7cd79a1c
--- /dev/null
+++ b/epic universe/universe.html	
@@ -0,0 +1,416 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Cosmic Particle Universe</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            overflow: hidden;
+            background: #000;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+        
+        canvas {
+            display: block;
+            cursor: move;
+        }
+        
+        .controls {
+            position: fixed;
+            top: 20px;
+            left: 20px;
+            background: rgba(0, 0, 0, 0.8);
+            backdrop-filter: blur(10px);
+            padding: 20px;
+            border-radius: 15px;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            color: #fff;
+            z-index: 10;
+            max-width: 250px;
+        }
+        
+        .controls h3 {
+            margin-bottom: 15px;
+            font-size: 18px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        
+        .control-group {
+            margin-bottom: 15px;
+        }
+        
+        .control-group label {
+            display: block;
+            margin-bottom: 5px;
+            font-size: 12px;
+            color: #aaa;
+        }
+        
+        input[type="range"] {
+            width: 100%;
+            height: 4px;
+            background: rgba(255, 255, 255, 0.1);
+            outline: none;
+            border-radius: 2px;
+        }
+        
+        input[type="range"]::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            appearance: none;
+            width: 15px;
+            height: 15px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            cursor: pointer;
+            border-radius: 50%;
+        }
+        
+        input[type="range"]::-moz-range-thumb {
+            width: 15px;
+            height: 15px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            cursor: pointer;
+            border-radius: 50%;
+            border: none;
+        }
+        
+        button {
+            width: 100%;
+            padding: 10px;
+            margin-top: 10px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            border: none;
+            border-radius: 8px;
+            cursor: pointer;
+            font-size: 14px;
+            transition: transform 0.2s;
+        }
+        
+        button:hover {
+            transform: scale(1.05);
+        }
+        
+        button:active {
+            transform: scale(0.95);
+        }
+        
+        .info {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            background: rgba(0, 0, 0, 0.8);
+            backdrop-filter: blur(10px);
+            padding: 15px 20px;
+            border-radius: 10px;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            color: #fff;
+            font-size: 12px;
+            max-width: 300px;
+        }
+        
+        .value-display {
+            display: inline-block;
+            float: right;
+            color: #667eea;
+            font-weight: bold;
+        }
+    </style>
+</head>
+<body>
+    <canvas id="canvas"></canvas>
+    
+    <div class="controls">
+        <h3>⚡ Universe Controls</h3>
+        
+        <div class="control-group">
+            <label>Particle Count <span class="value-display" id="particleValue">5000</span></label>
+            <input type="range" id="particleCount" min="1000" max="15000" value="5000" step="500">
+        </div>
+        
+        <div class="control-group">
+            <label>Speed <span class="value-display" id="speedValue">1.0</span></label>
+            <input type="range" id="speed" min="0.1" max="3" value="1" step="0.1">
+        </div>
+        
+        <div class="control-group">
+            <label>Connection Distance <span class="value-display" id="distValue">120</span></label>
+            <input type="range" id="distance" min="50" max="250" value="120" step="10">
+        </div>
+        
+        <div class="control-group">
+            <label>Wave Intensity <span class="value-display" id="waveValue">0.5</span></label>
+            <input type="range" id="wave" min="0" max="2" value="0.5" step="0.1">
+        </div>
+        
+        <button id="randomize">🎲 Randomize</button>
+        <button id="explode">💥 Explode!</button>
+    </div>
+    
+    <div class="info">
+        <strong>🎮 Controls:</strong><br>
+        • Drag to rotate<br>
+        • Scroll to zoom<br>
+        • Adjust sliders for effects
+    </div>
+
+    <script>
+        const canvas = document.getElementById('canvas');
+        const ctx = canvas.getContext('2d');
+        
+        let width = canvas.width = window.innerWidth;
+        let height = canvas.height = window.innerHeight;
+        
+        let particles = [];
+        let mouse = { x: 0, y: 0, down: false };
+        let rotation = { x: 0, y: 0 };
+        let targetRotation = { x: 0, y: 0 };
+        let zoom = 1;
+        
+        // Settings
+        let settings = {
+            particleCount: 5000,
+            speed: 1,
+            connectionDistance: 120,
+            waveIntensity: 0.5
+        };
+        
+        class Particle {
+            constructor() {
+                this.reset();
+                this.z = Math.random() * 2000 - 1000;
+            }
+            
+            reset() {
+                const angle = Math.random() * Math.PI * 2;
+                const radius = Math.random() * 500 + 200;
+                this.x = Math.cos(angle) * radius;
+                this.y = Math.sin(angle) * radius;
+                this.z = Math.random() * 2000 - 1000;
+                
+                this.vx = (Math.random() - 0.5) * 2;
+                this.vy = (Math.random() - 0.5) * 2;
+                this.vz = (Math.random() - 0.5) * 2;
+                
+                this.hue = Math.random() * 360;
+                this.size = Math.random() * 2 + 1;
+            }
+            
+            update(time) {
+                // Wave motion
+                this.x += Math.sin(time * 0.001 + this.y * 0.01) * settings.waveIntensity;
+                this.y += Math.cos(time * 0.001 + this.x * 0.01) * settings.waveIntensity;
+                
+                // Orbital motion
+                this.x += this.vx * settings.speed;
+                this.y += this.vy * settings.speed;
+                this.z += this.vz * settings.speed;
+                
+                // Boundary check
+                if (Math.abs(this.x) > 1000 || Math.abs(this.y) > 1000 || Math.abs(this.z) > 1000) {
+                    this.reset();
+                }
+            }
+            
+            project() {
+                const perspective = 800;
+                const z = Math.max(this.z * zoom, -perspective + 1);
+                const scale = perspective / (perspective + z);
+                return {
+                    x: this.x * scale + width / 2,
+                    y: this.y * scale + height / 2,
+                    scale: Math.max(scale, 0.001)
+                };
+            }
+        }
+        
+        function initParticles() {
+            particles = [];
+            for (let i = 0; i < settings.particleCount; i++) {
+                particles.push(new Particle());
+            }
+        }
+        
+        function rotatePoint(x, y, z) {
+            // Rotate around Y axis
+            let cosY = Math.cos(rotation.y);
+            let sinY = Math.sin(rotation.y);
+            let tempX = x * cosY - z * sinY;
+            let tempZ = x * sinY + z * cosY;
+            x = tempX;
+            z = tempZ;
+            
+            // Rotate around X axis
+            let cosX = Math.cos(rotation.x);
+            let sinX = Math.sin(rotation.x);
+            let tempY = y * cosX - z * sinX;
+            z = y * sinX + z * cosX;
+            y = tempY;
+            
+            return { x, y, z };
+        }
+        
+        function animate(time) {
+            // Smooth rotation interpolation
+            rotation.x += (targetRotation.x - rotation.x) * 0.1;
+            rotation.y += (targetRotation.y - rotation.y) * 0.1;
+            
+            // Fade effect
+            ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
+            ctx.fillRect(0, 0, width, height);
+            
+            // Update and draw particles
+            const projectedParticles = [];
+            
+            particles.forEach(p => {
+                p.update(time);
+                
+                const rotated = rotatePoint(p.x, p.y, p.z);
+                p.rx = rotated.x;
+                p.ry = rotated.y;
+                p.rz = rotated.z;
+                
+                const projected = p.project();
+                projectedParticles.push({ ...projected, particle: p });
+            });
+            
+            // Sort by z-index
+            projectedParticles.sort((a, b) => b.particle.rz - a.particle.rz);
+            
+            // Draw connections
+            ctx.strokeStyle = 'rgba(102, 126, 234, 0.1)';
+            ctx.lineWidth = 1;
+            
+            for (let i = 0; i < projectedParticles.length; i++) {
+                const p1 = projectedParticles[i];
+                
+                for (let j = i + 1; j < Math.min(i + 5, projectedParticles.length); j++) {
+                    const p2 = projectedParticles[j];
+                    
+                    const dx = p1.particle.rx - p2.particle.rx;
+                    const dy = p1.particle.ry - p2.particle.ry;
+                    const dz = p1.particle.rz - p2.particle.rz;
+                    const dist = Math.sqrt(dx * dx + dy * dy + dz * dz);
+                    
+                    if (dist < settings.connectionDistance) {
+                        const alpha = (1 - dist / settings.connectionDistance) * 0.3;
+                        ctx.strokeStyle = `hsla(${p1.particle.hue}, 80%, 60%, ${alpha})`;
+                        ctx.beginPath();
+                        ctx.moveTo(p1.x, p1.y);
+                        ctx.lineTo(p2.x, p2.y);
+                        ctx.stroke();
+                    }
+                }
+            }
+            
+            // Draw particles
+            projectedParticles.forEach(({ x, y, scale, particle }) => {
+                const size = particle.size * scale;
+                const alpha = scale * 0.8;
+                
+                ctx.fillStyle = `hsla(${particle.hue}, 80%, 60%, ${alpha})`;
+                ctx.beginPath();
+                ctx.arc(x, y, size, 0, Math.PI * 2);
+                ctx.fill();
+                
+                // Glow effect
+                ctx.shadowBlur = 15 * scale;
+                ctx.shadowColor = `hsla(${particle.hue}, 80%, 60%, ${alpha})`;
+                ctx.fill();
+                ctx.shadowBlur = 0;
+            });
+            
+            requestAnimationFrame(animate);
+        }
+        
+        // Event listeners
+        canvas.addEventListener('mousedown', (e) => {
+            mouse.down = true;
+            mouse.x = e.clientX;
+            mouse.y = e.clientY;
+        });
+        
+        canvas.addEventListener('mousemove', (e) => {
+            if (mouse.down) {
+                const dx = e.clientX - mouse.x;
+                const dy = e.clientY - mouse.y;
+                
+                targetRotation.y += dx * 0.005;
+                targetRotation.x += dy * 0.005;
+                
+                mouse.x = e.clientX;
+                mouse.y = e.clientY;
+            }
+        });
+        
+        canvas.addEventListener('mouseup', () => {
+            mouse.down = false;
+        });
+        
+        canvas.addEventListener('wheel', (e) => {
+            e.preventDefault();
+            zoom += e.deltaY * 0.001;
+            zoom = Math.max(0.5, Math.min(2, zoom));
+        });
+        
+        window.addEventListener('resize', () => {
+            width = canvas.width = window.innerWidth;
+            height = canvas.height = window.innerHeight;
+        });
+        
+        // Controls
+        document.getElementById('particleCount').addEventListener('input', (e) => {
+            settings.particleCount = parseInt(e.target.value);
+            document.getElementById('particleValue').textContent = settings.particleCount;
+            initParticles();
+        });
+        
+        document.getElementById('speed').addEventListener('input', (e) => {
+            settings.speed = parseFloat(e.target.value);
+            document.getElementById('speedValue').textContent = settings.speed.toFixed(1);
+        });
+        
+        document.getElementById('distance').addEventListener('input', (e) => {
+            settings.connectionDistance = parseInt(e.target.value);
+            document.getElementById('distValue').textContent = settings.connectionDistance;
+        });
+        
+        document.getElementById('wave').addEventListener('input', (e) => {
+            settings.waveIntensity = parseFloat(e.target.value);
+            document.getElementById('waveValue').textContent = settings.waveIntensity.toFixed(1);
+        });
+        
+        document.getElementById('randomize').addEventListener('click', () => {
+            particles.forEach(p => {
+                p.hue = Math.random() * 360;
+                p.vx = (Math.random() - 0.5) * 4;
+                p.vy = (Math.random() - 0.5) * 4;
+                p.vz = (Math.random() - 0.5) * 4;
+            });
+        });
+        
+        document.getElementById('explode').addEventListener('click', () => {
+            particles.forEach(p => {
+                const angle = Math.atan2(p.y, p.x);
+                const force = 20;
+                p.vx = Math.cos(angle) * force;
+                p.vy = Math.sin(angle) * force;
+                p.vz = (Math.random() - 0.5) * force;
+            });
+        });
+        
+        // Initialize
+        initParticles();
+        animate(0);
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/melting/melting.html b/melting/melting.html
new file mode 100644
index 00000000..c88c75ae
--- /dev/null
+++ b/melting/melting.html
@@ -0,0 +1,557 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Liquid Metal Morphing Sculpture</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            overflow: hidden;
+            background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
+            font-family: 'Segoe UI', system-ui, sans-serif;
+            cursor: grab;
+        }
+        
+        body:active {
+            cursor: grabbing;
+        }
+        
+        canvas {
+            display: block;
+            touch-action: none;
+        }
+        
+        .hud {
+            position: fixed;
+            top: 30px;
+            left: 30px;
+            background: rgba(0, 0, 0, 0.85);
+            backdrop-filter: blur(20px);
+            padding: 25px;
+            border-radius: 20px;
+            border: 2px solid rgba(255, 255, 255, 0.1);
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+            color: #fff;
+            min-width: 280px;
+            z-index: 100;
+        }
+        
+        .hud h2 {
+            font-size: 22px;
+            margin-bottom: 20px;
+            background: linear-gradient(135deg, #00f5ff, #0080ff, #ff00ff);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+            letter-spacing: 1px;
+        }
+        
+        .shape-selector {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 10px;
+            margin-bottom: 20px;
+        }
+        
+        .shape-btn {
+            padding: 12px;
+            background: linear-gradient(135deg, rgba(0, 245, 255, 0.1), rgba(255, 0, 255, 0.1));
+            border: 1px solid rgba(0, 245, 255, 0.3);
+            border-radius: 12px;
+            color: #00f5ff;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            font-size: 20px;
+            text-align: center;
+        }
+        
+        .shape-btn:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 10px 30px rgba(0, 245, 255, 0.3);
+            background: linear-gradient(135deg, rgba(0, 245, 255, 0.2), rgba(255, 0, 255, 0.2));
+        }
+        
+        .shape-btn.active {
+            background: linear-gradient(135deg, #00f5ff, #0080ff);
+            border-color: #00f5ff;
+            transform: scale(1.05);
+        }
+        
+        .control-section {
+            margin-top: 20px;
+        }
+        
+        .control-label {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 8px;
+            font-size: 13px;
+            color: #aaa;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+        
+        .control-value {
+            color: #00f5ff;
+            font-weight: 600;
+        }
+        
+        input[type="range"] {
+            width: 100%;
+            height: 6px;
+            background: linear-gradient(90deg, rgba(0, 245, 255, 0.2), rgba(255, 0, 255, 0.2));
+            outline: none;
+            border-radius: 3px;
+            margin-bottom: 15px;
+        }
+        
+        input[type="range"]::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            appearance: none;
+            width: 18px;
+            height: 18px;
+            background: linear-gradient(135deg, #00f5ff, #ff00ff);
+            cursor: pointer;
+            border-radius: 50%;
+            box-shadow: 0 0 10px rgba(0, 245, 255, 0.5);
+        }
+        
+        input[type="range"]::-moz-range-thumb {
+            width: 18px;
+            height: 18px;
+            background: linear-gradient(135deg, #00f5ff, #ff00ff);
+            cursor: pointer;
+            border-radius: 50%;
+            border: none;
+            box-shadow: 0 0 10px rgba(0, 245, 255, 0.5);
+        }
+        
+        .action-btn {
+            width: 100%;
+            padding: 14px;
+            margin-top: 10px;
+            background: linear-gradient(135deg, #00f5ff, #0080ff);
+            border: none;
+            border-radius: 12px;
+            color: #000;
+            font-weight: 700;
+            font-size: 14px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+        
+        .action-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 30px rgba(0, 245, 255, 0.4);
+        }
+        
+        .action-btn:active {
+            transform: translateY(0);
+        }
+        
+        .action-btn.secondary {
+            background: linear-gradient(135deg, #ff00ff, #ff0080);
+        }
+        
+        .info-panel {
+            position: fixed;
+            bottom: 30px;
+            right: 30px;
+            background: rgba(0, 0, 0, 0.85);
+            backdrop-filter: blur(20px);
+            padding: 20px;
+            border-radius: 15px;
+            border: 2px solid rgba(255, 255, 255, 0.1);
+            color: #fff;
+            max-width: 320px;
+            font-size: 13px;
+            line-height: 1.6;
+        }
+        
+        .info-panel strong {
+            color: #00f5ff;
+            display: block;
+            margin-bottom: 8px;
+            font-size: 14px;
+        }
+        
+        .badge {
+            display: inline-block;
+            padding: 4px 10px;
+            background: rgba(0, 245, 255, 0.2);
+            border: 1px solid rgba(0, 245, 255, 0.4);
+            border-radius: 6px;
+            font-size: 11px;
+            margin: 3px;
+            color: #00f5ff;
+        }
+    </style>
+</head>
+<body>
+    <canvas id="canvas"></canvas>
+    
+    <div class="hud">
+        <h2>🌊 LIQUID METAL</h2>
+        
+        <div class="shape-selector">
+            <button class="shape-btn active" data-shape="sphere">🔮</button>
+            <button class="shape-btn" data-shape="cube">📦</button>
+            <button class="shape-btn" data-shape="torus">🍩</button>
+            <button class="shape-btn" data-shape="cone">🔺</button>
+            <button class="shape-btn" data-shape="knot">🎀</button>
+            <button class="shape-btn" data-shape="helix">🌀</button>
+        </div>
+        
+        <div class="control-section">
+            <div class="control-label">
+                <span>Liquid Flow</span>
+                <span class="control-value" id="flowValue">5</span>
+            </div>
+            <input type="range" id="flow" min="0" max="10" value="5" step="0.5">
+            
+            <div class="control-label">
+                <span>Metallic</span>
+                <span class="control-value" id="metallicValue">8</span>
+            </div>
+            <input type="range" id="metallic" min="0" max="10" value="8" step="1">
+            
+            <div class="control-label">
+                <span>Rotation Speed</span>
+                <span class="control-value" id="rotationValue">5</span>
+            </div>
+            <input type="range" id="rotation" min="0" max="10" value="5" step="1">
+        </div>
+        
+        <button class="action-btn" id="randomize">🎲 Randomize</button>
+        <button class="action-btn secondary" id="explode">💥 Shatter</button>
+    </div>
+    
+    <div class="info-panel">
+        <strong>🎮 Interactive Controls</strong>
+        Drag to rotate • Scroll to zoom<br>
+        Real-time 3D rendering with dynamic lighting<br><br>
+        <div class="badge">WebGL</div>
+        <div class="badge">Physics</div>
+        <div class="badge">Shaders</div>
+        <div class="badge">60 FPS</div>
+    </div>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script>
+        let scene, camera, renderer, mesh, particles;
+        let mouse = { x: 0, y: 0, down: false, prevX: 0, prevY: 0 };
+        let autoRotate = true;
+        let targetRotation = { x: 0, y: 0 };
+        let currentRotation = { x: 0, y: 0 };
+        
+        let settings = {
+            shape: 'sphere',
+            flow: 5,
+            metallic: 8,
+            rotationSpeed: 5
+        };
+        
+        // Initialize Three.js
+        function init() {
+            scene = new THREE.Scene();
+            
+            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+            camera.position.z = 5;
+            
+            renderer = new THREE.WebGLRenderer({ 
+                canvas: document.getElementById('canvas'),
+                antialias: true,
+                alpha: true
+            });
+            renderer.setSize(window.innerWidth, window.innerHeight);
+            renderer.setPixelRatio(window.devicePixelRatio);
+            
+            // Lighting
+            const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
+            scene.add(ambientLight);
+            
+            const pointLight1 = new THREE.PointLight(0x00f5ff, 2, 100);
+            pointLight1.position.set(5, 5, 5);
+            scene.add(pointLight1);
+            
+            const pointLight2 = new THREE.PointLight(0xff00ff, 2, 100);
+            pointLight2.position.set(-5, -5, 5);
+            scene.add(pointLight2);
+            
+            const pointLight3 = new THREE.PointLight(0x0080ff, 1.5, 100);
+            pointLight3.position.set(0, 5, -5);
+            scene.add(pointLight3);
+            
+            // Create initial shape
+            createShape('sphere');
+            createParticles();
+            
+            // Event listeners
+            setupEventListeners();
+            
+            animate();
+        }
+        
+        function createShape(type) {
+            if (mesh) scene.remove(mesh);
+            
+            let geometry;
+            
+            switch(type) {
+                case 'sphere':
+                    geometry = new THREE.SphereGeometry(2, 64, 64);
+                    break;
+                case 'cube':
+                    geometry = new THREE.BoxGeometry(3, 3, 3, 32, 32, 32);
+                    break;
+                case 'torus':
+                    geometry = new THREE.TorusGeometry(1.5, 0.6, 32, 100);
+                    break;
+                case 'cone':
+                    geometry = new THREE.ConeGeometry(2, 3, 64);
+                    break;
+                case 'knot':
+                    geometry = new THREE.TorusKnotGeometry(1.5, 0.5, 128, 32);
+                    break;
+                case 'helix':
+                    const curve = new THREE.CatmullRomCurve3(
+                        Array.from({length: 50}, (_, i) => {
+                            const t = i / 50 * Math.PI * 4;
+                            return new THREE.Vector3(
+                                Math.cos(t) * 1.5,
+                                (i / 50 - 0.5) * 4,
+                                Math.sin(t) * 1.5
+                            );
+                        })
+                    );
+                    geometry = new THREE.TubeGeometry(curve, 128, 0.3, 16, false);
+                    break;
+            }
+            
+            const material = new THREE.MeshStandardMaterial({
+                color: 0xffffff,
+                metalness: settings.metallic / 10,
+                roughness: 0.2,
+                envMapIntensity: 1,
+                flatShading: false
+            });
+            
+            mesh = new THREE.Mesh(geometry, material);
+            scene.add(mesh);
+            
+            settings.shape = type;
+        }
+        
+        function createParticles() {
+            if (particles) scene.remove(particles);
+            
+            const geometry = new THREE.BufferGeometry();
+            const positions = [];
+            const colors = [];
+            
+            for (let i = 0; i < 2000; i++) {
+                const theta = Math.random() * Math.PI * 2;
+                const phi = Math.random() * Math.PI;
+                const radius = 3 + Math.random() * 2;
+                
+                positions.push(
+                    radius * Math.sin(phi) * Math.cos(theta),
+                    radius * Math.sin(phi) * Math.sin(theta),
+                    radius * Math.cos(phi)
+                );
+                
+                const color = new THREE.Color();
+                color.setHSL(0.5 + Math.random() * 0.3, 1, 0.5);
+                colors.push(color.r, color.g, color.b);
+            }
+            
+            geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
+            geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));
+            
+            const material = new THREE.PointsMaterial({
+                size: 0.05,
+                vertexColors: true,
+                transparent: true,
+                opacity: 0.6,
+                blending: THREE.AdditiveBlending
+            });
+            
+            particles = new THREE.Points(geometry, material);
+            scene.add(particles);
+        }
+        
+        function animate() {
+            requestAnimationFrame(animate);
+            
+            const time = Date.now() * 0.001;
+            
+            // Update mesh
+            if (mesh) {
+                const geometry = mesh.geometry;
+                const positions = geometry.attributes.position.array;
+                
+                for (let i = 0; i < positions.length; i += 3) {
+                    const x = positions[i];
+                    const y = positions[i + 1];
+                    const z = positions[i + 2];
+                    
+                    const distance = Math.sqrt(x * x + y * y + z * z);
+                    const wave = Math.sin(distance * 2 - time * 2) * 0.05 * (settings.flow / 5);
+                    
+                    positions[i] += wave * (x / distance);
+                    positions[i + 1] += wave * (y / distance);
+                    positions[i + 2] += wave * (z / distance);
+                }
+                
+                geometry.attributes.position.needsUpdate = true;
+                geometry.computeVertexNormals();
+                
+                // Rotation
+                if (autoRotate) {
+                    mesh.rotation.x += 0.001 * settings.rotationSpeed;
+                    mesh.rotation.y += 0.002 * settings.rotationSpeed;
+                } else {
+                    currentRotation.x += (targetRotation.x - currentRotation.x) * 0.1;
+                    currentRotation.y += (targetRotation.y - currentRotation.y) * 0.1;
+                    mesh.rotation.x = currentRotation.x;
+                    mesh.rotation.y = currentRotation.y;
+                }
+                
+                // Metallic shimmer
+                mesh.material.metalness = 0.6 + Math.sin(time * 2) * 0.2 * (settings.metallic / 10);
+            }
+            
+            // Update particles
+            if (particles) {
+                particles.rotation.x += 0.0005 * settings.rotationSpeed;
+                particles.rotation.y += 0.001 * settings.rotationSpeed;
+                
+                const positions = particles.geometry.attributes.position.array;
+                for (let i = 0; i < positions.length; i += 3) {
+                    const x = positions[i];
+                    const y = positions[i + 1];
+                    
+                    positions[i + 2] += Math.sin(time + x + y) * 0.01 * settings.flow;
+                }
+                particles.geometry.attributes.position.needsUpdate = true;
+            }
+            
+            renderer.render(scene, camera);
+        }
+        
+        function setupEventListeners() {
+            // Shape buttons
+            document.querySelectorAll('.shape-btn').forEach(btn => {
+                btn.addEventListener('click', () => {
+                    document.querySelectorAll('.shape-btn').forEach(b => b.classList.remove('active'));
+                    btn.classList.add('active');
+                    createShape(btn.dataset.shape);
+                });
+            });
+            
+            // Controls
+            document.getElementById('flow').addEventListener('input', (e) => {
+                settings.flow = parseFloat(e.target.value);
+                document.getElementById('flowValue').textContent = settings.flow;
+            });
+            
+            document.getElementById('metallic').addEventListener('input', (e) => {
+                settings.metallic = parseFloat(e.target.value);
+                document.getElementById('metallicValue').textContent = settings.metallic;
+                if (mesh) mesh.material.metalness = settings.metallic / 10;
+            });
+            
+            document.getElementById('rotation').addEventListener('input', (e) => {
+                settings.rotationSpeed = parseFloat(e.target.value);
+                document.getElementById('rotationValue').textContent = settings.rotationSpeed;
+            });
+            
+            // Action buttons
+            document.getElementById('randomize').addEventListener('click', () => {
+                const shapes = ['sphere', 'cube', 'torus', 'cone', 'knot', 'helix'];
+                const randomShape = shapes[Math.floor(Math.random() * shapes.length)];
+                document.querySelector(`[data-shape="${randomShape}"]`).click();
+                
+                settings.flow = Math.random() * 10;
+                settings.metallic = Math.random() * 10;
+                settings.rotationSpeed = Math.random() * 10;
+                
+                document.getElementById('flow').value = settings.flow;
+                document.getElementById('metallic').value = settings.metallic;
+                document.getElementById('rotation').value = settings.rotationSpeed;
+                
+                document.getElementById('flowValue').textContent = settings.flow.toFixed(1);
+                document.getElementById('metallicValue').textContent = settings.metallic.toFixed(1);
+                document.getElementById('rotationValue').textContent = settings.rotationSpeed.toFixed(1);
+            });
+            
+            document.getElementById('explode').addEventListener('click', () => {
+                if (mesh) {
+                    const positions = mesh.geometry.attributes.position.array;
+                    for (let i = 0; i < positions.length; i += 3) {
+                        const x = positions[i];
+                        const y = positions[i + 1];
+                        const z = positions[i + 2];
+                        const distance = Math.sqrt(x * x + y * y + z * z);
+                        
+                        positions[i] *= 1.5;
+                        positions[i + 1] *= 1.5;
+                        positions[i + 2] *= 1.5;
+                    }
+                    mesh.geometry.attributes.position.needsUpdate = true;
+                    
+                    setTimeout(() => createShape(settings.shape), 1000);
+                }
+            });
+            
+            // Mouse controls
+            window.addEventListener('mousedown', (e) => {
+                mouse.down = true;
+                mouse.prevX = e.clientX;
+                mouse.prevY = e.clientY;
+                autoRotate = false;
+            });
+            
+            window.addEventListener('mousemove', (e) => {
+                if (mouse.down) {
+                    const deltaX = e.clientX - mouse.prevX;
+                    const deltaY = e.clientY - mouse.prevY;
+                    
+                    targetRotation.y += deltaX * 0.01;
+                    targetRotation.x += deltaY * 0.01;
+                    
+                    mouse.prevX = e.clientX;
+                    mouse.prevY = e.clientY;
+                }
+            });
+            
+            window.addEventListener('mouseup', () => {
+                mouse.down = false;
+                setTimeout(() => { autoRotate = true; }, 2000);
+            });
+            
+            window.addEventListener('wheel', (e) => {
+                camera.position.z += e.deltaY * 0.01;
+                camera.position.z = Math.max(2, Math.min(10, camera.position.z));
+            });
+            
+            window.addEventListener('resize', () => {
+                camera.aspect = window.innerWidth / window.innerHeight;
+                camera.updateProjectionMatrix();
+                renderer.setSize(window.innerWidth, window.innerHeight);
+            });
+        }
+        
+        init();
+    </script>
+</body>
+</html>
\ No newline at end of file
