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

# Clip Wipe

> Left-to-right clip-path wipe reveal per word

# Clip Wipe

Left-to-right clip-path wipe reveal per word

**Clip Wipe**

```html caption-clip-wipe.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=1920, height=1080" />
    <title>Clip Wipe</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=Poppins:wght@800&display=swap"
      rel="stylesheet"
    />
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
    <style>
      *,
      *::before,
      *::after {
        box-sizing: border-box;
      }
      html,
      body {
        width: 1920px;
        height: 1080px;
        margin: 0;
        overflow: hidden;
        background: transparent;
      }
      #clip-wipe {
        pointer-events: none;
        position: relative;
        width: 1920px;
        height: 1080px;
        overflow: hidden;
        background: transparent;
      }
      .wp-overlay {
        position: absolute;
        inset: 0;
        background: transparent;
        z-index: 1;
        pointer-events: none;
      }
      #wp-container {
        position: absolute;
        inset: 0;
        z-index: 10;
        pointer-events: none;
      }
      .wp-group {
        position: absolute;
        bottom: 120px;
        left: 0;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        justify-content: center;
        gap: 24px;
        padding: 0 100px;
        visibility: hidden;
      }
      .wp-word {
        font-family: "Poppins", sans-serif;
        font-weight: 800;
        font-size: 88px;
        text-transform: uppercase;
        color: #ffffff;
        display: inline-block;
        letter-spacing: 0.04em;
        line-height: 1;
        clip-path: inset(0 100% 0 0);
        will-change: clip-path, color, opacity;
      }
    </style>
  </head>
  <body>
    <div
      id="clip-wipe"
      data-composition-id="caption-clip-wipe"
      data-timeline-locked
      data-start="0"
      data-duration="8"
      data-fps="30"
      data-width="1920"
      data-height="1080"
    >
      <div class="wp-overlay"></div>
      <div id="wp-container"></div>
    </div>

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

        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]); // HyperFrames, HTML, professional, code, cinema.

        var RAW_GROUPS = [
          [0, 3],
          [4, 7],
          [8, 8],
          [9, 12],
          [13, 15],
          [16, 16],
          [17, 19],
          [20, 22],
          [23, 24],
          [25, 27],
        ];
        var GROUPS = RAW_GROUPS.map(function (pair, gi) {
          var ws = pair[0],
            we = pair[1];
          var nextStart = gi + 1 < RAW_GROUPS.length ? WORDS[RAW_GROUPS[gi + 1][0]].start : 8.0;
          var gEnd = Math.min(WORDS[we].end + 0.5, nextStart - 0.05);
          return { wordStart: ws, wordEnd: we, start: WORDS[ws].start, end: gEnd };
        });

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

        GROUPS.forEach(function (g, gi) {
          var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);
          var grp = document.createElement("div");
          grp.className = "wp-group";
          grp.id = "wp-grp-" + gi;

          var groupText = groupWords
            .map(function (w) {
              return w.text.toUpperCase();
            })
            .join(" ");
          var computedSize = fitFontSize(groupText, 88, "800", "Poppins", 1720);

          groupWords.forEach(function (w, i) {
            var wi = g.wordStart + i;
            var span = document.createElement("span");
            span.className = "wp-word";
            span.id = "wp-w-" + wi;
            span.textContent = w.text.toUpperCase();
            span.style.fontSize = computedSize + "px";
            grp.appendChild(span);
          });

          container.appendChild(grp);

          tl.set(grp, { visibility: "visible" }, g.start);

          groupWords.forEach(function (w, i) {
            var wi = g.wordStart + i;
            var wordEl = document.getElementById("wp-w-" + wi);
            var isKW = KEYWORDS.has(wi);

            tl.to(
              wordEl,
              { clipPath: "inset(0 0% 0 0)", duration: 0.3, ease: "power2.out" },
              w.start,
            );
            if (isKW) {
              tl.to(wordEl, { color: "#FFD700", duration: 0.05 }, w.start + 0.1);
            }
            tl.to(wordEl, { color: "rgba(255,255,255,0.4)", duration: 0.2 }, w.end);
          });

          var wordEls = grp.querySelectorAll(".wp-word");
          tl.to(
            wordEls,
            {
              clipPath: "inset(0 0% 0 100%)",
              duration: 0.25,
              stagger: 0.04,
              ease: "power2.in",
            },
            g.end - 0.2,
          );
          tl.set(grp, { visibility: "hidden", opacity: 0 }, g.end);
        });

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

Copy npx hyperframes add caption-clip-wipe to the clipboard

That writes one file: `compositions/components/caption-clip-wipe.html`.

## Paste it into your composition

Open `compositions/components/caption-clip-wipe.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.

{/* hf:generated-footer */}

Tagged `captions` `caption-style` `wipe` `clip-path` `reveal`.

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