Update index.html

index.html

@@ -49,7 +49,7 @@
             position: relative;
             overflow: hidden;
             cursor: none; /* Hide default cursor */
-            perspective: 1000px;
+            perspective: 1000px; /* Enable 3D transforms for children */
         }
 
         /* Subtle Animated Background Gradient */
@@ -82,26 +82,57 @@
             padding: 2rem;
             max-width: 900px;
             width: 90%;
-            animation: slideInUp 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s forwards;
+            /* Updated animation with 3D rotation */
+            animation: slideInUp 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s forwards;
             opacity: 0;
-            transform: translateY(30px);
+            transform-style: preserve-3d; /* Ensure children respect 3D space */
+            /* Initial transform moved to keyframe */
         }
 
+        /* Enhanced Entry Animation */
         @keyframes slideInUp {
-            to {
+             0% {
+                 opacity: 0;
+                 /* Start further down, slightly rotated back */
+                 transform: translateY(60px) rotateX(-15deg) translateZ(-50px);
+            }
+             100% {
                 opacity: 1;
-                transform: translateY(0);
+                /* End in the final position with no rotation */
+                transform: translateY(0) rotateX(0deg) translateZ(0);
             }
         }
 
+        .title-container {
+            position: relative; /* Needed for absolute positioning of canvas */
+            display: inline-block; /* Keep it tight around the h1 */
+            margin-bottom: 0.2rem;
+        }
+
+        /* Canvas for the 3D Glass Ball */
+        #glass-ball-canvas {
+            position: absolute;
+            top: 50%; /* Center vertically */
+            left: 50%; /* Center horizontally */
+            width: 180px; /* Adjust size as needed */
+            height: 180px; /* Adjust size as needed */
+             transform: translate(-50%, -65%) translateZ(20px); /* Center and bring slightly forward, adjust Y offset */
+            z-index: 1; /* Place it behind the text (adjust if needed) */
+            pointer-events: none; /* Allow clicks to pass through */
+            opacity: 0; /* Start hidden */
+            animation: fadeIn 2s ease 1.5s forwards; /* Fade in after main animation */
+        }
+
         h1 {
             font-size: clamp(3rem, 10vw, 6rem);
             font-weight: 700;
             letter-spacing: -0.05em;
-            margin-bottom: 0.2rem;
+            /* margin-bottom: 0.2rem; Removed, handled by title-container */
             color: var(--text-color);
             text-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
             transition: color var(--transition-speed) ease, text-shadow var(--transition-speed) ease;
+            position: relative; /* Needed for z-index stacking */
+            z-index: 2; /* Ensure text is above the canvas */
         }
 
         .subtitle {
@@ -111,12 +142,16 @@
             margin-bottom: 2.5rem;
             letter-spacing: 0.05em;
             transition: color var(--transition-speed) ease;
+            position: relative; /* Stacking context */
+            z-index: 2;
         }
 
         .models-section {
             margin-bottom: 3rem;
             opacity: 0;
             animation: fadeIn 1s ease 1s forwards;
+            position: relative; /* Stacking context */
+            z-index: 2;
         }
 
         .models-section h2 {
@@ -146,15 +181,18 @@
             border-radius: 15px;
             border: 1px solid var(--border-color);
             transition: all var(--transition-speed) cubic-bezier(0.25, 0.46, 0.45, 0.94);
-            transform: scale(1);
+            transform: scale(1) translateZ(0); /* Prepare for 3D hover */
+            position: relative; /* Stacking context */
+            z-index: 2;
         }
 
         .model-badge:hover {
             background-color: var(--hover-bg);
             color: var(--accent-color);
             border-color: var(--accent-color);
-            transform: scale(1.05) translateY(-2px);
-            box-shadow: 0 4px 15px rgba(0, 255, 255, 0.2);
+            /* Subtle 3D lift effect */
+            transform: scale(1.05) translateY(-2px) translateZ(10px);
+            box-shadow: 0 6px 20px rgba(0, 255, 255, 0.25);
         }
 
         .playgrounds-section {
@@ -164,6 +202,8 @@
             flex-direction: column; /* Stack links vertically on mobile */
             align-items: center;
             gap: 1rem;
+            position: relative; /* Stacking context */
+            z-index: 2;
         }
 
         @media (min-width: 600px) {
@@ -187,6 +227,7 @@
             overflow: hidden;
             transition: all var(--transition-speed) ease;
             z-index: 1;
+            transform: translateZ(0); /* Prepare for 3D hover */
         }
 
         .playground-link::before {
@@ -204,8 +245,9 @@
         .playground-link:hover {
             color: var(--bg-color);
             border-color: var(--accent-color);
-            transform: translateY(-3px);
-            box-shadow: 0 5px 20px rgba(0, 255, 255, 0.3);
+            /* Subtle 3D lift */
+            transform: translateY(-3px) translateZ(15px);
+            box-shadow: 0 8px 25px rgba(0, 255, 255, 0.35);
         }
 
         .playground-link:hover::before {
@@ -225,20 +267,18 @@
 
         .glow {
             position: fixed;
-             /* Position set by JS */
             left: 0;
             top: 0;
             width: 800px;
             height: 800px;
             background: radial-gradient(circle at center, var(--glow-color) 0%, rgba(0, 0, 0, 0) 60%);
-            border-radius: 50%; /* Ensure it's circular for centering */
+            border-radius: 50%;
             pointer-events: none;
             opacity: 0;
-            transition: opacity 0.4s ease; /* Only transition opacity */
-            /* transform: translate(-50%, -50%); NO - JS handles transform */
+            transition: opacity 0.4s ease;
             z-index: 1;
             filter: blur(10px);
-            will-change: transform, opacity; /* Optimize animation */
+            will-change: transform, opacity;
         }
 
         body:hover .glow {
@@ -247,7 +287,6 @@
 
         .cursor {
             position: fixed;
-            /* Position set by JS */
             left: 0;
             top: 0;
             width: 25px;
@@ -255,29 +294,24 @@
             border: 2px solid var(--accent-color);
             border-radius: 50%;
             pointer-events: none;
-            transition: background-color 0.2s ease, border-color 0.2s ease, border-width 0.2s ease, width 0.2s ease, height 0.2s ease; /* Smooth style changes, transform handled by JS loop */
-            /* transform: translate(-50%, -50%); NO - JS handles transform */
+            transition: background-color 0.2s ease, border-color 0.2s ease, border-width 0.2s ease, width 0.2s ease, height 0.2s ease;
             z-index: 9999;
             mix-blend-mode: difference;
             background-color: transparent;
-            will-change: transform; /* Optimize animation */
+            will-change: transform;
         }
 
-        /* Cursor interaction states (applied via JS) */
         .cursor.hover-link {
-            /* Scale handled by JS */
             background-color: var(--accent-color);
             border-color: transparent;
         }
 
         .cursor.hover-text {
-            /* Scale handled by JS */
              border-width: 4px;
              border-color: rgba(255,255,255, 0.5);
         }
 
         .cursor.clicking {
-            /* Scale handled by JS */
             background-color: rgba(255,255,255,0.3);
         }
 
@@ -287,6 +321,13 @@
 
         /* Responsive adjustments */
         @media (max-width: 768px) {
+             /* Adjust canvas size/position on smaller screens if needed */
+            #glass-ball-canvas {
+                width: 120px;
+                height: 120px;
+                transform: translate(-50%, -60%) translateZ(15px); /* Adjust Y offset and Z */
+            }
+
             h1 {
                 letter-spacing: -0.03em;
             }
@@ -302,12 +343,21 @@
              .playground-link {
                  padding: 0.7em 1.5em;
              }
-             /* Reduce glow size on smaller screens */
              .glow {
                  width: 500px;
                  height: 500px;
              }
         }
+         @media (max-width: 480px) {
+             #glass-ball-canvas {
+                width: 100px;
+                height: 100px;
+                 transform: translate(-50%, -55%) translateZ(10px); /* Further adjust */
+            }
+             h1 {
+                 font-size: clamp(2.5rem, 10vw, 4rem); /* Slightly smaller H1 on very small screens */
+             }
+         }
 
     </style>
 </head>
@@ -318,7 +368,13 @@
 
     <!-- Main Content -->
     <div class="container">
-        <h1>Loki.AI</h1>
+
+        <!-- Title container for positioning canvas -->
+        <div class="title-container">
+             <!-- Canvas for 3D Glass Ball -->
+             <canvas id="glass-ball-canvas"></canvas>
+             <h1>Loki.AI</h1>
+        </div>
         <p class="subtitle">By Parth Sadaria</p>
 
         <div class="models-section">
@@ -347,7 +403,11 @@
         </div>
     </div>
 
+    <!-- Include Three.js Library -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+
     <script>
+        // --- Existing Cursor Logic ---
         const cursor = document.querySelector('.cursor');
         const glow = document.querySelector('.glow');
         const hoverables = document.querySelectorAll('a, .model-badge');
@@ -360,51 +420,61 @@
         let glowX = 0;
         let glowY = 0;
 
-        // Adjust speed for desired smoothness (lower = smoother, more 'lag')
         const cursorSpeed = 0.15;
         const glowSpeed = 0.1;
 
-        // Store current scale factor for smooth transitions
         let currentCursorScale = 1;
         const baseCursorScale = 1;
         const hoverLinkCursorScale = 1.5;
         const hoverTextCursorScale = 0.7;
         const clickCursorScale = 0.6;
 
-        // Pre-calculate half-widths/heights ONCE (assuming they don't change)
-        // Note: If elements resize dynamically, might need recalculation
-        let cursorHalfWidth = cursor.offsetWidth / 2;
-        let cursorHalfHeight = cursor.offsetHeight / 2;
-        let glowHalfWidth = glow.offsetWidth / 2;
-        let glowHalfHeight = glow.offsetHeight / 2;
-
-        // Recalculate on resize just in case
-        window.addEventListener('resize', () => {
-             cursorHalfWidth = cursor.offsetWidth / 2;
-             cursorHalfHeight = cursor.offsetHeight / 2;
-             glowHalfWidth = glow.offsetWidth / 2;
-             glowHalfHeight = glow.offsetHeight / 2;
-        });
+        let cursorHalfWidth = 12.5; // Initial guess, will be updated
+        let cursorHalfHeight = 12.5;
+        let glowHalfWidth = 400; // Initial guess
+        let glowHalfHeight = 400;
+
+        function updateElementSizes() {
+            cursorHalfWidth = cursor.offsetWidth / 2;
+            cursorHalfHeight = cursor.offsetHeight / 2;
+            // Only update glow size if the element exists and is rendered
+            if (glow && glow.offsetWidth > 0) {
+                glowHalfWidth = glow.offsetWidth / 2;
+                glowHalfHeight = glow.offsetHeight / 2;
+            } else {
+                // Fallback or default if not rendered yet (might happen on first frame)
+                glowHalfWidth = window.innerWidth > 768 ? 400 : 250;
+                glowHalfHeight = window.innerWidth > 768 ? 400 : 250;
+            }
+        }
 
+        window.addEventListener('resize', updateElementSizes);
+        // Initial size calculation after elements are potentially rendered
+        window.addEventListener('load', updateElementSizes);
+        updateElementSizes(); // Call once early
 
-        function animate() {
-            // Lerp for smooth following
+
+        function animateCursor() {
             cursorX += (mouseX - cursorX) * cursorSpeed;
             cursorY += (mouseY - cursorY) * cursorSpeed;
             glowX += (mouseX - glowX) * glowSpeed;
             glowY += (mouseY - glowY) * glowSpeed;
 
-            // Apply transform for positioning and scaling
-            // Calculate the top-left position needed to center the element
             const cursorTranslateX = cursorX - cursorHalfWidth;
             const cursorTranslateY = cursorY - cursorHalfHeight;
             const glowTranslateX = glowX - glowHalfWidth;
             const glowTranslateY = glowY - glowHalfHeight;
 
-            cursor.style.transform = `translate(${cursorTranslateX}px, ${cursorTranslateY}px) scale(${currentCursorScale})`;
-            glow.style.transform = `translate(${glowTranslateX}px, ${glowTranslateY}px)`; // Glow doesn't scale dynamically here
+            // Use requestAnimationFrame for cursor/glow as well for consistency
+            // Check if elements exist before trying to style them
+            if (cursor) {
+                cursor.style.transform = `translate(${cursorTranslateX}px, ${cursorTranslateY}px) scale(${currentCursorScale})`;
+            }
+            if (glow) {
+                glow.style.transform = `translate(${glowTranslateX}px, ${glowTranslateY}px)`;
+            }
 
-            requestAnimationFrame(animate);
+            // requestAnimationFrame(animateCursor); // This will be called by the main loop
         }
 
         document.addEventListener('mousemove', (e) => {
@@ -412,25 +482,23 @@
             mouseY = e.clientY;
         });
 
-        // Start the animation loop
-        animate();
-
         function updateCursorState() {
             let targetScale = baseCursorScale;
             let isHoveringLink = false;
             let isHoveringText = false;
 
-            // Check hover states directly (more robust than relying on mouseenter/leave timing with lerp)
             hoverables.forEach(el => {
-                const rect = el.getBoundingClientRect();
-                if (mouseX >= rect.left && mouseX <= rect.right && mouseY >= rect.top && mouseY <= rect.bottom) {
-                    isHoveringLink = true;
+                // Ensure element is visible before getting rect
+                if (el.offsetParent !== null) {
+                    const rect = el.getBoundingClientRect();
+                    if (mouseX >= rect.left && mouseX <= rect.right && mouseY >= rect.top && mouseY <= rect.bottom) {
+                        isHoveringLink = true;
+                    }
                 }
             });
 
             textElements.forEach(el => {
-                // Avoid text hover if already hovering a link defined in hoverables
-                 if (!isHoveringLink) {
+                 if (!isHoveringLink && el.offsetParent !== null) {
                     const rect = el.getBoundingClientRect();
                     if (mouseX >= rect.left && mouseX <= rect.right && mouseY >= rect.top && mouseY <= rect.bottom) {
                         isHoveringText = true;
@@ -438,46 +506,157 @@
                  }
             });
 
-            // Apply styles and target scale based on state
-             cursor.classList.toggle('hover-link', isHoveringLink);
-             cursor.classList.toggle('hover-text', isHoveringText && !isHoveringLink); // Only text hover if not link hover
+            // Check if cursor exists before toggling classes
+             if (cursor) {
+                cursor.classList.toggle('hover-link', isHoveringLink);
+                cursor.classList.toggle('hover-text', isHoveringText && !isHoveringLink);
 
-            if (isHoveringLink) {
-                targetScale = hoverLinkCursorScale;
-            } else if (isHoveringText) {
-                targetScale = hoverTextCursorScale;
-            }
+                if (isHoveringLink) {
+                    targetScale = hoverLinkCursorScale;
+                } else if (isHoveringText) {
+                    targetScale = hoverTextCursorScale;
+                }
 
-            // Handle clicking state separately
-            if (cursor.classList.contains('clicking')) {
-                // Optionally combine scales or prioritize click scale
-                targetScale = clickCursorScale; // Click scale overrides others
-            }
+                if (cursor.classList.contains('clicking')) {
+                    targetScale = clickCursorScale;
+                }
+             }
 
-            // Smoothly transition scale (optional, can also rely on CSS transition if preferred)
-            // currentCursorScale += (targetScale - currentCursorScale) * 0.2; // Lerp scale
-            // Simpler: Just set the target scale and let JS/CSS handle visual update
             currentCursorScale = targetScale;
-
         }
 
-        // Update state on mouse move for accuracy
         document.addEventListener('mousemove', updateCursorState);
 
-
-        // Add/Remove clicking class
         document.addEventListener('mousedown', () => {
-            cursor.classList.add('clicking');
-            updateCursorState(); // Re-evaluate state immediately on click
+            if(cursor) cursor.classList.add('clicking');
+            updateCursorState();
         });
 
         document.addEventListener('mouseup', () => {
-            cursor.classList.remove('clicking');
-            updateCursorState(); // Re-evaluate state immediately on release
+            if(cursor) cursor.classList.remove('clicking');
+            updateCursorState();
         });
 
-        // Initial state check in case mouse enters window over an element
-        updateCursorState();
+        updateCursorState(); // Initial check
+
+        // --- New Three.js Logic for Glass Ball ---
+        let scene, camera, renderer, sphere, pointLight;
+
+        function initThreeJS() {
+            const canvas = document.getElementById('glass-ball-canvas');
+            if (!canvas || !THREE) return; // Ensure canvas and THREE exist
+
+            // Scene
+            scene = new THREE.Scene();
+
+            // Camera
+            const canvasRect = canvas.getBoundingClientRect();
+            // Adjust FOV based on desired sphere appearance size within canvas
+            camera = new THREE.PerspectiveCamera(50, canvasRect.width / canvasRect.height, 0.1, 100);
+             // Position camera to view the sphere centered at (0,0,0)
+             camera.position.z = 3;
+
+            // Renderer
+            renderer = new THREE.WebGLRenderer({
+                canvas: canvas,
+                alpha: true, // Transparent background
+                antialias: true
+             });
+            renderer.setSize(canvasRect.width, canvasRect.height);
+            renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); // Optimize for high DPI displays
+
+            // Geometry
+            const geometry = new THREE.SphereGeometry(1, 32, 32); // Radius 1, detail 32x32
+
+            // Material - Physical material for glass effect
+            const material = new THREE.MeshPhysicalMaterial({
+                color: 0xffffff, // Base color (can be white for clear glass)
+                metalness: 0.1,  // Low metalness for non-metals
+                roughness: 0.05, // Very low roughness for smooth glass
+                transmission: 0.95, // High transmission (opacity/translucency)
+                transparent: true,
+                opacity: 0.9,   // Overall opacity (can be slightly less than 1)
+                ior: 1.52, // Index of Refraction for glass (~1.52)
+                thickness: 0.5, // Simulates thickness for refraction effects
+                // clearcoat: 1.0, // Optional: add a clear coat layer
+                // clearcoatRoughness: 0.1, // Roughness of the clear coat
+                 envMapIntensity: 1 // How much environment affects reflection (needs env map for best results, but works ok without)
+            });
+
+            // Mesh
+            sphere = new THREE.Mesh(geometry, material);
+            scene.add(sphere);
+
+            // Lighting
+            const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); // Soft white light
+            scene.add(ambientLight);
+
+            pointLight = new THREE.PointLight(var(--accent-color), 2, 10); // Cyan light, intensity 2, distance 10
+            pointLight.position.set(1.5, 2, 2); // Position the light
+            scene.add(pointLight);
+
+            // Optional: Add another subtle light for more dimension
+            const pointLight2 = new THREE.PointLight(0xffffff, 0.7, 10);
+            pointLight2.position.set(-2, -1, 1.5);
+            scene.add(pointLight2);
+
+            // Start animation loop (combined with cursor loop)
+            animateCombined();
+
+            // Handle Resize
+            window.addEventListener('resize', onWindowResize, false);
+        }
+
+        function onWindowResize() {
+             const canvas = document.getElementById('glass-ball-canvas');
+             if (!canvas || !camera || !renderer) return;
+
+             const canvasRect = canvas.getBoundingClientRect(); // Use current rect
+             const newWidth = canvasRect.width;
+             const newHeight = canvasRect.height;
+
+             // Update camera aspect ratio
+            camera.aspect = newWidth / newHeight;
+            camera.updateProjectionMatrix();
+
+            // Update renderer size
+            renderer.setSize(newWidth, newHeight);
+            renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+
+            // Update cursor/glow element sizes too
+            updateElementSizes();
+        }
+
+        // Combined Animation Loop
+        function animateCombined() {
+             requestAnimationFrame(animateCombined);
+
+            // Update Cursor & Glow position/state
+            animateCursor(); // Updates cursor/glow positions via lerp
+            updateCursorState(); // Updates cursor style/scale based on hover
+
+            // Update Three.js Scene (if initialized)
+            if (sphere && scene && camera && renderer) {
+                // Subtle rotation
+                 sphere.rotation.y += 0.003;
+                 sphere.rotation.x += 0.001;
+
+                 // Maybe subtle light movement or reaction to mouse (more complex)
+                 // Example: light follows mouse slightly on x-axis
+                 // pointLight.position.x = 1.5 + (mouseX / window.innerWidth - 0.5) * 2;
+
+                // Render the 3D scene
+                renderer.render(scene, camera);
+            }
+        }
+
+        // Initialize Three.js after the DOM is ready
+        // Use setTimeout to ensure layout is somewhat stable, especially for canvas size
+        // Alternatively, use window.onload if dependencies are complex
+        document.addEventListener('DOMContentLoaded', () => {
+            // Small delay to help ensure canvas has dimensions
+            setTimeout(initThreeJS, 100);
+        });
 
     </script>
 </body>