> ## Documentation Index
> Fetch the complete documentation index at: https://hyperframes-fix-nested-composition-media-inpoint.mintlify.site/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
export const InstallCommand = ({command, item}) => {
const [copied, setCopied] = React.useState(false);
const [tuned, setTuned] = React.useState("");
React.useEffect(() => {
if (!item) return;
const read = () => {
try {
const raw = new URLSearchParams(window.location.search).get(`vars-${item}`);
if (!raw) return setTuned("");
const parsed = JSON.parse(raw);
if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) return setTuned("");
if (Object.keys(parsed).length === 0) return setTuned("");
setTuned(` --vars '${JSON.stringify(parsed)}'`);
} catch {
setTuned("");
}
};
read();
window.addEventListener("hf-vars-changed", read);
window.addEventListener("popstate", read);
return () => {
window.removeEventListener("hf-vars-changed", read);
window.removeEventListener("popstate", read);
};
}, [item]);
const fullCommand = `${command}${tuned}`;
const copy = async () => {
try {
if (navigator.clipboard && window.isSecureContext) {
await navigator.clipboard.writeText(fullCommand);
} else {
const previous = document.activeElement;
const scratch = document.createElement("textarea");
scratch.value = fullCommand;
scratch.setAttribute("readonly", "");
scratch.style.position = "fixed";
scratch.style.opacity = "0";
document.body.appendChild(scratch);
scratch.select();
document.execCommand("copy");
document.body.removeChild(scratch);
previous?.focus?.();
}
setCopied(true);
setTimeout(() => setCopied(false), 2000);
} catch {}
};
return
{fullCommand}
{copied ? "Copied" : ""}
;
};
Brick
BRICK
Rock
ROCK
Ground 103
GROUND
Wood
WOOD
Metal
METAL
Lava
LAVA
## Install
That writes `compositions/components/texture-mask-text/texture-mask-text.html`, plus 66 supporting files under `assets/texture-mask-text/masks/`.
## Source
```html theme={null}
```
## Ask an agent for it
Paste this to your coding agent:
```text theme={null}
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