> ## Documentation Index
> Fetch the complete documentation index at: /llms.txt
> Use this file to discover all available pages before exploring further.

# Texture Mask Text

> CSS luminance masks that cut holes through letterforms - 66 pre-built texture masks from ambientCG PBR color maps

# Texture Mask Text

CSS luminance masks that cut holes through letterforms - 66 pre-built texture masks from ambientCG PBR color maps

**Texture Mask Text**

```html texture-mask-text.html
<!--
  Texture Mask Text - CSS luminance masks that cut holes through letterforms.

  Usage: add class="hf-texture-text hf-texture-{name}" to any text element.
  Paste the real style element near the bottom of this file into your composition's HTML once.
  Texture PNGs install to assets/texture-mask-text/masks; these CSS classes
  reference them with project-root URLs so the CSS block can be pasted
  into any composition.

  Available textures (66 total):
    Masonry:
      hf-texture-brick                - mortar line patterns
      hf-texture-bricks-104           - ambientCG Bricks104
      hf-texture-bricks-102           - ambientCG Bricks102
      hf-texture-bricks-101           - ambientCG Bricks101
      hf-texture-bricks-075-a         - ambientCG Bricks075A
      hf-texture-concrete             - streaked channel cuts
      hf-texture-concrete-034         - ambientCG Concrete034
      hf-texture-concrete-047-a       - ambientCG Concrete047A
      hf-texture-concrete-046         - ambientCG Concrete046
      hf-texture-concrete-042-a       - ambientCG Concrete042A
      hf-texture-plaster-001          - ambientCG Plaster001
      hf-texture-painted-plaster-017  - ambientCG PaintedPlaster017

    Stone:
      hf-texture-rock                 - sharp hard cutouts
      hf-texture-rock-063             - ambientCG Rock063
      hf-texture-rock-058             - ambientCG Rock058
      hf-texture-onyx                 - flowing marble veins
      hf-texture-marble-012           - ambientCG Marble012
      hf-texture-marble-016           - ambientCG Marble016
      hf-texture-travertine-009       - ambientCG Travertine009
      hf-texture-paving-stones-150    - ambientCG PavingStones150
      hf-texture-paving-stones-138    - ambientCG PavingStones138
      hf-texture-tiles-138            - ambientCG Tiles138

    Ground / road:
      hf-texture-ground-103           - ambientCG Ground103
      hf-texture-ground-037           - ambientCG Ground037
      hf-texture-ground-054           - ambientCG Ground054
      hf-texture-ground-104           - ambientCG Ground104
      hf-texture-ground-068           - ambientCG Ground068
      hf-texture-ground-080           - ambientCG Ground080
      hf-texture-road-012-a           - ambientCG Road012A
      hf-texture-road-008-a           - ambientCG Road008A
      hf-texture-road-007             - ambientCG Road007
      hf-texture-road-013-a           - ambientCG Road013A
      hf-texture-road-012-b           - ambientCG Road012B
      hf-texture-road-009-c           - ambientCG Road009C
      hf-texture-asphalt-031          - ambientCG Asphalt031

    Wood:
      hf-texture-wood                 - horizontal grain slices
      hf-texture-wood-094             - ambientCG Wood094
      hf-texture-wood-092             - ambientCG Wood092
      hf-texture-wood-051             - ambientCG Wood051
      hf-texture-wood-066             - ambientCG Wood066
      hf-texture-wood-049             - ambientCG Wood049
      hf-texture-wood-058             - ambientCG Wood058
      hf-texture-wood-floor-051       - ambientCG WoodFloor051
      hf-texture-wood-floor-064       - ambientCG WoodFloor064
      hf-texture-wood-floor-070       - ambientCG WoodFloor070
      hf-texture-bark-014             - ambientCG Bark014

    Metal:
      hf-texture-metal                - rust and pit erosion
      hf-texture-metal-049-a          - ambientCG Metal049A
      hf-texture-metal-055-a          - ambientCG Metal055A
      hf-texture-metal-046-b          - ambientCG Metal046B
      hf-texture-metal-061-b          - ambientCG Metal061B
      hf-texture-metal-048-a          - ambientCG Metal048A
      hf-texture-metal-032            - ambientCG Metal032
      hf-texture-metal-041-a          - ambientCG Metal041A
      hf-texture-metal-038            - ambientCG Metal038
      hf-texture-diamond-plate-009    - ambientCG DiamondPlate009

    Organic / soft:
      hf-texture-lava                 - smooth organic erosion
      hf-texture-grass-005            - ambientCG Grass005
      hf-texture-grass-001            - ambientCG Grass001
      hf-texture-grass-004            - ambientCG Grass004
      hf-texture-carpet               - fine repeating weave
      hf-texture-fabric-083           - ambientCG Fabric083
      hf-texture-snow                 - soft patchy dissolve
      hf-texture-snow-015             - ambientCG Snow015
      hf-texture-leather-037          - ambientCG Leather037
      hf-texture-fabric-080           - ambientCG Fabric080

  Custom properties:
    --mask-size       cover     CSS mask-size
    --mask-position   center    CSS mask-position
    --mask-contrast   1         filter contrast to sharpen/soften edges

  Custom texture (set mask-image directly, not via custom property):
    <div class="hf-texture-text" style="-webkit-mask-image: url('my-texture.png'); mask-image: url('my-texture.png')">TEXT</div>

  Drop shadow (follows masked contour, not bounding box):
    <div style="filter: drop-shadow(2px 3px 4px rgba(0,0,0,0.3))">
      <div class="hf-texture-text hf-texture-lava">TEXT</div>
    </div>
-->

<style>
  .hf-texture-text {
    color: #fff;
    -webkit-mask-size: var(--mask-size, cover);
    mask-size: var(--mask-size, cover);
    -webkit-mask-position: var(--mask-position, center);
    mask-position: var(--mask-position, center);
    -webkit-mask-mode: luminance;
    mask-mode: luminance;
    filter: contrast(var(--mask-contrast, 1));
  }

  .hf-texture-lava {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/lava.png");
    mask-image: url("/assets/texture-mask-text/masks/lava.png");
  }
  .hf-texture-rock {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/rock.png");
    mask-image: url("/assets/texture-mask-text/masks/rock.png");
  }
  .hf-texture-concrete {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/concrete.png");
    mask-image: url("/assets/texture-mask-text/masks/concrete.png");
  }
  .hf-texture-brick {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/brick.png");
    mask-image: url("/assets/texture-mask-text/masks/brick.png");
  }
  .hf-texture-wood {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/wood.png");
    mask-image: url("/assets/texture-mask-text/masks/wood.png");
  }
  .hf-texture-onyx {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/onyx.png");
    mask-image: url("/assets/texture-mask-text/masks/onyx.png");
  }
  .hf-texture-carpet {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/carpet.png");
    mask-image: url("/assets/texture-mask-text/masks/carpet.png");
  }
  .hf-texture-metal {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/metal.png");
    mask-image: url("/assets/texture-mask-text/masks/metal.png");
  }
  .hf-texture-snow {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/snow.png");
    mask-image: url("/assets/texture-mask-text/masks/snow.png");
  }
  .hf-texture-bricks-104 {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/bricks-104.png");
    mask-image: url("/assets/texture-mask-text/masks/bricks-104.png");
  }
  .hf-texture-ground-103 {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/ground-103.png");
    mask-image: url("/assets/texture-mask-text/masks/ground-103.png");
  }
  .hf-texture-grass-005 {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/grass-005.png");
    mask-image: url("/assets/texture-mask-text/masks/grass-005.png");
  }
  .hf-texture-rock-063 {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/rock-063.png");
    mask-image: url("/assets/texture-mask-text/masks/rock-063.png");
  }
  .hf-texture-wood-094 {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/wood-094.png");
    mask-image: url("/assets/texture-mask-text/masks/wood-094.png");
  }
  .hf-texture-road-012-a {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/road-012-a.png");
    mask-image: url("/assets/texture-mask-text/masks/road-012-a.png");
  }
  .hf-texture-wood-092 {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/wood-092.png");
    mask-image: url("/assets/texture-mask-text/masks/wood-092.png");
  }
  .hf-texture-metal-049-a {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/metal-049-a.png");
    mask-image: url("/assets/texture-mask-text/masks/metal-049-a.png");
  }
  .hf-texture-wood-floor-051 {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/wood-floor-051.png");
    mask-image: url("/assets/texture-mask-text/masks/wood-floor-051.png");
  }
  .hf-texture-paving-stones-150 {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/paving-stones-150.png");
    mask-image: url("/assets/texture-mask-text/masks/paving-stones-150.png");
  }
  .hf-texture-road-008-a {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/road-008-a.png");
    mask-image: url("/assets/texture-mask-text/masks/road-008-a.png");
  }
  .hf-texture-road-007 {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/road-007.png");
    mask-image: url("/assets/texture-mask-text/masks/road-007.png");
  }
  .hf-texture-metal-055-a {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/metal-055-a.png");
    mask-image: url("/assets/texture-mask-text/masks/metal-055-a.png");
  }
  .hf-texture-concrete-034 {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/concrete-034.png");
    mask-image: url("/assets/texture-mask-text/masks/concrete-034.png");
  }
  .hf-texture-grass-001 {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/grass-001.png");
    mask-image: url("/assets/texture-mask-text/masks/grass-001.png");
  }
  .hf-texture-wood-051 {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/wood-051.png");
    mask-image: url("/assets/texture-mask-text/masks/wood-051.png");
  }
  .hf-texture-asphalt-031 {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/asphalt-031.png");
    mask-image: url("/assets/texture-mask-text/masks/asphalt-031.png");
  }
  .hf-texture-wood-floor-064 {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/wood-floor-064.png");
    mask-image: url("/assets/texture-mask-text/masks/wood-floor-064.png");
  }
  .hf-texture-concrete-047-a {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/concrete-047-a.png");
    mask-image: url("/assets/texture-mask-text/masks/concrete-047-a.png");
  }
  .hf-texture-metal-046-b {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/metal-046-b.png");
    mask-image: url("/assets/texture-mask-text/masks/metal-046-b.png");
  }
  .hf-texture-grass-004 {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/grass-004.png");
    mask-image: url("/assets/texture-mask-text/masks/grass-004.png");
  }
  .hf-texture-marble-012 {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/marble-012.png");
    mask-image: url("/assets/texture-mask-text/masks/marble-012.png");
  }
  .hf-texture-ground-037 {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/ground-037.png");
    mask-image: url("/assets/texture-mask-text/masks/ground-037.png");
  }
  .hf-texture-tiles-138 {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/tiles-138.png");
    mask-image: url("/assets/texture-mask-text/masks/tiles-138.png");
  }
  .hf-texture-wood-066 {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/wood-066.png");
    mask-image: url("/assets/texture-mask-text/masks/wood-066.png");
  }
  .hf-texture-concrete-046 {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/concrete-046.png");
    mask-image: url("/assets/texture-mask-text/masks/concrete-046.png");
  }
  .hf-texture-wood-049 {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/wood-049.png");
    mask-image: url("/assets/texture-mask-text/masks/wood-049.png");
  }
  .hf-texture-road-013-a {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/road-013-a.png");
    mask-image: url("/assets/texture-mask-text/masks/road-013-a.png");
  }
  .hf-texture-plaster-001 {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/plaster-001.png");
    mask-image: url("/assets/texture-mask-text/masks/plaster-001.png");
  }
  .hf-texture-snow-015 {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/snow-015.png");
    mask-image: url("/assets/texture-mask-text/masks/snow-015.png");
  }
  .hf-texture-road-012-b {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/road-012-b.png");
    mask-image: url("/assets/texture-mask-text/masks/road-012-b.png");
  }
  .hf-texture-concrete-042-a {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/concrete-042-a.png");
    mask-image: url("/assets/texture-mask-text/masks/concrete-042-a.png");
  }
  .hf-texture-bricks-102 {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/bricks-102.png");
    mask-image: url("/assets/texture-mask-text/masks/bricks-102.png");
  }
  .hf-texture-rock-058 {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/rock-058.png");
    mask-image: url("/assets/texture-mask-text/masks/rock-058.png");
  }
  .hf-texture-wood-floor-070 {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/wood-floor-070.png");
    mask-image: url("/assets/texture-mask-text/masks/wood-floor-070.png");
  }
  .hf-texture-bricks-101 {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/bricks-101.png");
    mask-image: url("/assets/texture-mask-text/masks/bricks-101.png");
  }
  .hf-texture-travertine-009 {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/travertine-009.png");
    mask-image: url("/assets/texture-mask-text/masks/travertine-009.png");
  }
  .hf-texture-ground-054 {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/ground-054.png");
    mask-image: url("/assets/texture-mask-text/masks/ground-054.png");
  }
  .hf-texture-wood-058 {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/wood-058.png");
    mask-image: url("/assets/texture-mask-text/masks/wood-058.png");
  }
  .hf-texture-ground-104 {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/ground-104.png");
    mask-image: url("/assets/texture-mask-text/masks/ground-104.png");
  }
  .hf-texture-painted-plaster-017 {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/painted-plaster-017.png");
    mask-image: url("/assets/texture-mask-text/masks/painted-plaster-017.png");
  }
  .hf-texture-paving-stones-138 {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/paving-stones-138.png");
    mask-image: url("/assets/texture-mask-text/masks/paving-stones-138.png");
  }
  .hf-texture-ground-068 {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/ground-068.png");
    mask-image: url("/assets/texture-mask-text/masks/ground-068.png");
  }
  .hf-texture-bricks-075-a {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/bricks-075-a.png");
    mask-image: url("/assets/texture-mask-text/masks/bricks-075-a.png");
  }
  .hf-texture-ground-080 {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/ground-080.png");
    mask-image: url("/assets/texture-mask-text/masks/ground-080.png");
  }
  .hf-texture-road-009-c {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/road-009-c.png");
    mask-image: url("/assets/texture-mask-text/masks/road-009-c.png");
  }
  .hf-texture-bark-014 {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/bark-014.png");
    mask-image: url("/assets/texture-mask-text/masks/bark-014.png");
  }
  .hf-texture-marble-016 {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/marble-016.png");
    mask-image: url("/assets/texture-mask-text/masks/marble-016.png");
  }
  .hf-texture-fabric-083 {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/fabric-083.png");
    mask-image: url("/assets/texture-mask-text/masks/fabric-083.png");
  }
  .hf-texture-metal-061-b {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/metal-061-b.png");
    mask-image: url("/assets/texture-mask-text/masks/metal-061-b.png");
  }
  .hf-texture-metal-048-a {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/metal-048-a.png");
    mask-image: url("/assets/texture-mask-text/masks/metal-048-a.png");
  }
  .hf-texture-metal-032 {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/metal-032.png");
    mask-image: url("/assets/texture-mask-text/masks/metal-032.png");
  }
  .hf-texture-metal-041-a {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/metal-041-a.png");
    mask-image: url("/assets/texture-mask-text/masks/metal-041-a.png");
  }
  .hf-texture-metal-038 {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/metal-038.png");
    mask-image: url("/assets/texture-mask-text/masks/metal-038.png");
  }
  .hf-texture-diamond-plate-009 {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/diamond-plate-009.png");
    mask-image: url("/assets/texture-mask-text/masks/diamond-plate-009.png");
  }
  .hf-texture-leather-037 {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/leather-037.png");
    mask-image: url("/assets/texture-mask-text/masks/leather-037.png");
  }
  .hf-texture-fabric-080 {
    -webkit-mask-image: url("/assets/texture-mask-text/masks/fabric-080.png");
    mask-image: url("/assets/texture-mask-text/masks/fabric-080.png");
  }
</style>
```

