dsh-hyperframes 0.2.0 → 0.3.0

package/skills/hyperframes-animation/scripts/package-loader.mjs

@@ -0,0 +1,384 @@
+// package-loader — bootstrap optional helper packages only when missing, with
+// defense-in-depth so a malicious or typo'd dependency can't run on install:
+//   • specs are version-pinned (assertPinnedPackageSpecs) — no floating "latest"
+//   • install runs `npm install --ignore-scripts` — package lifecycle scripts
+//     never execute
+//   • `--no-save` into a throwaway tmp dir — the host project is left untouched
+//   • requires an interactive y/N (or an explicit $HYPERFRAMES_SKILL_BOOTSTRAP_DEPS=1)
+//   • npm is spawned with an argv array (no shell) — never a built command string
+// The `installLine` strings below are DISPLAY ONLY (shown in the prompt / error
+// text); they are never handed to a shell or executed.
+import { spawnSync } from "node:child_process";
+import { existsSync, mkdtempSync, readFileSync, rmSync, writeFileSync } from "node:fs";
+import { createRequire } from "node:module";
+import { tmpdir } from "node:os";
+import { basename, delimiter, dirname, join, parse, resolve } from "node:path";
+import { createInterface } from "node:readline/promises";
+import { fileURLToPath, pathToFileURL } from "node:url";
+
+const HERE = dirname(fileURLToPath(import.meta.url));
+const VERSION_OVERRIDE_ENV = "HYPERFRAMES_SKILL_PKG_VERSION";
+const BOOTSTRAP_ENV = "HYPERFRAMES_SKILL_DEPS_BOOTSTRAPPED";
+const BOOTSTRAP_CONFIRM_ENV = "HYPERFRAMES_SKILL_BOOTSTRAP_DEPS";
+const NODE_MODULES_ENV = "HYPERFRAMES_SKILL_NODE_MODULES";
+
+export async function importPackagesOrBootstrap(packageNames, options = {}) {
+  const entries = new Map();
+  const missing = [];
+
+  for (const packageName of packageNames) {
+    const entry = resolvePackageEntry(packageName);
+    if (entry) entries.set(packageName, entry);
+    else missing.push(packageName);
+  }
+
+  if (missing.length > 0 && !process.env[BOOTSTRAP_ENV]) {
+    const npmPackages = options.npmPackages ?? missing;
+    assertPinnedPackageSpecs(npmPackages);
+    await confirmBootstrap(npmPackages);
+    bootstrapWithNpmInstall(npmPackages);
+  }
+
+  if (missing.length > 0) {
+    throw new Error(
+      [
+        `Could not resolve required package(s): ${missing.join(", ")}`,
+        "Install them in this project, for example:",
+        `  npm install --save-dev ${packageNames.map(shellQuote).join(" ")}`,
+      ].join("\n"),
+    );
+  }
+
+  const modules = {};
+  for (const [packageName, entry] of entries) {
+    modules[packageName] = await import(pathToFileURL(entry).href);
+  }
+  return modules;
+}
+
+export async function bundleCompositionForCapture(compiler, projectDir) {
+  const compiledDir = mkdtempSync(join(tmpdir(), "hyperframes-skill-bundle-"));
+  try {
+    const html = await compiler.bundleToSingleHtml(projectDir);
+    writeFileSync(join(compiledDir, "index.html"), html);
+    return {
+      compiledDir,
+      cleanup() {
+        rmSync(compiledDir, { recursive: true, force: true });
+      },
+    };
+  } catch (error) {
+    rmSync(compiledDir, { recursive: true, force: true });
+    throw error;
+  }
+}
+
+// ── Transient-init retry ─────────────────────────────────────────────────────
+// Frozen snapshot of the engine's TRANSIENT_BROWSER_ERROR_PATTERNS (see
+// packages/engine frameCapture.ts), used only when the imported
+// @hyperframes/producer predates the isTransientBrowserError re-export. The
+// last pattern is the load-bearing one for modular projects: sub-composition
+// timelines register asynchronously, so a first init attempt can time out as
+// "zero duration / Runtime ready: false" on a valid project.
+const FALLBACK_TRANSIENT_PATTERNS = [
+  /Navigating frame was detached/i,
+  /Target closed/i,
+  /Session closed/i,
+  /browser has disconnected/i,
+  /Page crashed/i,
+  /Execution context was destroyed/i,
+  /Cannot find context with specified id/i,
+  /Failed to launch the browser process/i,
+  /Navigation timeout of \d+ ms exceeded/i,
+  /ECONNREFUSED/i,
+  /net::ERR_NETWORK_CHANGED/i,
+  /Composition has zero duration[\s\S]*Runtime ready: false/,
+];
+
+/**
+ * Create + initialize a capture session with the canonical transient-init
+ * retry/cleanup the render pipeline uses (see probeStage in
+ * @hyperframes/producer): on a transient failure, close the crashed session
+ * and retry ONCE with a fresh browser. Without this, a standalone helper
+ * false-fails valid modular projects whose sub-composition timelines land a
+ * beat after the first readiness deadline ("zero duration" with
+ * "Runtime ready: false").
+ *
+ * `producer` is the imported @hyperframes/producer namespace;
+ * `createSession` is a factory returning a fresh (uninitialized) session.
+ * Non-transient init failures (e.g. the "Runtime ready: true" zero-duration
+ * fast-fail — a genuine authoring bug) still throw on the first attempt.
+ */
+export async function initializeSessionWithRetry(producer, createSession, options = {}) {
+  const maxAttempts = options.maxAttempts ?? 2;
+  const log = options.log ?? ((message) => console.error(message));
+  const isTransient =
+    typeof producer.isTransientBrowserError === "function"
+      ? producer.isTransientBrowserError
+      : (err) => {
+          const message = err instanceof Error ? err.message : String(err);
+          return FALLBACK_TRANSIENT_PATTERNS.some((pattern) => pattern.test(message));
+        };
+
+  for (let attempt = 1; ; attempt++) {
+    const session = await createSession();
+    try {
+      await producer.initializeSession(session);
+      return session;
+    } catch (error) {
+      await producer.closeCaptureSession(session).catch(() => {});
+      if (attempt >= maxAttempts || !isTransient(error)) throw error;
+      log(
+        `transient browser-init failure (attempt ${attempt}/${maxAttempts}): ${
+          error instanceof Error ? error.message : String(error)
+        }`,
+      );
+      log("retrying with a fresh browser session...");
+    }
+  }
+}
+
+export function hyperframesPackageSpec(packageName) {
+  const override = process.env[VERSION_OVERRIDE_ENV]?.trim();
+  if (override) return `${packageName}@${override}`;
+
+  const version = readBundledHyperframesVersion();
+  if (version) return `${packageName}@${version}`;
+
+  // Global skill installs have no hyperframes package.json
+  // in their ancestor chain, so the bundled version is unknowable. Fall back to
+  // @latest instead of throwing: already-installed packages still import, and a
+  // bootstrap install can still proceed (@latest satisfies the pinned-spec guard).
+  process.stderr.write(
+    [
+      `hyperframes: could not determine the bundled version for ${packageName}; using @latest.`,
+      `Set ${VERSION_OVERRIDE_ENV}=<version> to pin it.`,
+      "",
+    ].join("\n"),
+  );
+  return `${packageName}@latest`;
+}
+
+function resolvePackageEntry(packageName) {
+  const bases = [process.cwd(), HERE, ...envNodeModulesDirs(), ...nodeModulesDirsFromPath()];
+  const { rootName, subpath } = splitPackageSpecifier(packageName);
+
+  const seen = new Set();
+  for (const base of bases) {
+    const normalized = resolve(base);
+    if (seen.has(normalized)) continue;
+    seen.add(normalized);
+
+    try {
+      return createRequire(join(normalized, "__hyperframes_skill_loader__.cjs")).resolve(
+        packageName,
+      );
+    } catch {
+      const packageDir = findPackageDir(normalized, rootName);
+      const packageEntry = packageDir ? readPackageEntry(packageDir, subpath) : null;
+      if (packageEntry) return packageEntry;
+    }
+  }
+
+  return null;
+}
+
+function splitPackageSpecifier(packageName) {
+  const segments = packageName.split("/");
+  const rootLength = packageName.startsWith("@") ? 2 : 1;
+  return {
+    rootName: segments.slice(0, rootLength).join("/"),
+    subpath: segments.slice(rootLength).join("/"),
+  };
+}
+
+function readBundledHyperframesVersion() {
+  for (const ancestor of ancestors(HERE)) {
+    const directVersion = readPackageVersion(join(ancestor, "package.json"));
+    if (directVersion) return directVersion;
+
+    const monorepoCliVersion = readPackageVersion(
+      join(ancestor, "packages", "cli", "package.json"),
+    );
+    if (monorepoCliVersion) return monorepoCliVersion;
+  }
+  return null;
+}
+
+function readPackageVersion(packageJsonPath) {
+  try {
+    const manifest = JSON.parse(readFileSync(packageJsonPath, "utf8"));
+    if (manifest.name === "hyperframes" || manifest.name === "@hyperframes/cli") {
+      return typeof manifest.version === "string" ? manifest.version : null;
+    }
+  } catch {
+    // Keep searching ancestor package manifests.
+  }
+  return null;
+}
+
+function envNodeModulesDirs() {
+  return (process.env[NODE_MODULES_ENV] ?? "").split(delimiter).filter(Boolean);
+}
+
+function nodeModulesDirsFromPath() {
+  const dirs = [];
+  for (const entry of (process.env.PATH ?? "").split(delimiter)) {
+    if (!entry.endsWith(`${join("node_modules", ".bin")}`)) continue;
+    dirs.push(dirname(entry));
+  }
+  return dirs;
+}
+
+function findPackageDir(base, packageName) {
+  const packageSegments = packageName.split("/");
+  const roots =
+    basename(base) === "node_modules"
+      ? [base]
+      : ancestors(base).map((ancestor) => join(ancestor, "node_modules"));
+
+  for (const root of roots) {
+    const packageDir = join(root, ...packageSegments);
+    if (existsSync(join(packageDir, "package.json"))) return packageDir;
+  }
+  return null;
+}
+
+function readPackageEntry(packageDir, subpath = "") {
+  try {
+    const manifest = JSON.parse(readFileSync(join(packageDir, "package.json"), "utf8"));
+    const requestedExport = subpath ? manifest.exports?.[`./${subpath}`] : manifest.exports;
+    const entry =
+      exportEntry(requestedExport) ??
+      (!subpath ? (manifest.module ?? manifest.main ?? "index.js") : null);
+    if (!entry) return null;
+    const entryPath = join(packageDir, entry);
+    return existsSync(entryPath) ? entryPath : null;
+  } catch {
+    return null;
+  }
+}
+
+function exportEntry(exports) {
+  const root =
+    typeof exports === "object" && exports !== null ? (exports["."] ?? exports) : exports;
+  if (typeof root === "string") return root;
+  if (typeof root !== "object" || root === null) return null;
+  if (typeof root.import === "string") return root.import;
+  if (typeof root.default === "string") return root.default;
+  if (typeof root.node === "string") return root.node;
+  if (typeof root.node === "object" && root.node !== null) {
+    return root.node.import ?? root.node.default ?? null;
+  }
+  return null;
+}
+
+function assertPinnedPackageSpecs(packageSpecs) {
+  const unpinned = packageSpecs.filter((spec) => !hasVersionSpec(spec));
+  if (unpinned.length === 0) return;
+  throw new Error(
+    [
+      `Refusing to bootstrap unpinned package spec(s): ${unpinned.join(", ")}`,
+      "Pass pinned npm package specs, for example:",
+      `  ${packageSpecs.map((spec) => (hasVersionSpec(spec) ? spec : `${spec}@<version>`)).join(" ")}`,
+    ].join("\n"),
+  );
+}
+
+function hasVersionSpec(packageSpec) {
+  if (packageSpec.startsWith("@")) {
+    const slash = packageSpec.indexOf("/");
+    return slash !== -1 && packageSpec.indexOf("@", slash + 1) !== -1;
+  }
+  return packageSpec.includes("@");
+}
+
+async function confirmBootstrap(packageSpecs) {
+  if (process.env[BOOTSTRAP_CONFIRM_ENV] === "1") return;
+
+  const installLine = `npm install --ignore-scripts --no-save ${packageSpecs.map(shellQuote).join(" ")}`;
+  if (!process.stdin.isTTY) {
+    throw new Error(
+      [
+        "Required helper package(s) are missing.",
+        "To allow a one-time temporary dependency bootstrap for this run, set:",
+        `  ${BOOTSTRAP_CONFIRM_ENV}=1`,
+        "The bootstrap command will be:",
+        `  ${installLine}`,
+      ].join("\n"),
+    );
+  }
+
+  const rl = createInterface({ input: process.stdin, output: process.stderr });
+  try {
+    const answer = await rl.question(
+      [
+        "HyperFrames helper package(s) are missing.",
+        `Run a temporary install with lifecycle scripts disabled?`,
+        `  ${installLine}`,
+        "Proceed? [y/N] ",
+      ].join("\n"),
+    );
+    if (!/^(y|yes)$/i.test(answer.trim())) {
+      throw new Error("Dependency bootstrap cancelled.");
+    }
+  } finally {
+    rl.close();
+  }
+}
+
+function ancestors(start) {
+  const dirs = [];
+  let current = resolve(start);
+  const root = parse(current).root;
+  while (current && current !== root) {
+    dirs.push(current);
+    current = dirname(current);
+  }
+  dirs.push(root);
+  return dirs;
+}
+
+function bootstrapWithNpmInstall(packageNames) {
+  const installRoot = mkdtempSync(join(tmpdir(), "hyperframes-skill-deps-"));
+  const installResult = spawnSync(
+    process.platform === "win32" ? "npm.cmd" : "npm",
+    [
+      "install",
+      "--silent",
+      "--no-audit",
+      "--no-fund",
+      "--ignore-scripts",
+      "--no-save",
+      "--prefix",
+      installRoot,
+      ...packageNames,
+    ],
+    { stdio: "inherit" },
+  );
+
+  if (installResult.error) throw installResult.error;
+  if (installResult.status !== 0) {
+    rmSync(installRoot, { recursive: true, force: true });
+    process.exit(installResult.status ?? 1);
+  }
+
+  const args = [...process.argv.slice(1)];
+  const result = spawnSync(process.execPath, args, {
+    stdio: "inherit",
+    env: {
+      ...process.env,
+      [BOOTSTRAP_ENV]: "1",
+      [NODE_MODULES_ENV]: join(installRoot, "node_modules"),
+    },
+  });
+
+  rmSync(installRoot, { recursive: true, force: true });
+  if (result.error) throw result.error;
+  process.exit(result.status ?? 1);
+}
+
+function shellQuote(value) {
+  if (/^[A-Za-z0-9_./:@=-]+$/.test(value)) return value;
+  return `'${value.replace(/'/g, "'\\''")}'`;
+}

