<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>NEXT_GEN // Tech Summit 2026</title> <style> :root { --accent: #ff3366; --gray: #999; } body, html { margin: 0; padding: 0; background: #000; color: white; overflow: hidden; font-family: 'Inter', -apple-system, sans-serif; } canvas { display: block; position: fixed; top: 0; left: 0; } .ui { position: relative; z-index: 100; height: 100vh; width: 100%; padding: clamp(30px, 6vw, 80px); display: flex; flex-direction: column; justify-content: space-between; box-sizing: border-box; pointer-events: none; } /* Responsive Grid Lines */ .grid { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: space-around; pointer-events: none; opacity: 0.1; } .line { width: 1px; background: white; height: 100%; } .event-title { font-size: clamp(3.5rem, 14vw, 10rem); font-weight: 900; line-height: 0.8; margin: 0; letter-spacing: -0.06em; text-transform: uppercase; } .subtitle { font-size: clamp(1rem, 3vw, 2rem); color: var(--accent); margin: 15px 0; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;} .footer { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 30px; } .footer-info h2 { font-size: clamp(1.5rem, 4vw, 3rem); margin: 0; font-weight: 700; line-height: 1; } .footer-info p { font-size: clamp(1rem, 2.5vw, 1.8rem); margin: 5px 0; color: var(--gray); font-weight: 400; } .event-meta { text-align: right; text-transform: uppercase; font-size: 0.8rem; line-height: 1.8; letter-spacing: 0.15em; border-left: 2px solid var(--accent); padding-left: 20px; } @media (max-width: 768px) { .footer { flex-direction: column; align-items: flex-start; } .event-meta { text-align: left; border-left: none; border-top: 2px solid var(--accent); padding: 10px 0 0 0; } } </style> </head> <body> <div class="grid"> <div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div> </div> <div class="ui"> <header> <p class="subtitle">Global Innovation Conference</p> <h1 class="event-title">Next<br>Gen_26</h1> </header> <div class="footer"> <div class="footer-info"> <h2>The Future of WebGL</h2> <p>Silicon Valley // July 12-14</p> <div style="border: 1px solid white; display: inline-block; padding: 8px 20px; border-radius: 50px; margin-top: 20px; font-size: 0.9rem;"> SECURE ACCESS </div> </div> <div class="event-meta"> <strong>Keynote Speakers</strong><br> A.I. & Visual Computing<br> Haptic Environments<br> Cloud Native Graphics </div> </div> </div> <script type="importmap"> { "imports": { "three": "https://unpkg.com/three@0.160.0/build/three.module.js" } } </script> <script type="module"> import * as THREE from 'three'; let width = window.innerWidth; let height = window.innerHeight; const mouse = new THREE.Vector2(); const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000); camera.position.z = 35; const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(width, height); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); document.body.appendChild(renderer.domElement); let rt = new THREE.WebGLRenderTarget(width * 2, height * 2); // --- 3D GRADIENT SHADER --- const gradMat = new THREE.ShaderMaterial({ uniforms: { uTime: { value: 0 } }, vertexShader: `varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }`, fragmentShader: ` varying vec2 vUv; uniform float uTime; void main() { vec3 blue = vec3(0.1, 0.4, 1.0); vec3 purple = vec3(0.6, 0.1, 0.9); float p = vUv.x + sin(uTime * 0.5 + vUv.y * 3.0) * 0.3; gl_FragColor = vec4(mix(blue, purple, p), 1.0); } ` }); // Objects const curve = new THREE.CatmullRomCurve3([ new THREE.Vector3(-10, -25, -5), new THREE.Vector3(5, -5, 0), new THREE.Vector3(-5, 10, -2), new THREE.Vector3(15, 25, -10) ]); const tube = new THREE.Mesh(new THREE.TubeGeometry(curve, 100, 3, 32, false), gradMat); scene.add(tube); const diamond = new THREE.Mesh(new THREE.OctahedronGeometry(5, 0), gradMat); diamond.position.set(15, 12, -8); scene.add(diamond); // --- GLASS REFRACTION SHADER (High Distortion + Chromatic Aberration) --- const glassMat = new THREE.ShaderMaterial({ uniforms: { uScene: { value: rt.texture }, uRefraction: { value: 0.45 }, uMouse: { value: new THREE.Vector2(0,0) } }, vertexShader: ` varying vec3 vNormal; varying vec4 vScreenPos; void main() { vNormal = normalize(normalMatrix * normal); vec4 mvPos = modelViewMatrix * vec4(position, 1.0); vScreenPos = projectionMatrix * mvPos; gl_Position = vScreenPos; } `, fragmentShader: ` uniform sampler2D uScene; uniform float uRefraction; varying vec3 vNormal; varying vec4 vScreenPos; void main() { vec2 uv = (vScreenPos.xy / vScreenPos.w) * 0.5 + 0.5; // Extreme Refraction with RGB Split float r = texture2D(uScene, uv + vNormal.xy * uRefraction * 1.05).r; float g = texture2D(uScene, uv + vNormal.xy * uRefraction).g; float b = texture2D(uScene, uv + vNormal.xy * uRefraction * 0.95).b; float fresnel = pow(1.0 - dot(vNormal, vec3(0,0,1)), 2.5); vec3 color = vec3(r, g, b) + (fresnel * 0.4); gl_FragColor = vec4(color, 1.0); } ` }); // BUBBLES const bubbles = []; const createBubble = (s, x, y, z) => { const b = new THREE.Mesh(new THREE.SphereGeometry(1, 64, 64), glassMat); b.scale.setScalar(s); b.position.set(x, y, z); scene.add(b); bubbles.push(b); }; createBubble(8, -5, 0, 15); createBubble(4, 12, 12, 12); createBubble(3, -15, -10, 10); // INTERACTIVITY window.addEventListener('mousemove', (e) => { mouse.x = (e.clientX / width) * 2 - 1; mouse.y = -(e.clientY / height) * 2 + 1; }); window.addEventListener('resize', () => { width = window.innerWidth; height = window.innerHeight; camera.aspect = width / height; camera.updateProjectionMatrix(); renderer.setSize(width, height); rt.setSize(width * 2, height * 2); }); function animate(t) { const time = t * 0.001; gradMat.uniforms.uTime.value = time; // Parallax targetPos(); bubbles.forEach(b => b.visible = false); renderer.setRenderTarget(rt); renderer.render(scene, camera); bubbles.forEach(b => b.visible = true); renderer.setRenderTarget(null); renderer.render(scene, camera); diamond.rotation.y += 0.01; tube.rotation.z = Math.sin(time * 0.2) * 0.1; requestAnimationFrame(animate); } function targetPos() { // Smoothly follow mouse bubbles.forEach((b, i) => { b.position.x += (mouse.x * 5 - b.position.x) * 0.05; b.position.y += (mouse.y * 5 - b.position.y) * 0.05; }); } animate(0); </script> </body> </html>

Code & assets

Design System