Texture Mask Text

text texture mask effect

Brick

BRICK

Rock

ROCK

Ground 103

GROUND

Wood

WOOD

Metal

METAL

Lava

LAVA

Install

Terminal

npx hyperframes add texture-mask-text

Details

Property	Value
Type	Component

Agent Usage

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

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.

Animated mask position

hf-texture-text hf-texture-lava

MOTION

<div class="texture-shadow">
  <div class="hf-texture-text hf-texture-lava animated-texture">MOTION</div>
</div>

.animated-texture {
  --mask-size: 180% 180%;
  --mask-position: 0% 50%;
}

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

Masonry

Brick

hf-texture-brick

BRICK

Use hf-texture-text hf-texture-brick

Bricks 104

hf-texture-bricks-104

BRICK

Use hf-texture-text hf-texture-bricks-104

Bricks 102

hf-texture-bricks-102

BRICK

Use hf-texture-text hf-texture-bricks-102

Bricks 101

hf-texture-bricks-101

BRICK

Use hf-texture-text hf-texture-bricks-101

Bricks 075 A

hf-texture-bricks-075-a

BRICK

Use hf-texture-text hf-texture-bricks-075-a

Concrete

hf-texture-concrete

CONCRETE

Use hf-texture-text hf-texture-concrete

Concrete 034

hf-texture-concrete-034

CONCRETE

Use hf-texture-text hf-texture-concrete-034

Concrete 047 A

hf-texture-concrete-047-a

CONCRETE

Use hf-texture-text hf-texture-concrete-047-a

Concrete 046

hf-texture-concrete-046

CONCRETE

Use hf-texture-text hf-texture-concrete-046

Concrete 042 A

hf-texture-concrete-042-a

CONCRETE

Use hf-texture-text hf-texture-concrete-042-a

Plaster 001

hf-texture-plaster-001

PLASTER

Use hf-texture-text hf-texture-plaster-001

Painted Plaster 017

hf-texture-painted-plaster-017

PLASTER

Use hf-texture-text hf-texture-painted-plaster-017

Stone

Rock

hf-texture-rock

ROCK

Use hf-texture-text hf-texture-rock

Rock 063

hf-texture-rock-063

ROCK

Use hf-texture-text hf-texture-rock-063

Rock 058

hf-texture-rock-058

ROCK

Use hf-texture-text hf-texture-rock-058

Onyx

hf-texture-onyx

ONYX

Use hf-texture-text hf-texture-onyx

Marble 012

hf-texture-marble-012

MARBLE

Use hf-texture-text hf-texture-marble-012

Marble 016

hf-texture-marble-016

MARBLE

Use hf-texture-text hf-texture-marble-016

Travertine 009

hf-texture-travertine-009

STONE

Use hf-texture-text hf-texture-travertine-009

Paving Stones 150

hf-texture-paving-stones-150

STONE

Use hf-texture-text hf-texture-paving-stones-150

Paving Stones 138

hf-texture-paving-stones-138

STONE

Use hf-texture-text hf-texture-paving-stones-138

Tiles 138

hf-texture-tiles-138

TILE

Use hf-texture-text hf-texture-tiles-138

Ground / Road

Ground 103

hf-texture-ground-103

GROUND

Use hf-texture-text hf-texture-ground-103

Ground 037

hf-texture-ground-037

GROUND

Use hf-texture-text hf-texture-ground-037

Ground 054

hf-texture-ground-054

GROUND

Use hf-texture-text hf-texture-ground-054

Ground 104

hf-texture-ground-104

GROUND

Use hf-texture-text hf-texture-ground-104

Ground 068

hf-texture-ground-068

GROUND

Use hf-texture-text hf-texture-ground-068

Ground 080

hf-texture-ground-080

GROUND

Use hf-texture-text hf-texture-ground-080

Road 012 A

hf-texture-road-012-a

ROAD

Use hf-texture-text hf-texture-road-012-a

Road 008 A

hf-texture-road-008-a

ROAD

Use hf-texture-text hf-texture-road-008-a

Road 007

hf-texture-road-007

ROAD

Use hf-texture-text hf-texture-road-007

Road 013 A

hf-texture-road-013-a

ROAD

Use hf-texture-text hf-texture-road-013-a

