Miguel Ángel
0f8eb892e3
* fix(motion-graphics): make the catalog search fire before hand-authoring
The workflow's only reuse instruction pointed at catalog-map.md, a
hand-maintained snapshot of ~60 registry items, and no file in the skill
ever named `hyperframes catalog --query`. An agent asked mid-build for
CRT scanlines and a glitch effect had no instruction to search, so it
hand-authored both while caption-glitch-rgb ("RGB chromatic aberration
with CRT scanline overlay") ranks first for that query on either tier.
The search reads the hosted registry and needs nothing installed, from
any directory with no project, so "the components were not installed"
was never the cause. Say that where the reader is, since the wrong
diagnosis is the intuitive one.
Director Part 2 and the Builder now run the search before naming a
block, and catalog-map.md is labelled a partial snapshot whose misses
prove nothing. Pinned by a content test in coreSkillContent.test.ts.
* fix(skills): search the component catalog before hand-building a look
Authoring workflows never told the agent to search the component library,
so agents rebuilt effects the registry already shipped. A user reported
building an effect from scratch that the registry already contained; the
search that would have found it needs nothing installed, which is why the
usual self-diagnosis ("I forgot to install the components") is wrong.
All ten workflow skills carried zero mentions of `hyperframes catalog`.
The instruction lived only in hyperframes-cli and hyperframes-registry,
both loaded on demand, and the registry skill's own trigger named the
command rather than the symptom - circular, because an agent that never
thought to search could not reach the doc telling it to search.
- Eight workflows now run the search at the point they decide what to
build, before authoring. The two that compile through a closed
authoring vocabulary (embedded-captions, talking-head-recut) document
why they deliberately do not.
- hyperframes-registry triggers on the symptom (a named look, effect,
treatment or transition) instead of the command name; the router table
and the catalog surfaces carry the same framing.
- Fixes hand-maintained lists that had drifted: bar-chart-race was listed
as a hand-author gap in two files while shipping in the registry;
stat-motion was named as an installable block and is not one; the
caption-* family count was one high; the registry discovery tables
claimed to be the block list while covering 97 of 180.
- bun run lint:skills now fails when a doc marked as a registry snapshot
names an item the registry does not have.
* refactor(scripts): reuse native recursive readdir and the shared registry type
Simplify pass on the new registry-snapshot check, behaviour identical:
- collectMarkdownFiles uses readdirSync({ recursive: true }) instead of
hand-rolled recursion, matching scripts/generate-template-previews.ts.
- registryItemNames types registry.json with the exported RegistryManifest
instead of an ad hoc inline shape, matching scripts/catalog/build-local-vectors.ts.
The runtime guard stays: a cast describes the file, it does not validate it.
- One report() helper replaces the duplicated print-and-count block in both
lint passes.
* refactor(scripts): name the registry check's blind spots and stop self-arming
Applies the review findings on the new check, behaviour identical except
where noted:
- lintRegistryItemRefs returns null for an unmarked file instead of an
empty array, so "not a snapshot" and "a clean snapshot" have one owner
and the marker is matched once rather than twice.
- Marker detection ignores fenced blocks, so a doc that documents the
marker syntax in an example no longer arms the check on itself. The id
scan still reads full content, so fenced examples stay covered.
- The header comment and two tests now pin both known false negatives:
identifiers outside backticks, and single-word item names. Measured on
the six marked files, dropping the hyphen requirement would monitor 3
more items and force 46 allow= entries for ordinary prose words, so the
requirement stays and the gap is stated instead of silent.
* chore(skills): regenerate skills manifest after catalog-search edits
18 KiB
Registry discovery
Use the catalog command first
npx hyperframes catalog
npx hyperframes catalog --type block
npx hyperframes catalog --type component
npx hyperframes catalog --type block --tag social
npx hyperframes catalog --json
npx hyperframes catalog --human-friendly
- Default output is a readable table. It does not install anything.
--typeacceptsblockorcomponent;--tagmay narrow either result.--jsonis the deterministic agent and CI surface. Select a name, then runnpx hyperframes add <name>.--human-friendlyopens a picker and installs the selected item immediately.
Read the registry manifest as a fallback
When the CLI is unavailable, the top-level registry.json lists all available items:
curl -s https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/registry.json
Each entry has name and type (hyperframes:example, hyperframes:block, or hyperframes:component).
Reading an item's manifest
Each item has a registry-item.json with full metadata:
<base>/<type-dir>/<name>/registry-item.json
Where <type-dir> is examples, blocks, or components.
Item manifest fields
| Field | Type | Required | Description |
|---|---|---|---|
name |
string | yes | Kebab-case identifier |
type |
string | yes | hyperframes:block or hyperframes:component |
title |
string | yes | Human-readable title |
description |
string | yes | One-line description |
tags |
string[] | no | Filter tags (e.g., ["data", "chart"]) |
dimensions |
object | blocks | { width, height } — blocks only |
duration |
number | blocks | Duration in seconds — blocks only |
files |
array | yes | Files to install (path, target, type) |
registryDependencies |
string[] | no | Other registry items this depends on |
Available items
Blocks
For an always-current list run npx hyperframes catalog --type block. The search is the source of truth; the tables below are a hand-maintained sample and under-cover by design — they group 97 of the registry's 180 blocks by category, so a block missing from them is not evidence the registry lacks it. Only an empty npx hyperframes catalog --query "<what you want>" --json is that evidence. Do not grow these tables toward the full set; search instead. Block name ≠ shader name: shader-transition blocks (e.g. domain-warp-dissolve) wrap a HyperShader runtime whose internal name omits the -dissolve/-warp suffix — see the showcase HTML installed alongside the block for the canonical name.
Shader transitions (14)
Single-shader blocks; each installs one HyperShader runtime + a showcase composition. Use ≤2 per video.
| Name | Description |
|---|---|
chromatic-radial-split |
Chromatic aberration radial split |
cinematic-zoom |
Dramatic zoom blur |
cross-warp-morph |
Cross-warped morphing |
domain-warp-dissolve |
Fractal noise domain warping |
flash-through-white |
White flash crossfade (rarely a neutral default — see SKILL.md guidance) |
glitch |
Digital glitch artifacts |
gravitational-lens |
Gravitational lensing distortion |
light-leak |
Cinematic light leak overlay |
ridged-burn |
Ridged turbulence burn |
ripple-waves |
Concentric ripple wave distortion |
sdf-iris |
Signed-distance-field iris reveal |
swirl-vortex |
Swirling vortex distortion |
thermal-distortion |
Heat-haze thermal distortion |
whip-pan |
Fast camera whip-pan |
Transition galleries (13)
Showcase compositions grouping multiple CSS / GSAP transition styles by family. Use as reference for picking a CSS scene transition; not meant to embed as-is.
| Name | Description |
|---|---|
transitions-3d |
3D perspective flip and rotate |
transitions-blur |
Blur-based scene transitions |
transitions-cover |
Cover / uncover slide |
transitions-destruction |
Destructive break-apart |
transitions-dissolve |
Dissolve and fade |
transitions-distortion |
Warp and distortion |
transitions-grid |
Grid-based tile |
transitions-light |
Light-based glow and flash |
transitions-mechanical |
Mechanical shutter and iris |
transitions-other |
Misc creative (VHS, gravity, morph) |
transitions-push |
Push and slide |
transitions-radial |
Radial wipe and reveal |
transitions-scale |
Scale and zoom |
Liquid Glass (7)
WebGPU + html-in-canvas frosted-glass surfaces. Require Brave / Chrome canary with WebGPU enabled — set PRODUCER_HEADLESS_SHELL_PATH to point at the browser; engine auto-passes --enable-unsafe-webgpu. See /hyperframes-animation → adapters/typegpu.md.
| Name | Description |
|---|---|
ios26-liquid-glass |
3D iPhone (GLTF) + iOS 26 home screen, glass app icons, shader wallpaper, notifications |
macos-tahoe-liquid-glass |
3D MacBook (GLTF) + macOS Tahoe-style desktop, glass menu bar, Finder, dock |
liquid-glass-widgets |
Frosted stat cards, showcase panel, pill chips over aurora shader |
liquid-glass-notification |
Frosted notification cards floating over aurora shader |
liquid-glass-context-menu |
Frosted context-menu panel drifting over aurora shader |
liquid-glass-media-controls |
Frosted media-control panels spreading over aurora shader |
vfx-liquid-glass |
Bare VFX composition shell for liquid-glass effects |
VFX (6)
HTML-in-canvas + WebGL composition blocks. See /hyperframes-animation → adapters/three.md and adapters/html-in-canvas-patterns.md for the underlying APIs.
| Name | Description |
|---|---|
vfx-iphone-device |
GLTF iPhone 15 Pro Max + MacBook Pro with live HTML-in-canvas screens, glass-lens morph, 360° turntable |
vfx-liquid-background |
Organic liquid sim — vertex displacement on subdivided plane, HTML floats above |
vfx-magnetic |
VFX shell (magnetic field-line treatment) |
vfx-portal |
VFX shell (portal reveal) |
vfx-shatter |
VFX shell (shatter into fragments) |
vfx-text-cursor |
Cursor glow + chromatic shadow rays + spectral edges on a black stage |
Showcases (6)
Story-driven showcase compositions — narrated YouTube-style inserts. Most include bundled SFX.
| Name | Description |
|---|---|
app-showcase |
Three floating smartphone screens, fitness app product showcase |
apple-money-count |
Counter $0 → $10,000, green flash, money-icon burst, SFX |
blue-sweater-intro-video |
Warm AI-creator intro resolving into an X follow card |
north-korea-locked-down |
Map zoom with red scribble circle, locked-down pop-up label |
nyc-paris-flight |
Map animation, plane NYC → Paris, marker circle, landing pop, SFX |
vpn-youtube-spot |
App-store scroll, VPN install flow, SFX |
Maps + data viz (8)
D3 + GSAP animated geographies and charts.
| Name | Description |
|---|---|
us-map |
US choropleth, staggered state reveals, value labels, gradient legend |
us-map-bubble |
US bubble map — proportional city markers, callouts, connection lines |
us-map-flow |
US flow map — animated origin-destination arcs |
us-map-hex |
US hex-grid map — each state as equal-weight hex with data fill |
spain-map |
Spain choropleth by autonomous community — D3 conic conformal |
world-map |
World choropleth + rotating globe inset, D3 Natural Earth |
data-chart |
Animated bar + line chart, staggered reveal, NYT-style typography |
flowchart / flowchart-vertical |
Decision tree, SVG connectors, sticky-note nodes, cursor + typing correction (vertical = portrait) |
Social overlays (7)
Platform-recognizable UI overlays. Stamp on top of a beat or use as a beat closer.
| Name | Description |
|---|---|
instagram-follow |
Profile card + follow button |
tiktok-follow |
Profile card + follow button |
yt-lower-third |
YouTube subscribe lower third with avatar |
x-post |
X/Twitter post card with engagement metrics |
reddit-post |
Post card with upvotes and comments |
spotify-card |
Now-playing card with album art and progress bar |
macos-notification |
macOS-style banner with app icon and message |
Branding + 3D UI (2)
| Name | Description |
|---|---|
logo-outro |
Piece-by-piece logo assembly, glow bloom, tagline fade-in, URL pill |
ui-3d-reveal |
Perspective 3D reveal for UI elements |
Code snippets (24)
A code/terminal window that types a code or shell session per-character. Theme = visual chrome only; structure, wiring, and install are identical across all 24 — pick one by name, wire it like any block (data-composition-id + data-start + data-track-index, see wiring-blocks.md). Two chrome families:
VS Code workbench (12) — full editor chrome (activity bar, sidebar, tabs, integrated terminal, status bar). Theme variants: code-snippet-dark-2026, code-snippet-dark-modern, code-snippet-dark-plus, code-snippet-light-2026, code-snippet-light-modern, code-snippet-light-plus, code-snippet-high-contrast, code-snippet-high-contrast-light, code-snippet-monokai, code-snippet-solarized-light, code-snippet-visual-studio-dark, code-snippet-visual-studio-light.
Apple Terminal (12) — macOS Terminal.app window typing a shell session. Profile = window colors:
| Name | Look |
|---|---|
code-snippet-apple-terminal-basic |
White bg, black text |
code-snippet-apple-terminal-clear-dark |
Semi-transparent dark bg |
code-snippet-apple-terminal-clear-light |
Semi-transparent light bg |
code-snippet-apple-terminal-grass |
Black bg, green text |
code-snippet-apple-terminal-homebrew |
Black bg, bright green text, lime cursor |
code-snippet-apple-terminal-man-page |
Pale yellow bg, black text |
code-snippet-apple-terminal-novel |
Warm parchment bg, dark brown text |
code-snippet-apple-terminal-ocean |
Deep blue bg, white text |
code-snippet-apple-terminal-pro |
Black bg, grey text, lime cursor |
code-snippet-apple-terminal-red-sands |
Deep red bg, sandy text |
code-snippet-apple-terminal-silver-aerogel |
Dark grey bg, white text |
code-snippet-apple-terminal-solid-colors |
Deep purple bg, white text |
Code Animations (9)
The richer, motion-first counterpart to the static code-snippet-* window themes above: each is a self-contained 1920×1080 block (~5–8s) with a paused, deterministic GSAP timeline that animates code — typing, diffing, morphing, spotlighting, or GPU hero reveals — rather than typing a fixed snippet inside editor/terminal chrome. Reuse-first: npx hyperframes add <name>, then customize the baked code/diff content in place; hand-author only when no block covers the motion you need.
DOM / text reveal (6):
| Name | Description |
|---|---|
code-typing |
Token-streamed typing reveal, caret tracks the frontier (no CSS animation) — live-coding on screen |
code-diff |
An edit shown as a colored diff: removed lines collapse red, added expand green — before/after at line level |
code-morph |
One snippet transforms into another, tokens glide between positions (Shiki Magic Move) — a refactor / one state to another |
code-highlight |
A highlight band sweeps a target line while surrounding context dims — spotlight one line |
code-scroll |
Camera scrolls a long file to center + spotlight a target line — walk through a real module |
code-snippet-flight |
Discrete snippets fly in from the side and assemble into a stacked program (block-level FLIP) |
GPU / WebGL hero reveals (3): heavier, for a title-card / hero code moment.
| Name | Description |
|---|---|
code-3d-extrude |
Syntax-highlighted code on a lit beveled 3D slab that rotates through real space and settles (true WebGL depth) |
code-shader-dissolve |
Code resolves out of seeded noise with a chromatic dissolve front + edge glow, then holds crisp |
code-particle-assemble |
Thousands of GPU points fly to the exact glyph pixels and resolve into readable syntax-highlighted code |
Components
| Name | Description | Tags |
|---|---|---|
grain-overlay |
Animated film grain texture overlay | texture, grain, overlay, film |
shimmer-sweep |
CSS gradient light sweep for AI accents | text, shimmer, highlight, effect |
morph-text |
Gooey text morph cycling an editable word list (SVG threshold + GSAP blur) | text, text-effect, typography, morph, gooey |
grid-pixelate-wipe |
Grid dissolve transition between scenes | transition, wipe, grid, pixelate |
parallax-zoom |
Center card scales up to fill the frame while siblings parallax outward (single --pz-progress 0→1) |
transition, zoom, parallax, grid, hero |
parallax-unzoom |
Reverse of parallax-zoom — focus card shrinks from full frame as siblings parallax in (--pu-progress) |
transition, reveal, unzoom, parallax, grid, hero |