diff --git a/docs/public/catalog/components/animated-bar-chart.json b/docs/public/catalog/components/animated-bar-chart.json
index 0af415bf2..d89caaec6 100644
--- a/docs/public/catalog/components/animated-bar-chart.json
+++ b/docs/public/catalog/components/animated-bar-chart.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>Animated Bar Chart - 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: #f7f7f8;\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .demo-frame {\n        display: grid;\n        place-items: center;\n        padding: 52px;\n        transform: scale(2.1);\n        transform-origin: center center;\n      }\n      .hf-remocn-animated-bar-chart {\n        --hf-accent: var(--accent, #111827);\n        --hf-ink: #111827;\n        --hf-l1: rgba(17, 24, 39, 0.72);\n        --hf-l2: rgba(17, 24, 39, 0.45);\n        --hf-l3: rgba(17, 24, 39, 0.18);\n        --hf-l4: rgba(17, 24, 39, 0.08);\n        --hf-hair: rgba(17, 24, 39, 0.14);\n        --hf-muted: #6b7280;\n        --hf-surface: #ffffff;\n        color: var(--hf-ink);\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .hf-remocn-animated-bar-chart {\n        width: 760px;\n        min-height: 420px;\n        border-radius: 28px;\n        background: #fff;\n        padding: 34px;\n        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.16);\n        display: grid;\n        gap: 22px;\n      }\n      .hf-remocn-animated-bar-chart header {\n        display: flex;\n        justify-content: space-between;\n        align-items: end;\n      }\n      .hf-remocn-animated-bar-chart h3 {\n        margin: 0;\n        font-size: 34px;\n        letter-spacing: -0.04em;\n        font-weight: 700;\n        color: #111827;\n      }\n      .hf-remocn-animated-bar-chart header p {\n        margin: 6px 0 0;\n        font-size: 16px;\n        color: #6b7280;\n        font-weight: 400;\n      }\n      .hf-remocn-animated-bar-chart strong {\n        font-size: 54px;\n        letter-spacing: -0.06em;\n        color: var(--hf-accent);\n        font-weight: 700;\n      }\n      .hf-remocn-animated-bar-chart .bars {\n        height: 210px;\n        display: grid;\n        grid-template-columns: repeat(7, 1fr);\n        align-items: end;\n        gap: 14px;\n      }\n      .hf-remocn-animated-bar-chart .bar {\n        height: calc(var(--h) * var(--hf-grow, 1));\n        border-radius: 14px 14px 5px 5px;\n        background: var(--hf-l1);\n      }\n      .hf-remocn-animated-bar-chart .chart-footer {\n        display: grid;\n        gap: 6px;\n      }\n      .hf-remocn-animated-bar-chart svg {\n        width: 100%;\n        height: 180px;\n        overflow: visible;\n      }\n      .hf-remocn-animated-bar-chart path {\n        color: var(--hf-l2);\n        stroke-dasharray: 900;\n        stroke-dashoffset: var(--hf-dash, 0);\n      }\n      .hf-remocn-animated-bar-chart .bar-labels {\n        display: grid;\n        grid-template-columns: repeat(7, 1fr);\n        text-align: center;\n        font-size: 13px;\n        font-weight: 500;\n        color: #9ca3af;\n        padding: 0 2px;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"animated-bar-chart-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-remocn-animated-bar-chart\">\n          <header>\n            <div>\n              <h3>Animated Bar Chart</h3>\n              <p>A compact data card with deterministic bar growth and value callouts.</p>\n            </div>\n            <strong>+42%</strong>\n          </header>\n          <div class=\"bars\">\n            <span class=\"bar\" style=\"--h: 42%\"></span><span class=\"bar\" style=\"--h: 72%\"></span\n            ><span class=\"bar\" style=\"--h: 56%\"></span><span class=\"bar\" style=\"--h: 88%\"></span\n            ><span class=\"bar\" style=\"--h: 64%\"></span><span class=\"bar\" style=\"--h: 95%\"></span\n            ><span class=\"bar\" style=\"--h: 78%\"></span>\n          </div>\n          <div class=\"chart-footer\">\n            <svg viewBox=\"0 0 700 210\">\n              <!-- baseline -->\n              <line x1=\"20\" y1=\"185\" x2=\"680\" y2=\"185\" stroke=\"#e4e4e7\" stroke-width=\"1.5\" />\n              <path\n                d=\"M20 172 C120 90, 190 118, 260 74 S430 112, 508 42 S620 82, 680 30\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"10\"\n                stroke-linecap=\"round\"\n              />\n            </svg>\n            <div class=\"bar-labels\">\n              <span>Jan</span><span>Feb</span><span>Mar</span><span>Apr</span><span>May</span\n              ><span>Jun</span><span>Jul</span>\n            </div>\n          </div>\n        </div>\n      </div>\n      <script>\n        const tl = gsap.timeline({ paused: true });\n        const startTime = 0.5;\n        tl.fromTo(\n          \".hf-remocn-animated-bar-chart\",\n          { \"--hf-grow\": 0, \"--hf-dash\": 900 },\n          { \"--hf-grow\": 1, \"--hf-dash\": 0, duration: 1.2, ease: \"power3.out\" },\n          startTime,\n        );\n        tl.set({}, {}, 5);\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"animated-bar-chart-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>Animated Bar Chart - 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: #f7f7f8;\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .demo-frame {\n        display: grid;\n        place-items: center;\n        padding: 52px;\n        transform: scale(1.6);\n        transform-origin: center center;\n      }\n      .hf-remocn-animated-bar-chart {\n        --hf-accent: var(--accent, #111827);\n        --hf-ink: #111827;\n        --hf-l1: rgba(17, 24, 39, 0.72);\n        --hf-l2: rgba(17, 24, 39, 0.45);\n        --hf-l3: rgba(17, 24, 39, 0.18);\n        --hf-l4: rgba(17, 24, 39, 0.08);\n        --hf-hair: rgba(17, 24, 39, 0.14);\n        --hf-muted: #6b7280;\n        --hf-surface: #ffffff;\n        color: var(--hf-ink);\n        font-family: Inter, system-ui, sans-serif;\n      }\n      .hf-remocn-animated-bar-chart {\n        width: 760px;\n        min-height: 420px;\n        border-radius: 28px;\n        background: #fff;\n        padding: 34px;\n        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.16);\n        display: grid;\n        gap: 22px;\n      }\n      .hf-remocn-animated-bar-chart header {\n        display: flex;\n        justify-content: space-between;\n        align-items: end;\n      }\n      .hf-remocn-animated-bar-chart h3 {\n        margin: 0;\n        font-size: 34px;\n        letter-spacing: -0.04em;\n        font-weight: 700;\n        color: #111827;\n      }\n      .hf-remocn-animated-bar-chart header p {\n        margin: 6px 0 0;\n        font-size: 16px;\n        color: #6b7280;\n        font-weight: 400;\n      }\n      .hf-remocn-animated-bar-chart strong {\n        font-size: 54px;\n        letter-spacing: -0.06em;\n        color: var(--hf-accent);\n        font-weight: 700;\n      }\n      .hf-remocn-animated-bar-chart .bars {\n        height: 210px;\n        display: grid;\n        grid-template-columns: repeat(7, 1fr);\n        align-items: end;\n        gap: 14px;\n      }\n      .hf-remocn-animated-bar-chart .bar {\n        height: calc(var(--h) * var(--hf-grow, 1));\n        border-radius: 14px 14px 5px 5px;\n        background: var(--hf-l1);\n      }\n      .hf-remocn-animated-bar-chart .chart-footer {\n        display: grid;\n        gap: 6px;\n      }\n      .hf-remocn-animated-bar-chart svg {\n        width: 100%;\n        height: 180px;\n        overflow: visible;\n      }\n      .hf-remocn-animated-bar-chart path {\n        color: var(--hf-l2);\n        stroke-dasharray: 900;\n        stroke-dashoffset: var(--hf-dash, 0);\n      }\n      .hf-remocn-animated-bar-chart .bar-labels {\n        display: grid;\n        grid-template-columns: repeat(7, 1fr);\n        text-align: center;\n        font-size: 13px;\n        font-weight: 500;\n        color: #9ca3af;\n        padding: 0 2px;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"animated-bar-chart-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-remocn-animated-bar-chart\">\n          <header>\n            <div>\n              <h3>Animated Bar Chart</h3>\n              <p>A compact data card with deterministic bar growth and value callouts.</p>\n            </div>\n            <strong>+42%</strong>\n          </header>\n          <div class=\"bars\">\n            <span class=\"bar\" style=\"--h: 42%\"></span><span class=\"bar\" style=\"--h: 72%\"></span\n            ><span class=\"bar\" style=\"--h: 56%\"></span><span class=\"bar\" style=\"--h: 88%\"></span\n            ><span class=\"bar\" style=\"--h: 64%\"></span><span class=\"bar\" style=\"--h: 95%\"></span\n            ><span class=\"bar\" style=\"--h: 78%\"></span>\n          </div>\n          <div class=\"chart-footer\">\n            <svg viewBox=\"0 0 700 210\">\n              <!-- baseline -->\n              <line x1=\"20\" y1=\"185\" x2=\"680\" y2=\"185\" stroke=\"#e4e4e7\" stroke-width=\"1.5\" />\n              <path\n                d=\"M20 172 C120 90, 190 118, 260 74 S430 112, 508 42 S620 82, 680 30\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"10\"\n                stroke-linecap=\"round\"\n              />\n            </svg>\n            <div class=\"bar-labels\">\n              <span>Jan</span><span>Feb</span><span>Mar</span><span>Apr</span><span>May</span\n              ><span>Jun</span><span>Jul</span>\n            </div>\n          </div>\n        </div>\n      </div>\n      <script>\n        const tl = gsap.timeline({ paused: true });\n        const startTime = 0.5;\n        tl.fromTo(\n          \".hf-remocn-animated-bar-chart\",\n          { \"--hf-grow\": 0, \"--hf-dash\": 900 },\n          { \"--hf-grow\": 1, \"--hf-dash\": 0, duration: 1.2, ease: \"power3.out\" },\n          startTime,\n        );\n        tl.set({}, {}, 5);\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"animated-bar-chart-demo\"] = tl;\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/registry/components/animated-bar-chart/demo.html b/registry/components/animated-bar-chart/demo.html
index c5c35e736..0a9429d89 100644
--- a/registry/components/animated-bar-chart/demo.html
+++ b/registry/components/animated-bar-chart/demo.html
@@ -28,7 +28,7 @@
         display: grid;
         place-items: center;
         padding: 52px;
-        transform: scale(2.1);
+        transform: scale(1.6);
         transform-origin: center center;
       }
       .hf-remocn-animated-bar-chart {