Copy npx hyperframes add texture-mask-text to the clipboard

That writes `compositions/components/texture-mask-text/texture-mask-text.html`, plus 66 supporting files under `assets/texture-mask-text/masks/`.

## Paste it into your composition

Open `compositions/components/texture-mask-text/texture-mask-text.html`. Paste the real `<style>` element near the bottom into
your composition once. It defines `hf-texture-text` and every `hf-texture-*` class.

Leave the texture PNGs in `assets/texture-mask-text/masks/`. The CSS looks for them there.

## Texture masks

BrickBRICK

RockROCK

Ground 103GROUND

WoodWOOD

MetalMETAL

LavaLAVA

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

Animated mask position
`hf-texture-text hf-texture-lava`

MOTION

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

### Masonry

Brick`hf-texture-brick`BRICKUse `hf-texture-text hf-texture-brick`

Bricks 104`hf-texture-bricks-104`BRICKUse `hf-texture-text hf-texture-bricks-104`

Bricks 102`hf-texture-bricks-102`BRICKUse `hf-texture-text hf-texture-bricks-102`

Bricks 101`hf-texture-bricks-101`BRICKUse `hf-texture-text hf-texture-bricks-101`

Bricks 075 A`hf-texture-bricks-075-a`BRICKUse `hf-texture-text hf-texture-bricks-075-a`

