feat(registry): eight more WebGPU shader backgrounds and a bundle with thirty new shaders

packages/cli/src/registry/registryBlocks.test.ts

@@ -19,6 +19,15 @@ function loadRegistryManifest(itemDir: string): RegistryManifest {
   return JSON.parse(readFileSync(join(itemDir, "registry-item.json"), "utf8")) as RegistryManifest;
 }
 
+function loadBlocks(): Array<{ name: string; itemDir: string; manifest: RegistryManifest }> {
+  return readdirSync(blocksDir, { withFileTypes: true })
+    .filter((entry) => entry.isDirectory())
+    .map((entry) => {
+      const itemDir = join(blocksDir, entry.name);
+      return { name: entry.name, itemDir, manifest: loadRegistryManifest(itemDir) };
+    });
+}
+
 function findMissingLocalScripts(itemDir: string, manifest: RegistryManifest): string[] {
   const manifestPaths = new Set(manifest.files.map((file) => file.path));
   const missing: string[] = [];
@@ -110,6 +119,43 @@ describe("registry blocks", () => {
     expect(missing).toEqual([]);
   });
 
+  // Blocks installing the same shared library overwrite each other's copy, so a stale one downgrades the rest.
+  it("ships the same bytes from every block that installs a shared library", () => {
+    // target -> bytes -> blocks installing those bytes there
+    const installs = new Map<string, Map<string, string[]>>();
+    for (const { name, itemDir, manifest } of loadBlocks()) {
+      for (const file of manifest.files) {
+        if (!file.target.startsWith("compositions/lib/")) continue;
+        const content = readFileSync(join(itemDir, file.path), "latin1");
+        const byContent = installs.get(file.target) ?? new Map<string, string[]>();
+        byContent.set(content, [...(byContent.get(content) ?? []), name]);
+        installs.set(file.target, byContent);
+      }
+    }
+
+    expect(installs.has("compositions/lib/shaders.iife.js")).toBe(true);
+    const diverged = [...installs]
+      .filter(([, byContent]) => byContent.size > 1)
+      .map(([target, byContent]) => `${target}: ${[...byContent.values()].join(" vs ")}`);
+    expect(diverged).toEqual([]);
+  });
+
+  it("names a shader the shared bundle holds, and installs its licences, in every shader block", () => {
+    const missing: string[] = [];
+    for (const { name, itemDir, manifest } of loadBlocks()) {
+      const bundle = manifest.files.find((f) => f.target === "compositions/lib/shaders.iife.js");
+      const composition = manifest.files.find((f) => f.type === "hyperframes:composition");
+      if (!bundle || !composition) continue;
+      const html = readFileSync(join(itemDir, composition.path), "utf8");
+      const shader = html.match(/data-shader="([^"]+)"/)?.[1];
+      const code = readFileSync(join(itemDir, bundle.path), "utf8");
+      if (!shader || !code.includes(`name:"${shader}",role:`)) missing.push(`${name}: ${shader}`);
+      const licences = "compositions/lib/shaders.THIRD-PARTY-LICENSES.txt";
+      if (!manifest.files.some((f) => f.target === licences)) missing.push(`${name}: no licences`);
+    }
+    expect(missing).toEqual([]);
+  });
+
   it("keeps the Camcorder HUD seekable inside a differently named host composition", async () => {
     const bundled = await bundleToSingleHtml(resolve(blocksDir, "camcorder-hud"), {
       entryFile: "demo.html",

registry/blocks/aurora/aurora.html

@@ -0,0 +1,31 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <style>
+      [data-composition-id="aurora"] canvas[data-shader] {
+        position: absolute;
+        inset: 0;
+        width: 1920px;
+        height: 1080px;
+        display: block;
+        background: #000;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      data-composition-id="aurora"
+      data-start="0"
+      data-duration="2"
+      data-width="1920"
+      data-height="1080"
+      data-requires-webgpu
+      data-no-timeline
+      style="position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #000"
+    >
+      <canvas data-shader="Aurora" width="1920" height="1080"></canvas>
+    </div>
+    <script src="lib/shaders.iife.js"></script>
+  </body>
+</html>

registry/blocks/aurora/registry-item.json

@@ -0,0 +1,34 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "aurora",
+  "type": "hyperframes:block",
+  "title": "Aurora",
+  "description": "Green and violet aurora curtains ripple across a night sky. A WebGPU shader from the Shaders library (shaders.com, MIT).",
+  "tags": ["webgpu", "webgpu-shader", "background", "light", "aurora", "sky"],
+  "license": "Apache-2.0 AND MIT",
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 2,
+  "files": [
+    {
+      "path": "aurora.html",
+      "target": "compositions/aurora.html",
+      "type": "hyperframes:composition"
+    },
+    {
+      "path": "lib/shaders.iife.js",
+      "target": "compositions/lib/shaders.iife.js",
+      "type": "hyperframes:asset"
+    },
+    {
+      "path": "lib/shaders.THIRD-PARTY-LICENSES.txt",
+      "target": "compositions/lib/shaders.THIRD-PARTY-LICENSES.txt",
+      "type": "hyperframes:asset"
+    }
+  ],
+  "preview": {
+    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/aurora.mp4"
+  }
+}

registry/blocks/frost/frost.html

@@ -0,0 +1,31 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <style>
+      [data-composition-id="frost"] canvas[data-shader] {
+        position: absolute;
+        inset: 0;
+        width: 1920px;
+        height: 1080px;
+        display: block;
+        background: #000;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      data-composition-id="frost"
+      data-start="0"
+      data-duration="2"
+      data-width="1920"
+      data-height="1080"
+      data-requires-webgpu
+      data-no-timeline
+      style="position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #000"
+    >
+      <canvas data-shader="Frost" width="1920" height="1080"></canvas>
+    </div>
+    <script src="lib/shaders.iife.js"></script>
+  </body>
+</html>