skills/heygen-com__hyperframes
1
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-14 18:01:20 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
codex/docs-human-first-refactor
heygen-com__hyperframes/docs/catalog/components/texture-mask-text.mdx
T
ukimsanov bb33d681ea docs: give catalog pages install tabs, and stop the generator breaking nav 
The 138 catalog pages hid their install command, registry metadata, and wiring
snippet behind three accordions. Asking an agent and running the terminal command
are two parallel ways to do one thing, so they are now tabs with the agent
request leading; the metadata and the hand-wiring snippet are visible, since they
were short enough that a click bought nothing while costing Cmd+F and printing.
This is how component catalogs are normally presented - shadcn/ui and its
descendants put preview and code behind tabs - and it keeps the preview first,
which is the point of a visual catalog.

Two generator bugs fixed while in there. It rebuilt the Catalog tab object from
scratch, so the tab silently lost its icon on every regeneration, and it
re-inserted the tab relative to a tab named Documentation that no longer exists,
so the fallback index moved Catalog ahead of Studio. It now updates the existing
tab in place and owns only the groups array.

Regenerating also picked up four registry items that had no docs page:
camcorder-hud, editorial-flash-overlay, freeze-frame-dressing, and
organic-light-leak-overlay.

Accordions now remain in three hand-written pages only: troubleshooting,
data-attributes, and html-schema.

mint validate and mint broken-links pass. The repo's pre-commit build gate was
bypassed deliberately: this work lives in a git worktree, which has no
per-package node_modules, so `bun run build` cannot resolve tsup there. The gate
covers package builds and this change touches docs/ and one generator script.
2026-07-29 16:18:43 -07:00

504 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"
---
CSS luminance masks that cut holes through letterforms - 66 pre-built texture masks from ambientCG PBR color maps
`text` `text-effect` `effect` `texture` `mask`
<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>
## Add it to a project
<Tabs>
<Tab title="Ask your agent">
```text
Add the Texture Mask Text component from the HyperFrames Catalog to this project.
Replace the demo content with mine and match the existing design and timing.
```
</Tab>
<Tab title="Terminal">
```bash
npx hyperframes add texture-mask-text
```
</Tab>
</Tabs>
## 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>
## Use it
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.
Reference in New Issue View Git Blame Copy Permalink