mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-03 04:38:33 +00:00
48fcf4ada5
* feat(gsap): add innerText support to GSAP inspector for counter animations (#1244) Adds 'innerText' as a supported GSAP property so number roll-up animations (count-up from 0 to some value) are visible and editable in the GSAP inspector panel. - Add 'innerText' to SUPPORTED_PROPS in gsapConstants.ts - Add label 'Counter Value', tooltip, and step constraint (1) in gsapAnimationConstants.ts The snap modifier that controls integer rounding is already preserved verbatim via the EXTRAS_KEYS round-trip, so rounding behavior survives edits without any additional UI changes. Closes #1179 * feat(registry): add text-effects catalog section and morph-text component Introduces a new "Text Effects" catalog section (below Effects) for text-focused visual components. - Add `text-effects` BlockCategory to core registry types with violet color - Add `text-effect` tag resolver in resolveBlockCategory (checked before generic `effect` tag) - Tag caption-blend-difference, texture-mask-text, and morph-text with `text-effect` - Update studio catalog order and color map to include text-effects - Add morph-text component: gooey SVG threshold morph cycling through editable statements using GSAP seekable proxy pattern for deterministic/seekable rendering Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * chore(registry): add morph-text preview video Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * chore(registry): fix morph-text.html formatting Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * docs(catalog): add Text Effects section and morph-text page Moves caption-blend-difference and texture-mask-text out of Effects into a new "Text Effects" section below it. Adds morph-text component page with install instructions and preview video. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * chore(registry): add demo.html for morph-text catalog preview rendering Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix(registry): address PR review feedback on morph-text and text-effects - Restore `effect` tag on caption-blend-difference and texture-mask-text alongside `text-effect` so existing tag-equality searches/analytics still match - Fix morphPause script fallback from "0.25" to "1.5" to match data attribute default - Add Math.max(0, ...) guard to blur values (intent clarity) - Add prefers-reduced-motion: skip morph and show first word statically - Remove CATEGORY_ORDER record from useBlockCatalog; derive order from BLOCK_CATEGORIES array (single source of truth, no drift) - Add comment to demo.html documenting its purpose (catalog preview script only) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> --------- Co-authored-by: Miguel Ángel <miguel.sierra@heygen.com> Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
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", "text-effect", "effect", "texture", "mask"],
|
|
"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"
|
|
}
|
|
}
|