heygen-com--hyperframes/skills/motion-graphics/catalog-map.md

Director → catalog block map (reuse-first)

The Builder's default is to compose existing HF catalog blocks, not hand-author. npx hyperframes add <block> drops a block's source into compositions/; the Builder then customizes in place — most blocks bake their content/data into their own script (only a few expose CSS-var params), so reuse = add + edit, not pure variable injection. Hand-author only (a) gaps no block covers and (b) the asset-fusion affordance binding.

After classifying intent → category, the Director names the block(s) + what to customize in the shot-plan IR:

"content": { "block": "data-chart", "customize": { "data": [...], "headline": "…", "palette": ["…"] } }

Category → block(s)

Category	Borrow from catalog	Customize	Gaps → hand-author
kinetic-typo	one of 18 caption-* (kinetic-slam, editorial-emphasis, clip-wipe, gradient-fill, neon-glow, glitch-rgb, matrix-decode, particle-burst, weight-shift, pill-karaoke, highlight, blend-difference…)	words; emphasis_words → word--emphasis; palette; font; timing	a motif none of the 18 cover
charts	data-chart (bar+line, staggered, value labels)	edit the data array + headline/subtitle; --bg/--text	pie/donut, bar-chart-race, ring/%
stat	apple-money-count (finance: $ counter + burst + SFX) or our generic stat-motion (any %/number + ring)	target, prefix/suffix, label, palette	—
maps/geo	vector lane: us-map (+bubble/hex/flow), world-map, spain-map + hand-author geo-highlight/geo-flow/flag-borders/pin-rollout (NOT in registry — build per categories/maps/module.md). basemap lane (real satellite/dark / zoom-to-place): bake via categories/maps/bake-basemap.mjs → <video> + geo-aligned SVG overlay (border draw-on + colour-block fills)	regions/data, palette, callouts/connectors, basemap style	(basemap lane now covers real imagery + zoom-to-address — was the gap)
diagram	flowchart (SVG connectors + nodes)	nodes, edges, labels	—
code / code-reveal	one of the 9 Code Animations blocks: code-typing (live typing), code-diff (a change), code-morph (a refactor), code-highlight (spotlight a line), code-scroll (walk a file), code-snippet-flight (assemble); GPU hero reveals code-3d-extrude / code-shader-dissolve / code-particle-assemble for a title-card moment; for a static themed code/terminal window use a code-snippet-* block	the baked code string / diff / theme	a code motion none cover
brand reveal	logo-outro (piece assembly + glow + tagline + URL pill)	logo asset, tagline, URL, palette	—
transitions	15+ shader transitions (domain-warp, whip-pan, sdf-iris, glitch…)	direction, timing	—
social overlay	ig / tiktok / yt / x / reddit / spotify / macos cards	handle, metrics, avatar	—
polish	grain-overlay, vignette, shimmer-sweep, texture-mask-text	intensity	—
asset-fusion (RWA)	annotation kit from north-korea-locked-down — scribble-circle draw-on, pop-up pill + pointer, red-wash, scanline, corners, camera push; + us-map-bubble callouts/connectors	asset, annotation position (element_positions), label, palette eyedropper'd from the asset	NET-NEW (not in catalog): the affordance binding — asset geometry becomes the chart axis (straw → gauge)

Reuse mechanics

• npx hyperframes add <block> → source lands in compositions/<block>.html; inline it or reference via data-composition-src; customize content/data/palette/positions in place.
• Blocks ship at fixed canvases (1920×1080 / 1080×1920 / 1080×1080) — match or adapt.
• Blocks already follow the HF contract (paused timeline, seek) — keep it.

Asset-fusion: borrow + net-new (the only real net-new IP)

Borrow north-korea-locked-down's annotation language; the net-new is the RWA fusion logic (see the RWA study):

1. Classify the data type; read the asset's geometric affordance — linearity → timeline/gauge, volume/texture → pie, height → bar, container → exploded view.
2. element_positions — measure the asset's feature (center / extent / safe-zones / avoid-zones). This is the reverse-engineer step (vision); in the prototype it's hand-estimated.
3. Eyedropper palette from the asset (never generic #FFF/#000).
4. Two layers — asset (z0, full-bleed) + data graphics fused to its geometry (z1+), anchored by element_positions; connectors/scribble physically tie the data to the asset; the asset stays visible.