hyperframes/docs/catalog/components/caption-texture.mdx

---
title: "Texture"
description: "Flowing texture mask over large uppercase text — ships with 6 textures (lava, marble, metal, wood, concrete, rock), configurable via the texture variable"
mode: "frame"
---

import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
import { InstallCommand } from "/snippets/install-command.jsx";

<div className="hf-ve-static-head not-prose">
  <h1>Texture</h1>
  <p>Flowing texture mask over large uppercase text — ships with 6 textures (lava, marble, metal, wood, concrete, rock), configurable via the texture variable</p>
</div>

<CatalogDetail
  previewSrc="/public/catalog/components/caption-texture.json"
  compositionId="caption-texture"
  compositionSrc="compositions/components/caption-texture.html"
  title="Texture"
  variables={[{"id":"texture","type":"string","default":"lava"}]}
  meta={{"category":"Captions","badge":"Stable","codeLines":210}}
  attribution={{"path":"registry/components/caption-texture","tags":["captions","caption-style","texture","mask"]}}
  hasCode
  rawUrl="https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/components/caption-texture/caption-texture.html"
>

<CatalogSlot slot="code">

```html caption-texture.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=1920, height=1080" />
    <title>Texture</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
    <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));
      }

      *,
      *::before,
      *::after {
        box-sizing: border-box;
      }
      html,
      body {
        width: 1920px;
        height: 1080px;
        margin: 0;
        overflow: hidden;
        background: transparent;
      }
      #texture-lava {
        position: relative;
        width: 1920px;
        height: 1080px;
        overflow: hidden;
        background: transparent;
      }
      .lv-overlay {
        position: absolute;
        inset: 0;
        background: transparent;
        z-index: 1;
        pointer-events: none;
      }
      #lv-container {
        position: absolute;
        inset: 0;
        z-index: 10;
        pointer-events: none;
      }

      .lv-texture-override {
        -webkit-mask-size: 200% 200%;
        mask-size: 200% 200%;
        -webkit-mask-position: 0% 50%;
        mask-position: 0% 50%;
        -webkit-mask-mode: luminance;
        mask-mode: luminance;
        filter: contrast(1.2);
      }

      .lv-shadow {
        position: absolute;
        left: 0;
        width: 100%;
        text-align: center;
        top: 50%;
        filter: drop-shadow(0 4px 24px rgba(255, 100, 20, 0.55));
        opacity: 0;
        visibility: hidden;
      }
      .lv-word {
        font-family: "Anton", sans-serif;
        font-weight: 400;
        text-transform: uppercase;
        color: #ffd0a0;
        display: inline-block;
        letter-spacing: 0.04em;
        line-height: 1;
      }
    </style>
  </head>
  <body>
    <div
      id="caption-texture"
      data-composition-id="caption-texture"
      data-timeline-locked
      data-start="0"
      data-duration="8"
      data-fps="30"
      data-width="1920"
      data-height="1080"
      data-composition-variables='[{"id":"texture","type":"string","label":"Texture","default":"lava"}]'
    >
      <div class="lv-overlay"></div>
      <div id="lv-container"></div>
    </div>

    <script>
      (function () {
        window.__timelines = window.__timelines || {};

        var vars =
          window.__hyperframes && window.__hyperframes.getVariables
            ? window.__hyperframes.getVariables()
            : {};
        var TEXTURE = vars.texture || "lava";
        var TEXTURE_URL = "compositions/components/" + TEXTURE + ".png";

        var _fitCanvas = document.createElement("canvas");
        var _fitCtx = _fitCanvas.getContext("2d");
        function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
          var size = baseFontSize;
          var minSize = Math.floor(baseFontSize * 0.45);
          while (size > minSize) {
            _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
            if (_fitCtx.measureText(text).width <= maxWidth) return size;
            size -= 2;
          }
          return minSize;
        }

        var WORDS = [
          { text: "Every", start: 0.0, end: 0.3 },
          { text: "great", start: 0.3, end: 0.55 },
          { text: "video", start: 0.55, end: 0.85 },
          { text: "starts", start: 0.85, end: 1.1 },
          { text: "with", start: 1.1, end: 1.25 },
          { text: "a", start: 1.25, end: 1.35 },
          { text: "single", start: 1.35, end: 1.65 },
          { text: "frame.", start: 1.65, end: 2.0 },
          { text: "HyperFrames", start: 2.1, end: 2.65 },
          { text: "lets", start: 2.65, end: 2.85 },
          { text: "you", start: 2.85, end: 2.95 },
          { text: "write", start: 2.95, end: 3.15 },
          { text: "HTML", start: 3.15, end: 3.55 },
          { text: "and", start: 3.55, end: 3.65 },
          { text: "render", start: 3.65, end: 3.95 },
          { text: "professional", start: 3.95, end: 4.45 },
          { text: "video.", start: 4.45, end: 4.8 },
          { text: "No", start: 4.9, end: 5.05 },
          { text: "timeline.", start: 5.05, end: 5.45 },
          { text: "No", start: 5.5, end: 5.65 },
          { text: "drag", start: 5.65, end: 5.85 },
          { text: "and", start: 5.85, end: 5.95 },
          { text: "drop.", start: 5.95, end: 6.25 },
          { text: "Just", start: 6.35, end: 6.55 },
          { text: "code", start: 6.55, end: 6.8 },
          { text: "that", start: 6.8, end: 6.95 },
          { text: "becomes", start: 6.95, end: 7.3 },
          { text: "cinema.", start: 7.3, end: 7.7 },
        ];

        var KEYWORDS = new Set([8, 12, 15, 24, 27]);

        var container = document.getElementById("lv-container");
        var tl = gsap.timeline({ paused: true });

        WORDS.forEach(function (w, wi) {
          var txt = w.text.toUpperCase();
          var fontSize = fitFontSize(txt, 200, "400", "'Anton', sans-serif", 1720);

          var shadow = document.createElement("div");
          shadow.className = "lv-shadow";
          shadow.id = "lv-shadow-" + wi;
          gsap.set(shadow, { yPercent: -50 });

          var wordEl = document.createElement("div");
          wordEl.className = "hf-texture-text lv-texture-override lv-word";
          wordEl.id = "lv-word-" + wi;
          wordEl.textContent = txt;
          wordEl.style.fontSize = fontSize + "px";
          wordEl.style.webkitMaskImage = "url('" + TEXTURE_URL + "')";
          wordEl.style.maskImage = "url('" + TEXTURE_URL + "')";
          if (KEYWORDS.has(wi)) wordEl.style.color = "#FFAA44";

          shadow.appendChild(wordEl);
          container.appendChild(shadow);

          var dur = Math.max(w.end - w.start + 0.3, 0.4);

          tl.set(shadow, { visibility: "visible", opacity: 0 }, w.start);
          tl.fromTo(
            shadow,
            { opacity: 0, scale: 0.88 },
            { opacity: 1, scale: 1, duration: 0.18, ease: "power3.out" },
            w.start,
          );
          tl.set(wordEl, { "--mask-position": "0% 50%" }, w.start);
          tl.to(
            wordEl,
            { "--mask-position": "100% 50%", duration: dur, ease: "sine.inOut" },
            w.start,
          );

          tl.to(shadow, { opacity: 0, scale: 1.08, duration: 0.1, ease: "power2.in" }, w.end);
          tl.set(shadow, { opacity: 0, visibility: "hidden" }, w.end + 0.1);
        });

        tl.seek(0);
        window.__timelines["caption-texture"] = tl;
      })();
    </script>
  </body>
</html>
```

</CatalogSlot>

<CatalogSlot slot="install">

<InstallCommand command="npx hyperframes add caption-texture" item="caption-texture" />

That writes `compositions/components/caption-texture.html`, plus 6 supporting files under `compositions/components/`.

</CatalogSlot>

</CatalogDetail>

<div data-static-slot="docs" className="prose prose-gray dark:prose-invert">

## Paste it into your composition

Open `compositions/components/caption-texture.html` and copy what is inside into your own composition.

A component has no size or duration of its own. It takes both from the composition
you paste it into.

## Variables

Every one of these has a default, so the piece works untouched. Set the ones you
want to change on the element:

| Variable | Default | Accepts | What it does |
| --- | --- | --- | --- |
| `texture` | `lava` | string |  |

Set them with `data-variable-values` on the element that mounts it. These are the
defaults, so this behaves exactly like the preview above until you change one:

```html wrap
<div
  data-composition-id="caption-texture"
  data-composition-src="compositions/components/caption-texture.html"
  data-variable-values='{"texture":"lava"}'
></div>
```

{/* hf:generated-footer */}

Tagged `captions` `caption-style` `texture` `mask`.

## Related topics

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

</div>