feat(catalog): add Blue Sweater intro showcase (#630)

## Problem The Blue Sweater intro HyperFrames project was only available as a standalone exported project zip. It was not installable from the public registry or visible in the Catalog Showcases group. ## What this fixes Adds `blue-sweater-intro-video` as a registry block with its composition, avatar image, and sound mix asset. The block is exposed through the generated catalog page, `docs/public/catalog-index.json`, and the Showcases navigation. The manifest and generated catalog page credit the creator as [Joe Sai](https://x.com/_blue_sweater_). ## Root cause Catalog-visible blocks are driven by `registry/registry.json`, each block's `registry-item.json`, generated docs/catalog files, and CDN-hosted preview media. The exported project had a valid standalone composition, but it had not been converted into that registry/catalog contract or uploaded to the docs preview CDN. ## Verification ### Local checks - `bun install` - `bun run build` - `bunx tsx scripts/generate-catalog-pages.ts` - `bun run generate:catalog-previews -- --only blue-sweater-intro-video` - `bun packages/cli/src/cli.ts add blue-sweater-intro-video --dir /tmp/hf-blue-sweater-install-test --no-clipboard --json` against a locally served registry - `bun packages/cli/src/cli.ts lint /tmp/hf-blue-sweater-install-test` returned 0 errors and 3 static GSAP overlap warnings from the supplied timeline/parser path - `bun packages/cli/src/cli.ts validate /tmp/hf-blue-sweater-install-test --timeout 5000` returned 0 runtime errors and 0 warnings, with contrast audit warnings only - `bun packages/cli/src/cli.ts inspect /tmp/hf-blue-sweater-install-test --at 0.5,2.5,5.5,9.8,11.2 --json` returned 0 layout issues - `bun packages/cli/src/cli.ts render /tmp/hf-blue-sweater-install-test --output /tmp/hf-blue-sweater-install-test/blue-sweater-intro-video-render.mp4 --fps 24 --quality draft --workers 3` - `ffprobe` reported the installed render duration as `12.000000` - `bunx oxfmt --check registry/registry.json registry/blocks/blue-sweater-intro-video/registry-item.json registry/blocks/blue-sweater-intro-video/blue-sweater-intro-video.html docs/docs.json docs/public/catalog-index.json docs/catalog/blocks/blue-sweater-intro-video.mdx` - `git diff --check` - `bunx vitest run packages/cli/src/commands/add.test.ts packages/core/src/registry/types.test.ts` ### Browser verification - Started a real local HyperFrames preview for the installed test project. - Used `agent-browser` to open `http://localhost:5198/api/projects/hf-blue-sweater-install-test/preview` at 1920x1080. - Verified the runtime registered `install-test` and `blue-sweater-intro-video` timelines. - Sought the block to the final card and verified `@_blue_sweater_` and the following state were visible. - Recorded an `agent-browser`-driven full animation pass; `ffprobe` confirmed a 1920x1080 WebM with 110 video frames. - Checked the fresh `agent-browser` session for page errors after the direct preview flow: `errors: []`. - Used `agent-browser` to load an HTML page with the exact generated CDN `video`/`poster` URLs; the browser reported `readyState: 4`, `videoWidth: 1920`, `videoHeight: 1080`, and `paused: false`. ### CDN upload Uploaded the generated preview media with AWS CLI to the existing docs image bucket path: - `s3://heygen-public/hyperframes-oss/docs/images/catalog/blocks/blue-sweater-intro-video.mp4` - `s3://heygen-public/hyperframes-oss/docs/images/catalog/blocks/blue-sweater-intro-video.png` Verified both public CDN URLs return `HTTP 200` with correct content type and immutable cache headers: - `https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/blue-sweater-intro-video.mp4` (`video/mp4`) - `https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/blue-sweater-intro-video.png` (`image/png`) ## Notes - Local-only browser proof artifacts: - `/tmp/hf-blue-sweater-browser-proof/fresh-final-card.png` - `/tmp/hf-blue-sweater-browser-proof/fresh-browser-flow.webm` - `/tmp/hf-blue-sweater-cdn-check.png` - Local-only installed render artifact: - `/tmp/hf-blue-sweater-install-test/blue-sweater-intro-video-render.mp4`
2026-09-01 19:42:03 +00:00 · 2026-05-05 08:17:01 +02:00
parent 584627546a
commit cd277ca312
9 changed files with 1639 additions and 19 deletions
@@ -7,6 +7,7 @@ on:
      - "registry/blocks/**"
      - "registry/components/**"
      - "scripts/generate-catalog-previews.ts"
+      - ".github/workflows/catalog-previews.yml"

 concurrency:
  group: catalog-previews-${{ github.ref }}
@@ -37,9 +38,6 @@ jobs:
        with:
          chrome-version: stable

-      # FFmpeg for video encoding
-      - uses: FedericoCarboni/setup-ffmpeg@36c6454b5a2348e7794ba2d82a21506605921e3d # v3
-
      - name: Render changed block/component previews
        run: |
          # Find which blocks/components changed in this PR
@@ -0,0 +1,48 @@
+---
+title: "Blue Sweater Intro Video"
+description: "Warm AI creator intro sequence that resolves into an X follow card for @_blue_sweater_."
+---
+
+# Blue Sweater Intro Video
+
+Warm AI creator intro sequence that resolves into an X follow card for @_blue_sweater_.
+
+`showcase` `ai` `creator` `sfx`
+
+Created by [Joe Sai](https://x.com/_blue_sweater_).
+
+<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/blue-sweater-intro-video.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/blue-sweater-intro-video.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add blue-sweater-intro-video
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 12s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `blue-sweater-intro-video.html` | `compositions/blue-sweater-intro-video.html` | hyperframes:composition |
+| `assets/joe-sai-avatar.png` | `assets/joe-sai-avatar.png` | hyperframes:asset |
+| `assets/sfx/integrated-melodic-tech-mix.wav` | `assets/sfx/integrated-melodic-tech-mix.wav` | hyperframes:asset |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="blue-sweater-intro-video" data-composition-src="compositions/blue-sweater-intro-video.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
@@ -144,10 +144,11 @@
            "pages": [
              "catalog/blocks/app-showcase",
              "catalog/blocks/apple-money-count",
-              "catalog/blocks/vpn-youtube-spot",
+              "catalog/blocks/blue-sweater-intro-video",
              "catalog/blocks/north-korea-locked-down",
              "catalog/blocks/nyc-paris-flight",
-              "catalog/blocks/ui-3d-reveal"
+              "catalog/blocks/ui-3d-reveal",
+              "catalog/blocks/vpn-youtube-spot"
            ]
          },
          {
@@ -27,6 +27,20 @@
    "href": "/catalog/blocks/apple-money-count",
    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/apple-money-count.png"
  },
+  {
+    "name": "blue-sweater-intro-video",
+    "type": "block",
+    "title": "Blue Sweater Intro Video",
+    "description": "Warm AI creator intro sequence that resolves into an X follow card for @_blue_sweater_.",
+    "tags": [
+      "showcase",
+      "ai",
+      "creator",
+      "sfx"
+    ],
+    "href": "/catalog/blocks/blue-sweater-intro-video",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/blue-sweater-intro-video.png"
+  },
  {
    "name": "chromatic-radial-split",
    "type": "block",
@@ -125,20 +139,6 @@
    "href": "/catalog/blocks/glitch",
    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/glitch.png"
  },
-  {
-    "name": "vpn-youtube-spot",
-    "type": "block",
-    "title": "VPN YouTube Spot",
-    "description": "Snappy Apple-style YouTube insert showing a phone finding and installing a friendly VPN app with sound effects.",
-    "tags": [
-      "app",
-      "showcase",
-      "youtube",
-      "sfx"
-    ],
-    "href": "/catalog/blocks/vpn-youtube-spot",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vpn-youtube-spot.png"
-  },
  {
    "name": "grain-overlay",
    "type": "component",
@@ -542,6 +542,20 @@
    "href": "/catalog/blocks/ui-3d-reveal",
    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ui-3d-reveal.png"
  },
+  {
+    "name": "vpn-youtube-spot",
+    "type": "block",
+    "title": "VPN YouTube Spot",
+    "description": "Snappy Apple-style YouTube insert showing a phone finding and installing a friendly VPN app with sound effects.",
+    "tags": [
+      "app",
+      "showcase",
+      "youtube",
+      "sfx"
+    ],
+    "href": "/catalog/blocks/vpn-youtube-spot",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vpn-youtube-spot.png"
+  },
  {
    "name": "whip-pan",
    "type": "block",
@@ -0,0 +1,32 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "blue-sweater-intro-video",
+  "type": "hyperframes:block",
+  "title": "Blue Sweater Intro Video",
+  "description": "Warm AI creator intro sequence that resolves into an X follow card for @_blue_sweater_.",
+  "tags": ["showcase", "ai", "creator", "sfx"],
+  "author": "Joe Sai",
+  "authorUrl": "https://x.com/_blue_sweater_",
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 12,
+  "files": [
+    {
+      "path": "blue-sweater-intro-video.html",
+      "target": "compositions/blue-sweater-intro-video.html",
+      "type": "hyperframes:composition"
+    },
+    {
+      "path": "assets/joe-sai-avatar.png",
+      "target": "assets/joe-sai-avatar.png",
+      "type": "hyperframes:asset"
+    },
+    {
+      "path": "assets/sfx/integrated-melodic-tech-mix.wav",
+      "target": "assets/sfx/integrated-melodic-tech-mix.wav",
+      "type": "hyperframes:asset"
+    }
+  ]
+}
@@ -103,6 +103,10 @@
      "name": "vpn-youtube-spot",
      "type": "hyperframes:block"
    },
+    {
+      "name": "blue-sweater-intro-video",
+      "type": "hyperframes:block"
+    },
    {
      "name": "nyc-paris-flight",
      "type": "hyperframes:block"