feat: add Stronkter catalog blocks

docs/catalog/blocks/apple-money-count.mdx

@@ -0,0 +1,53 @@
+---
+title: "Apple Money Count"
+description: "Apple-style finance counter that counts from $0 to $10,000, flashes green, and bursts money icons with sound."
+---
+
+# Apple Money Count
+
+Apple-style finance counter that counts from $0 to $10,000, flashes green, and bursts money icons with sound.
+
+`showcase` `finance` `kinetic` `youtube` `sfx`
+
+Created by [Stronkter](https://x.com/Stronkter).
+
+## Source Prompt
+
+```text
+📷HyperFrames by HeyGen Make me a five-second video of, on a white background, of a Apple-style bold font counting from $0 to $10,000. Once it counts to $10,000, it changes to a green color and the screen also flashes green for a second, and then money icons come out of the $10,000 amount all over the screen and then disappear.
+```
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/apple-money-count.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/apple-money-count.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add apple-money-count
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 5s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `apple-money-count.html` | `compositions/apple-money-count.html` | hyperframes:composition |
+| `assets/sfx-production.wav` | `assets/sfx-production.wav` | hyperframes:asset |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="apple-money-count" data-composition-src="compositions/apple-money-count.html" data-start="0" data-duration="5" data-track-index="1" data-width="1920" data-height="1080"></div>
+```

docs/catalog/blocks/goonvpn-youtube-spot.mdx

@@ -0,0 +1,53 @@
+---
+title: "GoonVPN YouTube Spot"
+description: "Snappy Apple-style YouTube insert showing a phone finding and installing a fictional VPN app with sound effects."
+---
+
+# GoonVPN YouTube Spot
+
+Snappy Apple-style YouTube insert showing a phone finding and installing a fictional VPN app with sound effects.
+
+`app` `showcase` `youtube` `sfx`
+
+Created by [Stronkter](https://x.com/Stronkter).
+
+## Source Prompt
+
+```text
+📷HyperFrames by HeyGen make me a 7s video apple style bold font and styling a phone scrolling in a appstore clicking on a vpn app called goonVPN and installing it the app installs the phone snaps down and fades to a white backround make it snappy and pop its for a youtube video  also add soundfx and make it 60fps and 1920x1080
+```
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/goonvpn-youtube-spot.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/goonvpn-youtube-spot.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add goonvpn-youtube-spot
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 7s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `goonvpn-youtube-spot.html` | `compositions/goonvpn-youtube-spot.html` | hyperframes:composition |
+| `assets/goonvpn-sfx.wav` | `assets/goonvpn-sfx.wav` | hyperframes:asset |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="goonvpn-youtube-spot" data-composition-src="compositions/goonvpn-youtube-spot.html" data-start="0" data-duration="7" data-track-index="1" data-width="1920" data-height="1080"></div>
+```

docs/catalog/blocks/north-korea-locked-down.mdx

@@ -0,0 +1,53 @@
+---
+title: "North Korea Locked Down"
+description: "Realistic map zoom into North Korea with a red scribble circle, locked-down pop-up label, and reddish editorial wash."
+---
+
+# North Korea Locked Down
+
+Realistic map zoom into North Korea with a red scribble circle, locked-down pop-up label, and reddish editorial wash.
+
+`showcase` `map` `annotation` `youtube` `kinetic`
+
+Created by [Stronkter](https://x.com/Stronkter).
+
+## Source Prompt
+
+```text
+use 📷HyperFrames by HeyGen and Image Gen  if you need it for assets or like png images of assets without backround to make a youtube style camera moving in out and other things that are in youtube videos, to make a video of a map zooms in on north korea and a scribble style circle circles the country and a text pops up above it saying locked down when the text apears the video turns a bit redish make the video 7 seconds long id like the map to look realistic and accurate to real lfe
+```
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/north-korea-locked-down.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/north-korea-locked-down.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add north-korea-locked-down
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 7s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `north-korea-locked-down.html` | `compositions/north-korea-locked-down.html` | hyperframes:composition |
+| `assets/korea-map.png` | `assets/korea-map.png` | hyperframes:asset |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="north-korea-locked-down" data-composition-src="compositions/north-korea-locked-down.html" data-start="0" data-duration="7" data-track-index="1" data-width="1920" data-height="1080"></div>
+```

docs/catalog/blocks/nyc-paris-flight.mdx

@@ -0,0 +1,54 @@
+---
+title: "NYC Paris Flight"
+description: "Apple-style realistic map animation with a plane flying from New York to Paris, marker circle, landing pop, and sound effects."
+---
+
+# NYC Paris Flight
+
+Apple-style realistic map animation with a plane flying from New York to Paris, marker circle, landing pop, and sound effects.
+
+`showcase` `travel` `map` `youtube` `sfx`
+
+Created by [Stronkter](https://x.com/Stronkter).
+
+## Source Prompt
+
+```text
+📷HyperFrames by HeyGen Make a six-second Apple-style font bold video of a plane going from New York to Paris. A map animation, and then it shows the plane going from New York to Paris. Make the fonts Apple-style bold and make the map actual realistic, actually realistic. Before it lands in Paris, do a doodle circle in red around Paris, and then it lands in the doodle circle, and the video basically cuts to a white screen at the end. Also add sound effects for everything as well. Every nice motion, every the plane for pop-ups, bubble, pop-up effect, everything you want.
+```
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/nyc-paris-flight.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/nyc-paris-flight.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add nyc-paris-flight
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 6s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `nyc-paris-flight.html` | `compositions/nyc-paris-flight.html` | hyperframes:composition |
+| `assets/map-nyc-paris.png` | `assets/map-nyc-paris.png` | hyperframes:asset |
+| `assets/sfx-mix.wav` | `assets/sfx-mix.wav` | hyperframes:asset |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="nyc-paris-flight" data-composition-src="compositions/nyc-paris-flight.html" data-start="0" data-duration="6" data-track-index="1" data-width="1920" data-height="1080"></div>
+```

docs/docs.json

@@ -141,6 +141,10 @@
             "group": "Showcases",
             "pages": [
               "catalog/blocks/app-showcase",
+              "catalog/blocks/apple-money-count",
+              "catalog/blocks/goonvpn-youtube-spot",
+              "catalog/blocks/north-korea-locked-down",
+              "catalog/blocks/nyc-paris-flight",
               "catalog/blocks/ui-3d-reveal"
             ]
           },

docs/public/catalog-index.json

@@ -12,6 +12,21 @@
     "href": "/catalog/blocks/app-showcase",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/app-showcase.png"
   },
