Merge pull request #110 from borgbackup/index2-tweaks-2

index2: nav size, dimmer chunks, Animate start button

Author: ThomasWaldmann

index2.html

@@ -139,7 +139,7 @@
 }
 
 header.top nav a {
-  font-size: 0.85rem;
+  font-size: 1.00rem;
   font-weight: bold;
   letter-spacing: 0.04em;
 }
@@ -741,8 +741,8 @@ <h1 data-hero>Backups with <em>deduplication</em>, <em>compression</em> and <em>
   <div class="cta-row" data-hero>
     <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="false"
-            title="Calm the background animation">Stop</button>
+    <button class="btn" id="stopBtn" type="button" aria-pressed="true"
+            title="Start the background animation">Animate</button>
   </div>
   <noscript>
     <div class="hero-fallback">
@@ -1126,7 +1126,6 @@ <h2>Trusted by sysadmins, hoarders and the merely paranoid.</h2>
      archives for a decade. It is boring, in the best possible way.</p>
   <div class="counters">
     <div class="counter"><div class="num"><span aria-hidden="true"><span data-count="10">0</span>+</span><span class="sr-only">10+</span></div><div class="what">years of development</div></div>
-    <div class="counter"><div class="num"><span aria-hidden="true"><span data-count="4">0</span></span><span class="sr-only">4</span></div><div class="what">compression algorithms</div></div>
     <div class="counter"><div class="num"><span aria-hidden="true"><span data-count="100">0</span>%</span><span class="sr-only">100%</span></div><div class="what">free software, BSD licensed</div></div>
     <div class="counter"><div class="num"><span aria-hidden="true"><span data-count="0">7</span></span><span class="sr-only">0</span></div><div class="what">trust required in your server</div></div>
   </div>
@@ -1275,7 +1274,7 @@ <h2>Trusted by sysadmins, hoarders and the merely paranoid.</h2>
 const CHUNKS = 48;
 const chunkMesh = new THREE.InstancedMesh(
   new THREE.BoxGeometry(0.22, 0.22, 0.22),
-  new THREE.MeshBasicMaterial({ color: 0x22d045 }),
+  new THREE.MeshBasicMaterial({ color: 0x189230 }),   // 30% dimmer than the cube green
   CHUNKS
 );
 chunkMesh.instanceMatrix.setUsage(THREE.DynamicDrawUsage);
@@ -1300,7 +1299,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: 0, starFade: 0 };
+const state = { progress: 0, mouseX: 0, mouseY: 0, calm: 1, starFade: 1 };
 
 window.addEventListener('pointermove', (e) => {
   state.mouseX = (e.clientX / window.innerWidth - 0.5) * 2;
@@ -1433,22 +1432,20 @@ <h2>Trusted by sysadmins, hoarders and the merely paranoid.</h2>
   renderer.render(scene, camera);
 }
 
-if (reduced) {
-  render();                       // single static frame
-} else {
-  renderer.setAnimationLoop(render);
-}
+// boot in the stopped/dark state: draw one empty frame, then leave the loop
+// parked until the visitor clicks Animate (the button wakes it)
+render();
 
 /* --- stop button: wind the scene down in two stages, then to nothing ---
    stop:   cube + chunks recede (as before), then the starfield fades out and
            the render loop is parked, leaving no animated background at all.
    resume: restart the loop, fade the stars back, then bring the cube back. */
 const stopBtn = document.getElementById('stopBtn');
-let stopped = false;
+let stopped = true;   // boot in the stopped/dark state; Animate spins it up
 let windTween = null;
 stopBtn.addEventListener('click', () => {
   stopped = !stopped;
-  stopBtn.textContent = stopped ? 'Resume' : 'Stop';
+  stopBtn.textContent = stopped ? 'Animate' : 'Stop';
   stopBtn.setAttribute('aria-pressed', String(stopped));
   if (reduced) {
     state.calm = state.starFade = stopped ? 1 : 0;