Concrete`hf-texture-concrete`CONCRETEUse `hf-texture-text hf-texture-concrete`

Concrete 034`hf-texture-concrete-034`CONCRETEUse `hf-texture-text hf-texture-concrete-034`

Concrete 047 A`hf-texture-concrete-047-a`CONCRETEUse `hf-texture-text hf-texture-concrete-047-a`

Concrete 046`hf-texture-concrete-046`CONCRETEUse `hf-texture-text hf-texture-concrete-046`

Concrete 042 A`hf-texture-concrete-042-a`CONCRETEUse `hf-texture-text hf-texture-concrete-042-a`

Plaster 001`hf-texture-plaster-001`PLASTERUse `hf-texture-text hf-texture-plaster-001`

Painted Plaster 017`hf-texture-painted-plaster-017`PLASTERUse `hf-texture-text hf-texture-painted-plaster-017`

### Stone

Rock`hf-texture-rock`ROCKUse `hf-texture-text hf-texture-rock`

Rock 063`hf-texture-rock-063`ROCKUse `hf-texture-text hf-texture-rock-063`

Rock 058`hf-texture-rock-058`ROCKUse `hf-texture-text hf-texture-rock-058`

Onyx`hf-texture-onyx`ONYXUse `hf-texture-text hf-texture-onyx`

