Merge pull request #115 from borgbackup/engage

index2.html: "Engage!" warp-drive intro

Author: ThomasWaldmann

index2.html

@@ -750,7 +750,7 @@ <h1 data-hero>Backups with <em>deduplication</em>, <em>compression</em> and <em>
     <a class="btn solid" href="#install">Install Borg</a>
     <a class="btn" href="#demo">Watch the demo</a>
     <button class="btn" id="stopBtn" type="button" aria-pressed="true"
-            title="Start the background animation">Animate</button>
+            title="Engage the warp drive">Engage!</button>
   </div>
   <noscript>
     <div class="hero-fallback">
@@ -1197,7 +1197,8 @@ <h2>Trusted by sysadmins, hoarders and the merely paranoid.</h2>
 const scene = new THREE.Scene();
 scene.fog = new THREE.FogExp2(0x020503, 0.012);
 
-const camera = new THREE.PerspectiveCamera(50, 1, 0.1, 200);
+const BASE_FOV = 50;
+const camera = new THREE.PerspectiveCamera(BASE_FOV, 1, 0.1, 200);
 camera.position.set(0, 0, 15);
 
 scene.add(new THREE.AmbientLight(0x18301c, 1.4));
@@ -1260,8 +1261,23 @@ <h2>Trusted by sysadmins, hoarders and the merely paranoid.</h2>
   starPos.set([v.x, v.y, v.z], s * 3);
 }
 starGeo.setAttribute('position', new THREE.BufferAttribute(starPos, 3));
+// soft circular sprite so the points render as round dots instead of squares
+// (white, so it still takes the material's colour tint)
+const starSprite = (() => {
+  const sz = 64, c = document.createElement('canvas');
+  c.width = c.height = sz;
+  const ctx = c.getContext('2d');
+  const g = ctx.createRadialGradient(sz / 2, sz / 2, 0, sz / 2, sz / 2, sz / 2);
+  g.addColorStop(0.0, 'rgba(255,255,255,1)');
+  g.addColorStop(0.5, 'rgba(255,255,255,0.92)');
+  g.addColorStop(1.0, 'rgba(255,255,255,0)');
+  ctx.fillStyle = g;
+  ctx.fillRect(0, 0, sz, sz);
+  return new THREE.CanvasTexture(c);
+})();
 const stars = new THREE.Points(starGeo, new THREE.PointsMaterial({
-  color: 0x7fdb91, size: 0.45, sizeAttenuation: true, transparent: true, opacity: 0.7
+  color: 0x7fdb91, size: 0.45, sizeAttenuation: true, transparent: true, opacity: 0.7,
+  map: starSprite, depthWrite: false
 }));
 scene.add(stars);
 
@@ -1294,7 +1310,7 @@ <h2>Trusted by sysadmins, hoarders and the merely paranoid.</h2>
 /* --- scroll-driven state --- */
 /* calm:     0 = full animation, 1 = cube gone, chunks stopped, stars only
    starFade: 0 = stars at full brightness, 1 = stars gone (no animation left) */
