make demo content expandable

Author: g-harel

demo/content.ts

@@ -27,7 +27,6 @@ import {genFromOptions} from "../internal/gen";
 import {BlobOptions} from "../public/blobs";
 import {interpolateBetween, interpolateBetweenSmooth} from "../internal/animate/interpolate";
 import {divide} from "../internal/animate/prepare";
-import blobs from "../public/legacy";
 
 const makePoly = (pointCount: number, radius: number, center: Coord): Point[] => {
     const angle = (2 * Math.PI) / pointCount;
@@ -132,6 +131,7 @@ addCanvas(2, (ctx, width, height, animate) => {
     const startPeriod = Math.E * 1000;
     const endPeriod = Math.PI * 1000;
 
+    // TODO animate handle length.
     animate((frameTime) => {
         const startPercentage = calcBouncePercentage(startPeriod, timingFunctions.ease, frameTime);
         const startAngle = split(startPercentage, -45, +45);

demo/example.ts

@@ -1,4 +1,5 @@
 import {CanvasKeyframe, canvasPath} from "../public/animate";
+import {colors} from "./internal/layout";
 
 // TODO add click me prompt before clicked.
 
@@ -29,7 +30,7 @@ const ctx = canvas.getContext("2d")!;
 const animation = canvasPath();
 const renderFrame = () => {
     ctx.clearRect(0, 0, size, size);
-    ctx.fillStyle = "#ccc";
+    ctx.fillStyle = colors.highlight;
     ctx.fill(animation.renderFrame());
     requestAnimationFrame(renderFrame);
 };

demo/index.html

@@ -24,26 +24,45 @@
                 height: 6rem;
             }
 
-            header nav a {
+            header nav a, .how-it-works {
                 color: #aaa;
                 display: inline-block;
                 font-size: 0.7rem;
                 font-weight: 700;
                 padding: 0.5rem;
                 text-decoration: none;
+                text-transform: uppercase;
+            }
+
+            main {
+                align-items: center;
+                display: flex;
+                flex-direction: column;
+            }
+
+            .example {
+                padding: 2.5rem 2rem;
+            }
+
+            .how-it-works {
+                cursor: pointer;
+                transform: rotate(-2deg) translateY(-1px);
                 user-select: none;
             }
 
+            .how-it-works.hidden {
+                display: none;
+            }
+
             .container {
                 align-items: center;
                 display: flex;
                 flex-direction: column;
-                margin: 0 0 20vh;
-                padding: 0 1rem;
+                padding: 0 1rem 20vh;
             }
 
-            .container .example {
-                padding: 2.5rem 0 8rem;
+            .container:not(.open) {
+                display: none;
             }
 
             .container .title {
@@ -117,8 +136,10 @@
                 >
             </nav>
         </header>
-        <main class="container">
+        <main>
             <div class="example"></div>
+            <div class="how-it-works">How it works</div>
+            <div class="container"></div>
         </main>
         <script src="./example.ts"></script>
         <script src="./content.ts"></script>

demo/internal/layout.ts

@@ -32,6 +32,17 @@ const cells: Cell[][] = [];
 const containerElement = document.querySelector(".container");
 if (!containerElement) throw "missing container";
 
+const howItWorksElement = document.querySelector(".how-it-works");
+if (!howItWorksElement) throw "missing container";
+
+const reveal = () => {
+    containerElement.classList.add("open");
+    howItWorksElement.classList.add("hidden");
+    redraw();
+};
+howItWorksElement.addEventListener("click", reveal);
+if (document.location.hash) setTimeout(reveal);
+
 export const sizes = (): {width: number; pt: number} => {
     const sectionStyle = window.getComputedStyle(
         (containerElement.lastChild as any) || document.body,