Marble 012`hf-texture-marble-012`MARBLEUse `hf-texture-text hf-texture-marble-012`

Marble 016`hf-texture-marble-016`MARBLEUse `hf-texture-text hf-texture-marble-016`

Travertine 009`hf-texture-travertine-009`STONEUse `hf-texture-text hf-texture-travertine-009`

Paving Stones 150`hf-texture-paving-stones-150`STONEUse `hf-texture-text hf-texture-paving-stones-150`

Paving Stones 138`hf-texture-paving-stones-138`STONEUse `hf-texture-text hf-texture-paving-stones-138`

Tiles 138`hf-texture-tiles-138`TILEUse `hf-texture-text hf-texture-tiles-138`

### Ground / Road

Ground 103`hf-texture-ground-103`GROUNDUse `hf-texture-text hf-texture-ground-103`

Ground 037`hf-texture-ground-037`GROUNDUse `hf-texture-text hf-texture-ground-037`

Ground 054`hf-texture-ground-054`GROUNDUse `hf-texture-text hf-texture-ground-054`

Ground 104`hf-texture-ground-104`GROUNDUse `hf-texture-text hf-texture-ground-104`

Ground 068`hf-texture-ground-068`GROUNDUse `hf-texture-text hf-texture-ground-068`

Ground 080`hf-texture-ground-080`GROUNDUse `hf-texture-text hf-texture-ground-080`

