ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-01 19:42:03 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
stack/canvas-selection
hyperframes/docs/catalog/components/texture-mask-text.mdx
T
ukimsanov 6ff6601dd0 fix(catalog): restore the required Related topics section on generated pages 
My generator rebuild replaced the '## Related topics' section (still required by
docs/AGENTS.md) with the provenance footer, dropping it from all 168 generated
Catalog pages. Emit it again as the final section so pages end with it, and stop
carriedSectionsFrom() breaking at the footer marker so a human section appended
below the generated tail survives a regeneration. Adds a per-page regeneration
assertion so a future drop fails CI. Flagged by Magi (P1) and Rames.
2026-08-05 05:38:58 -07:00

490 lines
46 KiB
Plaintext
Raw Permalink 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"
---
<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
```bash Terminal
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/`.
## Paste it into your composition
Open `compositions/components/texture-mask-text/texture-mask-text.html`. Paste the real `<style>` element near the bottom into
your composition once. It defines `hf-texture-text` and every `hf-texture-*` class.
Leave the texture PNGs in `assets/texture-mask-text/masks/`. The CSS looks for them there.
## 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>
{/* 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