| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> |
| <title>Clear Outward Explosion - Low Lag</title> |
| <style> |
| body, html { margin:0; padding:0; width:100%; height:100%; background:#000; overflow:hidden; font-family:system-ui,sans-serif; } |
| #canvas-container { position:absolute; inset:0; z-index:1; } |
| #flash { |
| position:absolute; inset:0; background:linear-gradient(#ff450033, #8b000022); opacity:0; |
| z-index:5; pointer-events:none; transition:opacity 0.18s ease-out; |
| } |
| #flash.active { opacity:0.65; } |
| #flash.fade-out { opacity:0; transition:opacity 2s ease-out; } |
| #title-container { |
| position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:10; pointer-events:none; |
| } |
| #title { |
| color:#ffcc00; font-size:12vw; font-weight:900; text-transform:uppercase; letter-spacing:0.25em; |
| text-shadow:0 0 25px #ff6600aa, 0 0 60px #ff3300aa; |
| opacity:0; transform:scale(2.8); filter:blur(30px); |
| transition:all 0.8s cubic-bezier(0.15,1.4,0.3,1.1); |
| } |
| #title.revealed { opacity:0.92; transform:scale(1); filter:blur(0); } |
| #replay { |
| position:absolute; bottom:90px; left:50%; transform:translateX(-50%); |
| padding:18px 55px; background:transparent; color:#ffeb3b; border:1px solid #ff980055; |
| border-radius:50px; font-size:18px; letter-spacing:4px; text-transform:uppercase; cursor:pointer; |
| z-index:20; opacity:0; pointer-events:none; transition:all 0.9s; |
| } |
| #replay.visible { opacity:1; pointer-events:auto; } |
| #replay:hover { color:#fff; border-color:#ff9800; background:rgba(255,152,0,0.2); } |
| </style> |
| </head> |
| <body> |
|
|
| <div id="canvas-container"></div> |
| <div id="flash"></div> |
| <div id="title-container"><h1 id="title">BOOM</h1></div> |
| <button id="replay">RETRY</button> |
|
|
| <script type="importmap"> |
| { |
| "imports": { |
| "three": "https://cdn.jsdelivr.net/npm/three@0.168.0/build/three.module.js", |
| "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.168.0/examples/jsm/" |
| } |
| } |
| </script> |
|
|
| <script type="module"> |
| import * as THREE from 'three'; |
| import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'; |
| import { RenderPass } from 'three/addons/postprocessing/RenderPass.js'; |
| import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js'; |
| |
| const container = document.getElementById('canvas-container'); |
| const flashEl = document.getElementById('flash'); |
| const titleEl = document.getElementById('title'); |
| const replayBtn = document.getElementById('replay'); |
| |
| const scene = new THREE.Scene(); |
| scene.background = new THREE.Color(0x0a0014); |
| |
| const camera = new THREE.PerspectiveCamera(60, innerWidth/innerHeight, 0.5, 4000); |
| camera.position.set(0, 0, 14); |
| |
| const renderer = new THREE.WebGLRenderer({antialias:false, powerPreference:"high-performance"}); |
| renderer.setSize(innerWidth, innerHeight); |
| renderer.setPixelRatio(Math.min(devicePixelRatio, 1.3)); |
| container.appendChild(renderer.domElement); |
| |
| const composer = new EffectComposer(renderer); |
| composer.addPass(new RenderPass(scene, camera)); |
| |
| const bloom = new UnrealBloomPass(new THREE.Vector2(innerWidth, innerHeight), 0.7, 0.2, 0.85); |
| bloom.threshold = 0.7; |
| composer.addPass(bloom); |
| |
| |
| const COUNT = 2000; |
| const geo = new THREE.BufferGeometry(); |
| const pos = new Float32Array(COUNT*3); |
| const vel = new Float32Array(COUNT*3); |
| const col = new Float32Array(COUNT*3); |
| const siz = new Float32Array(COUNT); |
| const birth = new Float32Array(COUNT); |
| |
| const palette = [ |
| new THREE.Color(0xff6600), |
| new THREE.Color(0xff3300), |
| new THREE.Color(0xff9900), |
| new THREE.Color(0xffcc00), |
| new THREE.Color(0xff4422) |
| ]; |
| |
| for(let i = 0; i < COUNT; i++){ |
| |
| pos[i*3 ] = (Math.random() - 0.5) * 0.6; |
| pos[i*3+1] = (Math.random() - 0.5) * 0.6; |
| pos[i*3+2] = (Math.random() - 0.5) * 0.6; |
| |
| const dist = Math.hypot(pos[i*3], pos[i*3+1], pos[i*3+2]) || 0.01; |
| |
| |
| let dx = pos[i*3 ] / dist; |
| let dy = pos[i*3+1] / dist; |
| let dz = pos[i*3+2] / dist; |
| const speed = 18 + dist * 45 + Math.random() * 15; |
| vel[i*3 ] = dx * speed; |
| vel[i*3+1] = dy * speed; |
| vel[i*3+2] = dz * speed; |
| |
| const c = palette[Math.floor(Math.random() * palette.length)]; |
| const bright = 0.65 + Math.random() * 0.35; |
| col[i*3] = c.r * bright; |
| col[i*3+1] = c.g * bright; |
| col[i*3+2] = c.b * bright; |
| |
| siz[i] = 9 + Math.random() * 14; |
| |
| |
| birth[i] = - (dist * 1.2 + Math.random() * 0.5); |
| } |
| |
| geo.setAttribute('position', new THREE.BufferAttribute(pos, 3)); |
| geo.setAttribute('velocity', new THREE.BufferAttribute(vel, 3)); |
| geo.setAttribute('color', new THREE.BufferAttribute(col, 3)); |
| geo.setAttribute('size', new THREE.BufferAttribute(siz, 1)); |
| geo.setAttribute('birthTime', new THREE.BufferAttribute(birth, 1)); |
| |
| const mat = new THREE.ShaderMaterial({ |
| uniforms: { uTime: {value:0} }, |
| vertexShader: ` |
| attribute vec3 velocity; |
| attribute vec3 color; |
| attribute float size; |
| attribute float birthTime; |
| varying vec3 vColor; |
| varying float vAlpha; |
| uniform float uTime; |
| void main(){ |
| vColor = color; |
| float age = uTime - birthTime; |
| if(age < 0.0){ gl_Position=vec4(10000.0); vAlpha=0.0; return; } |
| |
| float t = clamp(age * 1.3, 0.0, 1.0); |
| float eased = 1.0 - pow(1.0 - t, 2.5); // quick start, then decelerate |
| |
| vec3 p = position + velocity * eased * 0.9; |
| |
| float scale = 1.0 + (1.0 - eased) * 10.0; // bigger at birth |
| |
| vec4 mv = modelViewMatrix * vec4(p, 1.0); |
| gl_PointSize = size * scale * (280.0 / -mv.z); |
| gl_Position = projectionMatrix * mv; |
| |
| vAlpha = 1.0 - eased * eased; // smooth fade |
| } |
| `, |
| fragmentShader: ` |
| varying vec3 vColor; |
| varying float vAlpha; |
| void main(){ |
| vec2 c = gl_PointCoord - 0.5; |
| float d = length(c); |
| if(d > 0.5) discard; |
| gl_FragColor = vec4(vColor, (1.0 - d*d*1.8) * vAlpha * 0.95); |
| } |
| `, |
| transparent: true, |
| blending: THREE.AdditiveBlending, |
| depthWrite: false |
| }); |
| |
| scene.add(new THREE.Points(geo, mat)); |
| |
| |
| const clock = new THREE.Clock(); |
| let time = 0; |
| |
| function resetExplosion() { |
| time = 0; |
| titleEl.classList.remove('revealed'); |
| flashEl.classList.remove('active','fade-out'); |
| replayBtn.classList.remove('visible'); |
| const bt = geo.attributes.birthTime.array; |
| for(let i = 0; i < COUNT; i++) { |
| const dist = Math.hypot(pos[i*3], pos[i*3+1], pos[i*3+2]) || 0.01; |
| bt[i] = - (dist * 1.2 + Math.random() * 0.5); |
| } |
| geo.attributes.birthTime.needsUpdate = true; |
| } |
| |
| function explode() { |
| resetExplosion(); |
| |
| setTimeout(() => { |
| flashEl.classList.add('active'); |
| bloom.strength = 1.3; |
| |
| setTimeout(() => flashEl.classList.add('fade-out'), 500); |
| |
| setTimeout(() => { |
| bloom.strength = 0.55; |
| titleEl.classList.add('revealed'); |
| setTimeout(() => replayBtn.classList.add('visible'), 200); |
| }, 70); |
| }, 30); |
| } |
| |
| function animate() { |
| requestAnimationFrame(animate); |
| time += clock.getDelta(); |
| mat.uniforms.uTime.value = time; |
| |
| if(time > 3.5) bloom.strength = 0.55 + Math.sin(time * 1.1) * 0.1; |
| |
| composer.render(); |
| } |
| |
| animate(); |
| explode(); |
| |
| replayBtn.addEventListener('click', explode); |
| |
| window.addEventListener('resize', () => { |
| camera.aspect = innerWidth / innerHeight; |
| camera.updateProjectionMatrix(); |
| renderer.setSize(innerWidth, innerHeight); |
| composer.setSize(innerWidth, innerHeight); |
| }); |
| </script> |
| </body> |
| </html> |
