hyperframes-registry

Files (1)

• SKILL.md

SKILL.md (first lines)

# HyperFrames Registry

```bash
npx hyperframes registry search <query>
npx hyperframes registry add <block-name>
npx hyperframes registry list
npx hyperframes registry remove <block-name>
npx hyperframes registry update
```

## Block Categories

| Category | Examples |
|---|---|
| `lower-thirds` | name badges, speaker IDs |
| `title-cards` | hero titles, chapter cards |
| `transitions` | custom scene transitions |
| `overlays` | progress bars, timers, logos |
| `data-viz` | animated charts, counters |
| `captions` | styled subtitle renderers |
| `backgrounds` | animated gradients, particle fields |
| `cta` | call-to-action cards, QR codes |
| `social` | platform safe-zone frames |

## Usage

```bash
npx hyperframes registry add lower-thirds/minimal
```

```html
<link rel="hf-block" href="./blocks/lower-thirds/minimal/block.html" as="lower-third-minimal" />

<hf-block name="lower-third-minimal"
          data-hf-clip data-hf-start="3s" data-hf-duration="4s"
          data-name="Jane Smith" data-title="Head of Product"
          style="position:absolute;bottom:80px;left:80px;">
</hf-block>
```

## Popular Blocks

- `lower-thirds/minimal` — name + title badge
- `lower-thirds/social` — name + social handle + platform icon
- `title-cards/hero` — full-frame title card
- `overlays/progress-bar` — playback progress bar
- `data-viz/counter` — animated number counter (`data-from`, `data-to`, `data-suffix`)
- `backgrounds/gradient-mesh` — animated gradient mesh
- `cta/link-card` — animated URL card with icon
- `social/youtube-safe-zone` — safe-zone QA overlay

## Custom Block Structure

```
my-block/
  block.html
  block.json   # { "name", "version", "props": { "data-x": { "type", "default" } } }
  preview.png
```

```bash
npx hyperframes registry publish ./my-block
```

From christiansalazar-wk/ai-lore, MIT.

More from christiansalazar-wk/ai-lore