-const state = { progress: 0, mouseX: 0, mouseY: 0, calm: 1, starFade: 1 };
+const state = { progress: 0, mouseX: 0, mouseY: 0, calm: 1, starFade: 1, warp: 1, starWhite: 0 };
 
 window.addEventListener('pointermove', (e) => {
   state.mouseX = (e.clientX / window.innerWidth - 0.5) * 2;
@@ -1336,13 +1352,16 @@ <h2>Trusted by sysadmins, hoarders and the merely paranoid.</h2>
   camera.aspect = w / h;
   camera.updateProjectionMatrix();
   // pull the camera back on narrow/portrait screens so the cube fits the width
-  const halfTan = Math.tan(THREE.MathUtils.degToRad(camera.fov / 2)) * camera.aspect;
+  const halfTan = Math.tan(THREE.MathUtils.degToRad(BASE_FOV / 2)) * camera.aspect;
   state.baseZ = Math.max(15, 4.6 / halfTan);
 };
 window.addEventListener('resize', resize);
 resize();
 
 const timer = new THREE.Timer();
+const starScratch = new THREE.Vector3();   // reused when respawning wrapped stars
+const starBaseColor = new THREE.Color(0x7fdb91);   // cruise colour (matches the material)
+const starWarpColor = new THREE.Color(0xffffff);   // full-warp white
 
 function render() {
   timer.update();
@@ -1357,20 +1376,42 @@ <h2>Trusted by sysadmins, hoarders and the merely paranoid.</h2>
 
   // stars drift past the camera — a slow cruise through space
   // (a touch faster when calm, where the starfield is all there is)
-  const starDrift = (1.2 + calm * 2.4) * dt;
+  // state.warp multiplies the speed for the "Engage!" warp-drive burst
+  const starDrift = (1.2 + calm * 2.4) * state.warp * dt;
   const sp = starGeo.attributes.position;
   for (let s = 0; s < starCount; s++) {
     let z = sp.getZ(s) + starDrift;
-    if (z > 40) z -= 140;                 // wrap from behind the camera to deep space
+    if (z > 40) {
+      z -= 140;                           // wrap from behind the camera to deep space
+      // re-randomize the lateral position on each wrap so the finite field
+      // never visibly repeats — otherwise it tiles every 140 units, which at
+      // warp speed cycles ~3x in the burst and reads as a pulse
+      do { starScratch.randomDirection().multiplyScalar(40 + Math.random() * 60); }
+      while (Math.hypot(starScratch.x, starScratch.y) < 6);
+      sp.setX(s, starScratch.x);
+      sp.setY(s, starScratch.y);
+    }
     sp.setZ(s, z);
   }
   sp.needsUpdate = true;
   // barely-there lateral sway; bounded so the wrap plane stays behind the camera
   stars.rotation.y = Math.sin(t * 0.05) * 0.04;
   // second wind-down stage: once the cube is gone, the starfield fades to nothing
-  stars.material.opacity = 0.7 * (1 - state.starFade);
   stars.visible = state.starFade < 0.999;
 
+  // warp drive: stars swell, brighten to white at full warp, then dim back —
+  // and the lens punches outward so the field rushes past. warpT tracks the
+  // warp curve (0 at cruise, 1 at full warp), so brightness ramps up while
+  // accelerating, holds at white through the constant phase, and fades on decel
+  const warpT = Math.min(1, (state.warp - 1) / 69);
+  stars.material.size = 0.45 + warpT * 1.0;
+  // colour follows its own track (starWhite): white the instant we engage,
+  // held through warp, greening only on deceleration
+  stars.material.color.copy(starBaseColor).lerp(starWarpColor, state.starWhite);
+  stars.material.opacity = Math.min(1, 0.7 * (1 - state.starFade) + warpT * 0.5);
+  const warpFov = BASE_FOV + warpT * 28;
+  if (Math.abs(camera.fov - warpFov) > 0.01) { camera.fov = warpFov; camera.updateProjectionMatrix(); }
+
   // lattice: home position pushed along explode direction by scroll
   if (cubeGroup.visible) {
     for (let k = 0; k < COUNT; k++) {
@@ -1441,7 +1482,7 @@ <h2>Trusted by sysadmins, hoarders and the merely paranoid.</h2>
 let windTween = null;
 stopBtn.addEventListener('click', () => {
   stopped = !stopped;
-  stopBtn.textContent = stopped ? 'Animate' : 'Stop';
+  stopBtn.textContent = stopped ? 'Engage!' : 'Stop';
   stopBtn.setAttribute('aria-pressed', String(stopped));
   if (reduced) {
     state.calm = state.starFade = stopped ? 1 : 0;
@@ -1451,19 +1492,32 @@ <h2>Trusted by sysadmins, hoarders and the merely paranoid.</h2>
   if (windTween) windTween.kill();
   if (stopped) {
     windTween = gsap.timeline()
-      .to(state, { calm: 1, duration: 2.8, ease: 'power2.inOut' })
+      .to(state, { warp: 1, duration: 0.6, ease: 'power2.out' }, 0)   // drop out of warp if mid-burst
+      .to(state, { starWhite: 0, duration: 0.6, ease: 'power2.out' }, 0)   // and back to green
+      .to(state, { calm: 1, duration: 2.8, ease: 'power2.inOut' }, 0)
       .to(state, { starFade: 1, duration: 1.6, ease: 'power2.inOut',
                    onComplete: () => renderer.setAnimationLoop(null) });
   } else {
-    renderer.setAnimationLoop(render);   // wake the loop before reversing
+    renderer.setAnimationLoop(render);   // wake the loop before engaging
+    state.warp = 1;
+    state.starWhite = 1;                  // stars flash to white the instant we engage
     windTween = gsap.timeline()
-      .to(state, { starFade: 0, duration: 1.0, ease: 'power2.out' })
-      .to(state, { calm: 0, duration: 2.8, ease: 'power2.inOut' });
+      // stars snap in (already white), then the warp drive winds up — accelerating hard…
+      .to(state, { starFade: 0, duration: 0.4, ease: 'power1.out' }, 0)
+      .to(state, { warp: 70, duration: 2.0, ease: 'power3.in' }, 0)
+      // …holds at full warp (constant speed)…
+      .to(state, { warp: 70, duration: 2.0 })
+      // …then decelerates back to a normal cruise
+      .to(state, { warp: 1, duration: 2.0, ease: 'power2.out' })
+      // stars stay white through accel + cruise, then green back down over the decel
+      .to(state, { starWhite: 0, duration: 2.0, ease: 'power2.out' }, 4)
+      // dropping out of warp, the Borg cube reassembles into the familiar scene
+      .to(state, { calm: 0, duration: 2.4, ease: 'power2.inOut' }, '-=1.5');
   }
 });
 
 // debugging/testing handle (this page is a prototype)
-window.__borg = { state, drag, cubeGroup, renderer };
+window.__borg = { state, drag, cubeGroup, camera, renderer };
 
 /* ================================================================
    GSAP — choreography