Road 012 A`hf-texture-road-012-a`ROADUse `hf-texture-text hf-texture-road-012-a`

Road 008 A`hf-texture-road-008-a`ROADUse `hf-texture-text hf-texture-road-008-a`

Road 007`hf-texture-road-007`ROADUse `hf-texture-text hf-texture-road-007`

Road 013 A`hf-texture-road-013-a`ROADUse `hf-texture-text hf-texture-road-013-a`

Road 012 B`hf-texture-road-012-b`ROADUse `hf-texture-text hf-texture-road-012-b`

Road 009 C`hf-texture-road-009-c`ROADUse `hf-texture-text hf-texture-road-009-c`

Asphalt 031`hf-texture-asphalt-031`ASPHALTUse `hf-texture-text hf-texture-asphalt-031`

### Wood

Wood`hf-texture-wood`WOODUse `hf-texture-text hf-texture-wood`

Wood 094`hf-texture-wood-094`WOODUse `hf-texture-text hf-texture-wood-094`

Wood 092`hf-texture-wood-092`WOODUse `hf-texture-text hf-texture-wood-092`

Wood 051`hf-texture-wood-051`WOODUse `hf-texture-text hf-texture-wood-051`

Wood 066`hf-texture-wood-066`WOODUse `hf-texture-text hf-texture-wood-066`

