diff --git a/docs/public/catalog/components/menu-morph.json b/docs/public/catalog/components/menu-morph.json
index aa650c84f..1d3244b1f 100644
--- a/docs/public/catalog/components/menu-morph.json
+++ b/docs/public/catalog/components/menu-morph.json
@@ -1 +1 @@
-{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Menu Morph - Demo</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      #demo {\n        width: 1920px;\n        height: 1080px;\n        display: grid;\n        place-items: center;\n        background: #f4f4f5;\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .demo-frame {\n        display: grid;\n        place-items: center;\n        min-width: 760px;\n        min-height: 480px;\n        padding: 56px;\n        /* ponytail: zoom on the wrapper — GSAP animates children, not this element */\n        zoom: 3.4;\n      }\n      .hf-transition-menu-morph {\n        position: relative;\n        display: grid;\n        place-items: center;\n        width: 360px;\n        height: 280px;\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .hf-transition-menu-button {\n        z-index: 2;\n        display: grid;\n        place-items: center;\n        gap: 5px;\n        width: 68px;\n        height: 68px;\n        border: 0;\n        border-radius: 999px;\n        background: #18181b;\n        box-shadow: 0 22px 58px rgba(0, 0, 0, 0.22);\n      }\n      .hf-transition-menu-button span {\n        width: 24px;\n        height: 3px;\n        border-radius: 999px;\n        background: #ffffff;\n        transform-origin: center;\n      }\n      .hf-transition-menu-actions {\n        position: absolute;\n        display: flex;\n        gap: 10px;\n        bottom: 20px;\n      }\n      .hf-transition-menu-actions div {\n        padding: 10px 16px;\n        border-radius: 999px;\n        background: #ffffff;\n        color: #18181b;\n        font-size: 14px;\n        font-weight: 700;\n        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);\n        border: 1px solid #e4e4e7;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"menu-morph-demo\"\n      data-start=\"0\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-duration=\"5\"\n    >\n      <div class=\"demo-frame\">\n        <div class=\"hf-transition-menu-morph\">\n          <button class=\"hf-transition-menu-button\" type=\"button\" aria-label=\"Menu\">\n            <span></span><span></span><span></span>\n          </button>\n          <div class=\"hf-transition-menu-actions\">\n            <div>Text</div>\n            <div>Image</div>\n            <div>Audio</div>\n          </div>\n        </div>\n      </div>\n      <script>\n        const tl = gsap.timeline({ paused: true });\n        tl.fromTo(\n          \".hf-transition-menu-button\",\n          { scale: 0.72, opacity: 0 },\n          { scale: 1, opacity: 1, duration: 0.34, ease: \"back.out(1.8)\" },\n          0.3,\n        );\n        tl.to(\n          \".hf-transition-menu-button span:nth-child(1)\",\n          { y: 8, rotation: 45, duration: 0.24, ease: \"power2.inOut\" },\n          0.78,\n        );\n        tl.to(\n          \".hf-transition-menu-button span:nth-child(2)\",\n          { opacity: 0, duration: 0.18, ease: \"power1.out\" },\n          0.78,\n        );\n        tl.to(\n          \".hf-transition-menu-button span:nth-child(3)\",\n          { y: -8, rotation: -45, duration: 0.24, ease: \"power2.inOut\" },\n          0.78,\n        );\n        tl.fromTo(\n          \".hf-transition-menu-actions div\",\n          { y: 28, opacity: 0, scale: 0.86 },\n          { y: 0, opacity: 1, scale: 1, duration: 0.26, stagger: 0.06, ease: \"back.out(1.6)\" },\n          0.96,\n        );\n        tl.set({}, {}, 5);\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"menu-morph-demo\"] = tl;\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Menu Morph - Demo</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      #demo {\n        width: 1920px;\n        height: 1080px;\n        display: grid;\n        place-items: center;\n        background: #f4f4f5;\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .demo-frame {\n        display: grid;\n        place-items: center;\n        min-width: 760px;\n        min-height: 480px;\n        padding: 56px;\n        /* ponytail: scale the wrapper — GSAP animates children, not this element */\n        transform: scale(3.4);\n      }\n      .hf-transition-menu-morph {\n        position: relative;\n        display: grid;\n        place-items: center;\n        width: 360px;\n        height: 280px;\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .hf-transition-menu-button {\n        z-index: 2;\n        display: grid;\n        place-items: center;\n        gap: 5px;\n        width: 68px;\n        height: 68px;\n        border: 0;\n        border-radius: 999px;\n        background: #18181b;\n        box-shadow: 0 22px 58px rgba(0, 0, 0, 0.22);\n      }\n      .hf-transition-menu-button span {\n        width: 24px;\n        height: 3px;\n        border-radius: 999px;\n        background: #ffffff;\n        transform-origin: center;\n      }\n      .hf-transition-menu-actions {\n        position: absolute;\n        display: flex;\n        gap: 10px;\n        bottom: 20px;\n      }\n      .hf-transition-menu-actions div {\n        padding: 10px 16px;\n        border-radius: 999px;\n        background: #ffffff;\n        color: #18181b;\n        font-size: 14px;\n        font-weight: 700;\n        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);\n        border: 1px solid #e4e4e7;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"menu-morph-demo\"\n      data-start=\"0\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-duration=\"5\"\n    >\n      <div class=\"demo-frame\">\n        <div class=\"hf-transition-menu-morph\">\n          <button class=\"hf-transition-menu-button\" type=\"button\" aria-label=\"Menu\">\n            <span></span><span></span><span></span>\n          </button>\n          <div class=\"hf-transition-menu-actions\">\n            <div>Text</div>\n            <div>Image</div>\n            <div>Audio</div>\n          </div>\n        </div>\n      </div>\n      <script>\n        const tl = gsap.timeline({ paused: true });\n        tl.fromTo(\n          \".hf-transition-menu-button\",\n          { scale: 0.72, opacity: 0 },\n          { scale: 1, opacity: 1, duration: 0.34, ease: \"back.out(1.8)\" },\n          0.3,\n        );\n        tl.to(\n          \".hf-transition-menu-button span:nth-child(1)\",\n          { y: 8, rotation: 45, duration: 0.24, ease: \"power2.inOut\" },\n          0.78,\n        );\n        tl.to(\n          \".hf-transition-menu-button span:nth-child(2)\",\n          { opacity: 0, duration: 0.18, ease: \"power1.out\" },\n          0.78,\n        );\n        tl.to(\n          \".hf-transition-menu-button span:nth-child(3)\",\n          { y: -8, rotation: -45, duration: 0.24, ease: \"power2.inOut\" },\n          0.78,\n        );\n        tl.fromTo(\n          \".hf-transition-menu-actions div\",\n          { y: 28, opacity: 0, scale: 0.86 },\n          { y: 0, opacity: 1, scale: 1, duration: 0.26, stagger: 0.06, ease: \"back.out(1.6)\" },\n          0.96,\n        );\n        tl.set({}, {}, 5);\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"menu-morph-demo\"] = tl;\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/registry/components/menu-morph/demo.html b/registry/components/menu-morph/demo.html
index 591cbf1d7..b284d2a2f 100644
--- a/registry/components/menu-morph/demo.html
+++ b/registry/components/menu-morph/demo.html
@@ -30,8 +30,8 @@
         min-width: 760px;
         min-height: 480px;
         padding: 56px;
-        /* ponytail: zoom on the wrapper — GSAP animates children, not this element */
-        zoom: 3.4;
+        /* ponytail: scale the wrapper — GSAP animates children, not this element */
+        transform: scale(3.4);
       }
       .hf-transition-menu-morph {
         position: relative;