+  {
+    "name": "apple-money-count",
+    "type": "block",
+    "title": "Apple Money Count",
+    "description": "Apple-style finance counter that counts from $0 to $10,000, flashes green, and bursts money icons with sound.",
+    "tags": [
+      "showcase",
+      "finance",
+      "kinetic",
+      "youtube",
+      "sfx"
+    ],
+    "href": "/catalog/blocks/apple-money-count",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/apple-money-count.png"
+  },
   {
     "name": "chromatic-radial-split",
     "type": "block",
@@ -110,6 +125,20 @@
     "href": "/catalog/blocks/glitch",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/glitch.png"
   },
+  {
+    "name": "goonvpn-youtube-spot",
+    "type": "block",
+    "title": "GoonVPN YouTube Spot",
+    "description": "Snappy Apple-style YouTube insert showing a phone finding and installing a fictional VPN app with sound effects.",
+    "tags": [
+      "app",
+      "showcase",
+      "youtube",
+      "sfx"
+    ],
+    "href": "/catalog/blocks/goonvpn-youtube-spot",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/goonvpn-youtube-spot.png"
+  },
   {
     "name": "grain-overlay",
     "type": "component",
@@ -201,6 +230,36 @@
     "href": "/catalog/blocks/macos-notification",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-notification.png"
   },
