christiansalazar-wk/ai-lore

HyperFrames Registry

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

npx hyperframes registry add lower-thirds/minimal

<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

npx hyperframes registry publish ./my-block