ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-03 04:38:33 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
9a659053db3a3da95a4eece58f15e871ce9dc9d8
hyperframes/docs/catalog/components/texture-mask-text.mdx
T
ukimsanov 592301248e fix(scripts): drop the catalog poster instead of guarding it, and cut the encode pass down 
**The poster guard I added twice was unworkable and I never ran it.** It called
existsSync on docs/images/catalog/<name>.png. That directory is gitignored —
previews are generated locally, uploaded to the CDN and never committed — so the
check is false on every clean checkout and in CI. It would have stripped the
poster from all 168 pages, not the 13 with a missing file. It also referenced
REPO_ROOT, which does not exist in that file, so the script crashed on the first
item. I described this guard in two commit messages without once executing the
generator.

The poster is now gone entirely, which is the smaller and more honest fix. These
previews are autoPlay muted loop, so the poster is visible for a few hundred
milliseconds; 13 of the 168 files do not exist and the browser fetches the poster
before the video. Removing the attribute kills 13 x 403 and 168 needless image
requests, and there is nothing to keep in sync.

Also applied a complexity pass to the delivery encode:
- hasAudio() deleted. 17 lines and a spawnSync per item to choose between
  "-c:a aac" and "-an". ffmpeg ignores -c:a when the input has no audio stream;
  checked, exit 0, output carries no audio track.
- The 40-line spawn + Promise wrapper is execFileSync. Everything around it in
  that script is already synchronous.
- The duplicated poster lookup is gone with the poster itself.

Net 76 lines lighter. Generator runs clean, emits 168 pages, carry-forward intact.
2026-08-04 12:52:26 -07:00

484 lines
45 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"
---
<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`. Near the bottom is a real `<style>` element — copy it 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`.
Reference in New Issue View Git Blame Copy Permalink