mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-03 23:03:09 +00:00
Miguel Ángel
ffbc18ad31
Adds a Blocks tab to the Studio left sidebar with the full 78-item registry
catalog (58 blocks + 20 components). Users can browse by category, search by
title/description, preview CDN-hosted poster thumbnails with video-on-hover,
and install items on-demand with one click or drag-to-timeline.
Core changes:
- BlockCategory type + resolveBlockCategory() for 7 categories (Captions, VFX,
Transitions, Effects, Social, Data, Scenes)
- Registry API routes: GET /api/registry/blocks (catalog) + POST install
- StudioApiAdapter extended with listRegistryCatalog + installRegistryBlock
- Vite adapter reads from disk; CLI adapter fetches from GitHub (24h cache)
- BlockParam interface + params on 6 blocks for future parameter controls
Studio UI:
- 4th sidebar tab "Blocks" with responsive grid, category pills, search bar
- BlockCard: CDN poster thumbnail, video autoplay on hover, duration + WebGL badges
- On-demand install: blocks append as sub-compositions on timeline; components
overlay at start=0 spanning full duration with transparent background patching
- TIMELINE_BLOCK_MIME drag-and-drop to timeline
- BlockParamsPanel (Phase 3 scaffold) auto-opens for parameterized blocks
Registry manifests:
- All 58 blocks backfilled with preview: { video, poster } CDN URLs
- All 20 components normalized to object format + poster URLs added
- 6 blocks annotated with params (Liquid Glass/Background, Portal, Chart,
Logo Outro, Magnetic)
- flowchart-vertical preview generated and uploaded to CDN
447 lines
12 KiB
JSON
447 lines
12 KiB
JSON
{
|
|
"$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
|
|
"name": "texture-mask-text",
|
|
"type": "hyperframes:component",
|
|
"title": "Texture Mask Text",
|
|
"description": "CSS luminance masks that cut holes through letterforms - 66 pre-built texture masks from ambientCG PBR color maps",
|
|
"tags": ["text", "texture", "mask", "effect"],
|
|
"textureGroups": [
|
|
{
|
|
"title": "Masonry",
|
|
"items": [
|
|
"brick",
|
|
"bricks-104",
|
|
"bricks-102",
|
|
"bricks-101",
|
|
"bricks-075-a",
|
|
"concrete",
|
|
"concrete-034",
|
|
"concrete-047-a",
|
|
"concrete-046",
|
|
"concrete-042-a",
|
|
"plaster-001",
|
|
"painted-plaster-017"
|
|
]
|
|
},
|
|
{
|
|
"title": "Stone",
|
|
"items": [
|
|
"rock",
|
|
"rock-063",
|
|
"rock-058",
|
|
"onyx",
|
|
"marble-012",
|
|
"marble-016",
|
|
"travertine-009",
|
|
"paving-stones-150",
|
|
"paving-stones-138",
|
|
"tiles-138"
|
|
]
|
|
},
|
|
{
|
|
"title": "Ground / Road",
|
|
"items": [
|
|
"ground-103",
|
|
"ground-037",
|
|
"ground-054",
|
|
"ground-104",
|
|
"ground-068",
|
|
"ground-080",
|
|
"road-012-a",
|
|
"road-008-a",
|
|
"road-007",
|
|
"road-013-a",
|
|
"road-012-b",
|
|
"road-009-c",
|
|
"asphalt-031"
|
|
]
|
|
},
|
|
{
|
|
"title": "Wood",
|
|
"items": [
|
|
"wood",
|
|
"wood-094",
|
|
"wood-092",
|
|
"wood-051",
|
|
"wood-066",
|
|
"wood-049",
|
|
"wood-058",
|
|
"wood-floor-051",
|
|
"wood-floor-064",
|
|
"wood-floor-070",
|
|
"bark-014"
|
|
]
|
|
},
|
|
{
|
|
"title": "Metal",
|
|
"items": [
|
|
"metal",
|
|
"metal-049-a",
|
|
"metal-055-a",
|
|
"metal-046-b",
|
|
"metal-061-b",
|
|
"metal-048-a",
|
|
"metal-032",
|
|
"metal-041-a",
|
|
"metal-038",
|
|
"diamond-plate-009"
|
|
]
|
|
},
|
|
{
|
|
"title": "Organic / Soft",
|
|
"items": [
|
|
"lava",
|
|
"grass-005",
|
|
"grass-001",
|
|
"grass-004",
|
|
"carpet",
|
|
"fabric-083",
|
|
"snow",
|
|
"snow-015",
|
|
"leather-037",
|
|
"fabric-080"
|
|
]
|
|
}
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "texture-mask-text.html",
|
|
"target": "compositions/components/texture-mask-text/texture-mask-text.html",
|
|
"type": "hyperframes:snippet"
|
|
},
|
|
{
|
|
"path": "masks/lava.png",
|
|
"target": "assets/texture-mask-text/masks/lava.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/rock.png",
|
|
"target": "assets/texture-mask-text/masks/rock.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/concrete.png",
|
|
"target": "assets/texture-mask-text/masks/concrete.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/brick.png",
|
|
"target": "assets/texture-mask-text/masks/brick.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/wood.png",
|
|
"target": "assets/texture-mask-text/masks/wood.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/onyx.png",
|
|
"target": "assets/texture-mask-text/masks/onyx.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/carpet.png",
|
|
"target": "assets/texture-mask-text/masks/carpet.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/metal.png",
|
|
"target": "assets/texture-mask-text/masks/metal.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/snow.png",
|
|
"target": "assets/texture-mask-text/masks/snow.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/bricks-104.png",
|
|
"target": "assets/texture-mask-text/masks/bricks-104.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/ground-103.png",
|
|
"target": "assets/texture-mask-text/masks/ground-103.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/grass-005.png",
|
|
"target": "assets/texture-mask-text/masks/grass-005.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/rock-063.png",
|
|
"target": "assets/texture-mask-text/masks/rock-063.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/wood-094.png",
|
|
"target": "assets/texture-mask-text/masks/wood-094.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/road-012-a.png",
|
|
"target": "assets/texture-mask-text/masks/road-012-a.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/wood-092.png",
|
|
"target": "assets/texture-mask-text/masks/wood-092.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/metal-049-a.png",
|
|
"target": "assets/texture-mask-text/masks/metal-049-a.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/wood-floor-051.png",
|
|
"target": "assets/texture-mask-text/masks/wood-floor-051.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/paving-stones-150.png",
|
|
"target": "assets/texture-mask-text/masks/paving-stones-150.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/road-008-a.png",
|
|
"target": "assets/texture-mask-text/masks/road-008-a.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/road-007.png",
|
|
"target": "assets/texture-mask-text/masks/road-007.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/metal-055-a.png",
|
|
"target": "assets/texture-mask-text/masks/metal-055-a.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/concrete-034.png",
|
|
"target": "assets/texture-mask-text/masks/concrete-034.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/grass-001.png",
|
|
"target": "assets/texture-mask-text/masks/grass-001.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/wood-051.png",
|
|
"target": "assets/texture-mask-text/masks/wood-051.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/asphalt-031.png",
|
|
"target": "assets/texture-mask-text/masks/asphalt-031.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/wood-floor-064.png",
|
|
"target": "assets/texture-mask-text/masks/wood-floor-064.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/concrete-047-a.png",
|
|
"target": "assets/texture-mask-text/masks/concrete-047-a.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/metal-046-b.png",
|
|
"target": "assets/texture-mask-text/masks/metal-046-b.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/grass-004.png",
|
|
"target": "assets/texture-mask-text/masks/grass-004.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/marble-012.png",
|
|
"target": "assets/texture-mask-text/masks/marble-012.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/ground-037.png",
|
|
"target": "assets/texture-mask-text/masks/ground-037.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/tiles-138.png",
|
|
"target": "assets/texture-mask-text/masks/tiles-138.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/wood-066.png",
|
|
"target": "assets/texture-mask-text/masks/wood-066.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/concrete-046.png",
|
|
"target": "assets/texture-mask-text/masks/concrete-046.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/wood-049.png",
|
|
"target": "assets/texture-mask-text/masks/wood-049.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/road-013-a.png",
|
|
"target": "assets/texture-mask-text/masks/road-013-a.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/plaster-001.png",
|
|
"target": "assets/texture-mask-text/masks/plaster-001.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/snow-015.png",
|
|
"target": "assets/texture-mask-text/masks/snow-015.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/road-012-b.png",
|
|
"target": "assets/texture-mask-text/masks/road-012-b.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/concrete-042-a.png",
|
|
"target": "assets/texture-mask-text/masks/concrete-042-a.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/bricks-102.png",
|
|
"target": "assets/texture-mask-text/masks/bricks-102.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/rock-058.png",
|
|
"target": "assets/texture-mask-text/masks/rock-058.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/wood-floor-070.png",
|
|
"target": "assets/texture-mask-text/masks/wood-floor-070.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/bricks-101.png",
|
|
"target": "assets/texture-mask-text/masks/bricks-101.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/travertine-009.png",
|
|
"target": "assets/texture-mask-text/masks/travertine-009.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/ground-054.png",
|
|
"target": "assets/texture-mask-text/masks/ground-054.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/wood-058.png",
|
|
"target": "assets/texture-mask-text/masks/wood-058.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/ground-104.png",
|
|
"target": "assets/texture-mask-text/masks/ground-104.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/painted-plaster-017.png",
|
|
"target": "assets/texture-mask-text/masks/painted-plaster-017.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/paving-stones-138.png",
|
|
"target": "assets/texture-mask-text/masks/paving-stones-138.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/ground-068.png",
|
|
"target": "assets/texture-mask-text/masks/ground-068.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/bricks-075-a.png",
|
|
"target": "assets/texture-mask-text/masks/bricks-075-a.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/ground-080.png",
|
|
"target": "assets/texture-mask-text/masks/ground-080.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/road-009-c.png",
|
|
"target": "assets/texture-mask-text/masks/road-009-c.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/bark-014.png",
|
|
"target": "assets/texture-mask-text/masks/bark-014.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/marble-016.png",
|
|
"target": "assets/texture-mask-text/masks/marble-016.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/fabric-083.png",
|
|
"target": "assets/texture-mask-text/masks/fabric-083.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/metal-061-b.png",
|
|
"target": "assets/texture-mask-text/masks/metal-061-b.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/metal-048-a.png",
|
|
"target": "assets/texture-mask-text/masks/metal-048-a.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/metal-032.png",
|
|
"target": "assets/texture-mask-text/masks/metal-032.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/metal-041-a.png",
|
|
"target": "assets/texture-mask-text/masks/metal-041-a.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/metal-038.png",
|
|
"target": "assets/texture-mask-text/masks/metal-038.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/diamond-plate-009.png",
|
|
"target": "assets/texture-mask-text/masks/diamond-plate-009.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/leather-037.png",
|
|
"target": "assets/texture-mask-text/masks/leather-037.png",
|
|
"type": "hyperframes:asset"
|
|
},
|
|
{
|
|
"path": "masks/fabric-080.png",
|
|
"target": "assets/texture-mask-text/masks/fabric-080.png",
|
|
"type": "hyperframes:asset"
|
|
}
|
|
],
|
|
"preview": {
|
|
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text.png"
|
|
}
|
|
}
|