Hero: lysbue's paths paint worklet, animated (WIP branch)

paths-worklet.js

@@ -0,0 +1,32 @@
+// CSS Paint Worklet entry for redoal.com's hero: `background:
+// paint(redoal-paths)` on the hero box, animated by the page changing
+// --redoal-t (a registered <number> custom property driven by a CSS
+// animation - every change repaints). Colors arrive as computed input
+// properties, so the worklet follows the theme without a palette copy.
+import { makePaths, drawPaths } from './paths.js';
+
+registerPaint(
+    'redoal-paths',
+    class {
+        static get inputProperties() {
+            return ['--redoal-t', '--redoal-seed', '--redoal-count', '--accent', '--ink-dim'];
+        }
+        paint(ctx, size, props) {
+            const num = (name, fallback) => {
+                const v = parseFloat(props.get(name).toString());
+                return Number.isFinite(v) ? v : fallback;
+            };
+            const seed = num('--redoal-seed', 7);
+            const count = num('--redoal-count', 47);
+            const t = num('--redoal-t', 0);
+            if (!this.paths || this.seed !== seed || this.count !== count) {
+                this.paths = makePaths(seed, count);
+                this.seed = seed;
+                this.count = count;
+            }
+            const accent = props.get('--accent').toString().trim() || '#47807e';
+            const dim = props.get('--ink-dim').toString().trim() || '#6d6c66';
+            drawPaths(ctx, size.width, size.height, this.paths, t % 1, [accent, dim]);
+        }
+    },
+);