<!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>“Create a "NEXT_GEN // Tech Summit 2026" component. Implement custom GLSL shaders for visual effects. Color palette: #ff3366, #999. Layout: Flexbox, full-viewport sizing. Interactivity: mouse tracking, continuous animation loop, responsive resize handling.”