<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Interactive Data Lens</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> <style> :root { --card-white: #ffffff; --text-dark: #0f172a; --text-gray: #64748b; --accent-color: #4f46e5; } body { margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f1f5f9; font-family: 'Inter', sans-serif; } .card { width: 420px; background: var(--card-white); border-radius: 32px; overflow: hidden; box-shadow: 0 40px 80px -15px rgba(0, 0, 0, 0.12); } #webgl-container { width: 100%; height: 260px; position: relative; background: #fff; cursor: none; /* Hide cursor to let the glass act as the pointer */ } .content { padding: 32px; } h2 { margin: 0 0 10px 0; font-size: 24px; font-weight: 700; color: var(--text-dark); letter-spacing: -0.03em; } p { margin: 0 0 24px 0; font-size: 16px; line-height: 1.6; color: var(--text-gray); } .btn { display: block; background-color: var(--accent-color); color: white; padding: 16px; border-radius: 14px; text-decoration: none; font-weight: 600; text-align: center; transition: all 0.3s ease; } .btn:hover { background-color: #4338ca; transform: translateY(-2px); box-shadow: 0 10px 20px rgba(79, 70, 229, 0.2); } </style> </head> <body> <div class="card"> <div id="webgl-container"></div> <div class="content"> <h2>Exploration & Visualization</h2> <p>Hover over the data field to activate the neural lens and inspect individual data points.</p> <a href="#" class="btn">Explore All Data</a> </div> </div> <script id="fragmentShader" type="x-shader/x-fragment"> uniform float uTime; uniform vec2 uMouse; uniform vec2 uResolution; uniform float uHover; // 0.0 when away, 1.0 when over float hash(vec2 p) { return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453); } void main() { vec2 uv = gl_FragCoord.xy / uResolution.xy; float aspect = uResolution.x / uResolution.y; vec2 p = uv; p.x *= aspect; vec2 m = uMouse; m.x *= aspect; float dist = distance(p, m); float radius = 0.28 * uHover; // Lens disappears when not hovering vec2 sampleUv = uv; // --- Spherical Glass Distortion --- if (dist < radius && uHover > 0.1) { float normDist = dist / radius; float distortion = pow(normDist, 2.2); sampleUv = uMouse + (uv - uMouse) * distortion; } // --- Grid Setup --- float gridScale = 22.0; vec2 scaledUv = sampleUv * vec2(gridScale * aspect, gridScale); vec2 gridId = floor(scaledUv); vec2 gridFract = fract(scaledUv); // --- Random Independent Animation --- float seed = hash(gridId); float speed = 0.6 + seed * 1.4; float randCycle = sin(uTime * speed + (seed * 15.0)); vec3 blue = vec3(0.23, 0.51, 0.96); vec3 orange = vec3(0.98, 0.45, 0.09); vec3 purple = vec3(0.55, 0.36, 0.96); vec3 baseGray = vec3(0.92, 0.94, 0.97); vec3 targetColor; if (seed > 0.66) targetColor = blue; else if (seed > 0.33) targetColor = orange; else targetColor = purple; float shimmer = smoothstep(-0.4, 0.9, randCycle); vec3 color = mix(baseGray, targetColor, shimmer); float d = length(gridFract - 0.5); float mask = smoothstep(0.22, 0.12, d); vec3 finalColor = mix(vec3(1.0), color, mask); // --- Lens Effects --- if (dist < radius && uHover > 0.1) { // Specular Shine float shine = smoothstep(0.12, 0.0, distance(p, m + vec2(-0.08, 0.08))); finalColor += shine * 0.2; // Lens Rim float edge = smoothstep(radius - 0.015, radius, dist); finalColor = mix(finalColor, vec3(0.75, 0.8, 0.9), edge * 0.5); // Subtle inner glow finalColor += (1.0 - smoothstep(0.0, radius, dist)) * 0.05; } gl_FragColor = vec4(finalColor, 1.0); } </script> <script id="vertexShader" type="x-shader/x-vertex"> void main() { gl_Position = vec4(position, 1.0); } </script> <script> const container = document.getElementById('webgl-container'); const scene = new THREE.Scene(); const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1); const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(container.clientWidth, container.clientHeight); container.appendChild(renderer.domElement); const uniforms = { uTime: { value: 0 }, uResolution: { value: new THREE.Vector2(container.clientWidth, container.clientHeight) }, uMouse: { value: new THREE.Vector2(0.5, 0.5) }, uHover: { value: 0.0 } }; const geometry = new THREE.PlaneGeometry(2, 2); const material = new THREE.ShaderMaterial({ uniforms: uniforms, vertexShader: document.getElementById('vertexShader').textContent, fragmentShader: document.getElementById('fragmentShader').textContent }); const mesh = new THREE.Mesh(geometry, material); scene.add(mesh); // Interaction Logic container.addEventListener('mousemove', (e) => { const rect = container.getBoundingClientRect(); const x = (e.clientX - rect.left) / rect.width; const y = 1.0 - (e.clientY - rect.top) / rect.height; // WebGL Y is inverted // Smoothly transition the lens position uniforms.uMouse.value.x = x; uniforms.uMouse.value.y = y; uniforms.uHover.value = 1.0; }); container.addEventListener('mouseleave', () => { uniforms.uHover.value = 0.0; }); function animate(time) { uniforms.uTime.value = time * 0.001; renderer.render(scene, camera); requestAnimationFrame(animate); } window.addEventListener('resize', () => { renderer.setSize(container.clientWidth, container.clientHeight); uniforms.uResolution.value.set(container.clientWidth, container.clientHeight); }); requestAnimationFrame(animate); </script> </body> </html>

Code & assets

Design System