<!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>“Create a "Interactive Data Lens" component. Use Three.js for 3D WebGL rendering, Inter font. Implement custom GLSL shaders for visual effects. Apply layered shadows, hover transitions. Color palette: #ffffff, #0f172a, #64748b, #4f46e5. Layout: Flexbox, full-viewport sizing. Interactivity: mouse tracking, continuous animation loop, responsive resize handling.”