---
title: "Texture Mask Text"
---

`text` `texture` `mask` `effect`

<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

<CodeGroup>

```bash Terminal
npx hyperframes add texture-mask-text
```

</CodeGroup>

## Details

| Property | Value |
| --- | --- |
| Type | Component |

## Agent Usage

Use this wording when asking an agent to apply a texture:

```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>
```

After install, the snippet lives at `compositions/components/texture-mask-text/texture-mask-text.html` inside the project where you ran `npx hyperframes add texture-mask-text`. The part to paste is the real `<style>` element near the bottom of that file; the texture PNGs install to `assets/texture-mask-text/masks/` and are referenced by project-root URLs in that CSS.

Swap `hf-texture-brick` for the class shown on any texture card below. The base class `hf-texture-text` is always required.

## Animated Texture

Animate the texture by moving the mask position on the text element. Keep drop shadow on a wrapper so the shadow 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;
```

## Texture Examples

<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.