package/skills/hyperframes-animation/scripts/package-loader.test.mjs

@@ -0,0 +1,62 @@
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import { spawnSync } from "node:child_process";
+import { copyFileSync, mkdtempSync, rmSync, writeFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { tmpdir } from "node:os";
+import { fileURLToPath } from "node:url";
+
+const HERE = dirname(fileURLToPath(import.meta.url));
+const ENV = "HYPERFRAMES_SKILL_PKG_VERSION";
+
+// (a) env override wins — no ancestor lookup, exact version echoed back.
+test("hyperframesPackageSpec: env override wins", async () => {
+  const prev = process.env[ENV];
+  process.env[ENV] = "9.9.9";
+  try {
+    const { hyperframesPackageSpec } = await import("./package-loader.mjs");
+    assert.equal(hyperframesPackageSpec("@hyperframes/producer"), "@hyperframes/producer@9.9.9");
+  } finally {
+    if (prev === undefined) delete process.env[ENV];
+    else process.env[ENV] = prev;
+  }
+});
+
+// (b) resolvable version (in-repo) pins the bundled hyperframes/@hyperframes/cli version.
+test("hyperframesPackageSpec: resolvable in-repo version pins it", async () => {
+  const prev = process.env[ENV];
+  delete process.env[ENV];
+  try {
+    const { hyperframesPackageSpec } = await import("./package-loader.mjs");
+    const spec = hyperframesPackageSpec("@hyperframes/producer");
+    assert.match(spec, /^@hyperframes\/producer@\d+\.\d+\.\d+/);
+  } finally {
+    if (prev !== undefined) process.env[ENV] = prev;
+  }
+});
+
+// (c) unresolvable + no override -> @latest fallback, no throw (global-install case).
+// Copy the loader into an isolated temp dir whose ancestor chain has no hyperframes
+// package.json, and run node from there so cwd cannot resolve one either.
+test("hyperframesPackageSpec: unresolvable falls back to @latest without throwing", () => {
+  const dir = mkdtempSync(join(tmpdir(), "hf-pkgloader-"));
+  try {
+    copyFileSync(join(HERE, "package-loader.mjs"), join(dir, "package-loader.mjs"));
+    const probe = join(dir, "probe.mjs");
+    writeFileSync(
+      probe,
+      [
+        'import { hyperframesPackageSpec } from "./package-loader.mjs";',
+        'process.stdout.write(hyperframesPackageSpec("@hyperframes/producer"));',
+        "",
+      ].join("\n"),
+    );
+    const res = spawnSync(process.execPath, [probe], { cwd: dir, encoding: "utf8" });
+    assert.equal(res.status, 0, res.stderr);
+    assert.equal(res.stdout.trim(), "@hyperframes/producer@latest");
+    assert.match(res.stderr, /using @latest/);
+    assert.match(res.stderr, new RegExp(ENV));
+  } finally {
+    rmSync(dir, { recursive: true, force: true });
+  }
+});

package/skills/{website-to-hyperframes/references → hyperframes-animation}/techniques.md

@@ -1,9 +1,32 @@
 # Visual Techniques Reference
 
-10 proven techniques from production HyperFrames videos. Use these in your storyboard and compositions to create visually rich, professional output. Each technique includes a minimal code pattern you can adapt.
+13 proven techniques from production HyperFrames videos. Use these in your storyboard and compositions to create visually rich, professional output. Each technique includes a minimal code pattern you can adapt.
 
 These are NOT advanced — they're standard motion design patterns that every composition should use at least 2-3 of.
 
+## Contents
+
+- SVG path drawing
+- Canvas 2D procedural art
+- CSS 3D transforms
+- Per-word kinetic typography
+- Lottie animation
+- Video compositing
+- Character-by-character typing
+- Variable font axis animation
+- GSAP MotionPathPlugin
+- Velocity-matched transitions
+- Audio-reactive animation
+- Clip-path reveal masks
+- WebGL fragment shader art
+- When to use what
+
+> **Capturing live HTML/CSS as a GPU texture** (3D rotation + bloom, magnetic warp, shatter, liquid surface, portal, plus GLSL post-processing) is a separate, heavier capability — see `adapters/html-in-canvas-patterns.md`. Use it for 1–3 hero beats per video, not every beat.
+>
+> **Easing vocabulary** — the full ease-family palette (character + mood mapping) lives in `adapters/gsap-easing-and-stagger.md`. Every composition should use at least 3 different easings.
+>
+> **Named text-animation effects** (24 IDs like `typewriter`, `kinetic-center-build`, `soft-blur-in`) come from the external `animate-text` skill — see `adapters/animate-text.md` for the vocabulary and how to load it.
+
 ---
 
 ## 1. SVG Path Drawing
@@ -155,33 +178,26 @@ The slide distance DECAYS per word (80→12px) — mimics a camera settling.
 Vector animations that play inside a composition. Use for logos, character animations, icons.
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/@dotlottie/player-component@2.7.12/dist/dotlottie-player.js"></script>
-<dotlottie-player
-  class="lottie"
-  src="../capture/assets/lottie/animation-0.json"
-  autoplay
-  loop
-  speed="1.5"
-  style="width:500px;height:500px;"
->
-</dotlottie-player>
+<div id="logo-anim" class="lottie" style="width:500px;height:500px;"></div>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js"></script>
 <script>
-  gsap.set(".lottie", { scale: 0.3, opacity: 0 });
-  tl.to(".lottie", { scale: 1, opacity: 1, duration: 0.35, ease: "back.out(1.6)" }, 0.2);
+  window.__hfLottie = window.__hfLottie || [];
+
+  const anim = lottie.loadAnimation({
+    container: document.getElementById("logo-anim"),
+    renderer: "svg",
+    loop: false,
+    autoplay: false,
+    path: "../capture/assets/lottie/animation-0.json",
+  });
+  window.__hfLottie.push(anim); // REQUIRED — adapter seeks every registered instance
+
+  gsap.set("#logo-anim", { scale: 0.3, opacity: 0 });
+  tl.to("#logo-anim", { scale: 1, opacity: 1, duration: 0.35, ease: "back.out(1.6)" }, 0.2);
 </script>
 ```
 
-Or use lottie-web for more control:
-
-```javascript
-var anim = lottie.loadAnimation({
-  container: document.getElementById("anim"),
-  renderer: "svg",
-  loop: false,
-  autoplay: false,
-  path: "../capture/assets/lottie/animation-0.json",
-});
-```
+`autoplay: false` + `loop: false` + `window.__hfLottie.push()` are mandatory — HyperFrames seeks each registered player to composition time, so anything left on `autoplay`/`loop` runs in wall-clock and renders non-deterministically. The adapter seeks absolute time (no modulo loop, no playback-rate scaling): bake repeating cycles or non-default speed into the Lottie asset or an explicit timeline, then verify the render. Full contract + `.lottie`/dotLottie variant: `adapters/lottie.md`.
 
 ---
 
@@ -367,12 +383,116 @@ for (var f = 0; f < AUDIO_DATA.totalFrames; f++) {
 Per-frame sampling is required — a single tween will not react. Use the extract script:
 
 ```bash
-python3 skills/gsap/scripts/extract-audio-data.py narration.wav --fps 30 --bands 16 -o audio-data.json
+python3 skills/hyperframes-creative/scripts/extract-audio-data.py narration.wav --fps 30 --bands 16 -o audio-data.json
 ```
 
 Keep text/logo intensity subtle (≤5% scale, ≤30% glow) — audio-reactive motion on tiny elements reads as jitter. Bigger backgrounds can push to 10–30%.
 
-**Never do:** equalizer bars, spectrum analyzers, waveform displays, strobing, rainbow color cycling. The audio provides _timing and intensity_; the visual vocabulary still comes from the brand. See `skills/hyperframes/references/audio-reactive.md` for the full API and anti-patterns.
+**Never do:** equalizer bars, spectrum analyzers, waveform displays, strobing, rainbow color cycling. The audio provides _timing and intensity_; the visual vocabulary still comes from the brand. See `skills/hyperframes-creative/references/audio-reactive.md` for the full API and anti-patterns.
+
+---
+
+## 12. Clip-Path Reveal Masks
+
+A fixed window that content slides through — text or images enter from one side and are clipped by an invisible boundary. Different from SVG path drawing: the mask is static, the content moves.
+
+```html
+<div id="reveal-mask">
+  <div id="reveal-content">Your headline text here</div>
+</div>
+<style>
+  #reveal-mask {
+    position: absolute;
+    inset: 0;
+    clip-path: inset(0 200px 0 0); /* clips 200px from right */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  #reveal-content {
+    font-size: 108px;
+    white-space: nowrap;
+  }
+</style>
+<script>
+  // Content starts offscreen right, slides left through the mask window
+  gsap.set("#reveal-content", { x: 400, opacity: 0 });
+  tl.to("#reveal-content", { x: 0, opacity: 1, duration: 1, ease: "power2.out" }, 0);
+</script>
+```
+
+Variations: `clip-path: circle(0% at 50% 50%)` → `circle(100%)` for iris reveals. `clip-path: polygon(...)` for custom shapes.
+
+---
+
+## 13. WebGL Fragment Shader Art
+
+Full GPU generative backgrounds — domain-warped FBM noise, cosine palette coloring, iridescent organic patterns. Far richer than Canvas 2D.
+
+```html
+<canvas id="shader-bg" width="1920" height="1080"></canvas>
+<script>
+  var canvas = document.getElementById("shader-bg");
+  var gl = canvas.getContext("webgl");
+  if (!gl) {
+    /* fallback to gradient */
+  }
+
+  var fsrc = `
+    precision mediump float;
+    varying vec2 v_uv;
+    uniform float u_time;
+    uniform vec2 u_res;
+
+    float hash(vec2 p) { return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); }
+    float noise(vec2 p) {
+      vec2 i = floor(p), f = fract(p);
+      f = f * f * (3.0 - 2.0 * f);
+      return mix(mix(hash(i), hash(i+vec2(1,0)), f.x),
+                 mix(hash(i+vec2(0,1)), hash(i+vec2(1,1)), f.x), f.y);
+    }
+    float fbm(vec2 p) {
+      float v = 0.0, a = 0.5;
+      mat2 R = mat2(0.8, 0.6, -0.6, 0.8);
+      for (int i = 0; i < 5; i++) { v += a*noise(p); p = R*p*2.02; a *= 0.5; }
+      return v;
+    }
+    vec3 palette(float t) {
+      return vec3(0.5)+vec3(0.5)*cos(6.28318*(vec3(1)*t+vec3(0.0,0.33,0.67)));
+    }
+    void main() {
+      vec2 uv = v_uv; uv.x *= u_res.x/u_res.y;
+      float t = u_time * 0.4;
+      vec2 q = vec2(fbm(uv*3.0+t*0.3), fbm(uv*3.0+vec2(5.2,1.3)+t*0.2));
+      vec2 r = vec2(fbm(uv*3.0+q*4.0+vec2(1.7,9.2)+t*0.15), fbm(uv*3.0+q*4.0+vec2(8.3,2.8)+t*0.1));
+      float n = fbm(uv*3.0+r*2.0);
+      vec3 col = palette(n*2.0+t*0.2);
+      col = mix(col, palette(length(q)*3.0+t*0.1), 0.4);
+      col *= 0.7+0.3*n;
+      float vig = 1.0-0.4*length(v_uv-0.5);
+      gl_FragColor = vec4(col*vig, 1.0);
+    }
+  `;
+
+  // Compile, link, set up fullscreen quad, then render via GSAP proxy:
+  var proxy = { time: 0.5 };
+  tl.to(
+    proxy,
+    {
+      time: 5,
+      duration: BEAT_DUR,
+      ease: "none",
+      onUpdate: function () {
+        gl.uniform1f(uTime, proxy.time);
+        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+      },
+    },
+    0,
+  );
+</script>
+```
+
+Always include a Canvas 2D gradient fallback for environments without WebGL.
 
 ---