Wood 049`hf-texture-wood-049`WOODUse `hf-texture-text hf-texture-wood-049`

Wood 058`hf-texture-wood-058`WOODUse `hf-texture-text hf-texture-wood-058`

Wood Floor 051`hf-texture-wood-floor-051`FLOORUse `hf-texture-text hf-texture-wood-floor-051`

Wood Floor 064`hf-texture-wood-floor-064`FLOORUse `hf-texture-text hf-texture-wood-floor-064`

Wood Floor 070`hf-texture-wood-floor-070`FLOORUse `hf-texture-text hf-texture-wood-floor-070`

Bark 014`hf-texture-bark-014`BARKUse `hf-texture-text hf-texture-bark-014`

### Metal

Metal`hf-texture-metal`METALUse `hf-texture-text hf-texture-metal`

Metal 049 A`hf-texture-metal-049-a`METALUse `hf-texture-text hf-texture-metal-049-a`

Metal 055 A`hf-texture-metal-055-a`METALUse `hf-texture-text hf-texture-metal-055-a`

Metal 046 B`hf-texture-metal-046-b`METALUse `hf-texture-text hf-texture-metal-046-b`

Metal 061 B`hf-texture-metal-061-b`METALUse `hf-texture-text hf-texture-metal-061-b`

Metal 048 A`hf-texture-metal-048-a`METALUse `hf-texture-text hf-texture-metal-048-a`

Metal 032`hf-texture-metal-032`METALUse `hf-texture-text hf-texture-metal-032`

Metal 041 A`hf-texture-metal-041-a`METALUse `hf-texture-text hf-texture-metal-041-a`

Metal 038`hf-texture-metal-038`METALUse `hf-texture-text hf-texture-metal-038`

Diamond Plate 009`hf-texture-diamond-plate-009`PLATEUse `hf-texture-text hf-texture-diamond-plate-009`

### Organic / Soft

Lava`hf-texture-lava`LAVAUse `hf-texture-text hf-texture-lava`

Grass 005`hf-texture-grass-005`GRASSUse `hf-texture-text hf-texture-grass-005`

Grass 001`hf-texture-grass-001`GRASSUse `hf-texture-text hf-texture-grass-001`

Grass 004`hf-texture-grass-004`GRASSUse `hf-texture-text hf-texture-grass-004`

Carpet`hf-texture-carpet`WOVENUse `hf-texture-text hf-texture-carpet`

Fabric 083`hf-texture-fabric-083`FABRICUse `hf-texture-text hf-texture-fabric-083`

Snow`hf-texture-snow`SNOWUse `hf-texture-text hf-texture-snow`

Snow 015`hf-texture-snow-015`SNOWUse `hf-texture-text hf-texture-snow-015`

Leather 037`hf-texture-leather-037`LEATHERUse `hf-texture-text hf-texture-leather-037`

Fabric 080`hf-texture-fabric-080`FABRICUse `hf-texture-text hf-texture-fabric-080`

{/* hf:generated-footer */}

Tagged `text` `text-effect` `effect` `texture` `mask`.

## Related topics

* [Browse the complete Catalog](/catalog.md)
* [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks.md)
* [Put blocks together into one video](/concepts/compositions.md)