@wavegrid/canvas 0.1.1 → 0.2.1

package/LICENSE

@@ -1,7 +1,20 @@
-All Rights Reserved.
+The San Francisco License (SF License)
 
-Copyright (c) 2024 Interweb, Inc.
+Copyright (c) 2026 Interweb, Inc.
 
-This software and associated documentation files (the "Software") may not be
-reproduced, distributed, or used without express written permission from
-Interweb, Inc.
+Permission is granted, free of charge, to any person or organization
+obtaining a copy of this software and associated documentation files
+(the "Software"), to use, copy, modify, merge, publish, distribute,
+sublicense, and/or sell copies of the Software, and to permit others
+to whom the Software is furnished to do the same.
+
+The only requirement is that this license notice and copyright notice
+shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES, OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT, OR OTHERWISE, ARISING FROM, OUT OF, OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/esm/server.js

@@ -3,7 +3,16 @@ import { WebSocket, WebSocketServer } from 'ws';
 import { getCanvasHTML } from './ui';
 const PORT = parseInt(process.env.PORT || '3001', 10);
 const SIMULATOR_URL = process.env.SIMULATOR_URL || 'ws://localhost:3000';
-const server = http.createServer((_req, res) => {
+// constructive.io brand mark — served as the favicon
+const FAVICON_SVG = `<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.3315 21.7046V28.9348L26.2354 27.2232L29.8206 25.1157L36.9909 29.3307V37.761L30.1657 41.7731V41.785L22.9955 46L19.4102 43.8925L15.8343 41.7848V41.7749L12.5759 39.8595L9 37.7518V21.2924L12.5759 19.1847L15.8343 17.2694V9.25722L19.4102 7.14956L22.6685 5.23418V5.21521L26.2445 3.10755L29.8297 1L37 5.21499V13.6453L30.1657 17.6628V17.6873L23.3315 21.7046ZM16.16 17.8789L12.9168 19.7854L10.0443 21.4784L16.0542 25.0113L22.2948 21.4903L19.4101 19.7945L16.16 17.8789ZM23.6598 5.43249L29.7813 9.0309L35.955 5.40169L33.0743 3.70829L29.8297 1.80095L26.5853 3.70818L23.6598 5.43249ZM22.5139 38.2327L16.8333 41.5721L19.7511 43.2918L22.5185 44.9187L22.5196 38.2427L22.5139 38.2327ZM29.0399 33.6349L29.0153 33.5916L29.1105 33.5357L26.24 31.8482L23.3405 30.1438V33.546V36.9854L29.0399 33.6349ZM29.0998 9.43154L26.24 7.75041L22.9953 5.84307L19.7509 7.7503L16.8486 9.461L22.97 13.0595L29.0348 9.49437L29.0244 9.47595L29.0998 9.43154ZM16.5153 10.0661V13.4722V17.2854L22.5224 20.8167L22.5236 13.598L16.5153 10.0661ZM35.9458 29.5176L33.0651 27.8242L29.8205 25.9168L26.5761 27.8241L23.6705 29.5367L29.7919 33.1352L35.9458 29.5176ZM15.794 33.7218L12.5758 31.8299L9.68105 30.1237V33.5369V37.3517L12.9167 39.2589L15.7928 40.9496L15.794 33.7218ZM15.7954 25.7332L9.68116 22.1389V25.5074V29.3222L12.9168 31.2293L15.7943 32.9208L15.7954 25.7332Z" fill="#01A1FF"/>
+</svg>`;
+const server = http.createServer((req, res) => {
+    if (req.url === '/favicon.svg' || req.url === '/favicon.ico') {
+        res.writeHead(200, { 'Content-Type': 'image/svg+xml; charset=utf-8' });
+        res.end(FAVICON_SVG);
+        return;
+    }
     res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
     res.end(getCanvasHTML());
 });

package/esm/ui.js

@@ -6,6 +6,7 @@ export function getCanvasHTML() {
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
   <title>Illuminate</title>
   <style>
     :root {
@@ -36,6 +37,9 @@ export function getCanvasHTML() {
       padding: 12px 20px; flex-shrink: 0;
       background: var(--surface); border-bottom: 1px solid var(--border);
     }
+    .scene-label-wrap {
+      min-width: 120px; flex-shrink: 0;
+    }
     .scene-label {
       font-size: 13px; font-weight: 500; color: var(--text2);
       letter-spacing: 0.04em;
@@ -55,6 +59,27 @@ export function getCanvasHTML() {
       box-shadow: 0 0 12px var(--glow); cursor: pointer;
     }
     .energy-val { font-size: 12px; color: var(--text2); min-width: 32px; text-align: right; }
+    .global-controls {
+      display: flex; align-items: center; gap: 16px;
+    }
+    .ctrl-wrap {
+      display: flex; align-items: center; gap: 6px;
+    }
+    .ctrl-icon { font-size: 12px; opacity: 0.5; }
+    .ctrl-label { font-size: 9px; color: var(--text2); letter-spacing: 0.05em; text-transform: uppercase; }
+    .ctrl-slider {
+      width: 80px; height: 4px; -webkit-appearance: none; appearance: none;
+      background: linear-gradient(to right, var(--accent), #1a1a2a);
+      border-radius: 2px; outline: none;
+    }
+    .ctrl-slider::-webkit-slider-thumb {
+      -webkit-appearance: none; width: 16px; height: 16px;
+      border-radius: 50%; background: var(--text);
+      box-shadow: 0 0 6px rgba(255,255,255,0.2); cursor: pointer;
+    }
+    .ctrl-slider.attack {
+      background: linear-gradient(to right, #1a1a2a, var(--accent));
+    }
 
     /* ─── Sculpture Canvas ─── */
     .sculpture-wrap {
@@ -276,7 +301,7 @@ export function getCanvasHTML() {
 
   <!-- ─── Top Bar ─── -->
   <div class="top-bar">
-    <div style="display:flex;align-items:center;gap:8px">
+    <div class="scene-label-wrap" style="display:flex;align-items:center;gap:8px">
       <div class="status-dot" id="status-dot"></div>
       <span class="scene-label" id="scene-label">Civic Blue</span>
     </div>
@@ -285,6 +310,16 @@ export function getCanvasHTML() {
       <input type="range" class="energy-slider" id="energy" min="0" max="100" value="80">
       <span class="energy-val" id="energy-val">80</span>
     </div>
+    <div class="global-controls">
+      <div class="ctrl-wrap">
+        <span class="ctrl-label">Smooth</span>
+        <input type="range" class="ctrl-slider" id="smoothness" min="0" max="100" value="50">
+      </div>
+      <div class="ctrl-wrap">
+        <span class="ctrl-label">Attack</span>
+        <input type="range" class="ctrl-slider attack" id="attack" min="0" max="100" value="100">
+      </div>
+    </div>
   </div>
 
   <!-- ─── Sculpture Canvas ─── -->
@@ -300,6 +335,7 @@ export function getCanvasHTML() {
       <div class="mode-tab" data-mode="brush">Brush</div>
       <div class="mode-tab" data-mode="energy">Energy</div>
       <div class="mode-tab" data-mode="scenes">Scenes</div>
+      <div class="mode-tab" data-mode="animations">Animations</div>
       <div class="mode-tab" data-mode="motion">Motion</div>
       <div class="mode-tab" data-mode="drops">Drops</div>
       <div class="mode-tab" data-mode="symmetry">Symmetry</div>
@@ -365,6 +401,11 @@ export function getCanvasHTML() {
         <div class="scene-palette" id="scene-palette"></div>
       </div>
 
+      <!-- Animations -->
+      <div class="tool-panel" id="panel-animations">
+        <div class="scene-palette" id="animation-palette"></div>
+      </div>
+
       <!-- Motion -->
       <div class="tool-panel" id="panel-motion">
         <div class="motion-controls">
@@ -432,6 +473,7 @@ let currentBright = 80;
 let brushSize = 1;
 let brushFalloff = false;
 let activeScene = 'civic';
+let activeAnimation = null;
 let symmetry = { h: false, v: false, radial: false, kaleidoscope: false };
 
 // Motion painter state
@@ -912,6 +954,30 @@ document.getElementById('energy-full').addEventListener('input', function() {
   send({ type: 'master_brightness', value: parseInt(this.value) / 100 });
 });
 
+// ═══════════════════════════════════════════════════
+// Smoothness control (global low-pass filter amount)
+// ═══════════════════════════════════════════════════
+document.getElementById('smoothness').addEventListener('input', function() {
+  // Slider 0–100 maps to alpha 1.0 (instant) → 0.002 (glacially smooth)
+  // Exponential curve: 10^(-2.7 * pct) gives wide usable range
+  // pct=0 → alpha=1.0 (no filter, instant)
+  // pct=0.5 → alpha≈0.045 (smooth, ~2s transitions)
+  // pct=1.0 → alpha≈0.002 (ultra-smooth, ~8-10s transitions)
+  const pct = parseInt(this.value) / 100;
+  const alpha = Math.pow(10, -2.7 * pct);
+  send({ type: 'smoothness', value: Math.max(0.002, Math.min(1.0, alpha)) });
+});
+
+document.getElementById('attack').addEventListener('input', function() {
+  // Slider 0–100 maps to attack 0.05 (soft) → 1.0 (full/instant)
+  // Controls how much of a new input overrides the current target per event
+  // Low attack = new inputs blend in gradually (soft onset)
+  // High attack = new inputs snap immediately to full target
+  const pct = parseInt(this.value) / 100;
+  const attack = 0.05 + pct * 0.95;
+  send({ type: 'attack', value: attack });
+});
+
 // ═══════════════════════════════════════════════════
 // Scene Palette
 // ═══════════════════════════════════════════════════
@@ -936,15 +1002,56 @@ for (const [key, scene] of Object.entries(SCENES)) {
   swatch.style.background = gradient;
   swatch.innerHTML = '<div class="scene-swatch-label">' + scene.label + '</div>';
   swatch.addEventListener('click', () => {
-    document.querySelectorAll('.scene-swatch').forEach(s => s.classList.remove('active'));
+    document.querySelectorAll('#scene-palette .scene-swatch').forEach(s => s.classList.remove('active'));
     swatch.classList.add('active');
     activeScene = key;
+    activeAnimation = null;
+    if (animPalette) animPalette.querySelectorAll('.scene-swatch').forEach(s => s.classList.remove('active'));
     document.getElementById('scene-label').textContent = scene.label;
     send({ type: 'scene', name: key });
   });
   scenePalette.appendChild(swatch);
 }
 
+// ═══════════════════════════════════════════════════
+// Animation Palette
+// ═══════════════════════════════════════════════════
+const ANIMATIONS = {
+  wave:      { label: 'Wave',      colors: ['#1a5acc', '#3af5e8', '#1a5acc'] },
+  breathe:   { label: 'Breathe',   colors: ['#1a3a7a', '#4a7cff', '#1a3a7a'] },
+  rainbow:   { label: 'Rainbow',   colors: ['#e33', '#f90', '#ee0', '#3a5', '#35e', '#a3e'] },
+  pacman:    { label: 'Pac-Man',   colors: ['#111', '#fc0', '#111'] },
+  spiral:    { label: 'Spiral',    colors: ['#e33', '#3ae', '#e3a', '#3ea'] },
+  rain:      { label: 'Rain',      colors: ['#0a1525', '#2a6acc', '#0a1525'] },
+  heartbeat: { label: 'Heartbeat', colors: ['#200', '#e22', '#200'] },
+};
+
+const animPalette = document.getElementById('animation-palette');
+for (const [key, anim] of Object.entries(ANIMATIONS)) {
+  const swatch = document.createElement('div');
+  swatch.className = 'scene-swatch';
+  const gradient = anim.colors.length > 1
+    ? 'linear-gradient(135deg, ' + anim.colors.join(', ') + ')'
+    : anim.colors[0];
+  swatch.style.background = gradient;
+  swatch.innerHTML = '<div class="scene-swatch-label">' + anim.label + '</div>';
+  swatch.addEventListener('click', () => {
+    animPalette.querySelectorAll('.scene-swatch').forEach(s => s.classList.remove('active'));
+    if (activeAnimation === key) {
+      // Tap again to stop
+      activeAnimation = null;
+      send({ type: 'animation', name: 'stop' });
+      document.getElementById('scene-label').textContent = 'Stopped';
+    } else {
+      swatch.classList.add('active');
+      activeAnimation = key;
+      document.getElementById('scene-label').textContent = anim.label;
+      send({ type: 'animation', name: key });
+    }
+  });
+  animPalette.appendChild(swatch);
+}
+
 // ═══════════════════════════════════════════════════
 // Brush controls
 // ═══════════════════════════════════════════════════

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wavegrid/canvas",
-  "version": "0.1.1",
+  "version": "0.2.1",
   "author": "Dan Lynch <pyramation@gmail.com>",
   "description": "Artist-facing creative canvas for painting with light on the 7×7 grid",
   "main": "index.js",
@@ -43,5 +43,5 @@
     "@types/ws": "^8.5.13",
     "makage": "^0.3.0"
   },
-  "gitHead": "6f651b8d0dfbb6538c667dd3905ce6989ae18e46"
+  "gitHead": "60ed9683c2b2003a811d0298a086ee481cd310b1"
 }

package/server.js

@@ -9,7 +9,16 @@ const ws_1 = require("ws");
 const ui_1 = require("./ui");
 const PORT = parseInt(process.env.PORT || '3001', 10);
 const SIMULATOR_URL = process.env.SIMULATOR_URL || 'ws://localhost:3000';
-const server = http_1.default.createServer((_req, res) => {
+// constructive.io brand mark — served as the favicon
+const FAVICON_SVG = `<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.3315 21.7046V28.9348L26.2354 27.2232L29.8206 25.1157L36.9909 29.3307V37.761L30.1657 41.7731V41.785L22.9955 46L19.4102 43.8925L15.8343 41.7848V41.7749L12.5759 39.8595L9 37.7518V21.2924L12.5759 19.1847L15.8343 17.2694V9.25722L19.4102 7.14956L22.6685 5.23418V5.21521L26.2445 3.10755L29.8297 1L37 5.21499V13.6453L30.1657 17.6628V17.6873L23.3315 21.7046ZM16.16 17.8789L12.9168 19.7854L10.0443 21.4784L16.0542 25.0113L22.2948 21.4903L19.4101 19.7945L16.16 17.8789ZM23.6598 5.43249L29.7813 9.0309L35.955 5.40169L33.0743 3.70829L29.8297 1.80095L26.5853 3.70818L23.6598 5.43249ZM22.5139 38.2327L16.8333 41.5721L19.7511 43.2918L22.5185 44.9187L22.5196 38.2427L22.5139 38.2327ZM29.0399 33.6349L29.0153 33.5916L29.1105 33.5357L26.24 31.8482L23.3405 30.1438V33.546V36.9854L29.0399 33.6349ZM29.0998 9.43154L26.24 7.75041L22.9953 5.84307L19.7509 7.7503L16.8486 9.461L22.97 13.0595L29.0348 9.49437L29.0244 9.47595L29.0998 9.43154ZM16.5153 10.0661V13.4722V17.2854L22.5224 20.8167L22.5236 13.598L16.5153 10.0661ZM35.9458 29.5176L33.0651 27.8242L29.8205 25.9168L26.5761 27.8241L23.6705 29.5367L29.7919 33.1352L35.9458 29.5176ZM15.794 33.7218L12.5758 31.8299L9.68105 30.1237V33.5369V37.3517L12.9167 39.2589L15.7928 40.9496L15.794 33.7218ZM15.7954 25.7332L9.68116 22.1389V25.5074V29.3222L12.9168 31.2293L15.7943 32.9208L15.7954 25.7332Z" fill="#01A1FF"/>
+</svg>`;
+const server = http_1.default.createServer((req, res) => {
+    if (req.url === '/favicon.svg' || req.url === '/favicon.ico') {
+        res.writeHead(200, { 'Content-Type': 'image/svg+xml; charset=utf-8' });
+        res.end(FAVICON_SVG);
+        return;
+    }
     res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
     res.end((0, ui_1.getCanvasHTML)());
 });

package/ui.js

@@ -9,6 +9,7 @@ function getCanvasHTML() {
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
   <title>Illuminate</title>
   <style>
     :root {
@@ -39,6 +40,9 @@ function getCanvasHTML() {
       padding: 12px 20px; flex-shrink: 0;
       background: var(--surface); border-bottom: 1px solid var(--border);
     }
+    .scene-label-wrap {
+      min-width: 120px; flex-shrink: 0;
+    }
     .scene-label {
       font-size: 13px; font-weight: 500; color: var(--text2);
       letter-spacing: 0.04em;
@@ -58,6 +62,27 @@ function getCanvasHTML() {
       box-shadow: 0 0 12px var(--glow); cursor: pointer;
     }
     .energy-val { font-size: 12px; color: var(--text2); min-width: 32px; text-align: right; }
+    .global-controls {
+      display: flex; align-items: center; gap: 16px;
+    }
+    .ctrl-wrap {
+      display: flex; align-items: center; gap: 6px;
+    }
+    .ctrl-icon { font-size: 12px; opacity: 0.5; }
+    .ctrl-label { font-size: 9px; color: var(--text2); letter-spacing: 0.05em; text-transform: uppercase; }
+    .ctrl-slider {
+      width: 80px; height: 4px; -webkit-appearance: none; appearance: none;
+      background: linear-gradient(to right, var(--accent), #1a1a2a);
+      border-radius: 2px; outline: none;
+    }
+    .ctrl-slider::-webkit-slider-thumb {
+      -webkit-appearance: none; width: 16px; height: 16px;
+      border-radius: 50%; background: var(--text);
+      box-shadow: 0 0 6px rgba(255,255,255,0.2); cursor: pointer;
+    }
+    .ctrl-slider.attack {
+      background: linear-gradient(to right, #1a1a2a, var(--accent));
+    }
 
     /* ─── Sculpture Canvas ─── */
     .sculpture-wrap {
@@ -279,7 +304,7 @@ function getCanvasHTML() {
 
   <!-- ─── Top Bar ─── -->
   <div class="top-bar">
-    <div style="display:flex;align-items:center;gap:8px">
+    <div class="scene-label-wrap" style="display:flex;align-items:center;gap:8px">
       <div class="status-dot" id="status-dot"></div>
       <span class="scene-label" id="scene-label">Civic Blue</span>
     </div>
@@ -288,6 +313,16 @@ function getCanvasHTML() {
       <input type="range" class="energy-slider" id="energy" min="0" max="100" value="80">
       <span class="energy-val" id="energy-val">80</span>
     </div>
+    <div class="global-controls">
+      <div class="ctrl-wrap">
+        <span class="ctrl-label">Smooth</span>
+        <input type="range" class="ctrl-slider" id="smoothness" min="0" max="100" value="50">
+      </div>
+      <div class="ctrl-wrap">
+        <span class="ctrl-label">Attack</span>
+        <input type="range" class="ctrl-slider attack" id="attack" min="0" max="100" value="100">
+      </div>
+    </div>
   </div>
 
   <!-- ─── Sculpture Canvas ─── -->
@@ -303,6 +338,7 @@ function getCanvasHTML() {
       <div class="mode-tab" data-mode="brush">Brush</div>
       <div class="mode-tab" data-mode="energy">Energy</div>
       <div class="mode-tab" data-mode="scenes">Scenes</div>
+      <div class="mode-tab" data-mode="animations">Animations</div>
       <div class="mode-tab" data-mode="motion">Motion</div>
       <div class="mode-tab" data-mode="drops">Drops</div>
       <div class="mode-tab" data-mode="symmetry">Symmetry</div>
@@ -368,6 +404,11 @@ function getCanvasHTML() {
         <div class="scene-palette" id="scene-palette"></div>
       </div>
 
+      <!-- Animations -->
+      <div class="tool-panel" id="panel-animations">
+        <div class="scene-palette" id="animation-palette"></div>
+      </div>
+
       <!-- Motion -->
       <div class="tool-panel" id="panel-motion">
         <div class="motion-controls">
@@ -435,6 +476,7 @@ let currentBright = 80;
 let brushSize = 1;
 let brushFalloff = false;
 let activeScene = 'civic';
+let activeAnimation = null;
 let symmetry = { h: false, v: false, radial: false, kaleidoscope: false };
 
 // Motion painter state
@@ -915,6 +957,30 @@ document.getElementById('energy-full').addEventListener('input', function() {
   send({ type: 'master_brightness', value: parseInt(this.value) / 100 });
 });
 
+// ═══════════════════════════════════════════════════
+// Smoothness control (global low-pass filter amount)
+// ═══════════════════════════════════════════════════
+document.getElementById('smoothness').addEventListener('input', function() {
+  // Slider 0–100 maps to alpha 1.0 (instant) → 0.002 (glacially smooth)
+  // Exponential curve: 10^(-2.7 * pct) gives wide usable range
+  // pct=0 → alpha=1.0 (no filter, instant)
+  // pct=0.5 → alpha≈0.045 (smooth, ~2s transitions)
+  // pct=1.0 → alpha≈0.002 (ultra-smooth, ~8-10s transitions)
+  const pct = parseInt(this.value) / 100;
+  const alpha = Math.pow(10, -2.7 * pct);
+  send({ type: 'smoothness', value: Math.max(0.002, Math.min(1.0, alpha)) });
+});
+
+document.getElementById('attack').addEventListener('input', function() {
+  // Slider 0–100 maps to attack 0.05 (soft) → 1.0 (full/instant)
+  // Controls how much of a new input overrides the current target per event
+  // Low attack = new inputs blend in gradually (soft onset)
+  // High attack = new inputs snap immediately to full target
+  const pct = parseInt(this.value) / 100;
+  const attack = 0.05 + pct * 0.95;
+  send({ type: 'attack', value: attack });
+});
+
 // ═══════════════════════════════════════════════════
 // Scene Palette
 // ═══════════════════════════════════════════════════
@@ -939,15 +1005,56 @@ for (const [key, scene] of Object.entries(SCENES)) {
   swatch.style.background = gradient;
   swatch.innerHTML = '<div class="scene-swatch-label">' + scene.label + '</div>';
   swatch.addEventListener('click', () => {
-    document.querySelectorAll('.scene-swatch').forEach(s => s.classList.remove('active'));
+    document.querySelectorAll('#scene-palette .scene-swatch').forEach(s => s.classList.remove('active'));
     swatch.classList.add('active');
     activeScene = key;
+    activeAnimation = null;
+    if (animPalette) animPalette.querySelectorAll('.scene-swatch').forEach(s => s.classList.remove('active'));
     document.getElementById('scene-label').textContent = scene.label;
     send({ type: 'scene', name: key });
   });
   scenePalette.appendChild(swatch);
 }
 
+// ═══════════════════════════════════════════════════
+// Animation Palette
+// ═══════════════════════════════════════════════════
+const ANIMATIONS = {
+  wave:      { label: 'Wave',      colors: ['#1a5acc', '#3af5e8', '#1a5acc'] },
+  breathe:   { label: 'Breathe',   colors: ['#1a3a7a', '#4a7cff', '#1a3a7a'] },
+  rainbow:   { label: 'Rainbow',   colors: ['#e33', '#f90', '#ee0', '#3a5', '#35e', '#a3e'] },
+  pacman:    { label: 'Pac-Man',   colors: ['#111', '#fc0', '#111'] },
+  spiral:    { label: 'Spiral',    colors: ['#e33', '#3ae', '#e3a', '#3ea'] },
+  rain:      { label: 'Rain',      colors: ['#0a1525', '#2a6acc', '#0a1525'] },
+  heartbeat: { label: 'Heartbeat', colors: ['#200', '#e22', '#200'] },
+};
+
+const animPalette = document.getElementById('animation-palette');
+for (const [key, anim] of Object.entries(ANIMATIONS)) {
+  const swatch = document.createElement('div');
+  swatch.className = 'scene-swatch';
+  const gradient = anim.colors.length > 1
+    ? 'linear-gradient(135deg, ' + anim.colors.join(', ') + ')'
+    : anim.colors[0];
+  swatch.style.background = gradient;
+  swatch.innerHTML = '<div class="scene-swatch-label">' + anim.label + '</div>';
+  swatch.addEventListener('click', () => {
+    animPalette.querySelectorAll('.scene-swatch').forEach(s => s.classList.remove('active'));
+    if (activeAnimation === key) {
+      // Tap again to stop
+      activeAnimation = null;
+      send({ type: 'animation', name: 'stop' });
+      document.getElementById('scene-label').textContent = 'Stopped';
+    } else {
+      swatch.classList.add('active');
+      activeAnimation = key;
+      document.getElementById('scene-label').textContent = anim.label;
+      send({ type: 'animation', name: key });
+    }
+  });
+  animPalette.appendChild(swatch);
+}
+
 // ═══════════════════════════════════════════════════
 // Brush controls
 // ═══════════════════════════════════════════════════