Road 012 B

hf-texture-road-012-b

ROAD

Use hf-texture-text hf-texture-road-012-b

Road 009 C

hf-texture-road-009-c

ROAD

Use hf-texture-text hf-texture-road-009-c

Asphalt 031

hf-texture-asphalt-031

ASPHALT

Use hf-texture-text hf-texture-asphalt-031

Wood

Wood

hf-texture-wood

WOOD

Use hf-texture-text hf-texture-wood

Wood 094

hf-texture-wood-094

WOOD

Use hf-texture-text hf-texture-wood-094

Wood 092

hf-texture-wood-092

WOOD

Use hf-texture-text hf-texture-wood-092

Wood 051

hf-texture-wood-051

WOOD

Use hf-texture-text hf-texture-wood-051

Wood 066

hf-texture-wood-066

WOOD

Use hf-texture-text hf-texture-wood-066

Wood 049

hf-texture-wood-049

WOOD

Use hf-texture-text hf-texture-wood-049

Wood 058

hf-texture-wood-058

WOOD

Use hf-texture-text hf-texture-wood-058

Wood Floor 051

hf-texture-wood-floor-051

FLOOR

Use hf-texture-text hf-texture-wood-floor-051

Wood Floor 064

hf-texture-wood-floor-064

FLOOR

Use hf-texture-text hf-texture-wood-floor-064

Wood Floor 070

hf-texture-wood-floor-070

FLOOR

Use hf-texture-text hf-texture-wood-floor-070

Bark 014

hf-texture-bark-014

BARK

Use hf-texture-text hf-texture-bark-014

Metal

Metal

hf-texture-metal

METAL

Use hf-texture-text hf-texture-metal

Metal 049 A

hf-texture-metal-049-a

METAL

Use hf-texture-text hf-texture-metal-049-a

Metal 055 A

hf-texture-metal-055-a

METAL

Use hf-texture-text hf-texture-metal-055-a

Metal 046 B

hf-texture-metal-046-b

METAL

Use hf-texture-text hf-texture-metal-046-b

Metal 061 B

hf-texture-metal-061-b

METAL

Use hf-texture-text hf-texture-metal-061-b

Metal 048 A

hf-texture-metal-048-a

METAL

Use hf-texture-text hf-texture-metal-048-a

Metal 032

hf-texture-metal-032

METAL

Use hf-texture-text hf-texture-metal-032

Metal 041 A

hf-texture-metal-041-a

METAL

Use hf-texture-text hf-texture-metal-041-a

Metal 038

hf-texture-metal-038

METAL

Use hf-texture-text hf-texture-metal-038

Diamond Plate 009

hf-texture-diamond-plate-009

PLATE

Use hf-texture-text hf-texture-diamond-plate-009

Organic / Soft

Lava

hf-texture-lava

LAVA

Use hf-texture-text hf-texture-lava

Grass 005

hf-texture-grass-005

GRASS

Use hf-texture-text hf-texture-grass-005

Grass 001

hf-texture-grass-001

GRASS

Use hf-texture-text hf-texture-grass-001

Grass 004

hf-texture-grass-004

GRASS

Use hf-texture-text hf-texture-grass-004

Carpet

hf-texture-carpet

WOVEN

Use hf-texture-text hf-texture-carpet

Fabric 083

hf-texture-fabric-083

FABRIC

Use hf-texture-text hf-texture-fabric-083

Snow

hf-texture-snow

SNOW

Use hf-texture-text hf-texture-snow

Snow 015

hf-texture-snow-015

SNOW

Use hf-texture-text hf-texture-snow-015

Leather 037

hf-texture-leather-037

LEATHER

Use hf-texture-text hf-texture-leather-037

Fabric 080

hf-texture-fabric-080

FABRIC

Use hf-texture-text hf-texture-fabric-080

Usage

After npx hyperframes add texture-mask-text, the installed snippet lives at compositions/components/texture-mask-text/texture-mask-text.html inside your current HyperFrames project. Open that file and paste the real <style> element near the bottom into your composition once; it defines hf-texture-text and every hf-texture-* class used by the examples above. Keep the installed texture PNGs in assets/texture-mask-text/masks/; the CSS references them with project-root URLs.