ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-13 07:40:06 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
08934bfd550bd7f92e531e2f4dd5bbc9076aadf3
hyperframes/docs/catalog/components/texture-mask-text.mdx
T
Miguel Ángel 9734578e60 feat(registry): bring back the video-primitive moves (#3169) 
Restores the 208 catalog items reverted after their previews 404'd in
production, this time on the payload mechanism rather than the .html files
that caused the outage.

The generator no longer writes a preview document to docs/public. That writer,
and the machinery under it, existed only to produce files the docs host
discards, so it is gone rather than bypassed. Items now embed the composition
itself via a payload, which is what the previous change already does for the
items that were already in the catalog.

The variables explorer is parked, not restored: it drove its preview through
the same unpublished .html path, so it would have shown an empty frame. Items
that declare variables get the live player plus the static variables table, and
reconnecting the explorer to payloads is a follow-up.
2026-08-10 18:46:03 -04:00

875 lines
63 KiB
Plaintext
Raw Blame History

---
title: "Texture Mask Text"
description: "CSS luminance masks that cut holes through letterforms - 66 pre-built texture masks from ambientCG PBR color maps"
---
import { InstallCommand } from "/snippets/install-command.jsx";
<div className="hf-texture-preview-panel">
<div className="hf-texture-preview-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/brick.png')" }}>
<div className="hf-texture-preview-label">Brick</div>
<div className="hf-texture-preview-shadow"><div className="hf-texture-preview-word">BRICK</div></div>
</div>
<div className="hf-texture-preview-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/rock.png')" }}>
<div className="hf-texture-preview-label">Rock</div>
<div className="hf-texture-preview-shadow"><div className="hf-texture-preview-word">ROCK</div></div>
</div>
<div className="hf-texture-preview-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/ground-103.png')" }}>
<div className="hf-texture-preview-label">Ground 103</div>
<div className="hf-texture-preview-shadow"><div className="hf-texture-preview-word">GROUND</div></div>
</div>
<div className="hf-texture-preview-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/wood.png')" }}>
<div className="hf-texture-preview-label">Wood</div>
<div className="hf-texture-preview-shadow"><div className="hf-texture-preview-word">WOOD</div></div>
</div>
<div className="hf-texture-preview-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/metal.png')" }}>
<div className="hf-texture-preview-label">Metal</div>
<div className="hf-texture-preview-shadow"><div className="hf-texture-preview-word">METAL</div></div>
</div>
<div className="hf-texture-preview-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/lava.png')" }}>
<div className="hf-texture-preview-label">Lava</div>
<div className="hf-texture-preview-shadow"><div className="hf-texture-preview-word">LAVA</div></div>
</div>
</div>
## Install
<InstallCommand command="npx hyperframes add texture-mask-text" />
That writes `compositions/components/texture-mask-text/texture-mask-text.html`, plus 66 supporting files under `assets/texture-mask-text/masks/`.
## Source
<Accordion title={`texture-mask-text.html`}>
```html
<!--
Texture Mask Text - CSS luminance masks that cut holes through letterforms.
Usage: add class="hf-texture-text hf-texture-{name}" to any text element.
Paste the real style element near the bottom of this file into your composition's HTML once.
Texture PNGs install to assets/texture-mask-text/masks; these CSS classes
reference them with project-root URLs so the CSS block can be pasted
into any composition.
Available textures (66 total):
Masonry:
hf-texture-brick - mortar line patterns
hf-texture-bricks-104 - ambientCG Bricks104
hf-texture-bricks-102 - ambientCG Bricks102
hf-texture-bricks-101 - ambientCG Bricks101
hf-texture-bricks-075-a - ambientCG Bricks075A
hf-texture-concrete - streaked channel cuts
hf-texture-concrete-034 - ambientCG Concrete034
hf-texture-concrete-047-a - ambientCG Concrete047A
hf-texture-concrete-046 - ambientCG Concrete046
hf-texture-concrete-042-a - ambientCG Concrete042A
hf-texture-plaster-001 - ambientCG Plaster001
hf-texture-painted-plaster-017 - ambientCG PaintedPlaster017
Stone:
hf-texture-rock - sharp hard cutouts
hf-texture-rock-063 - ambientCG Rock063
hf-texture-rock-058 - ambientCG Rock058
hf-texture-onyx - flowing marble veins
hf-texture-marble-012 - ambientCG Marble012
hf-texture-marble-016 - ambientCG Marble016
hf-texture-travertine-009 - ambientCG Travertine009
hf-texture-paving-stones-150 - ambientCG PavingStones150
hf-texture-paving-stones-138 - ambientCG PavingStones138
hf-texture-tiles-138 - ambientCG Tiles138
Ground / road:
hf-texture-ground-103 - ambientCG Ground103
hf-texture-ground-037 - ambientCG Ground037
hf-texture-ground-054 - ambientCG Ground054
hf-texture-ground-104 - ambientCG Ground104
hf-texture-ground-068 - ambientCG Ground068
hf-texture-ground-080 - ambientCG Ground080
hf-texture-road-012-a - ambientCG Road012A
hf-texture-road-008-a - ambientCG Road008A
hf-texture-road-007 - ambientCG Road007
hf-texture-road-013-a - ambientCG Road013A
hf-texture-road-012-b - ambientCG Road012B
hf-texture-road-009-c - ambientCG Road009C
hf-texture-asphalt-031 - ambientCG Asphalt031
Wood:
hf-texture-wood - horizontal grain slices
hf-texture-wood-094 - ambientCG Wood094
hf-texture-wood-092 - ambientCG Wood092
hf-texture-wood-051 - ambientCG Wood051
hf-texture-wood-066 - ambientCG Wood066
hf-texture-wood-049 - ambientCG Wood049
hf-texture-wood-058 - ambientCG Wood058
hf-texture-wood-floor-051 - ambientCG WoodFloor051
hf-texture-wood-floor-064 - ambientCG WoodFloor064
hf-texture-wood-floor-070 - ambientCG WoodFloor070
hf-texture-bark-014 - ambientCG Bark014
Metal:
hf-texture-metal - rust and pit erosion
hf-texture-metal-049-a - ambientCG Metal049A
hf-texture-metal-055-a - ambientCG Metal055A
hf-texture-metal-046-b - ambientCG Metal046B
hf-texture-metal-061-b - ambientCG Metal061B
hf-texture-metal-048-a - ambientCG Metal048A
hf-texture-metal-032 - ambientCG Metal032
hf-texture-metal-041-a - ambientCG Metal041A
hf-texture-metal-038 - ambientCG Metal038
hf-texture-diamond-plate-009 - ambientCG DiamondPlate009
Organic / soft:
hf-texture-lava - smooth organic erosion
hf-texture-grass-005 - ambientCG Grass005
hf-texture-grass-001 - ambientCG Grass001
hf-texture-grass-004 - ambientCG Grass004
hf-texture-carpet - fine repeating weave
hf-texture-fabric-083 - ambientCG Fabric083
hf-texture-snow - soft patchy dissolve
hf-texture-snow-015 - ambientCG Snow015
hf-texture-leather-037 - ambientCG Leather037
hf-texture-fabric-080 - ambientCG Fabric080
Custom properties:
--mask-size cover CSS mask-size
--mask-position center CSS mask-position
--mask-contrast 1 filter contrast to sharpen/soften edges
Custom texture (set mask-image directly, not via custom property):
<div class="hf-texture-text" style="-webkit-mask-image: url('my-texture.png'); mask-image: url('my-texture.png')">TEXT</div>
Drop shadow (follows masked contour, not bounding box):
<div style="filter: drop-shadow(2px 3px 4px rgba(0,0,0,0.3))">
<div class="hf-texture-text hf-texture-lava">TEXT</div>
</div>
-->
<style>
.hf-texture-text {
color: #fff;
-webkit-mask-size: var(--mask-size, cover);
mask-size: var(--mask-size, cover);
-webkit-mask-position: var(--mask-position, center);
mask-position: var(--mask-position, center);
-webkit-mask-mode: luminance;
mask-mode: luminance;
filter: contrast(var(--mask-contrast, 1));
}
.hf-texture-lava {
-webkit-mask-image: url("/assets/texture-mask-text/masks/lava.png");
mask-image: url("/assets/texture-mask-text/masks/lava.png");
}
.hf-texture-rock {
-webkit-mask-image: url("/assets/texture-mask-text/masks/rock.png");
mask-image: url("/assets/texture-mask-text/masks/rock.png");
}
.hf-texture-concrete {
-webkit-mask-image: url("/assets/texture-mask-text/masks/concrete.png");
mask-image: url("/assets/texture-mask-text/masks/concrete.png");
}
.hf-texture-brick {
-webkit-mask-image: url("/assets/texture-mask-text/masks/brick.png");
mask-image: url("/assets/texture-mask-text/masks/brick.png");
}
.hf-texture-wood {
-webkit-mask-image: url("/assets/texture-mask-text/masks/wood.png");
mask-image: url("/assets/texture-mask-text/masks/wood.png");
}
.hf-texture-onyx {
-webkit-mask-image: url("/assets/texture-mask-text/masks/onyx.png");
mask-image: url("/assets/texture-mask-text/masks/onyx.png");
}
.hf-texture-carpet {
-webkit-mask-image: url("/assets/texture-mask-text/masks/carpet.png");
mask-image: url("/assets/texture-mask-text/masks/carpet.png");
}
.hf-texture-metal {
-webkit-mask-image: url("/assets/texture-mask-text/masks/metal.png");
mask-image: url("/assets/texture-mask-text/masks/metal.png");
}
.hf-texture-snow {
-webkit-mask-image: url("/assets/texture-mask-text/masks/snow.png");
mask-image: url("/assets/texture-mask-text/masks/snow.png");
}
.hf-texture-bricks-104 {
-webkit-mask-image: url("/assets/texture-mask-text/masks/bricks-104.png");
mask-image: url("/assets/texture-mask-text/masks/bricks-104.png");
}
.hf-texture-ground-103 {
-webkit-mask-image: url("/assets/texture-mask-text/masks/ground-103.png");
mask-image: url("/assets/texture-mask-text/masks/ground-103.png");
}
.hf-texture-grass-005 {
-webkit-mask-image: url("/assets/texture-mask-text/masks/grass-005.png");
mask-image: url("/assets/texture-mask-text/masks/grass-005.png");
}
.hf-texture-rock-063 {
-webkit-mask-image: url("/assets/texture-mask-text/masks/rock-063.png");
mask-image: url("/assets/texture-mask-text/masks/rock-063.png");
}
.hf-texture-wood-094 {
-webkit-mask-image: url("/assets/texture-mask-text/masks/wood-094.png");
mask-image: url("/assets/texture-mask-text/masks/wood-094.png");
}
.hf-texture-road-012-a {
-webkit-mask-image: url("/assets/texture-mask-text/masks/road-012-a.png");
mask-image: url("/assets/texture-mask-text/masks/road-012-a.png");
}
.hf-texture-wood-092 {
-webkit-mask-image: url("/assets/texture-mask-text/masks/wood-092.png");
mask-image: url("/assets/texture-mask-text/masks/wood-092.png");
}
.hf-texture-metal-049-a {
-webkit-mask-image: url("/assets/texture-mask-text/masks/metal-049-a.png");
mask-image: url("/assets/texture-mask-text/masks/metal-049-a.png");
}
.hf-texture-wood-floor-051 {
-webkit-mask-image: url("/assets/texture-mask-text/masks/wood-floor-051.png");
mask-image: url("/assets/texture-mask-text/masks/wood-floor-051.png");
}
.hf-texture-paving-stones-150 {
-webkit-mask-image: url("/assets/texture-mask-text/masks/paving-stones-150.png");
mask-image: url("/assets/texture-mask-text/masks/paving-stones-150.png");
}
.hf-texture-road-008-a {
-webkit-mask-image: url("/assets/texture-mask-text/masks/road-008-a.png");
mask-image: url("/assets/texture-mask-text/masks/road-008-a.png");
}
.hf-texture-road-007 {
-webkit-mask-image: url("/assets/texture-mask-text/masks/road-007.png");
mask-image: url("/assets/texture-mask-text/masks/road-007.png");
}
.hf-texture-metal-055-a {
-webkit-mask-image: url("/assets/texture-mask-text/masks/metal-055-a.png");
mask-image: url("/assets/texture-mask-text/masks/metal-055-a.png");
}
.hf-texture-concrete-034 {
-webkit-mask-image: url("/assets/texture-mask-text/masks/concrete-034.png");
mask-image: url("/assets/texture-mask-text/masks/concrete-034.png");
}
.hf-texture-grass-001 {
-webkit-mask-image: url("/assets/texture-mask-text/masks/grass-001.png");
mask-image: url("/assets/texture-mask-text/masks/grass-001.png");
}
.hf-texture-wood-051 {
-webkit-mask-image: url("/assets/texture-mask-text/masks/wood-051.png");
mask-image: url("/assets/texture-mask-text/masks/wood-051.png");
}
.hf-texture-asphalt-031 {
-webkit-mask-image: url("/assets/texture-mask-text/masks/asphalt-031.png");
mask-image: url("/assets/texture-mask-text/masks/asphalt-031.png");
}
.hf-texture-wood-floor-064 {
-webkit-mask-image: url("/assets/texture-mask-text/masks/wood-floor-064.png");
mask-image: url("/assets/texture-mask-text/masks/wood-floor-064.png");
}
.hf-texture-concrete-047-a {
-webkit-mask-image: url("/assets/texture-mask-text/masks/concrete-047-a.png");
mask-image: url("/assets/texture-mask-text/masks/concrete-047-a.png");
}
.hf-texture-metal-046-b {
-webkit-mask-image: url("/assets/texture-mask-text/masks/metal-046-b.png");
mask-image: url("/assets/texture-mask-text/masks/metal-046-b.png");
}
.hf-texture-grass-004 {
-webkit-mask-image: url("/assets/texture-mask-text/masks/grass-004.png");
mask-image: url("/assets/texture-mask-text/masks/grass-004.png");
}
.hf-texture-marble-012 {
-webkit-mask-image: url("/assets/texture-mask-text/masks/marble-012.png");
mask-image: url("/assets/texture-mask-text/masks/marble-012.png");
}
.hf-texture-ground-037 {
-webkit-mask-image: url("/assets/texture-mask-text/masks/ground-037.png");
mask-image: url("/assets/texture-mask-text/masks/ground-037.png");
}
.hf-texture-tiles-138 {
-webkit-mask-image: url("/assets/texture-mask-text/masks/tiles-138.png");
mask-image: url("/assets/texture-mask-text/masks/tiles-138.png");
}
.hf-texture-wood-066 {
-webkit-mask-image: url("/assets/texture-mask-text/masks/wood-066.png");
mask-image: url("/assets/texture-mask-text/masks/wood-066.png");
}
.hf-texture-concrete-046 {
-webkit-mask-image: url("/assets/texture-mask-text/masks/concrete-046.png");
mask-image: url("/assets/texture-mask-text/masks/concrete-046.png");
}
.hf-texture-wood-049 {
-webkit-mask-image: url("/assets/texture-mask-text/masks/wood-049.png");
mask-image: url("/assets/texture-mask-text/masks/wood-049.png");
}
.hf-texture-road-013-a {
-webkit-mask-image: url("/assets/texture-mask-text/masks/road-013-a.png");
mask-image: url("/assets/texture-mask-text/masks/road-013-a.png");
}
.hf-texture-plaster-001 {
-webkit-mask-image: url("/assets/texture-mask-text/masks/plaster-001.png");
mask-image: url("/assets/texture-mask-text/masks/plaster-001.png");
}
.hf-texture-snow-015 {
-webkit-mask-image: url("/assets/texture-mask-text/masks/snow-015.png");
mask-image: url("/assets/texture-mask-text/masks/snow-015.png");
}
.hf-texture-road-012-b {
-webkit-mask-image: url("/assets/texture-mask-text/masks/road-012-b.png");
mask-image: url("/assets/texture-mask-text/masks/road-012-b.png");
}
.hf-texture-concrete-042-a {
-webkit-mask-image: url("/assets/texture-mask-text/masks/concrete-042-a.png");
mask-image: url("/assets/texture-mask-text/masks/concrete-042-a.png");
}
.hf-texture-bricks-102 {
-webkit-mask-image: url("/assets/texture-mask-text/masks/bricks-102.png");
mask-image: url("/assets/texture-mask-text/masks/bricks-102.png");
}
.hf-texture-rock-058 {
-webkit-mask-image: url("/assets/texture-mask-text/masks/rock-058.png");
mask-image: url("/assets/texture-mask-text/masks/rock-058.png");
}
.hf-texture-wood-floor-070 {
-webkit-mask-image: url("/assets/texture-mask-text/masks/wood-floor-070.png");
mask-image: url("/assets/texture-mask-text/masks/wood-floor-070.png");
}
.hf-texture-bricks-101 {
-webkit-mask-image: url("/assets/texture-mask-text/masks/bricks-101.png");
mask-image: url("/assets/texture-mask-text/masks/bricks-101.png");
}
.hf-texture-travertine-009 {
-webkit-mask-image: url("/assets/texture-mask-text/masks/travertine-009.png");
mask-image: url("/assets/texture-mask-text/masks/travertine-009.png");
}
.hf-texture-ground-054 {
-webkit-mask-image: url("/assets/texture-mask-text/masks/ground-054.png");
mask-image: url("/assets/texture-mask-text/masks/ground-054.png");
}
.hf-texture-wood-058 {
-webkit-mask-image: url("/assets/texture-mask-text/masks/wood-058.png");
mask-image: url("/assets/texture-mask-text/masks/wood-058.png");
}
.hf-texture-ground-104 {
-webkit-mask-image: url("/assets/texture-mask-text/masks/ground-104.png");
mask-image: url("/assets/texture-mask-text/masks/ground-104.png");
}
.hf-texture-painted-plaster-017 {
-webkit-mask-image: url("/assets/texture-mask-text/masks/painted-plaster-017.png");
mask-image: url("/assets/texture-mask-text/masks/painted-plaster-017.png");
}
.hf-texture-paving-stones-138 {
-webkit-mask-image: url("/assets/texture-mask-text/masks/paving-stones-138.png");
mask-image: url("/assets/texture-mask-text/masks/paving-stones-138.png");
}
.hf-texture-ground-068 {
-webkit-mask-image: url("/assets/texture-mask-text/masks/ground-068.png");
mask-image: url("/assets/texture-mask-text/masks/ground-068.png");
}
.hf-texture-bricks-075-a {
-webkit-mask-image: url("/assets/texture-mask-text/masks/bricks-075-a.png");
mask-image: url("/assets/texture-mask-text/masks/bricks-075-a.png");
}
.hf-texture-ground-080 {
-webkit-mask-image: url("/assets/texture-mask-text/masks/ground-080.png");
mask-image: url("/assets/texture-mask-text/masks/ground-080.png");
}
.hf-texture-road-009-c {
-webkit-mask-image: url("/assets/texture-mask-text/masks/road-009-c.png");
mask-image: url("/assets/texture-mask-text/masks/road-009-c.png");
}
.hf-texture-bark-014 {
-webkit-mask-image: url("/assets/texture-mask-text/masks/bark-014.png");
mask-image: url("/assets/texture-mask-text/masks/bark-014.png");
}
.hf-texture-marble-016 {
-webkit-mask-image: url("/assets/texture-mask-text/masks/marble-016.png");
mask-image: url("/assets/texture-mask-text/masks/marble-016.png");
}
.hf-texture-fabric-083 {
-webkit-mask-image: url("/assets/texture-mask-text/masks/fabric-083.png");
mask-image: url("/assets/texture-mask-text/masks/fabric-083.png");
}
.hf-texture-metal-061-b {
-webkit-mask-image: url("/assets/texture-mask-text/masks/metal-061-b.png");
mask-image: url("/assets/texture-mask-text/masks/metal-061-b.png");
}
.hf-texture-metal-048-a {
-webkit-mask-image: url("/assets/texture-mask-text/masks/metal-048-a.png");
mask-image: url("/assets/texture-mask-text/masks/metal-048-a.png");
}
.hf-texture-metal-032 {
-webkit-mask-image: url("/assets/texture-mask-text/masks/metal-032.png");
mask-image: url("/assets/texture-mask-text/masks/metal-032.png");
}
.hf-texture-metal-041-a {
-webkit-mask-image: url("/assets/texture-mask-text/masks/metal-041-a.png");
mask-image: url("/assets/texture-mask-text/masks/metal-041-a.png");
}
.hf-texture-metal-038 {
-webkit-mask-image: url("/assets/texture-mask-text/masks/metal-038.png");
mask-image: url("/assets/texture-mask-text/masks/metal-038.png");
}
.hf-texture-diamond-plate-009 {
-webkit-mask-image: url("/assets/texture-mask-text/masks/diamond-plate-009.png");
mask-image: url("/assets/texture-mask-text/masks/diamond-plate-009.png");
}
.hf-texture-leather-037 {
-webkit-mask-image: url("/assets/texture-mask-text/masks/leather-037.png");
mask-image: url("/assets/texture-mask-text/masks/leather-037.png");
}
.hf-texture-fabric-080 {
-webkit-mask-image: url("/assets/texture-mask-text/masks/fabric-080.png");
mask-image: url("/assets/texture-mask-text/masks/fabric-080.png");
}
</style>
```
</Accordion>
## Ask an agent for it
Paste this to your coding agent:
```text
Use the Texture Mask Text catalog component.
1. From the project root, run:
npx hyperframes add texture-mask-text
2. That command creates this installed snippet:
compositions/components/texture-mask-text/texture-mask-text.html
3. Open that file and paste the real <style> block
near the bottom into the composition once. That CSS defines
hf-texture-text and every hf-texture-* class.
4. Apply this class to the target text:
class="hf-texture-text hf-texture-brick"
5. For another material, copy one hf-texture-* class
from the Texture Examples cards.
6. This is the proper way to apply drop shadow
to textured text: wrap the text and put
filter on the wrapper, not on the text.
Use this markup:
<div style="filter: drop-shadow(1px 2px 1px rgba(0,0,0,0.48))">
<div class="hf-texture-text hf-texture-brick">TEXT</div>
</div>
```
Swap `hf-texture-brick` for the class on any texture card below. Every texture also needs the base class `hf-texture-text`.
## Make the texture move
Move the mask position on the text element. Keep the drop shadow on a wrapper so it follows the textured contour.
<div className="hf-texture-animate-demo" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/lava.png')" }}>
<div className="hf-texture-animate-meta">
<div className="hf-texture-animate-label">Animated mask position</div>
<code className="hf-texture-animate-class">hf-texture-text hf-texture-lava</code>
</div>
<div className="hf-texture-animate-shadow">
<div className="hf-texture-animate-word">MOTION</div>
</div>
</div>
```html
<div class="texture-shadow">
<div class="hf-texture-text hf-texture-lava animated-texture">MOTION</div>
</div>
```
```css
.animated-texture {
--mask-size: 180% 180%;
--mask-position: 0% 50%;
}
```
```js
const tl = gsap.timeline({ paused: true });
tl.to(".animated-texture", {
"--mask-position": "100% 50%",
duration: 1.2,
ease: "sine.inOut",
yoyo: true,
repeat: 1,
}, 0);
window.__timelines["my-composition"] = tl;
```
## Every texture
<div className="hf-texture-example-groups">
<div>
<h3 className="hf-texture-example-title">Masonry</h3>
<div className="hf-texture-example-grid">
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/brick.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Brick</div><code className="hf-texture-example-class">hf-texture-brick</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">BRICK</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-brick</code></div>
</div>
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/bricks-104.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Bricks 104</div><code className="hf-texture-example-class">hf-texture-bricks-104</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">BRICK</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-bricks-104</code></div>
</div>
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/bricks-102.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Bricks 102</div><code className="hf-texture-example-class">hf-texture-bricks-102</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">BRICK</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-bricks-102</code></div>
</div>
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/bricks-101.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Bricks 101</div><code className="hf-texture-example-class">hf-texture-bricks-101</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">BRICK</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-bricks-101</code></div>
</div>
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/bricks-075-a.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Bricks 075 A</div><code className="hf-texture-example-class">hf-texture-bricks-075-a</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">BRICK</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-bricks-075-a</code></div>
</div>
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/concrete.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Concrete</div><code className="hf-texture-example-class">hf-texture-concrete</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">CONCRETE</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-concrete</code></div>
</div>
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/concrete-034.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Concrete 034</div><code className="hf-texture-example-class">hf-texture-concrete-034</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">CONCRETE</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-concrete-034</code></div>
</div>
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/concrete-047-a.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Concrete 047 A</div><code className="hf-texture-example-class">hf-texture-concrete-047-a</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">CONCRETE</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-concrete-047-a</code></div>
</div>
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/concrete-046.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Concrete 046</div><code className="hf-texture-example-class">hf-texture-concrete-046</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">CONCRETE</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-concrete-046</code></div>
</div>
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/concrete-042-a.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Concrete 042 A</div><code className="hf-texture-example-class">hf-texture-concrete-042-a</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">CONCRETE</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-concrete-042-a</code></div>
</div>
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/plaster-001.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Plaster 001</div><code className="hf-texture-example-class">hf-texture-plaster-001</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">PLASTER</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-plaster-001</code></div>
</div>
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/painted-plaster-017.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Painted Plaster 017</div><code className="hf-texture-example-class">hf-texture-painted-plaster-017</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">PLASTER</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-painted-plaster-017</code></div>
</div>
</div>
</div>
<div>
<h3 className="hf-texture-example-title">Stone</h3>
<div className="hf-texture-example-grid">
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/rock.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Rock</div><code className="hf-texture-example-class">hf-texture-rock</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">ROCK</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-rock</code></div>
</div>
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/rock-063.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Rock 063</div><code className="hf-texture-example-class">hf-texture-rock-063</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">ROCK</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-rock-063</code></div>
</div>
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/rock-058.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Rock 058</div><code className="hf-texture-example-class">hf-texture-rock-058</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">ROCK</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-rock-058</code></div>
</div>
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/onyx.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Onyx</div><code className="hf-texture-example-class">hf-texture-onyx</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">ONYX</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-onyx</code></div>
</div>
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/marble-012.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Marble 012</div><code className="hf-texture-example-class">hf-texture-marble-012</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">MARBLE</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-marble-012</code></div>
</div>
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/marble-016.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Marble 016</div><code className="hf-texture-example-class">hf-texture-marble-016</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">MARBLE</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-marble-016</code></div>
</div>
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/travertine-009.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Travertine 009</div><code className="hf-texture-example-class">hf-texture-travertine-009</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">STONE</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-travertine-009</code></div>
</div>
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/paving-stones-150.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Paving Stones 150</div><code className="hf-texture-example-class">hf-texture-paving-stones-150</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">STONE</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-paving-stones-150</code></div>
</div>
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/paving-stones-138.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Paving Stones 138</div><code className="hf-texture-example-class">hf-texture-paving-stones-138</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">STONE</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-paving-stones-138</code></div>
</div>
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/tiles-138.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Tiles 138</div><code className="hf-texture-example-class">hf-texture-tiles-138</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">TILE</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-tiles-138</code></div>
</div>
</div>
</div>
<div>
<h3 className="hf-texture-example-title">Ground / Road</h3>
<div className="hf-texture-example-grid">
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/ground-103.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Ground 103</div><code className="hf-texture-example-class">hf-texture-ground-103</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">GROUND</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-ground-103</code></div>
</div>
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/ground-037.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Ground 037</div><code className="hf-texture-example-class">hf-texture-ground-037</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">GROUND</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-ground-037</code></div>
</div>
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/ground-054.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Ground 054</div><code className="hf-texture-example-class">hf-texture-ground-054</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">GROUND</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-ground-054</code></div>
</div>
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/ground-104.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Ground 104</div><code className="hf-texture-example-class">hf-texture-ground-104</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">GROUND</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-ground-104</code></div>
</div>
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/ground-068.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Ground 068</div><code className="hf-texture-example-class">hf-texture-ground-068</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">GROUND</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-ground-068</code></div>
</div>
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/ground-080.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Ground 080</div><code className="hf-texture-example-class">hf-texture-ground-080</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">GROUND</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-ground-080</code></div>
</div>
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/road-012-a.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Road 012 A</div><code className="hf-texture-example-class">hf-texture-road-012-a</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">ROAD</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-road-012-a</code></div>
</div>
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/road-008-a.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Road 008 A</div><code className="hf-texture-example-class">hf-texture-road-008-a</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">ROAD</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-road-008-a</code></div>
</div>
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/road-007.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Road 007</div><code className="hf-texture-example-class">hf-texture-road-007</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">ROAD</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-road-007</code></div>
</div>
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/road-013-a.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Road 013 A</div><code className="hf-texture-example-class">hf-texture-road-013-a</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">ROAD</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-road-013-a</code></div>
</div>
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/road-012-b.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Road 012 B</div><code className="hf-texture-example-class">hf-texture-road-012-b</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">ROAD</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-road-012-b</code></div>
</div>
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/road-009-c.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Road 009 C</div><code className="hf-texture-example-class">hf-texture-road-009-c</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">ROAD</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-road-009-c</code></div>
</div>
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/asphalt-031.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Asphalt 031</div><code className="hf-texture-example-class">hf-texture-asphalt-031</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">ASPHALT</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-asphalt-031</code></div>
</div>
</div>
</div>
<div>
<h3 className="hf-texture-example-title">Wood</h3>
<div className="hf-texture-example-grid">
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/wood.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Wood</div><code className="hf-texture-example-class">hf-texture-wood</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">WOOD</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-wood</code></div>
</div>
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/wood-094.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Wood 094</div><code className="hf-texture-example-class">hf-texture-wood-094</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">WOOD</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-wood-094</code></div>
</div>
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/wood-092.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Wood 092</div><code className="hf-texture-example-class">hf-texture-wood-092</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">WOOD</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-wood-092</code></div>
</div>
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/wood-051.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Wood 051</div><code className="hf-texture-example-class">hf-texture-wood-051</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">WOOD</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-wood-051</code></div>
</div>
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/wood-066.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Wood 066</div><code className="hf-texture-example-class">hf-texture-wood-066</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">WOOD</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-wood-066</code></div>
</div>
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/wood-049.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Wood 049</div><code className="hf-texture-example-class">hf-texture-wood-049</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">WOOD</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-wood-049</code></div>
</div>
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/wood-058.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Wood 058</div><code className="hf-texture-example-class">hf-texture-wood-058</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">WOOD</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-wood-058</code></div>
</div>
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/wood-floor-051.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Wood Floor 051</div><code className="hf-texture-example-class">hf-texture-wood-floor-051</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">FLOOR</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-wood-floor-051</code></div>
</div>
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/wood-floor-064.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Wood Floor 064</div><code className="hf-texture-example-class">hf-texture-wood-floor-064</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">FLOOR</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-wood-floor-064</code></div>
</div>
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/wood-floor-070.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Wood Floor 070</div><code className="hf-texture-example-class">hf-texture-wood-floor-070</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">FLOOR</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-wood-floor-070</code></div>
</div>
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/bark-014.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Bark 014</div><code className="hf-texture-example-class">hf-texture-bark-014</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">BARK</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-bark-014</code></div>
</div>
</div>
</div>
<div>
<h3 className="hf-texture-example-title">Metal</h3>
<div className="hf-texture-example-grid">
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/metal.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Metal</div><code className="hf-texture-example-class">hf-texture-metal</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">METAL</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-metal</code></div>
</div>
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/metal-049-a.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Metal 049 A</div><code className="hf-texture-example-class">hf-texture-metal-049-a</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">METAL</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-metal-049-a</code></div>
</div>
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/metal-055-a.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Metal 055 A</div><code className="hf-texture-example-class">hf-texture-metal-055-a</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">METAL</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-metal-055-a</code></div>
</div>
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/metal-046-b.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Metal 046 B</div><code className="hf-texture-example-class">hf-texture-metal-046-b</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">METAL</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-metal-046-b</code></div>
</div>
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/metal-061-b.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Metal 061 B</div><code className="hf-texture-example-class">hf-texture-metal-061-b</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">METAL</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-metal-061-b</code></div>
</div>
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/metal-048-a.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Metal 048 A</div><code className="hf-texture-example-class">hf-texture-metal-048-a</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">METAL</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-metal-048-a</code></div>
</div>
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/metal-032.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Metal 032</div><code className="hf-texture-example-class">hf-texture-metal-032</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">METAL</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-metal-032</code></div>
</div>
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/metal-041-a.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Metal 041 A</div><code className="hf-texture-example-class">hf-texture-metal-041-a</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">METAL</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-metal-041-a</code></div>
</div>
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/metal-038.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Metal 038</div><code className="hf-texture-example-class">hf-texture-metal-038</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">METAL</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-metal-038</code></div>
</div>
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/diamond-plate-009.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Diamond Plate 009</div><code className="hf-texture-example-class">hf-texture-diamond-plate-009</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">PLATE</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-diamond-plate-009</code></div>
</div>
</div>
</div>
<div>
<h3 className="hf-texture-example-title">Organic / Soft</h3>
<div className="hf-texture-example-grid">
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/lava.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Lava</div><code className="hf-texture-example-class">hf-texture-lava</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">LAVA</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-lava</code></div>
</div>
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/grass-005.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Grass 005</div><code className="hf-texture-example-class">hf-texture-grass-005</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">GRASS</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-grass-005</code></div>
</div>
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/grass-001.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Grass 001</div><code className="hf-texture-example-class">hf-texture-grass-001</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">GRASS</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-grass-001</code></div>
</div>
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/grass-004.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Grass 004</div><code className="hf-texture-example-class">hf-texture-grass-004</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">GRASS</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-grass-004</code></div>
</div>
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/carpet.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Carpet</div><code className="hf-texture-example-class">hf-texture-carpet</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">WOVEN</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-carpet</code></div>
</div>
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/fabric-083.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Fabric 083</div><code className="hf-texture-example-class">hf-texture-fabric-083</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">FABRIC</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-fabric-083</code></div>
</div>
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/snow.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Snow</div><code className="hf-texture-example-class">hf-texture-snow</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">SNOW</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-snow</code></div>
</div>
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/snow-015.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Snow 015</div><code className="hf-texture-example-class">hf-texture-snow-015</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">SNOW</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-snow-015</code></div>
</div>
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/leather-037.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Leather 037</div><code className="hf-texture-example-class">hf-texture-leather-037</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">LEATHER</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-leather-037</code></div>
</div>
<div className="hf-texture-example-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/fabric-080.png')" }}>
<div className="hf-texture-example-meta"><div className="hf-texture-example-label">Fabric 080</div><code className="hf-texture-example-class">hf-texture-fabric-080</code></div>
<div className="hf-texture-example-shadow"><div className="hf-texture-example-word">FABRIC</div></div>
<div className="hf-texture-example-usage">Use <code>hf-texture-text hf-texture-fabric-080</code></div>
</div>
</div>
</div>
</div>
## Usage
After `npx hyperframes add texture-mask-text`, the installed snippet lives at `compositions/components/texture-mask-text/texture-mask-text.html` inside your current HyperFrames project. Open that file and paste the real `<style>` element near the bottom into your composition once; it defines `hf-texture-text` and every `hf-texture-*` class used by the examples above. Keep the installed texture PNGs in `assets/texture-mask-text/masks/`; the CSS references them with project-root URLs.
{/* hf:generated-footer */}
Tagged `text` `text-effect` `effect` `texture` `mask`.
## Related topics
- [Browse the complete Catalog](/catalog)
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
- [Build a richer composition](/go-further)
Reference in New Issue View Git Blame Copy Permalink