feat(catalog): add Blue Sweater intro showcase

.github/workflows/catalog-previews.yml

@@ -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

docs/catalog/blocks/blue-sweater-intro-video.mdx

@@ -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>
+```

docs/docs.json

@@ -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"
             ]
           },
           {

docs/public/catalog-index.json

@@ -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",