Update index.html

index.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>Dot Labs</title>
+  <title>Dot Labs | HF-compatible animated dust</title>
   <style>
     * { box-sizing: border-box; }
     body {
@@ -31,7 +31,8 @@
       border: 1px solid #1c1c1e;
       border-radius: 28px;
     }
-    canvas.grain {
+    img.grain {
+      object-fit: cover;
       position: absolute;
       inset: 0;
       width: 100%;
@@ -40,7 +41,7 @@
       pointer-events: none;
       display: block;
     }
-    .card > :not(canvas) { position: relative; z-index: 1; }
+    .card > :not(img.grain) { position: relative; z-index: 1; }
     .logo { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; }
     main { max-width: 580px; }
     h1 {
@@ -162,7 +163,7 @@
 </head>
 <body>
   <section class="card">
-    <canvas class="grain" aria-hidden="true"></canvas>
+    <img class="grain" src="dotlabs-animated-dust.gif" alt="" aria-hidden="true">
     <div class="logo">D●t Labs</div>
     <main>
       <h1>Intelligence<br>from the byte up.</h1>
@@ -199,189 +200,6 @@
       <div class="disclaimer">Dot Labs™ is not related in any way to OpenAI's Dot product nor SpaceXAI web domain.</div>
     </footer>
   </section>
-  <script>
-    (() => {
-      // Feel free to tune these; everything is native Canvas, no dependencies.
-      const SETTINGS = {
-        style: 'drift',
-        seed: 137,
-        opacity: 1.0,   // Grain visibility
-        size: 1.0,        // Overall dot size
-        speed: 1.0            // Animation speed; 0 = frozen
-      };
-      const card = document.querySelector('.card');
-      const canvas = document.querySelector('canvas.grain');
-      const ctx = canvas.getContext('2d', { alpha: true });
-      if (!ctx) return;
-      const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
-      const PI2 = Math.PI * 2;
-      const gaussian = (x) => Math.exp(-x*x * .5);
-      const clamp = (x, a=0, b=1) => Math.max(a, Math.min(b, x));
-      const fract = x => x - Math.floor(x);
-      let particles = [], width=0, height=0, dpr=1, frame=0, then=0, elapsed=0, active=true;
-
-      function rng(seed) {
-        return () => {
-          let t = seed += 0x6D2B79F5;
-          t = Math.imul(t ^ t >>> 15, t | 1);
-          t ^= t + Math.imul(t ^ t >>> 7, t | 61);
-          return ((t ^ t >>> 14) >>> 0) / 4294967296;
-        };
-      }
-
-      function concentration(x, y) {
-        if (SETTINGS.style === 'drift') {
-          return clamp(.28 + .34*x + .22*gaussian((x-.78)/.28)*gaussian((y-.43)/.47));
-        }
-        if (SETTINGS.style === 'nebula') {
-          const cloud = gaussian((x-.72)/.23)*gaussian((y-.41-.09*Math.sin(x*7))/.21);
-          const plume = gaussian((x-.53)/.29)*gaussian((y-.72)/.16);
-          return clamp(.055 + .88*cloud + .34*plume);
-        }
-        if (SETTINGS.style === 'eclipse') {
-          const r = Math.hypot((x-.72)/.43, (y-.48)/.60);
-          return clamp(.045 + .88*gaussian((r-.77)/.19));
-        }
-        const path = .80 - .53*x + .046*Math.sin(9*x);
-        return clamp(.07 + .89*gaussian((y-path)/.125) * (.35+.65*x));
-      }
-
-      // Larger dots progressively emerge across each pattern, without any
-      // solid gray gradient. Only individual particles carry color.
-      function sizeProgress(x, y) {
-        if (SETTINGS.style === 'eclipse') {
-          return clamp(.07 + .93*x);
-        }
-        if (SETTINGS.style === 'nebula') {
-          return clamp(.06 + .78*x + .17*y);
-        }
-        return clamp(.04 + .96*x);
-      }
-
-      function rebuild() {
-        const rect = card.getBoundingClientRect();
-        width = rect.width;
-        height = rect.height;
-        if (!width || !height) return;
-        dpr = Math.min(window.devicePixelRatio || 1, 2);
-        canvas.width = Math.round(width*dpr);
-        canvas.height = Math.round(height*dpr);
-        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-        const random = rng(SETTINGS.seed);
-        const area = width*height;
-        particles = [];
-        const count = Math.floor(area / (SETTINGS.style === 'nebula' ? 13 : 15));
-        for (let i=0; i<count; i++) {
-          const x=random(), y=random();
-          const c = concentration(x,y);
-          if (random()>c) continue;
-          const growth = sizeProgress(x,y);
-          const isFine = random() < .76;
-          let radius;
-          let alpha;
-          if (isFine) {
-            radius=(.13 + .15*random() + .12*growth)*SETTINGS.size;
-            alpha=(.17 + .34*random()) * (.71+.29*c);
-          } else {
-            // A few larger grains emerge gently, but all remain subpixel-to-1px dust.
-            radius=(.19 + .66*Math.pow(growth,1.9)) * (.47+.53*random())*SETTINGS.size;
-            alpha=(.18 + .42*random())*(.70+.30*c);
-          }
-          // Occasional slightly larger isolated grains in the denser region.
-          if (random()<.008 && growth>.60) radius*=1.18;
-          const shade = Math.floor(139 + random()*75);
-          particles.push({x,y,radius,alpha,shade,phase:random()*PI2,
-            velocity:.42+random()*1.25,depth:random(),offset:0});
-        }
-        // The quiet microdust layer fills dark negative space at tiny sizes.
-        const fineCount = Math.floor(area / 21);
-        for (let i=0; i<fineCount; i++) {
-          const x=random(), y=random();
-          const density = concentration(x,y);
-          if (random() > .42+.36*density) continue;
-          const shade=Math.floor(140+random()*73);
-          particles.push({x,y,radius:(.12+.16*random())*SETTINGS.size,
-            alpha:(.16+.19*random())* (.67+.33*density),
-            shade,phase:random()*PI2,velocity:.24+random()*.75,
-            depth:random(),offset:0});
-        }
-        draw(0);
-      }
-
-      function position(p, t) {
-        const x=p.x, y=p.y;
-        if (SETTINGS.style === 'drift') {
-          // Low, steady breeze; different velocity at every dust depth.
-          return [fract(x+t*(3.5+4.2*p.velocity)/width),
-            y + 1.6*Math.sin(t*.49+p.phase)/height];
-        }
-        if (SETTINGS.style === 'nebula') {
-          // A barely rotating, breathing cloud of gray points.
-          const dx=(x-.68)*width, dy=(y-.48)*height;
-          const theta=t*(.003+.006*p.velocity);
-          const cos=Math.cos(theta), sin=Math.sin(theta);
-          return [.68 + (dx*cos-dy*sin+2.1*Math.sin(t*.31+p.phase))/width,
-            .48 + (dx*sin+dy*cos+2.0*Math.cos(t*.33+p.phase))/height];
-        }
-        if (SETTINGS.style === 'eclipse') {
-          // Subtle orbital travel around the ring; no fog or glow.
-          const dx=(x-.72)*width, dy=(y-.48)*height;
-          const angle=t*(.009+.006*p.velocity);
-          const rx=Math.cos(angle)*dx-Math.sin(angle)*dy*.78;
-          const ry=Math.sin(angle)*dx/ .78+Math.cos(angle)*dy;
-          return [.72+rx/width,.48+ry/height];
-        }
-        // Stream moves diagonally upward along a curved path.
-        const nx=fract(x+t*(4.0+5.5*p.velocity)/width);
-        const oldPath=.80-.53*x+.046*Math.sin(9*x);
-        const newPath=.80-.53*nx+.046*Math.sin(9*nx);
-        return [nx, newPath + (y-oldPath) + 1.8*Math.sin(t*.50+p.phase)/height];
-      }
-
-      function draw(t) {
-        ctx.clearRect(0,0,width,height);
-        for (const p of particles) {
-          const [nx,ny]=position(p,t);
-          if (nx<0 || nx>1 || ny<0 || ny>1) continue;
-          const shimmer=.91+.09*Math.sin(t*.67+p.phase);
-          const a=clamp(p.alpha*shimmer*SETTINGS.opacity);
-          ctx.fillStyle=`rgba(${p.shade},${p.shade},${p.shade},${a})`;
-          ctx.beginPath();
-          ctx.arc(nx*width,ny*height,p.radius,0,PI2);
-          ctx.fill();
-        }
-      }
 
-      function stop() {
-        cancelAnimationFrame(frame);
-        frame=0;
-        then=0;
-      }
-      function tick(now) {
-        if (!active || reducedMotion.matches) { stop(); return; }
-        if (then) elapsed+=Math.min((now-then)/1000,.05)*SETTINGS.speed;
-        then=now;
-        // Max ~25fps to keep the denser microdust field lightweight.
-        if (!tick.drawn || now-tick.drawn>=40) {
-          draw(elapsed);
-          tick.drawn=now;
-        }
-        frame=requestAnimationFrame(tick);
-      }
-      function updateRunning() {
-        stop();
-        if (active && !reducedMotion.matches) frame=requestAnimationFrame(tick);
-        else draw(elapsed);
-      }
-      document.addEventListener('visibilitychange',()=> {
-        active=!document.hidden;
-        updateRunning();
-      });
-      reducedMotion.addEventListener('change', updateRunning);
-      new ResizeObserver(rebuild).observe(card);
-      rebuild();
-      updateRunning();
-    })();
-  </script>
 </body>
-</html>
+</html>