heygen-com__hyperframes/registry/components/caption-texture/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/animejs@4.5.0/dist/bundles/anime.umd.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-video {
        position: absolute;
        inset: 0;
        z-index: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .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='{"texture":{"type":"string","default":"lava"}}'
    >
      <video
        id="lv-video"
        muted
        playsinline
        data-start="0"
        data-duration="8"
        data-track-index="0"
        data-has-audio="false"
      ></video>
      <div class="lv-overlay"></div>
      <div id="lv-container"></div>
    </div>

    <script>
      (function () {
        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 = anime.createTimeline({ autoplay: false });
        function toMs(seconds) {
          return seconds * 1000;
        }

        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;
          shadow.style.translate = "0 -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.add(
            shadow,
            {
              visibility: "visible",
              opacity: 0,
              duration: 0,
            },
            toMs(w.start),
          );
          tl.add(
            shadow,
            {
              opacity: [0, 1],
              scale: [0.88, 1],
              duration: 180,
              ease: "outQuart",
            },
            toMs(w.start),
          );
          tl.add(
            wordEl,
            {
              "--mask-position": "0% 50%",
              duration: 0,
            },
            toMs(w.start),
          );
          tl.add(
            wordEl,
            {
              "--mask-position": "100% 50%",
              duration: toMs(dur),
              ease: "inOutSine",
            },
            toMs(w.start),
          );

          tl.add(
            shadow,
            {
              opacity: 0,
              scale: 1.08,
              duration: 100,
              ease: "inCubic",
            },
            toMs(w.end),
          );
          tl.add(
            shadow,
            {
              opacity: 0,
              visibility: "hidden",
              duration: 0,
            },
            toMs(w.end + 0.1),
          );
        });
        hyperframesAnime.register("caption-texture", tl, { labels: {} });
      })();
    </script>
  </body>
</html>