diff --git a/docs/public/catalog/components/caption-texture.json b/docs/public/catalog/components/caption-texture.json
index 0ea90d3194..c68103dfce 100644
--- a/docs/public/catalog/components/caption-texture.json
+++ b/docs/public/catalog/components/caption-texture.json
@@ -1 +1 @@
-{"html":"<!doctype html>\n<html lang=\"en\">\n  <head><base href=\"/public/catalog/items/caption-texture/\">\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Texture</title>\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n    <link href=\"https://fonts.googleapis.com/css2?family=Anton&display=swap\" rel=\"stylesheet\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      .hf-texture-text {\n        color: #fff;\n        -webkit-mask-size: var(--mask-size, cover);\n        mask-size: var(--mask-size, cover);\n        -webkit-mask-position: var(--mask-position, center);\n        mask-position: var(--mask-position, center);\n        -webkit-mask-mode: luminance;\n        mask-mode: luminance;\n        filter: contrast(var(--mask-contrast, 1));\n      }\n\n      *,\n      *::before,\n      *::after {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        width: 1920px;\n        height: 1080px;\n        margin: 0;\n        overflow: hidden;\n        background: #0a0805;\n      }\n      #texture-lava {\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #0a0805;\n      }\n      .lv-overlay {\n        position: absolute;\n        inset: 0;\n        background: rgba(0, 0, 0, 0.55);\n        z-index: 1;\n        pointer-events: none;\n      }\n      #lv-container {\n        position: absolute;\n        inset: 0;\n        z-index: 10;\n        pointer-events: none;\n      }\n\n      .lv-texture-override {\n        -webkit-mask-size: 200% 200%;\n        mask-size: 200% 200%;\n        -webkit-mask-position: 0% 50%;\n        mask-position: 0% 50%;\n        -webkit-mask-mode: luminance;\n        mask-mode: luminance;\n        filter: contrast(1.2);\n      }\n\n      .lv-shadow {\n        position: absolute;\n        left: 0;\n        width: 100%;\n        text-align: center;\n        top: 50%;\n        filter: drop-shadow(0 4px 24px rgba(255, 100, 20, 0.55));\n        opacity: 0;\n        visibility: hidden;\n      }\n      .lv-word {\n        font-family: \"Anton\", sans-serif;\n        font-weight: 400;\n        text-transform: uppercase;\n        color: #ffd0a0;\n        display: inline-block;\n        letter-spacing: 0.04em;\n        line-height: 1;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"caption-texture\"\n      data-composition-id=\"caption-texture\"\n      data-start=\"0\"\n      data-duration=\"8\"\n      data-fps=\"30\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-composition-variables='{\"texture\":{\"type\":\"string\",\"default\":\"lava\"}}'\n    >\n      <div class=\"lv-overlay\"></div>\n      <div id=\"lv-container\"></div>\n    </div>\n\n    <script>\n      (function () {\n        window.__timelines = window.__timelines || {};\n\n        var vars =\n          window.__hyperframes && window.__hyperframes.getVariables\n            ? window.__hyperframes.getVariables()\n            : {};\n        var TEXTURE = vars.texture || \"lava\";\n        var TEXTURE_URL = \"compositions/components/\" + TEXTURE + \".png\";\n\n        var _fitCanvas = document.createElement(\"canvas\");\n        var _fitCtx = _fitCanvas.getContext(\"2d\");\n        function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {\n          var size = baseFontSize;\n          var minSize = Math.floor(baseFontSize * 0.45);\n          while (size > minSize) {\n            _fitCtx.font = fontWeight + \" \" + size + \"px \" + fontFamily;\n            if (_fitCtx.measureText(text).width <= maxWidth) return size;\n            size -= 2;\n          }\n          return minSize;\n        }\n\n        var WORDS = [\n          { text: \"Every\", start: 0.0, end: 0.3 },\n          { text: \"great\", start: 0.3, end: 0.55 },\n          { text: \"video\", start: 0.55, end: 0.85 },\n          { text: \"starts\", start: 0.85, end: 1.1 },\n          { text: \"with\", start: 1.1, end: 1.25 },\n          { text: \"a\", start: 1.25, end: 1.35 },\n          { text: \"single\", start: 1.35, end: 1.65 },\n          { text: \"frame.\", start: 1.65, end: 2.0 },\n          { text: \"HyperFrames\", start: 2.1, end: 2.65 },\n          { text: \"lets\", start: 2.65, end: 2.85 },\n          { text: \"you\", start: 2.85, end: 2.95 },\n          { text: \"write\", start: 2.95, end: 3.15 },\n          { text: \"HTML\", start: 3.15, end: 3.55 },\n          { text: \"and\", start: 3.55, end: 3.65 },\n          { text: \"render\", start: 3.65, end: 3.95 },\n          { text: \"professional\", start: 3.95, end: 4.45 },\n          { text: \"video.\", start: 4.45, end: 4.8 },\n          { text: \"No\", start: 4.9, end: 5.05 },\n          { text: \"timeline.\", start: 5.05, end: 5.45 },\n          { text: \"No\", start: 5.5, end: 5.65 },\n          { text: \"drag\", start: 5.65, end: 5.85 },\n          { text: \"and\", start: 5.85, end: 5.95 },\n          { text: \"drop.\", start: 5.95, end: 6.25 },\n          { text: \"Just\", start: 6.35, end: 6.55 },\n          { text: \"code\", start: 6.55, end: 6.8 },\n          { text: \"that\", start: 6.8, end: 6.95 },\n          { text: \"becomes\", start: 6.95, end: 7.3 },\n          { text: \"cinema.\", start: 7.3, end: 7.7 },\n        ];\n\n        var KEYWORDS = new Set([8, 12, 15, 24, 27]);\n\n        var container = document.getElementById(\"lv-container\");\n        var tl = gsap.timeline({ paused: true });\n\n        WORDS.forEach(function (w, wi) {\n          var txt = w.text.toUpperCase();\n          var fontSize = fitFontSize(txt, 200, \"400\", \"'Anton', sans-serif\", 1720);\n\n          var shadow = document.createElement(\"div\");\n          shadow.className = \"lv-shadow\";\n          shadow.id = \"lv-shadow-\" + wi;\n          gsap.set(shadow, { yPercent: -50 });\n\n          var wordEl = document.createElement(\"div\");\n          wordEl.className = \"hf-texture-text lv-texture-override lv-word\";\n          wordEl.id = \"lv-word-\" + wi;\n          wordEl.textContent = txt;\n          wordEl.style.fontSize = fontSize + \"px\";\n          wordEl.style.webkitMaskImage = \"url('\" + TEXTURE_URL + \"')\";\n          wordEl.style.maskImage = \"url('\" + TEXTURE_URL + \"')\";\n          if (KEYWORDS.has(wi)) wordEl.style.color = \"#FFAA44\";\n\n          shadow.appendChild(wordEl);\n          container.appendChild(shadow);\n\n          var dur = Math.max(w.end - w.start + 0.3, 0.4);\n\n          tl.set(shadow, { visibility: \"visible\", opacity: 0 }, w.start);\n          tl.fromTo(\n            shadow,\n            { opacity: 0, scale: 0.88 },\n            { opacity: 1, scale: 1, duration: 0.18, ease: \"power3.out\" },\n            w.start,\n          );\n          tl.set(wordEl, { \"--mask-position\": \"0% 50%\" }, w.start);\n          tl.to(\n            wordEl,\n            { \"--mask-position\": \"100% 50%\", duration: dur, ease: \"sine.inOut\" },\n            w.start,\n          );\n\n          tl.to(shadow, { opacity: 0, scale: 1.08, duration: 0.1, ease: \"power2.in\" }, w.end);\n          tl.set(shadow, { opacity: 0, visibility: \"hidden\" }, w.end + 0.1);\n        });\n\n        tl.seek(0);\n        window.__timelines[\"caption-texture\"] = tl;\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head><base href=\"/public/catalog/items/caption-texture/\">\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Texture</title>\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n    <link href=\"https://fonts.googleapis.com/css2?family=Anton&display=swap\" rel=\"stylesheet\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      .hf-texture-text {\n        color: #fff;\n        -webkit-mask-size: var(--mask-size, cover);\n        mask-size: var(--mask-size, cover);\n        -webkit-mask-position: var(--mask-position, center);\n        mask-position: var(--mask-position, center);\n        -webkit-mask-mode: luminance;\n        mask-mode: luminance;\n        filter: contrast(var(--mask-contrast, 1));\n      }\n\n      *,\n      *::before,\n      *::after {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        width: 1920px;\n        height: 1080px;\n        margin: 0;\n        overflow: hidden;\n        background: #0a0805;\n      }\n      #texture-lava {\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #0a0805;\n      }\n      .lv-overlay {\n        position: absolute;\n        inset: 0;\n        background: rgba(0, 0, 0, 0.55);\n        z-index: 1;\n        pointer-events: none;\n      }\n      #lv-container {\n        position: absolute;\n        inset: 0;\n        z-index: 10;\n        pointer-events: none;\n      }\n\n      .lv-texture-override {\n        -webkit-mask-size: 200% 200%;\n        mask-size: 200% 200%;\n        -webkit-mask-position: 0% 50%;\n        mask-position: 0% 50%;\n        -webkit-mask-mode: luminance;\n        mask-mode: luminance;\n        filter: contrast(1.2);\n      }\n\n      .lv-shadow {\n        position: absolute;\n        left: 0;\n        width: 100%;\n        text-align: center;\n        top: 50%;\n        filter: drop-shadow(0 4px 24px rgba(255, 100, 20, 0.55));\n        opacity: 0;\n        visibility: hidden;\n      }\n      .lv-word {\n        font-family: \"Anton\", sans-serif;\n        font-weight: 400;\n        text-transform: uppercase;\n        color: #ffd0a0;\n        display: inline-block;\n        letter-spacing: 0.04em;\n        line-height: 1;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"caption-texture\"\n      data-composition-id=\"caption-texture\"\n      data-start=\"0\"\n      data-duration=\"8\"\n      data-fps=\"30\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-composition-variables='{\"texture\":{\"type\":\"string\",\"default\":\"lava\"}}'\n    >\n      <div class=\"lv-overlay\"></div>\n      <div id=\"lv-container\"></div>\n    </div>\n\n    <script>\n      (function () {\n        window.__timelines = window.__timelines || {};\n\n        var vars =\n          window.__hyperframes && window.__hyperframes.getVariables\n            ? window.__hyperframes.getVariables()\n            : {};\n        var TEXTURE = vars.texture || \"lava\";\n        var TEXTURE_URL = TEXTURE + \".png\";\n\n        var _fitCanvas = document.createElement(\"canvas\");\n        var _fitCtx = _fitCanvas.getContext(\"2d\");\n        function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {\n          var size = baseFontSize;\n          var minSize = Math.floor(baseFontSize * 0.45);\n          while (size > minSize) {\n            _fitCtx.font = fontWeight + \" \" + size + \"px \" + fontFamily;\n            if (_fitCtx.measureText(text).width <= maxWidth) return size;\n            size -= 2;\n          }\n          return minSize;\n        }\n\n        var WORDS = [\n          { text: \"Every\", start: 0.0, end: 0.3 },\n          { text: \"great\", start: 0.3, end: 0.55 },\n          { text: \"video\", start: 0.55, end: 0.85 },\n          { text: \"starts\", start: 0.85, end: 1.1 },\n          { text: \"with\", start: 1.1, end: 1.25 },\n          { text: \"a\", start: 1.25, end: 1.35 },\n          { text: \"single\", start: 1.35, end: 1.65 },\n          { text: \"frame.\", start: 1.65, end: 2.0 },\n          { text: \"HyperFrames\", start: 2.1, end: 2.65 },\n          { text: \"lets\", start: 2.65, end: 2.85 },\n          { text: \"you\", start: 2.85, end: 2.95 },\n          { text: \"write\", start: 2.95, end: 3.15 },\n          { text: \"HTML\", start: 3.15, end: 3.55 },\n          { text: \"and\", start: 3.55, end: 3.65 },\n          { text: \"render\", start: 3.65, end: 3.95 },\n          { text: \"professional\", start: 3.95, end: 4.45 },\n          { text: \"video.\", start: 4.45, end: 4.8 },\n          { text: \"No\", start: 4.9, end: 5.05 },\n          { text: \"timeline.\", start: 5.05, end: 5.45 },\n          { text: \"No\", start: 5.5, end: 5.65 },\n          { text: \"drag\", start: 5.65, end: 5.85 },\n          { text: \"and\", start: 5.85, end: 5.95 },\n          { text: \"drop.\", start: 5.95, end: 6.25 },\n          { text: \"Just\", start: 6.35, end: 6.55 },\n          { text: \"code\", start: 6.55, end: 6.8 },\n          { text: \"that\", start: 6.8, end: 6.95 },\n          { text: \"becomes\", start: 6.95, end: 7.3 },\n          { text: \"cinema.\", start: 7.3, end: 7.7 },\n        ];\n\n        var KEYWORDS = new Set([8, 12, 15, 24, 27]);\n\n        var container = document.getElementById(\"lv-container\");\n        var tl = gsap.timeline({ paused: true });\n\n        WORDS.forEach(function (w, wi) {\n          var txt = w.text.toUpperCase();\n          var fontSize = fitFontSize(txt, 200, \"400\", \"'Anton', sans-serif\", 1720);\n\n          var shadow = document.createElement(\"div\");\n          shadow.className = \"lv-shadow\";\n          shadow.id = \"lv-shadow-\" + wi;\n          gsap.set(shadow, { yPercent: -50 });\n\n          var wordEl = document.createElement(\"div\");\n          wordEl.className = \"hf-texture-text lv-texture-override lv-word\";\n          wordEl.id = \"lv-word-\" + wi;\n          wordEl.textContent = txt;\n          wordEl.style.fontSize = fontSize + \"px\";\n          wordEl.style.webkitMaskImage = \"url('\" + TEXTURE_URL + \"')\";\n          wordEl.style.maskImage = \"url('\" + TEXTURE_URL + \"')\";\n          if (KEYWORDS.has(wi)) wordEl.style.color = \"#FFAA44\";\n\n          shadow.appendChild(wordEl);\n          container.appendChild(shadow);\n\n          var dur = Math.max(w.end - w.start + 0.3, 0.4);\n\n          tl.set(shadow, { visibility: \"visible\", opacity: 0 }, w.start);\n          tl.fromTo(\n            shadow,\n            { opacity: 0, scale: 0.88 },\n            { opacity: 1, scale: 1, duration: 0.18, ease: \"power3.out\" },\n            w.start,\n          );\n          tl.set(wordEl, { \"--mask-position\": \"0% 50%\" }, w.start);\n          tl.to(\n            wordEl,\n            { \"--mask-position\": \"100% 50%\", duration: dur, ease: \"sine.inOut\" },\n            w.start,\n          );\n\n          tl.to(shadow, { opacity: 0, scale: 1.08, duration: 0.1, ease: \"power2.in\" }, w.end);\n          tl.set(shadow, { opacity: 0, visibility: \"hidden\" }, w.end + 0.1);\n        });\n\n        tl.seek(0);\n        window.__timelines[\"caption-texture\"] = tl;\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/registry/components/caption-texture/demo.html b/registry/components/caption-texture/demo.html
index 60e73207ae..1ab6847445 100644
--- a/registry/components/caption-texture/demo.html
+++ b/registry/components/caption-texture/demo.html
@@ -109,7 +109,7 @@
             ? window.__hyperframes.getVariables()
             : {};
         var TEXTURE = vars.texture || "lava";
-        var TEXTURE_URL = "compositions/components/" + TEXTURE + ".png";
+        var TEXTURE_URL = TEXTURE + ".png";
 
         var _fitCanvas = document.createElement("canvas");
         var _fitCtx = _fitCanvas.getContext("2d");