+  {
+    "name": "north-korea-locked-down",
+    "type": "block",
+    "title": "North Korea Locked Down",
+    "description": "Realistic map zoom into North Korea with a red scribble circle, locked-down pop-up label, and reddish editorial wash.",
+    "tags": [
+      "showcase",
+      "map",
+      "annotation",
+      "youtube",
+      "kinetic"
+    ],
+    "href": "/catalog/blocks/north-korea-locked-down",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/north-korea-locked-down.png"
+  },
+  {
+    "name": "nyc-paris-flight",
+    "type": "block",
+    "title": "NYC Paris Flight",
+    "description": "Apple-style realistic map animation with a plane flying from New York to Paris, marker circle, landing pop, and sound effects.",
+    "tags": [
+      "showcase",
+      "travel",
+      "map",
+      "youtube",
+      "sfx"
+    ],
+    "href": "/catalog/blocks/nyc-paris-flight",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/nyc-paris-flight.png"
+  },
   {
     "name": "reddit-post",
     "type": "block",

docs/schema/registry-item.json

@@ -35,6 +35,14 @@
       "type": "string",
       "minLength": 1
     },
+    "authorUrl": {
+      "type": "string",
+      "format": "uri"
+    },
+    "sourcePrompt": {
+      "type": "string",
+      "minLength": 1
+    },
     "license": {
       "type": "string",
       "minLength": 1,

packages/cli/src/commands/validate.test.ts

@@ -0,0 +1,22 @@
+import { describe, expect, it } from "vitest";
+import { shouldIgnoreRequestFailure } from "./validate.js";
+
+describe("shouldIgnoreRequestFailure", () => {
+  it("ignores aborted media preload requests", () => {
+    expect(
+      shouldIgnoreRequestFailure("http://127.0.0.1:3000/assets/sfx.wav", "net::ERR_ABORTED"),
+    ).toBe(true);
+    expect(shouldIgnoreRequestFailure("http://127.0.0.1:3000/video.mp4", "net::ERR_ABORTED")).toBe(
+      true,
+    );
+  });
+
+  it("keeps non-media and non-aborted failures reportable", () => {
+    expect(
+      shouldIgnoreRequestFailure("http://127.0.0.1:3000/assets/map.png", "net::ERR_ABORTED"),
+    ).toBe(false);
+    expect(
+      shouldIgnoreRequestFailure("http://127.0.0.1:3000/assets/sfx.wav", "net::ERR_FAILED"),
+    ).toBe(false);
+  });
+});

packages/cli/src/commands/validate.ts

@@ -29,6 +29,16 @@ interface ContrastEntry {
 
 const CONTRAST_SAMPLES = 5;
 const SEEK_SETTLE_MS = 150;
+const MEDIA_EXTENSIONS = /\.(aac|flac|m4a|mov|mp3|mp4|oga|ogg|wav|webm)$/i;
+
+export function shouldIgnoreRequestFailure(url: string, errorText: string | undefined): boolean {
+  if (errorText !== "net::ERR_ABORTED") return false;
+  try {
+    return MEDIA_EXTENSIONS.test(new URL(url).pathname);
+  } catch {
+    return false;
+  }
+}
 
 async function getCompositionDuration(page: import("puppeteer-core").Page): Promise<number> {
   return page.evaluate(() => {
@@ -183,10 +193,12 @@ async function validateInBrowser(
     page.on("requestfailed", (req) => {
       const url = req.url();
       if (url.includes("favicon") || url.startsWith("data:")) return;
+      const failureText = req.failure()?.errorText;
+      if (shouldIgnoreRequestFailure(url, failureText)) return;
       const path = decodeURIComponent(new URL(url).pathname).replace(/^\//, "");
       errors.push({
         level: "error",
-        text: `Failed to load ${path}: ${req.failure()?.errorText ?? "net::ERR_FAILED"}`,
+        text: `Failed to load ${path}: ${failureText ?? "net::ERR_FAILED"}`,
         url,
       });
     });

packages/core/schemas/registry-item.json

@@ -35,6 +35,14 @@
       "type": "string",
       "minLength": 1
     },
+    "authorUrl": {
+      "type": "string",
+      "format": "uri"
+    },
+    "sourcePrompt": {
+      "type": "string",
+      "minLength": 1
+    },
     "license": {
       "type": "string",
       "minLength": 1,