Spaces:

wop
/

Boom

Running

App Files Files Community

wop commited on 7 days ago

Commit

bf84fea

verified ·

1 Parent(s): 3a51fb5

Update index.html

Browse files

Files changed (1) hide show

index.html +236 -19

index.html CHANGED Viewed

@@ -1,19 +1,236 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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); // bit farther for better view of propagation
+    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);
+    // ─── Particles with staggered birth ───
+    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++){
+        // start clustered near center
+        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;
+        // outward direction + speed scaling with distance (faster outer particles)
+        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;
+        // KEY CHANGE: stagger birth strongly — central particles first, outer later
+        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));
+    // ─── Animation & Sequence ───
+    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>