From a98c1203831a272fc3f9cd655c9d8010e89d3440 Mon Sep 17 00:00:00 2001
From: Miguel Angel Simon Sierra <miguel.sierra@heygen.com>
Date: Sat, 1 Aug 2026 01:19:58 +0200
Subject: [PATCH] style(registry): format mk / yt / hw family HTML with oxfmt
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The contributed HTML predates any oxfmt pass, so format:check failed for
42 files in both the Format and Preflight jobs. All 29 items re-rendered
after formatting and verified against frames — no visual change.
---
 registry/blocks/hw-frame/hw-frame.html        | 23 ++++-
 registry/blocks/hw-path-text/demo.html        |  2 +-
 .../blocks/hw-path-text/hw-path-text.html     |  2 +-
 registry/blocks/hw-pipeline/demo.html         | 37 ++++++--
 registry/blocks/hw-pipeline/hw-pipeline.html  | 37 ++++++--
 .../hw-scribble-transition.html               | 11 ++-
 .../blocks/hw-text-cloud/hw-text-cloud.html   | 35 ++++++-
 registry/blocks/hw-title/demo.html            | 24 ++++-
 registry/blocks/hw-title/hw-title.html        | 24 ++++-
 .../mk-callout-highlight.html                 |  8 +-
 .../mk-clone-wall-transition.html             | 11 ++-
 .../blocks/mk-line-graph/mk-line-graph.html   |  2 +-
 .../mk-placeholder-grid.html                  |  4 +-
 .../mk-progress-stat/mk-progress-stat.html    |  4 +-
 .../blocks/mk-specs-list/mk-specs-list.html   |  2 +-
 .../yt-comment-card/yt-comment-card.html      | 14 ++-
 .../yt-lcd-background/yt-lcd-background.html  | 71 ++++++++++++---
 .../blocks/yt-logo-intro/yt-logo-intro.html   | 18 +++-
 .../blocks/yt-prism-title/yt-prism-title.html | 38 ++++++--
 .../yt-vertical-fill/yt-vertical-fill.html    | 36 ++++++--
 registry/components/hw-arrow/demo.html        | 52 +++++++++--
 registry/components/hw-arrow/hw-arrow.html    | 52 +++++++++--
 registry/components/hw-boil/demo.html         | 17 +++-
 registry/components/hw-boil/hw-boil.html      | 17 +++-
 registry/components/hw-box-label/demo.html    | 29 +++++-
 .../components/hw-box-label/hw-box-label.html | 29 +++++-
 .../components/hw-callout-circle/demo.html    | 49 ++++++++--
 .../hw-callout-circle/hw-callout-circle.html  | 49 ++++++++--
 registry/components/hw-underline/demo.html    | 91 +++++++++++++++----
 .../components/hw-underline/hw-underline.html | 91 +++++++++++++++----
 .../components/mk-emphasis-type/demo.html     |  2 +-
 .../mk-emphasis-type/mk-emphasis-type.html    |  2 +-
 registry/components/mk-usage-arc/demo.html    | 18 +++-
 .../components/mk-usage-arc/mk-usage-arc.html | 18 +++-
 registry/components/yt-camera-move/demo.html  | 11 ++-
 .../yt-camera-move/yt-camera-move.html        | 11 ++-
 .../components/yt-circle-pointer/demo.html    | 16 +++-
 .../yt-circle-pointer/yt-circle-pointer.html  | 16 +++-
 .../components/yt-feather-highlight/demo.html |  2 +-
 .../yt-feather-highlight.html                 |  2 +-
 registry/components/yt-screen-warp/demo.html  |  2 +-
 .../yt-screen-warp/yt-screen-warp.html        |  2 +-
 42 files changed, 792 insertions(+), 189 deletions(-)

diff --git a/registry/blocks/hw-frame/hw-frame.html b/registry/blocks/hw-frame/hw-frame.html
index 37d035c5f..8bfb70a44 100644
--- a/registry/blocks/hw-frame/hw-frame.html
+++ b/registry/blocks/hw-frame/hw-frame.html
@@ -104,7 +104,7 @@
         data-start="0"
         data-duration="8"
         data-track-index="0"
-        style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
       ></div>
     </div>
     <script>
@@ -182,7 +182,15 @@
           d += " Q " + (w + wob(7)) + " " + wob(8) + " " + (w + wob(9)) + " " + (r + wob(10));
           d += " L " + (w + wob(11)) + " " + (h / 2 + wob(12));
           d += " L " + (w + wob(13)) + " " + (h - r + wob(14));
-          d += " Q " + (w + wob(15)) + " " + (h + wob(16)) + " " + (w - r + wob(17)) + " " + (h + wob(18));
+          d +=
+            " Q " +
+            (w + wob(15)) +
+            " " +
+            (h + wob(16)) +
+            " " +
+            (w - r + wob(17)) +
+            " " +
+            (h + wob(18));
           d += " L " + (w / 2 + wob(19)) + " " + (h + wob(20));
           d += " L " + (r + wob(21)) + " " + (h + wob(22));
           d += " Q " + wob(23) + " " + (h + wob(24)) + " " + wob(25) + " " + (h - r + wob(26));
@@ -232,7 +240,16 @@
             for (var k = 0; k < 3; k++) {
               var a = -0.6 - k * 0.5 + window.hwHash(i * 9 + k, CONFIG.seed) * 0.2;
               var l = 26 + window.hwHash(i * 9 + k + 4, CONFIG.seed) * 8;
-              dd += "M " + pt[0] + " " + pt[1] + " l " + (Math.cos(a) * l).toFixed(1) + " " + (Math.sin(a) * l).toFixed(1) + " ";
+              dd +=
+                "M " +
+                pt[0] +
+                " " +
+                pt[1] +
+                " l " +
+                (Math.cos(a) * l).toFixed(1) +
+                " " +
+                (Math.sin(a) * l).toFixed(1) +
+                " ";
             }
             p.setAttribute("d", dd);
             svg.appendChild(p);
diff --git a/registry/blocks/hw-path-text/demo.html b/registry/blocks/hw-path-text/demo.html
index f8aae307d..3dc31619d 100644
--- a/registry/blocks/hw-path-text/demo.html
+++ b/registry/blocks/hw-path-text/demo.html
@@ -87,7 +87,7 @@
         data-start="0"
         data-duration="6"
         data-track-index="0"
-        style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
       ></div>
     </div>
     <script>
diff --git a/registry/blocks/hw-path-text/hw-path-text.html b/registry/blocks/hw-path-text/hw-path-text.html
index 2c48cbddb..fa10379cd 100644
--- a/registry/blocks/hw-path-text/hw-path-text.html
+++ b/registry/blocks/hw-path-text/hw-path-text.html
@@ -84,7 +84,7 @@
         data-start="0"
         data-duration="6"
         data-track-index="0"
-        style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
       ></div>
     </div>
     <script>
diff --git a/registry/blocks/hw-pipeline/demo.html b/registry/blocks/hw-pipeline/demo.html
index f9d7064ff..cac624563 100644
--- a/registry/blocks/hw-pipeline/demo.html
+++ b/registry/blocks/hw-pipeline/demo.html
@@ -85,7 +85,7 @@
         data-start="0"
         data-duration="7"
         data-track-index="0"
-        style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
       ></div>
     </div>
     <script>
@@ -158,7 +158,15 @@
           d += " Q " + (w + wob(7)) + " " + wob(8) + " " + (w + wob(9)) + " " + (r + wob(10));
           d += " L " + (w + wob(11)) + " " + (h / 2 + wob(12));
           d += " L " + (w + wob(13)) + " " + (h - r + wob(14));
-          d += " Q " + (w + wob(15)) + " " + (h + wob(16)) + " " + (w - r + wob(17)) + " " + (h + wob(18));
+          d +=
+            " Q " +
+            (w + wob(15)) +
+            " " +
+            (h + wob(16)) +
+            " " +
+            (w - r + wob(17)) +
+            " " +
+            (h + wob(18));
           d += " L " + (w / 2 + wob(19)) + " " + (h + wob(20));
           d += " L " + (r + wob(21)) + " " + (h + wob(22));
           d += " Q " + wob(23) + " " + (h + wob(24)) + " " + wob(25) + " " + (h - r + wob(26));
@@ -217,10 +225,27 @@
             c.setAttribute("id", "hw-pl-conn-" + i);
             c.setAttribute(
               "d",
-              "M " + (cx + 10) + " " + cy +
-                " Q " + (cx + CONFIG.gap / 2 + window.hwHash(i * 9 + 2, CONFIG.seed) * 16) + " " + (cy - 46 - window.hwHash(i * 9 + 3, CONFIG.seed) * 12) +
-                " " + (ex - 10) + " " + ey +
-                " M " + (ex - 10) + " " + ey + " l -30 -14 M " + (ex - 10) + " " + ey + " l -26 18"
+              "M " +
+                (cx + 10) +
+                " " +
+                cy +
+                " Q " +
+                (cx + CONFIG.gap / 2 + window.hwHash(i * 9 + 2, CONFIG.seed) * 16) +
+                " " +
+                (cy - 46 - window.hwHash(i * 9 + 3, CONFIG.seed) * 12) +
+                " " +
+                (ex - 10) +
+                " " +
+                ey +
+                " M " +
+                (ex - 10) +
+                " " +
+                ey +
+                " l -30 -14 M " +
+                (ex - 10) +
+                " " +
+                ey +
+                " l -26 18",
             );
             svg.appendChild(c);
             conns.push(c);
diff --git a/registry/blocks/hw-pipeline/hw-pipeline.html b/registry/blocks/hw-pipeline/hw-pipeline.html
index 9fa69f470..bfa5c7a0b 100644
--- a/registry/blocks/hw-pipeline/hw-pipeline.html
+++ b/registry/blocks/hw-pipeline/hw-pipeline.html
@@ -82,7 +82,7 @@
         data-start="0"
         data-duration="7"
         data-track-index="0"
-        style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
       ></div>
     </div>
     <script>
@@ -155,7 +155,15 @@
           d += " Q " + (w + wob(7)) + " " + wob(8) + " " + (w + wob(9)) + " " + (r + wob(10));
           d += " L " + (w + wob(11)) + " " + (h / 2 + wob(12));
           d += " L " + (w + wob(13)) + " " + (h - r + wob(14));
-          d += " Q " + (w + wob(15)) + " " + (h + wob(16)) + " " + (w - r + wob(17)) + " " + (h + wob(18));
+          d +=
+            " Q " +
+            (w + wob(15)) +
+            " " +
+            (h + wob(16)) +
+            " " +
+            (w - r + wob(17)) +
+            " " +
+            (h + wob(18));
           d += " L " + (w / 2 + wob(19)) + " " + (h + wob(20));
           d += " L " + (r + wob(21)) + " " + (h + wob(22));
           d += " Q " + wob(23) + " " + (h + wob(24)) + " " + wob(25) + " " + (h - r + wob(26));
@@ -214,10 +222,27 @@
             c.setAttribute("id", "hw-pl-conn-" + i);
             c.setAttribute(
               "d",
-              "M " + (cx + 10) + " " + cy +
-                " Q " + (cx + CONFIG.gap / 2 + window.hwHash(i * 9 + 2, CONFIG.seed) * 16) + " " + (cy - 46 - window.hwHash(i * 9 + 3, CONFIG.seed) * 12) +
-                " " + (ex - 10) + " " + ey +
-                " M " + (ex - 10) + " " + ey + " l -30 -14 M " + (ex - 10) + " " + ey + " l -26 18"
+              "M " +
+                (cx + 10) +
+                " " +
+                cy +
+                " Q " +
+                (cx + CONFIG.gap / 2 + window.hwHash(i * 9 + 2, CONFIG.seed) * 16) +
+                " " +
+                (cy - 46 - window.hwHash(i * 9 + 3, CONFIG.seed) * 12) +
+                " " +
+                (ex - 10) +
+                " " +
+                ey +
+                " M " +
+                (ex - 10) +
+                " " +
+                ey +
+                " l -30 -14 M " +
+                (ex - 10) +
+                " " +
+                ey +
+                " l -26 18",
             );
             svg.appendChild(c);
             conns.push(c);
diff --git a/registry/blocks/hw-scribble-transition/hw-scribble-transition.html b/registry/blocks/hw-scribble-transition/hw-scribble-transition.html
index 2e7c6983c..16be9309c 100644
--- a/registry/blocks/hw-scribble-transition/hw-scribble-transition.html
+++ b/registry/blocks/hw-scribble-transition/hw-scribble-transition.html
@@ -62,7 +62,7 @@
         data-start="0"
         data-duration="2.2"
         data-track-index="0"
-        style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
       ></div>
     </div>
     <script>
@@ -104,7 +104,8 @@
           var zigs = 7;
           for (var i = 1; i <= zigs; i++) {
             var x = (W + 160) * (i / zigs) - 80;
-            var y = y0 + (i % 2 ? -1 : 1) * bandH * 0.32 + window.hwHash(b * 17 + i, CONFIG.seed) * 16;
+            var y =
+              y0 + (i % 2 ? -1 : 1) * bandH * 0.32 + window.hwHash(b * 17 + i, CONFIG.seed) * 16;
             d += " L " + x.toFixed(1) + " " + y.toFixed(1);
           }
           var p = document.createElementNS(NS, "path");
@@ -131,7 +132,11 @@
         tl.to("#hw-st-solid", { opacity: 0, duration: 0.15, ease: "none" }, 1.42);
         paths.forEach(function (p, i) {
           var len = p.getTotalLength();
-          tl.to(p, { strokeDashoffset: i % 2 ? len : -len, duration: 0.5, ease: "power2.out" }, 1.42 + 0.035 * i);
+          tl.to(
+            p,
+            { strokeDashoffset: i % 2 ? len : -len, duration: 0.5, ease: "power2.out" },
+            1.42 + 0.035 * i,
+          );
         });
 
         /* hard kill the moment the last band clears (learning: kill roots
diff --git a/registry/blocks/hw-text-cloud/hw-text-cloud.html b/registry/blocks/hw-text-cloud/hw-text-cloud.html
index 89acf8a6e..88db90f00 100644
--- a/registry/blocks/hw-text-cloud/hw-text-cloud.html
+++ b/registry/blocks/hw-text-cloud/hw-text-cloud.html
@@ -94,7 +94,7 @@
         data-start="0"
         data-duration="6"
         data-track-index="0"
-        style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
       ></div>
     </div>
     <script>
@@ -179,7 +179,15 @@
           for (var j = 0; j < N; j++) {
             var p = pts[j],
               q = pts[(j + 1) % N];
-            d += " Q" + p[0].toFixed(1) + " " + p[1].toFixed(1) + " " + ((p[0] + q[0]) / 2).toFixed(1) + " " + ((p[1] + q[1]) / 2).toFixed(1);
+            d +=
+              " Q" +
+              p[0].toFixed(1) +
+              " " +
+              p[1].toFixed(1) +
+              " " +
+              ((p[0] + q[0]) / 2).toFixed(1) +
+              " " +
+              ((p[1] + q[1]) / 2).toFixed(1);
           }
           d += "Z";
           /* tail */
@@ -189,9 +197,26 @@
           var tx = bx + (left ? -tip.len * 0.5 : tip.len * 0.5),
             ty = by + tip.len;
           d +=
-            " M " + (bx - 26).toFixed(1) + " " + (by - 6).toFixed(1) +
-            " Q " + (bx - 8 + window.hwHash(31, seed) * 6).toFixed(1) + " " + ((by + ty) / 2).toFixed(1) + " " + tx.toFixed(1) + " " + ty.toFixed(1) +
-            " Q " + (bx + 18).toFixed(1) + " " + ((by + ty) / 2).toFixed(1) + " " + (bx + 30).toFixed(1) + " " + (by - 2).toFixed(1);
+            " M " +
+            (bx - 26).toFixed(1) +
+            " " +
+            (by - 6).toFixed(1) +
+            " Q " +
+            (bx - 8 + window.hwHash(31, seed) * 6).toFixed(1) +
+            " " +
+            ((by + ty) / 2).toFixed(1) +
+            " " +
+            tx.toFixed(1) +
+            " " +
+            ty.toFixed(1) +
+            " Q " +
+            (bx + 18).toFixed(1) +
+            " " +
+            ((by + ty) / 2).toFixed(1) +
+            " " +
+            (bx + 30).toFixed(1) +
+            " " +
+            (by - 2).toFixed(1);
           return d;
         }
 
diff --git a/registry/blocks/hw-title/demo.html b/registry/blocks/hw-title/demo.html
index 1c4b2fa0d..9a0cfa023 100644
--- a/registry/blocks/hw-title/demo.html
+++ b/registry/blocks/hw-title/demo.html
@@ -83,7 +83,7 @@
         data-start="0"
         data-duration="6"
         data-track-index="0"
-        style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
       ></div>
     </div>
     <script>
@@ -172,8 +172,10 @@
 
         /* measure + position; build squiggle underline to match width */
         var rect = line.getBoundingClientRect();
-        wrap.style.left = (CONFIG.x === null ? Math.round((1920 - rect.width) / 2) : CONFIG.x) + "px";
-        wrap.style.top = (CONFIG.y === null ? Math.round((1080 - rect.height) / 2) - 20 : CONFIG.y) + "px";
+        wrap.style.left =
+          (CONFIG.x === null ? Math.round((1920 - rect.width) / 2) : CONFIG.x) + "px";
+        wrap.style.top =
+          (CONFIG.y === null ? Math.round((1080 - rect.height) / 2) - 20 : CONFIG.y) + "px";
 
         var underPath = document.getElementById("hw-t-under-path");
         if (CONFIG.underline.enabled) {
@@ -188,7 +190,15 @@
             var y = 16 + window.hwHash(i * 5 + 1, CONFIG.seed) * CONFIG.underline.wobble;
             var cxp = x - uw / segs / 2 + window.hwHash(i * 5 + 2, CONFIG.seed) * 10;
             var cyp = 16 + (i % 2 ? -1 : 1) * (8 + window.hwHash(i * 5 + 3, CONFIG.seed) * 4);
-            d += " Q " + cxp.toFixed(1) + " " + cyp.toFixed(1) + " " + x.toFixed(1) + " " + y.toFixed(1);
+            d +=
+              " Q " +
+              cxp.toFixed(1) +
+              " " +
+              cyp.toFixed(1) +
+              " " +
+              x.toFixed(1) +
+              " " +
+              y.toFixed(1);
           }
           underPath.setAttribute("d", d);
         } else {
@@ -214,7 +224,11 @@
               wordEls[i].style.color = mix(f);
             }
           });
-          tl.to(st, { p: 1, duration: CONFIG.sweep.end - CONFIG.sweep.start, ease: "none" }, CONFIG.sweep.start);
+          tl.to(
+            st,
+            { p: 1, duration: CONFIG.sweep.end - CONFIG.sweep.start, ease: "none" },
+            CONFIG.sweep.start,
+          );
         }
 
         /* underline draws as the sweep lands */
diff --git a/registry/blocks/hw-title/hw-title.html b/registry/blocks/hw-title/hw-title.html
index fe905c733..9dd74677f 100644
--- a/registry/blocks/hw-title/hw-title.html
+++ b/registry/blocks/hw-title/hw-title.html
@@ -80,7 +80,7 @@
         data-start="0"
         data-duration="6"
         data-track-index="0"
-        style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
       ></div>
     </div>
     <script>
@@ -169,8 +169,10 @@
 
         /* measure + position; build squiggle underline to match width */
         var rect = line.getBoundingClientRect();
-        wrap.style.left = (CONFIG.x === null ? Math.round((1920 - rect.width) / 2) : CONFIG.x) + "px";
-        wrap.style.top = (CONFIG.y === null ? Math.round((1080 - rect.height) / 2) - 20 : CONFIG.y) + "px";
+        wrap.style.left =
+          (CONFIG.x === null ? Math.round((1920 - rect.width) / 2) : CONFIG.x) + "px";
+        wrap.style.top =
+          (CONFIG.y === null ? Math.round((1080 - rect.height) / 2) - 20 : CONFIG.y) + "px";
 
         var underPath = document.getElementById("hw-t-under-path");
         if (CONFIG.underline.enabled) {
@@ -185,7 +187,15 @@
             var y = 16 + window.hwHash(i * 5 + 1, CONFIG.seed) * CONFIG.underline.wobble;
             var cxp = x - uw / segs / 2 + window.hwHash(i * 5 + 2, CONFIG.seed) * 10;
             var cyp = 16 + (i % 2 ? -1 : 1) * (8 + window.hwHash(i * 5 + 3, CONFIG.seed) * 4);
-            d += " Q " + cxp.toFixed(1) + " " + cyp.toFixed(1) + " " + x.toFixed(1) + " " + y.toFixed(1);
+            d +=
+              " Q " +
+              cxp.toFixed(1) +
+              " " +
+              cyp.toFixed(1) +
+              " " +
+              x.toFixed(1) +
+              " " +
+              y.toFixed(1);
           }
           underPath.setAttribute("d", d);
         } else {
@@ -211,7 +221,11 @@
               wordEls[i].style.color = mix(f);
             }
           });
-          tl.to(st, { p: 1, duration: CONFIG.sweep.end - CONFIG.sweep.start, ease: "none" }, CONFIG.sweep.start);
+          tl.to(
+            st,
+            { p: 1, duration: CONFIG.sweep.end - CONFIG.sweep.start, ease: "none" },
+            CONFIG.sweep.start,
+          );
         }
 
         /* underline draws as the sweep lands */
diff --git a/registry/blocks/mk-callout-highlight/mk-callout-highlight.html b/registry/blocks/mk-callout-highlight/mk-callout-highlight.html
index d9585560f..f1176a462 100644
--- a/registry/blocks/mk-callout-highlight/mk-callout-highlight.html
+++ b/registry/blocks/mk-callout-highlight/mk-callout-highlight.html
@@ -57,7 +57,7 @@
         data-start="0"
         data-duration="8"
         data-track-index="0"
-        style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
       ></div>
     </div>
     <script>
@@ -135,7 +135,11 @@
         /* the highlight sweep — one scalar, linear so it tracks speech evenly.
            To follow a real voiceover, replace with several tweens between
            per-phrase progress values (keyframes on the slider). */
-        tl.to(st, { p: 1, duration: CONFIG.sweep.end - CONFIG.sweep.start, ease: "none" }, CONFIG.sweep.start);
+        tl.to(
+          st,
+          { p: 1, duration: CONFIG.sweep.end - CONFIG.sweep.start, ease: "none" },
+          CONFIG.sweep.start,
+        );
 
         if (CONFIG.animationOut) {
           tl.to(box, { opacity: 0, y: -16, duration: 0.4, ease: "power2.in" }, DUR - 0.5);
diff --git a/registry/blocks/mk-clone-wall-transition/mk-clone-wall-transition.html b/registry/blocks/mk-clone-wall-transition/mk-clone-wall-transition.html
index 7b088e812..507b62bdf 100644
--- a/registry/blocks/mk-clone-wall-transition/mk-clone-wall-transition.html
+++ b/registry/blocks/mk-clone-wall-transition/mk-clone-wall-transition.html
@@ -69,7 +69,12 @@
         height: 1080px;
         border-radius: 0;
         overflow: hidden;
-        background: linear-gradient(120deg, #fdfbfd 0%, var(--mk-blob-1) 38%, var(--mk-blob-2) 100%);
+        background: linear-gradient(
+          120deg,
+          #fdfbfd 0%,
+          var(--mk-blob-1) 38%,
+          var(--mk-blob-2) 100%
+        );
         box-shadow: var(--mk-shadow);
         transform-origin: 50% 50%;
       }
@@ -102,7 +107,7 @@
         data-start="0"
         data-duration="2.4"
         data-track-index="0"
-        style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
       ></div>
     </div>
     <script>
@@ -190,7 +195,7 @@
               duration: 0.75,
               ease: "power3.inOut",
             },
-            0.2
+            0.2,
           );
           /* 1.35–1.75  card is put away */
           tl.to(card, { scale: 0.6, opacity: 0, duration: 0.4, ease: "power2.in" }, 1.35);
diff --git a/registry/blocks/mk-line-graph/mk-line-graph.html b/registry/blocks/mk-line-graph/mk-line-graph.html
index 9b761cbeb..6ff9487b3 100644
--- a/registry/blocks/mk-line-graph/mk-line-graph.html
+++ b/registry/blocks/mk-line-graph/mk-line-graph.html
@@ -109,7 +109,7 @@
         data-start="0"
         data-duration="7"
         data-track-index="0"
-        style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
       ></div>
     </div>
     <script>
diff --git a/registry/blocks/mk-placeholder-grid/mk-placeholder-grid.html b/registry/blocks/mk-placeholder-grid/mk-placeholder-grid.html
index d6666d2ef..1d3292def 100644
--- a/registry/blocks/mk-placeholder-grid/mk-placeholder-grid.html
+++ b/registry/blocks/mk-placeholder-grid/mk-placeholder-grid.html
@@ -89,7 +89,7 @@
         data-start="0"
         data-duration="8"
         data-track-index="0"
-        style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
       ></div>
     </div>
     <script>
@@ -215,7 +215,7 @@
               medias[i],
               { scale: base * 1.06 },
               { scale: base, duration: DUR - t0 - 0.6, ease: "sine.out" },
-              t0
+              t0,
             );
           }
         });
diff --git a/registry/blocks/mk-progress-stat/mk-progress-stat.html b/registry/blocks/mk-progress-stat/mk-progress-stat.html
index daee0abd7..a1c0852a7 100644
--- a/registry/blocks/mk-progress-stat/mk-progress-stat.html
+++ b/registry/blocks/mk-progress-stat/mk-progress-stat.html
@@ -107,7 +107,7 @@
         data-start="0"
         data-duration="7"
         data-track-index="0"
-        style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
       ></div>
     </div>
     <script>
@@ -168,7 +168,7 @@
               num.textContent = Math.round(st.v) + CONFIG.suffix;
             },
           },
-          0.5
+          0.5,
         );
         gsap.set(fill, { scaleX: 0 });
         tl.to(fill, { scaleX: CONFIG.value / CONFIG.max, duration: 1.6, ease: "power2.out" }, 0.5);
diff --git a/registry/blocks/mk-specs-list/mk-specs-list.html b/registry/blocks/mk-specs-list/mk-specs-list.html
index 6729adbbd..b0af58c46 100644
--- a/registry/blocks/mk-specs-list/mk-specs-list.html
+++ b/registry/blocks/mk-specs-list/mk-specs-list.html
@@ -112,7 +112,7 @@
         data-start="0"
         data-duration="8"
         data-track-index="0"
-        style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
       ></div>
     </div>
     <script>
diff --git a/registry/blocks/yt-comment-card/yt-comment-card.html b/registry/blocks/yt-comment-card/yt-comment-card.html
index de9ad5720..4c999d562 100644
--- a/registry/blocks/yt-comment-card/yt-comment-card.html
+++ b/registry/blocks/yt-comment-card/yt-comment-card.html
@@ -164,7 +164,7 @@
         data-start="0"
         data-duration="8"
         data-track-index="0"
-        style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
       ></div>
     </div>
     <script>
@@ -234,7 +234,11 @@
           } else {
             av.textContent = c.initials || "?";
             av.style.background =
-              "linear-gradient(135deg, hsl(" + (c.avatarHue || 210) + ", 62%, 52%), hsl(" + ((c.avatarHue || 210) + 40) + ", 62%, 42%))";
+              "linear-gradient(135deg, hsl(" +
+              (c.avatarHue || 210) +
+              ", 62%, 52%), hsl(" +
+              ((c.avatarHue || 210) + 40) +
+              ", 62%, 42%))";
           }
           card.appendChild(av);
 
@@ -266,7 +270,8 @@
           var row = document.createElement("div");
           row.className = "yt-cc-row";
           row.id = "yt-cc-row-" + i;
-          row.innerHTML = THUMB + "<span>" + (c.likes || 0) + '</span><span class="yt-cc-reply">REPLY</span>';
+          row.innerHTML =
+            THUMB + "<span>" + (c.likes || 0) + '</span><span class="yt-cc-reply">REPLY</span>';
           body.appendChild(row);
           card.appendChild(body);
           col.appendChild(card);
@@ -275,7 +280,8 @@
         /* position (measure after building) */
         col.style.left = CONFIG.x + "px";
         var rect = col.getBoundingClientRect();
-        col.style.top = (CONFIG.y === null ? Math.round((1080 - rect.height) / 2) : CONFIG.y) + "px";
+        col.style.top =
+          (CONFIG.y === null ? Math.round((1080 - rect.height) / 2) : CONFIG.y) + "px";
 
         var tl = gsap.timeline({ paused: true });
 
diff --git a/registry/blocks/yt-lcd-background/yt-lcd-background.html b/registry/blocks/yt-lcd-background/yt-lcd-background.html
index d6ad229a4..8c283bec1 100644
--- a/registry/blocks/yt-lcd-background/yt-lcd-background.html
+++ b/registry/blocks/yt-lcd-background/yt-lcd-background.html
@@ -62,13 +62,29 @@
         position: absolute;
         inset: 0;
         background:
-          repeating-linear-gradient(0deg, rgba(0, 0, 0, var(--yt-grid-alpha)) 0 1px, transparent 1px var(--yt-grid-size)),
-          repeating-linear-gradient(90deg, rgba(0, 0, 0, var(--yt-grid-alpha)) 0 1px, transparent 1px var(--yt-grid-size));
+          repeating-linear-gradient(
+            0deg,
+            rgba(0, 0, 0, var(--yt-grid-alpha)) 0 1px,
+            transparent 1px var(--yt-grid-size)
+          ),
+          repeating-linear-gradient(
+            90deg,
+            rgba(0, 0, 0, var(--yt-grid-alpha)) 0 1px,
+            transparent 1px var(--yt-grid-size)
+          );
       }
       .yt-dark #yt-lcd-grid {
         background:
-          repeating-linear-gradient(0deg, rgba(255, 255, 255, var(--yt-grid-alpha)) 0 1px, transparent 1px var(--yt-grid-size)),
-          repeating-linear-gradient(90deg, rgba(255, 255, 255, var(--yt-grid-alpha)) 0 1px, transparent 1px var(--yt-grid-size));
+          repeating-linear-gradient(
+            0deg,
+            rgba(255, 255, 255, var(--yt-grid-alpha)) 0 1px,
+            transparent 1px var(--yt-grid-size)
+          ),
+          repeating-linear-gradient(
+            90deg,
+            rgba(255, 255, 255, var(--yt-grid-alpha)) 0 1px,
+            transparent 1px var(--yt-grid-size)
+          );
       }
       #yt-lcd-grain {
         position: absolute;
@@ -132,7 +148,7 @@
         data-start="0"
         data-duration="10"
         data-track-index="0"
-        style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
       ></div>
     </div>
     <script>
@@ -201,7 +217,12 @@
         var titleLine = buildLine(CONFIG.title, CONFIG.fontSize, "yt-lcd-t", true);
         bow.appendChild(titleLine);
         if (CONFIG.subtitle) {
-          var sub = buildLine(CONFIG.subtitle, CONFIG.subSize, "yt-lcd-s", false); /* fringe is title-only */
+          var sub = buildLine(
+            CONFIG.subtitle,
+            CONFIG.subSize,
+            "yt-lcd-s",
+            false,
+          ); /* fringe is title-only */
           sub.id = "yt-lcd-sub";
           bow.appendChild(sub);
         }
@@ -221,13 +242,21 @@
           tl.to(
             bow,
             { filter: "blur(" + CONFIG.blur + "px)", duration: IN * 2.2, ease: "power2.out" },
-            IN * 0.4
+            IN * 0.4,
           );
           if (CONFIG.prism.enabled) {
             gsap.set(".yt-lcd-copy.r", { x: -O * 4, opacity: 0.5 });
             gsap.set(".yt-lcd-copy.b", { x: O * 4, opacity: 0.5 });
-            tl.to(".yt-lcd-copy.r", { x: -O, opacity: 0.85, duration: IN * 2.2, ease: "power2.out" }, IN * 0.4);
-            tl.to(".yt-lcd-copy.b", { x: O, opacity: 0.85, duration: IN * 2.2, ease: "power2.out" }, IN * 0.4);
+            tl.to(
+              ".yt-lcd-copy.r",
+              { x: -O, opacity: 0.85, duration: IN * 2.2, ease: "power2.out" },
+              IN * 0.4,
+            );
+            tl.to(
+              ".yt-lcd-copy.b",
+              { x: O, opacity: 0.85, duration: IN * 2.2, ease: "power2.out" },
+              IN * 0.4,
+            );
           }
         } else {
           gsap.set(bow, { filter: "blur(" + CONFIG.blur + "px)" });
@@ -239,11 +268,29 @@
 
         /* ambient: slow scanline drift + a breath of prism wobble */
         if (CONFIG.scanDrift) {
-          tl.to(scan, { y: 14, duration: 3.1, ease: "sine.inOut", yoyo: true, repeat: Math.max(1, Math.floor((DUR - 1) / 3.1) - 0) }, 0.5);
+          tl.to(
+            scan,
+            {
+              y: 14,
+              duration: 3.1,
+              ease: "sine.inOut",
+              yoyo: true,
+              repeat: Math.max(1, Math.floor((DUR - 1) / 3.1) - 0),
+            },
+            0.5,
+          );
         }
         if (CONFIG.prism.enabled) {
-          tl.to(".yt-lcd-copy.r", { x: -O - 1.2, duration: 2.4, ease: "sine.inOut", yoyo: true, repeat: 2 }, 2.0);
-          tl.to(".yt-lcd-copy.b", { x: O + 1.2, duration: 2.4, ease: "sine.inOut", yoyo: true, repeat: 2 }, 2.0);
+          tl.to(
+            ".yt-lcd-copy.r",
+            { x: -O - 1.2, duration: 2.4, ease: "sine.inOut", yoyo: true, repeat: 2 },
+            2.0,
+          );
+          tl.to(
+            ".yt-lcd-copy.b",
+            { x: O + 1.2, duration: 2.4, ease: "sine.inOut", yoyo: true, repeat: 2 },
+            2.0,
+          );
         }
 
         /* exit + hard kill */
diff --git a/registry/blocks/yt-logo-intro/yt-logo-intro.html b/registry/blocks/yt-logo-intro/yt-logo-intro.html
index cf8681808..102fdac5b 100644
--- a/registry/blocks/yt-logo-intro/yt-logo-intro.html
+++ b/registry/blocks/yt-logo-intro/yt-logo-intro.html
@@ -135,7 +135,9 @@
         <div id="yt-li-logo"></div>
         <div id="yt-li-textrow">
           <div id="yt-li-text"></div>
-          <div id="yt-li-arrow"><svg viewBox="0 0 24 24"><path d="M4 12h15M13 5l7 7-7 7" /></svg></div>
+          <div id="yt-li-arrow">
+            <svg viewBox="0 0 24 24"><path d="M4 12h15M13 5l7 7-7 7" /></svg>
+          </div>
         </div>
       </div>
       <div
@@ -144,7 +146,7 @@
         data-start="0"
         data-duration="6"
         data-track-index="0"
-        style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
       ></div>
     </div>
     <script>
@@ -213,14 +215,22 @@
 
         /* logo pops */
         gsap.set(logo, { opacity: 0, scale: 0.55, y: 24 });
-        tl.to(logo, { opacity: 1, scale: 1, y: 0, duration: 0.55, ease: "back.out(1.5)" }, IN * 0.6);
+        tl.to(
+          logo,
+          { opacity: 1, scale: 1, y: 0, duration: 0.55, ease: "back.out(1.5)" },
+          IN * 0.6,
+        );
 
         /* kicker -> swap -> title + arrow */
         gsap.set(text, { opacity: 0, y: 14 });
         tl.set(text, { textContent: CONFIG.kicker, letterSpacing: "0.22em", fontSize: "40px" }, 0);
         tl.to(text, { opacity: 1, y: 0, duration: 0.45, ease: "power2.out" }, IN * 0.6 + 0.45);
         tl.to(text, { opacity: 0, y: -12, duration: 0.3, ease: "power2.in" }, 2.3);
-        tl.set(text, { textContent: CONFIG.title, letterSpacing: "-0.015em", fontSize: "74px", y: 14 }, 2.62);
+        tl.set(
+          text,
+          { textContent: CONFIG.title, letterSpacing: "-0.015em", fontSize: "74px", y: 14 },
+          2.62,
+        );
         tl.to(text, { opacity: 1, y: 0, duration: 0.5, ease: "power3.out" }, 2.66);
         gsap.set(arrow, { scale: 0.5, x: -14 });
         tl.to(arrow, { opacity: 1, scale: 1, x: 0, duration: 0.45, ease: "back.out(1.6)" }, 2.9);
diff --git a/registry/blocks/yt-prism-title/yt-prism-title.html b/registry/blocks/yt-prism-title/yt-prism-title.html
index af1ba4a16..fd26b6193 100644
--- a/registry/blocks/yt-prism-title/yt-prism-title.html
+++ b/registry/blocks/yt-prism-title/yt-prism-title.html
@@ -74,7 +74,7 @@
         data-start="0"
         data-duration="6"
         data-track-index="0"
-        style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
       ></div>
     </div>
     <script>
@@ -143,12 +143,24 @@
         if (CONFIG.animationIn) {
           gsap.set(bow, { opacity: 0, filter: "blur(18px)" });
           tl.to(bow, { opacity: 1, duration: IN * 1.4, ease: "power2.out" }, 0.1);
-          tl.to(bow, { filter: "blur(" + CONFIG.blur + "px)", duration: IN * 2.4, ease: "power2.out" }, 0.1);
+          tl.to(
+            bow,
+            { filter: "blur(" + CONFIG.blur + "px)", duration: IN * 2.4, ease: "power2.out" },
+            0.1,
+          );
           if (CONFIG.prism.enabled) {
             gsap.set(".yt-pt-copy.r", { x: -O * 4.5, opacity: 0.45 });
             gsap.set(".yt-pt-copy.b", { x: O * 4.5, opacity: 0.45 });
-            tl.to(".yt-pt-copy.r", { x: -O, opacity: 0.85, duration: IN * 2.4, ease: "power2.out" }, 0.1);
-            tl.to(".yt-pt-copy.b", { x: O, opacity: 0.85, duration: IN * 2.4, ease: "power2.out" }, 0.1);
+            tl.to(
+              ".yt-pt-copy.r",
+              { x: -O, opacity: 0.85, duration: IN * 2.4, ease: "power2.out" },
+              0.1,
+            );
+            tl.to(
+              ".yt-pt-copy.b",
+              { x: O, opacity: 0.85, duration: IN * 2.4, ease: "power2.out" },
+              0.1,
+            );
           }
         } else {
           gsap.set(bow, { filter: "blur(" + CONFIG.blur + "px)" });
@@ -163,13 +175,25 @@
           tl.to(line, { scale: 1.035, duration: DUR - 1, ease: "sine.out" }, 0.4);
         }
         if (CONFIG.prism.enabled) {
-          tl.to(".yt-pt-copy.r", { x: -O - 1.4, duration: 1.9, ease: "sine.inOut", yoyo: true, repeat: 1 }, 1.4);
-          tl.to(".yt-pt-copy.b", { x: O + 1.4, duration: 1.9, ease: "sine.inOut", yoyo: true, repeat: 1 }, 1.4);
+          tl.to(
+            ".yt-pt-copy.r",
+            { x: -O - 1.4, duration: 1.9, ease: "sine.inOut", yoyo: true, repeat: 1 },
+            1.4,
+          );
+          tl.to(
+            ".yt-pt-copy.b",
+            { x: O + 1.4, duration: 1.9, ease: "sine.inOut", yoyo: true, repeat: 1 },
+            1.4,
+          );
         }
 
         /* exit + hard kill */
         if (CONFIG.animationOut) {
-          tl.to(bow, { opacity: 0, filter: "blur(12px)", duration: OUT, ease: "power2.in" }, DUR - OUT - 0.05);
+          tl.to(
+            bow,
+            { opacity: 0, filter: "blur(12px)", duration: OUT, ease: "power2.in" },
+            DUR - OUT - 0.05,
+          );
         }
         tl.set(root, { visibility: "hidden" }, DUR - 0.02);
 
diff --git a/registry/blocks/yt-vertical-fill/yt-vertical-fill.html b/registry/blocks/yt-vertical-fill/yt-vertical-fill.html
index b8739f389..8f35e23de 100644
--- a/registry/blocks/yt-vertical-fill/yt-vertical-fill.html
+++ b/registry/blocks/yt-vertical-fill/yt-vertical-fill.html
@@ -61,8 +61,16 @@
         position: absolute;
         inset: 0;
         background:
-          repeating-linear-gradient(0deg, rgba(255, 255, 255, var(--yt-grid-alpha)) 0 1px, transparent 1px var(--yt-grid-size)),
-          repeating-linear-gradient(90deg, rgba(255, 255, 255, var(--yt-grid-alpha)) 0 1px, transparent 1px var(--yt-grid-size));
+          repeating-linear-gradient(
+            0deg,
+            rgba(255, 255, 255, var(--yt-grid-alpha)) 0 1px,
+            transparent 1px var(--yt-grid-size)
+          ),
+          repeating-linear-gradient(
+            90deg,
+            rgba(255, 255, 255, var(--yt-grid-alpha)) 0 1px,
+            transparent 1px var(--yt-grid-size)
+          );
       }
       #yt-vf-fg {
         top: 0;
@@ -79,7 +87,12 @@
         font-weight: 700;
         font-size: 120px;
         color: rgba(255, 255, 255, 0.9);
-        background: linear-gradient(160deg, var(--yt-cyan) 0%, var(--yt-prism-b) 50%, var(--yt-violet) 100%);
+        background: linear-gradient(
+          160deg,
+          var(--yt-cyan) 0%,
+          var(--yt-prism-b) 50%,
+          var(--yt-violet) 100%
+        );
       }
     </style>
   </head>
@@ -104,7 +117,7 @@
         data-start="0"
         data-duration="8"
         data-track-index="0"
-        style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
       ></div>
     </div>
     <script>
@@ -163,7 +176,13 @@
 
         fg.appendChild(media("yt-vf-m-fg"));
         fg.style.filter =
-          "contrast(" + CONFIG.fgContrast + ") brightness(" + CONFIG.fgBrightness + ") saturate(" + CONFIG.fgSaturation + ")";
+          "contrast(" +
+          CONFIG.fgContrast +
+          ") brightness(" +
+          CONFIG.fgBrightness +
+          ") saturate(" +
+          CONFIG.fgSaturation +
+          ")";
 
         if (CONFIG.mode === "scale") {
           bg.appendChild(media("yt-vf-m-bg"));
@@ -189,7 +208,12 @@
           tl.to(fg, { y: 0, opacity: 1, duration: IN * 1.6, ease: "power3.out" }, IN * 0.5);
         }
         if (CONFIG.kenBurns) {
-          tl.fromTo(fg.firstChild, { scale: 1.05 }, { scale: 1, duration: DUR - 1, ease: "sine.out" }, 0.4);
+          tl.fromTo(
+            fg.firstChild,
+            { scale: 1.05 },
+            { scale: 1, duration: DUR - 1, ease: "sine.out" },
+            0.4,
+          );
         }
 
         if (CONFIG.animationOut) {
diff --git a/registry/components/hw-arrow/demo.html b/registry/components/hw-arrow/demo.html
index 897e93901..bbe1d9986 100644
--- a/registry/components/hw-arrow/demo.html
+++ b/registry/components/hw-arrow/demo.html
@@ -82,7 +82,11 @@
       data-height="1080"
     >
       <div id="hw-ar-scene"><span>point at things</span></div>
-      <div class="hw-arrow" id="hw-ar-demo" style="left: 560px; top: 320px; width: 380px; height: 180px">
+      <div
+        class="hw-arrow"
+        id="hw-ar-demo"
+        style="left: 560px; top: 320px; width: 380px; height: 180px"
+      >
         <svg viewBox="0 0 380 180"><path id="hw-ar-demo-path"></path></svg>
       </div>
       <div
@@ -91,7 +95,7 @@
         data-start="0"
         data-duration="4"
         data-track-index="0"
-        style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
       ></div>
     </div>
     <script>
@@ -153,26 +157,58 @@
           var ang = Math.atan2(y1 - cy2, x1 - cx2);
           function head(da, len) {
             var a = ang + Math.PI + da;
-            return "M " + x1.toFixed(1) + " " + y1.toFixed(1) + " l " + (Math.cos(a) * len).toFixed(1) + " " + (Math.sin(a) * len).toFixed(1);
+            return (
+              "M " +
+              x1.toFixed(1) +
+              " " +
+              y1.toFixed(1) +
+              " l " +
+              (Math.cos(a) * len).toFixed(1) +
+              " " +
+              (Math.sin(a) * len).toFixed(1)
+            );
           }
           return (
-            "M " + x0.toFixed(1) + " " + y0.toFixed(1) +
-            " C " + cx1.toFixed(1) + " " + cy1.toFixed(1) + ", " + cx2.toFixed(1) + " " + cy2.toFixed(1) + ", " + x1.toFixed(1) + " " + y1.toFixed(1) +
-            " " + head(0.5, wob(34, 9, 6)) + " " + head(-0.5, wob(34, 10, 6))
+            "M " +
+            x0.toFixed(1) +
+            " " +
+            y0.toFixed(1) +
+            " C " +
+            cx1.toFixed(1) +
+            " " +
+            cy1.toFixed(1) +
+            ", " +
+            cx2.toFixed(1) +
+            " " +
+            cy2.toFixed(1) +
+            ", " +
+            x1.toFixed(1) +
+            " " +
+            y1.toFixed(1) +
+            " " +
+            head(0.5, wob(34, 9, 6)) +
+            " " +
+            head(-0.5, wob(34, 10, 6))
           );
         };
         window.hwArrowOn = function (tl, target, at, dur) {
           var p = document.querySelector(target + " path");
           var len = p.getTotalLength();
           gsap.set(p, { strokeDasharray: len, strokeDashoffset: len });
-          tl.to(p, { strokeDashoffset: 0, duration: dur === undefined ? 0.7 : dur, ease: "power2.inOut" }, at);
+          tl.to(
+            p,
+            { strokeDashoffset: 0, duration: dur === undefined ? 0.7 : dur, ease: "power2.inOut" },
+            at,
+          );
         };
         window.hwArrowOff = function (tl, target, at) {
           tl.to(target, { opacity: 0, duration: 0.3, ease: "power2.in" }, at);
         };
 
         // ---- self-preview ----
-        document.getElementById("hw-ar-demo-path").setAttribute("d", window.hwArrowPath(380, 180, "swoop", 7));
+        document
+          .getElementById("hw-ar-demo-path")
+          .setAttribute("d", window.hwArrowPath(380, 180, "swoop", 7));
         var tl = gsap.timeline({ paused: true });
         window.hwArrowOn(tl, "#hw-ar-demo", 0.4);
         window.hwBoil(tl, "#hw-ar-demo", { amp: 2, rot: 0.6, frameDrop: 3, seed: 7 });
diff --git a/registry/components/hw-arrow/hw-arrow.html b/registry/components/hw-arrow/hw-arrow.html
index bd6439740..242a24375 100644
--- a/registry/components/hw-arrow/hw-arrow.html
+++ b/registry/components/hw-arrow/hw-arrow.html
@@ -79,7 +79,11 @@
       data-height="1080"
     >
       <div id="hw-ar-scene"><span>point at things</span></div>
-      <div class="hw-arrow" id="hw-ar-demo" style="left: 560px; top: 320px; width: 380px; height: 180px">
+      <div
+        class="hw-arrow"
+        id="hw-ar-demo"
+        style="left: 560px; top: 320px; width: 380px; height: 180px"
+      >
         <svg viewBox="0 0 380 180"><path id="hw-ar-demo-path"></path></svg>
       </div>
       <div
@@ -88,7 +92,7 @@
         data-start="0"
         data-duration="4"
         data-track-index="0"
-        style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
       ></div>
     </div>
     <script>
@@ -150,26 +154,58 @@
           var ang = Math.atan2(y1 - cy2, x1 - cx2);
           function head(da, len) {
             var a = ang + Math.PI + da;
-            return "M " + x1.toFixed(1) + " " + y1.toFixed(1) + " l " + (Math.cos(a) * len).toFixed(1) + " " + (Math.sin(a) * len).toFixed(1);
+            return (
+              "M " +
+              x1.toFixed(1) +
+              " " +
+              y1.toFixed(1) +
+              " l " +
+              (Math.cos(a) * len).toFixed(1) +
+              " " +
+              (Math.sin(a) * len).toFixed(1)
+            );
           }
           return (
-            "M " + x0.toFixed(1) + " " + y0.toFixed(1) +
-            " C " + cx1.toFixed(1) + " " + cy1.toFixed(1) + ", " + cx2.toFixed(1) + " " + cy2.toFixed(1) + ", " + x1.toFixed(1) + " " + y1.toFixed(1) +
-            " " + head(0.5, wob(34, 9, 6)) + " " + head(-0.5, wob(34, 10, 6))
+            "M " +
+            x0.toFixed(1) +
+            " " +
+            y0.toFixed(1) +
+            " C " +
+            cx1.toFixed(1) +
+            " " +
+            cy1.toFixed(1) +
+            ", " +
+            cx2.toFixed(1) +
+            " " +
+            cy2.toFixed(1) +
+            ", " +
+            x1.toFixed(1) +
+            " " +
+            y1.toFixed(1) +
+            " " +
+            head(0.5, wob(34, 9, 6)) +
+            " " +
+            head(-0.5, wob(34, 10, 6))
           );
         };
         window.hwArrowOn = function (tl, target, at, dur) {
           var p = document.querySelector(target + " path");
           var len = p.getTotalLength();
           gsap.set(p, { strokeDasharray: len, strokeDashoffset: len });
-          tl.to(p, { strokeDashoffset: 0, duration: dur === undefined ? 0.7 : dur, ease: "power2.inOut" }, at);
+          tl.to(
+            p,
+            { strokeDashoffset: 0, duration: dur === undefined ? 0.7 : dur, ease: "power2.inOut" },
+            at,
+          );
         };
         window.hwArrowOff = function (tl, target, at) {
           tl.to(target, { opacity: 0, duration: 0.3, ease: "power2.in" }, at);
         };
 
         // ---- self-preview ----
-        document.getElementById("hw-ar-demo-path").setAttribute("d", window.hwArrowPath(380, 180, "swoop", 7));
+        document
+          .getElementById("hw-ar-demo-path")
+          .setAttribute("d", window.hwArrowPath(380, 180, "swoop", 7));
         var tl = gsap.timeline({ paused: true });
         window.hwArrowOn(tl, "#hw-ar-demo", 0.4);
         window.hwBoil(tl, "#hw-ar-demo", { amp: 2, rot: 0.6, frameDrop: 3, seed: 7 });
diff --git a/registry/components/hw-boil/demo.html b/registry/components/hw-boil/demo.html
index 5fa12a526..68f5b1ba0 100644
--- a/registry/components/hw-boil/demo.html
+++ b/registry/components/hw-boil/demo.html
@@ -105,7 +105,10 @@
       <svg viewBox="0 0 1920 1080">
         <g id="hw-b-circle-g"><path id="hw-b-circle"></path></g>
         <g id="hw-b-arrow-g">
-          <path id="hw-b-arrow" d="M 640 640 C 760 700, 980 720, 1130 620 M 1130 620 l -64 -6 M 1130 620 l -18 58"></path>
+          <path
+            id="hw-b-arrow"
+            d="M 640 640 C 760 700, 980 720, 1130 620 M 1130 620 l -64 -6 M 1130 620 l -18 58"
+          ></path>
         </g>
       </svg>
       <div class="hw-b-label" id="hw-b-word" style="left: 1230px; top: 560px">the boil</div>
@@ -118,7 +121,7 @@
         data-start="0"
         data-duration="4"
         data-track-index="0"
-        style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
       ></div>
     </div>
     <script>
@@ -185,7 +188,15 @@
           for (var j = 0; j < N; j++) {
             var p = pts[j],
               q = pts[(j + 1) % N];
-            d += " Q" + p[0].toFixed(1) + " " + p[1].toFixed(1) + " " + ((p[0] + q[0]) / 2).toFixed(1) + " " + ((p[1] + q[1]) / 2).toFixed(1);
+            d +=
+              " Q" +
+              p[0].toFixed(1) +
+              " " +
+              p[1].toFixed(1) +
+              " " +
+              ((p[0] + q[0]) / 2).toFixed(1) +
+              " " +
+              ((p[1] + q[1]) / 2).toFixed(1);
           }
           return d;
         };
diff --git a/registry/components/hw-boil/hw-boil.html b/registry/components/hw-boil/hw-boil.html
index c0fbc6717..19eda55d3 100644
--- a/registry/components/hw-boil/hw-boil.html
+++ b/registry/components/hw-boil/hw-boil.html
@@ -102,7 +102,10 @@
       <svg viewBox="0 0 1920 1080">
         <g id="hw-b-circle-g"><path id="hw-b-circle"></path></g>
         <g id="hw-b-arrow-g">
-          <path id="hw-b-arrow" d="M 640 640 C 760 700, 980 720, 1130 620 M 1130 620 l -64 -6 M 1130 620 l -18 58"></path>
+          <path
+            id="hw-b-arrow"
+            d="M 640 640 C 760 700, 980 720, 1130 620 M 1130 620 l -64 -6 M 1130 620 l -18 58"
+          ></path>
         </g>
       </svg>
       <div class="hw-b-label" id="hw-b-word" style="left: 1230px; top: 560px">the boil</div>
@@ -115,7 +118,7 @@
         data-start="0"
         data-duration="4"
         data-track-index="0"
-        style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
       ></div>
     </div>
     <script>
@@ -182,7 +185,15 @@
           for (var j = 0; j < N; j++) {
             var p = pts[j],
               q = pts[(j + 1) % N];
-            d += " Q" + p[0].toFixed(1) + " " + p[1].toFixed(1) + " " + ((p[0] + q[0]) / 2).toFixed(1) + " " + ((p[1] + q[1]) / 2).toFixed(1);
+            d +=
+              " Q" +
+              p[0].toFixed(1) +
+              " " +
+              p[1].toFixed(1) +
+              " " +
+              ((p[0] + q[0]) / 2).toFixed(1) +
+              " " +
+              ((p[1] + q[1]) / 2).toFixed(1);
           }
           return d;
         };
diff --git a/registry/components/hw-box-label/demo.html b/registry/components/hw-box-label/demo.html
index 85df29b51..aff39a9f0 100644
--- a/registry/components/hw-box-label/demo.html
+++ b/registry/components/hw-box-label/demo.html
@@ -82,7 +82,11 @@
       data-height="1080"
     >
       <div id="hw-bx-scene"></div>
-      <div class="hw-box" id="hw-bx-demo" style="left: 700px; top: 420px; width: 420px; height: 230px">
+      <div
+        class="hw-box"
+        id="hw-bx-demo"
+        style="left: 700px; top: 420px; width: 420px; height: 230px"
+      >
         <svg viewBox="0 0 420 230"><path id="hw-bx-demo-path"></path></svg>
         <div class="hw-bx-label" id="hw-bx-demo-label"></div>
       </div>
@@ -92,7 +96,7 @@
         data-start="0"
         data-duration="4"
         data-track-index="0"
-        style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
       ></div>
     </div>
     <script>
@@ -147,7 +151,15 @@
           d += " Q " + (w + wob(7)) + " " + wob(8) + " " + (w + wob(9)) + " " + (r + wob(10));
           d += " L " + (w + wob(11)) + " " + (h / 2 + wob(12));
           d += " L " + (w + wob(13)) + " " + (h - r + wob(14));
-          d += " Q " + (w + wob(15)) + " " + (h + wob(16)) + " " + (w - r + wob(17)) + " " + (h + wob(18));
+          d +=
+            " Q " +
+            (w + wob(15)) +
+            " " +
+            (h + wob(16)) +
+            " " +
+            (w - r + wob(17)) +
+            " " +
+            (h + wob(18));
           d += " L " + (w / 2 + wob(19)) + " " + (h + wob(20));
           d += " L " + (r + wob(21)) + " " + (h + wob(22));
           d += " Q " + wob(23) + " " + (h + wob(24)) + " " + wob(25) + " " + (h - r + wob(26));
@@ -163,7 +175,10 @@
           var vb = svg.getAttribute("viewBox").split(" ");
           var W = parseFloat(vb[2]),
             H = parseFloat(vb[3]);
-          el.querySelector("path").setAttribute("d", window.hwWobbleRect(W, H, Math.min(26, W * 0.1), opts.seed || 1));
+          el.querySelector("path").setAttribute(
+            "d",
+            window.hwWobbleRect(W, H, Math.min(26, W * 0.1), opts.seed || 1),
+          );
           var label = el.querySelector(".hw-bx-label");
           label.textContent = opts.label || "";
           if ((opts.labelPos || "above") === "above") {
@@ -178,7 +193,11 @@
           var len = p.getTotalLength();
           gsap.set(p, { strokeDasharray: len, strokeDashoffset: len });
           tl.to(p, { strokeDashoffset: 0, duration: 0.75, ease: "power2.inOut" }, at);
-          tl.to(document.querySelector(target + " .hw-bx-label"), { opacity: 1, duration: 0.4, ease: "power2.out" }, at + 0.55);
+          tl.to(
+            document.querySelector(target + " .hw-bx-label"),
+            { opacity: 1, duration: 0.4, ease: "power2.out" },
+            at + 0.55,
+          );
         };
         window.hwBoxOff = function (tl, target, at) {
           tl.to(target, { opacity: 0, duration: 0.35, ease: "power2.in" }, at);
diff --git a/registry/components/hw-box-label/hw-box-label.html b/registry/components/hw-box-label/hw-box-label.html
index fa1565546..a1c3bd2b5 100644
--- a/registry/components/hw-box-label/hw-box-label.html
+++ b/registry/components/hw-box-label/hw-box-label.html
@@ -79,7 +79,11 @@
       data-height="1080"
     >
       <div id="hw-bx-scene"></div>
-      <div class="hw-box" id="hw-bx-demo" style="left: 700px; top: 420px; width: 420px; height: 230px">
+      <div
+        class="hw-box"
+        id="hw-bx-demo"
+        style="left: 700px; top: 420px; width: 420px; height: 230px"
+      >
         <svg viewBox="0 0 420 230"><path id="hw-bx-demo-path"></path></svg>
         <div class="hw-bx-label" id="hw-bx-demo-label"></div>
       </div>
@@ -89,7 +93,7 @@
         data-start="0"
         data-duration="4"
         data-track-index="0"
-        style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
       ></div>
     </div>
     <script>
@@ -144,7 +148,15 @@
           d += " Q " + (w + wob(7)) + " " + wob(8) + " " + (w + wob(9)) + " " + (r + wob(10));
           d += " L " + (w + wob(11)) + " " + (h / 2 + wob(12));
           d += " L " + (w + wob(13)) + " " + (h - r + wob(14));
-          d += " Q " + (w + wob(15)) + " " + (h + wob(16)) + " " + (w - r + wob(17)) + " " + (h + wob(18));
+          d +=
+            " Q " +
+            (w + wob(15)) +
+            " " +
+            (h + wob(16)) +
+            " " +
+            (w - r + wob(17)) +
+            " " +
+            (h + wob(18));
           d += " L " + (w / 2 + wob(19)) + " " + (h + wob(20));
           d += " L " + (r + wob(21)) + " " + (h + wob(22));
           d += " Q " + wob(23) + " " + (h + wob(24)) + " " + wob(25) + " " + (h - r + wob(26));
@@ -160,7 +172,10 @@
           var vb = svg.getAttribute("viewBox").split(" ");
           var W = parseFloat(vb[2]),
             H = parseFloat(vb[3]);
-          el.querySelector("path").setAttribute("d", window.hwWobbleRect(W, H, Math.min(26, W * 0.1), opts.seed || 1));
+          el.querySelector("path").setAttribute(
+            "d",
+            window.hwWobbleRect(W, H, Math.min(26, W * 0.1), opts.seed || 1),
+          );
           var label = el.querySelector(".hw-bx-label");
           label.textContent = opts.label || "";
           if ((opts.labelPos || "above") === "above") {
@@ -175,7 +190,11 @@
           var len = p.getTotalLength();
           gsap.set(p, { strokeDasharray: len, strokeDashoffset: len });
           tl.to(p, { strokeDashoffset: 0, duration: 0.75, ease: "power2.inOut" }, at);
-          tl.to(document.querySelector(target + " .hw-bx-label"), { opacity: 1, duration: 0.4, ease: "power2.out" }, at + 0.55);
+          tl.to(
+            document.querySelector(target + " .hw-bx-label"),
+            { opacity: 1, duration: 0.4, ease: "power2.out" },
+            at + 0.55,
+          );
         };
         window.hwBoxOff = function (tl, target, at) {
           tl.to(target, { opacity: 0, duration: 0.35, ease: "power2.in" }, at);
diff --git a/registry/components/hw-callout-circle/demo.html b/registry/components/hw-callout-circle/demo.html
index 9b3ac5514..7cdaa1ac1 100644
--- a/registry/components/hw-callout-circle/demo.html
+++ b/registry/components/hw-callout-circle/demo.html
@@ -110,7 +110,11 @@
     >
       <div id="hw-co-scene"></div>
       <div id="hw-co-target">subject</div>
-      <div class="hw-callout" id="hw-co-demo" style="left: 640px; top: 370px; width: 340px; height: 250px">
+      <div
+        class="hw-callout"
+        id="hw-co-demo"
+        style="left: 640px; top: 370px; width: 340px; height: 250px"
+      >
         <svg viewBox="0 0 340 250">
           <path class="hw-co-scribble" id="hw-co-demo-scribble"></path>
           <path class="hw-co-outline" id="hw-co-demo-outline"></path>
@@ -124,7 +128,7 @@
         data-start="0"
         data-duration="5"
         data-track-index="0"
-        style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
       ></div>
     </div>
     <script>
@@ -180,7 +184,15 @@
           for (var j = 0; j < N; j++) {
             var p = pts[j],
               q = pts[(j + 1) % N];
-            d += " Q" + p[0].toFixed(1) + " " + p[1].toFixed(1) + " " + ((p[0] + q[0]) / 2).toFixed(1) + " " + ((p[1] + q[1]) / 2).toFixed(1);
+            d +=
+              " Q" +
+              p[0].toFixed(1) +
+              " " +
+              p[1].toFixed(1) +
+              " " +
+              ((p[0] + q[0]) / 2).toFixed(1) +
+              " " +
+              ((p[1] + q[1]) / 2).toFixed(1);
           }
           return d;
         };
@@ -202,7 +214,10 @@
             rx = W * 0.42,
             ry = H * 0.36;
 
-          el.querySelector(".hw-co-outline").setAttribute("d", window.hwWobbleEllipse(cx, cy, rx, ry, seed, 4));
+          el.querySelector(".hw-co-outline").setAttribute(
+            "d",
+            window.hwWobbleEllipse(cx, cy, rx, ry, seed, 4),
+          );
 
           var scr = el.querySelector(".hw-co-scribble");
           if (opts.scribble === false) {
@@ -218,7 +233,11 @@
               var xa = cx - xw + window.hwHash(i * 7 + 2, seed) * 8;
               var xb = cx + xw + window.hwHash(i * 7 + 3, seed) * 8;
               d += (i === 0 ? "M " : " L ") + (i % 2 ? xa : xb).toFixed(1) + " " + yy.toFixed(1);
-              d += " L " + (i % 2 ? xb : xa).toFixed(1) + " " + (yy + window.hwHash(i * 7 + 4, seed) * 4).toFixed(1);
+              d +=
+                " L " +
+                (i % 2 ? xb : xa).toFixed(1) +
+                " " +
+                (yy + window.hwHash(i * 7 + 4, seed) * 4).toFixed(1);
             }
             scr.setAttribute("d", d);
           }
@@ -235,7 +254,18 @@
             var ey = sy + 55;
             conn.setAttribute(
               "d",
-              "M " + sx.toFixed(1) + " " + sy.toFixed(1) + " Q " + ((sx + ex) / 2 + window.hwHash(21, seed) * 14).toFixed(1) + " " + (sy + 46).toFixed(1) + " " + ex.toFixed(1) + " " + ey.toFixed(1)
+              "M " +
+                sx.toFixed(1) +
+                " " +
+                sy.toFixed(1) +
+                " Q " +
+                ((sx + ex) / 2 + window.hwHash(21, seed) * 14).toFixed(1) +
+                " " +
+                (sy + 46).toFixed(1) +
+                " " +
+                ex.toFixed(1) +
+                " " +
+                ey.toFixed(1),
             );
             label.style.left = (at === "left" ? ex - 180 : ex + 12) + "px";
             label.style.top = ey - 24 + "px";
@@ -264,7 +294,12 @@
         };
 
         // ---- self-preview ----
-        window.hwCalloutBuild("#hw-co-demo", { scribble: true, seed: 4, label: "look here!", labelAt: "right" });
+        window.hwCalloutBuild("#hw-co-demo", {
+          scribble: true,
+          seed: 4,
+          label: "look here!",
+          labelAt: "right",
+        });
         var tl = gsap.timeline({ paused: true });
         window.hwCalloutOn(tl, "#hw-co-demo", 0.4);
         window.hwBoil(tl, "#hw-co-demo", { amp: 1.8, rot: 0.4, frameDrop: 3, seed: 4 });
diff --git a/registry/components/hw-callout-circle/hw-callout-circle.html b/registry/components/hw-callout-circle/hw-callout-circle.html
index ece389cde..d18266d07 100644
--- a/registry/components/hw-callout-circle/hw-callout-circle.html
+++ b/registry/components/hw-callout-circle/hw-callout-circle.html
@@ -107,7 +107,11 @@
     >
       <div id="hw-co-scene"></div>
       <div id="hw-co-target">subject</div>
-      <div class="hw-callout" id="hw-co-demo" style="left: 640px; top: 370px; width: 340px; height: 250px">
+      <div
+        class="hw-callout"
+        id="hw-co-demo"
+        style="left: 640px; top: 370px; width: 340px; height: 250px"
+      >
         <svg viewBox="0 0 340 250">
           <path class="hw-co-scribble" id="hw-co-demo-scribble"></path>
           <path class="hw-co-outline" id="hw-co-demo-outline"></path>
@@ -121,7 +125,7 @@
         data-start="0"
         data-duration="5"
         data-track-index="0"
-        style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
       ></div>
     </div>
     <script>
@@ -177,7 +181,15 @@
           for (var j = 0; j < N; j++) {
             var p = pts[j],
               q = pts[(j + 1) % N];
-            d += " Q" + p[0].toFixed(1) + " " + p[1].toFixed(1) + " " + ((p[0] + q[0]) / 2).toFixed(1) + " " + ((p[1] + q[1]) / 2).toFixed(1);
+            d +=
+              " Q" +
+              p[0].toFixed(1) +
+              " " +
+              p[1].toFixed(1) +
+              " " +
+              ((p[0] + q[0]) / 2).toFixed(1) +
+              " " +
+              ((p[1] + q[1]) / 2).toFixed(1);
           }
           return d;
         };
@@ -199,7 +211,10 @@
             rx = W * 0.42,
             ry = H * 0.36;
 
-          el.querySelector(".hw-co-outline").setAttribute("d", window.hwWobbleEllipse(cx, cy, rx, ry, seed, 4));
+          el.querySelector(".hw-co-outline").setAttribute(
+            "d",
+            window.hwWobbleEllipse(cx, cy, rx, ry, seed, 4),
+          );
 
           var scr = el.querySelector(".hw-co-scribble");
           if (opts.scribble === false) {
@@ -215,7 +230,11 @@
               var xa = cx - xw + window.hwHash(i * 7 + 2, seed) * 8;
               var xb = cx + xw + window.hwHash(i * 7 + 3, seed) * 8;
               d += (i === 0 ? "M " : " L ") + (i % 2 ? xa : xb).toFixed(1) + " " + yy.toFixed(1);
-              d += " L " + (i % 2 ? xb : xa).toFixed(1) + " " + (yy + window.hwHash(i * 7 + 4, seed) * 4).toFixed(1);
+              d +=
+                " L " +
+                (i % 2 ? xb : xa).toFixed(1) +
+                " " +
+                (yy + window.hwHash(i * 7 + 4, seed) * 4).toFixed(1);
             }
             scr.setAttribute("d", d);
           }
@@ -232,7 +251,18 @@
             var ey = sy + 55;
             conn.setAttribute(
               "d",
-              "M " + sx.toFixed(1) + " " + sy.toFixed(1) + " Q " + ((sx + ex) / 2 + window.hwHash(21, seed) * 14).toFixed(1) + " " + (sy + 46).toFixed(1) + " " + ex.toFixed(1) + " " + ey.toFixed(1)
+              "M " +
+                sx.toFixed(1) +
+                " " +
+                sy.toFixed(1) +
+                " Q " +
+                ((sx + ex) / 2 + window.hwHash(21, seed) * 14).toFixed(1) +
+                " " +
+                (sy + 46).toFixed(1) +
+                " " +
+                ex.toFixed(1) +
+                " " +
+                ey.toFixed(1),
             );
             label.style.left = (at === "left" ? ex - 180 : ex + 12) + "px";
             label.style.top = ey - 24 + "px";
@@ -261,7 +291,12 @@
         };
 
         // ---- self-preview ----
-        window.hwCalloutBuild("#hw-co-demo", { scribble: true, seed: 4, label: "look here!", labelAt: "right" });
+        window.hwCalloutBuild("#hw-co-demo", {
+          scribble: true,
+          seed: 4,
+          label: "look here!",
+          labelAt: "right",
+        });
         var tl = gsap.timeline({ paused: true });
         window.hwCalloutOn(tl, "#hw-co-demo", 0.4);
         window.hwBoil(tl, "#hw-co-demo", { amp: 1.8, rot: 0.4, frameDrop: 3, seed: 4 });
diff --git a/registry/components/hw-underline/demo.html b/registry/components/hw-underline/demo.html
index c6356c472..2968cc050 100644
--- a/registry/components/hw-underline/demo.html
+++ b/registry/components/hw-underline/demo.html
@@ -84,13 +84,25 @@
         <div style="top: 460px">cross this out</div>
         <div style="top: 660px">bracket the aside</div>
       </div>
-      <div class="hw-mark" id="hw-un-m1" style="left: 470px; top: 350px; width: 620px; height: 34px">
+      <div
+        class="hw-mark"
+        id="hw-un-m1"
+        style="left: 470px; top: 350px; width: 620px; height: 34px"
+      >
         <svg viewBox="0 0 620 34"><path></path></svg>
       </div>
-      <div class="hw-mark" id="hw-un-m2" style="left: 470px; top: 500px; width: 480px; height: 34px">
+      <div
+        class="hw-mark"
+        id="hw-un-m2"
+        style="left: 470px; top: 500px; width: 480px; height: 34px"
+      >
         <svg viewBox="0 0 480 34"><path></path></svg>
       </div>
-      <div class="hw-mark" id="hw-un-m3" style="left: 440px; top: 650px; width: 40px; height: 110px">
+      <div
+        class="hw-mark"
+        id="hw-un-m3"
+        style="left: 440px; top: 650px; width: 40px; height: 110px"
+      >
         <svg viewBox="0 0 40 110"><path></path></svg>
       </div>
       <div
@@ -99,7 +111,7 @@
         data-start="0"
         data-duration="4"
         data-track-index="0"
-        style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
       ></div>
     </div>
     <script>
@@ -151,17 +163,46 @@
           var mid = h / 2;
           if (style === "bracket") {
             return (
-              "M " + (w * 0.9 + wob(1, 3)) + " " + (2 + wob(2, 3)) +
-              " Q " + wob(3, 4) + " " + (2 + wob(4)) + " " + (4 + wob(5, 3)) + " " + (h * 0.5 + wob(6)) +
-              " Q " + wob(7, 4) + " " + (h - 2 + wob(8)) + " " + (w * 0.9 + wob(9, 3)) + " " + (h - 2 + wob(10, 3))
+              "M " +
+              (w * 0.9 + wob(1, 3)) +
+              " " +
+              (2 + wob(2, 3)) +
+              " Q " +
+              wob(3, 4) +
+              " " +
+              (2 + wob(4)) +
+              " " +
+              (4 + wob(5, 3)) +
+              " " +
+              (h * 0.5 + wob(6)) +
+              " Q " +
+              wob(7, 4) +
+              " " +
+              (h - 2 + wob(8)) +
+              " " +
+              (w * 0.9 + wob(9, 3)) +
+              " " +
+              (h - 2 + wob(10, 3))
             );
           }
           if (style === "strike") {
             return (
-              "M " + (2 + wob(1, 3)) + " " + (mid + wob(2)) +
-              " L " + (w - 4 + wob(3, 3)) + " " + (mid - 3 + wob(4)) +
-              " M " + (w - 10 + wob(5, 4)) + " " + (mid + 7 + wob(6)) +
-              " L " + (8 + wob(7, 4)) + " " + (mid + 3 + wob(8))
+              "M " +
+              (2 + wob(1, 3)) +
+              " " +
+              (mid + wob(2)) +
+              " L " +
+              (w - 4 + wob(3, 3)) +
+              " " +
+              (mid - 3 + wob(4)) +
+              " M " +
+              (w - 10 + wob(5, 4)) +
+              " " +
+              (mid + 7 + wob(6)) +
+              " L " +
+              (8 + wob(7, 4)) +
+              " " +
+              (mid + 3 + wob(8))
             );
           }
           /* underline squiggle */
@@ -170,8 +211,14 @@
           for (var i = 1; i <= segs; i++) {
             var x = (w / segs) * i;
             d +=
-              " Q " + (x - w / segs / 2 + wob(i * 4 + 1, 9)) + " " + (mid + (i % 2 ? -1 : 1) * (9 + wob(i * 4 + 2, 4))) +
-              " " + x.toFixed(1) + " " + (mid + wob(i * 4 + 3, 4));
+              " Q " +
+              (x - w / segs / 2 + wob(i * 4 + 1, 9)) +
+              " " +
+              (mid + (i % 2 ? -1 : 1) * (9 + wob(i * 4 + 2, 4))) +
+              " " +
+              x.toFixed(1) +
+              " " +
+              (mid + wob(i * 4 + 3, 4));
           }
           return d;
         };
@@ -179,16 +226,26 @@
           var p = document.querySelector(target + " path");
           var len = p.getTotalLength();
           gsap.set(p, { strokeDasharray: len, strokeDashoffset: len });
-          tl.to(p, { strokeDashoffset: 0, duration: dur === undefined ? 0.55 : dur, ease: "power2.inOut" }, at);
+          tl.to(
+            p,
+            { strokeDashoffset: 0, duration: dur === undefined ? 0.55 : dur, ease: "power2.inOut" },
+            at,
+          );
         };
         window.hwMarkOff = function (tl, target, at) {
           tl.to(target, { opacity: 0, duration: 0.3, ease: "power2.in" }, at);
         };
 
         // ---- self-preview ----
-        document.querySelector("#hw-un-m1 path").setAttribute("d", window.hwMarkPath(620, 34, "underline", 4));
-        document.querySelector("#hw-un-m2 path").setAttribute("d", window.hwMarkPath(480, 34, "strike", 6));
-        document.querySelector("#hw-un-m3 path").setAttribute("d", window.hwMarkPath(40, 110, "bracket", 8));
+        document
+          .querySelector("#hw-un-m1 path")
+          .setAttribute("d", window.hwMarkPath(620, 34, "underline", 4));
+        document
+          .querySelector("#hw-un-m2 path")
+          .setAttribute("d", window.hwMarkPath(480, 34, "strike", 6));
+        document
+          .querySelector("#hw-un-m3 path")
+          .setAttribute("d", window.hwMarkPath(40, 110, "bracket", 8));
         var tl = gsap.timeline({ paused: true });
         window.hwMarkOn(tl, "#hw-un-m1", 0.4);
         window.hwMarkOn(tl, "#hw-un-m2", 1.0);
diff --git a/registry/components/hw-underline/hw-underline.html b/registry/components/hw-underline/hw-underline.html
index 2ac7374d2..628003f8b 100644
--- a/registry/components/hw-underline/hw-underline.html
+++ b/registry/components/hw-underline/hw-underline.html
@@ -81,13 +81,25 @@
         <div style="top: 460px">cross this out</div>
         <div style="top: 660px">bracket the aside</div>
       </div>
-      <div class="hw-mark" id="hw-un-m1" style="left: 470px; top: 350px; width: 620px; height: 34px">
+      <div
+        class="hw-mark"
+        id="hw-un-m1"
+        style="left: 470px; top: 350px; width: 620px; height: 34px"
+      >
         <svg viewBox="0 0 620 34"><path></path></svg>
       </div>
-      <div class="hw-mark" id="hw-un-m2" style="left: 470px; top: 500px; width: 480px; height: 34px">
+      <div
+        class="hw-mark"
+        id="hw-un-m2"
+        style="left: 470px; top: 500px; width: 480px; height: 34px"
+      >
         <svg viewBox="0 0 480 34"><path></path></svg>
       </div>
-      <div class="hw-mark" id="hw-un-m3" style="left: 440px; top: 650px; width: 40px; height: 110px">
+      <div
+        class="hw-mark"
+        id="hw-un-m3"
+        style="left: 440px; top: 650px; width: 40px; height: 110px"
+      >
         <svg viewBox="0 0 40 110"><path></path></svg>
       </div>
       <div
@@ -96,7 +108,7 @@
         data-start="0"
         data-duration="4"
         data-track-index="0"
-        style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
       ></div>
     </div>
     <script>
@@ -148,17 +160,46 @@
           var mid = h / 2;
           if (style === "bracket") {
             return (
-              "M " + (w * 0.9 + wob(1, 3)) + " " + (2 + wob(2, 3)) +
-              " Q " + wob(3, 4) + " " + (2 + wob(4)) + " " + (4 + wob(5, 3)) + " " + (h * 0.5 + wob(6)) +
-              " Q " + wob(7, 4) + " " + (h - 2 + wob(8)) + " " + (w * 0.9 + wob(9, 3)) + " " + (h - 2 + wob(10, 3))
+              "M " +
+              (w * 0.9 + wob(1, 3)) +
+              " " +
+              (2 + wob(2, 3)) +
+              " Q " +
+              wob(3, 4) +
+              " " +
+              (2 + wob(4)) +
+              " " +
+              (4 + wob(5, 3)) +
+              " " +
+              (h * 0.5 + wob(6)) +
+              " Q " +
+              wob(7, 4) +
+              " " +
+              (h - 2 + wob(8)) +
+              " " +
+              (w * 0.9 + wob(9, 3)) +
+              " " +
+              (h - 2 + wob(10, 3))
             );
           }
           if (style === "strike") {
             return (
-              "M " + (2 + wob(1, 3)) + " " + (mid + wob(2)) +
-              " L " + (w - 4 + wob(3, 3)) + " " + (mid - 3 + wob(4)) +
-              " M " + (w - 10 + wob(5, 4)) + " " + (mid + 7 + wob(6)) +
-              " L " + (8 + wob(7, 4)) + " " + (mid + 3 + wob(8))
+              "M " +
+              (2 + wob(1, 3)) +
+              " " +
+              (mid + wob(2)) +
+              " L " +
+              (w - 4 + wob(3, 3)) +
+              " " +
+              (mid - 3 + wob(4)) +
+              " M " +
+              (w - 10 + wob(5, 4)) +
+              " " +
+              (mid + 7 + wob(6)) +
+              " L " +
+              (8 + wob(7, 4)) +
+              " " +
+              (mid + 3 + wob(8))
             );
           }
           /* underline squiggle */
@@ -167,8 +208,14 @@
           for (var i = 1; i <= segs; i++) {
             var x = (w / segs) * i;
             d +=
-              " Q " + (x - w / segs / 2 + wob(i * 4 + 1, 9)) + " " + (mid + (i % 2 ? -1 : 1) * (9 + wob(i * 4 + 2, 4))) +
-              " " + x.toFixed(1) + " " + (mid + wob(i * 4 + 3, 4));
+              " Q " +
+              (x - w / segs / 2 + wob(i * 4 + 1, 9)) +
+              " " +
+              (mid + (i % 2 ? -1 : 1) * (9 + wob(i * 4 + 2, 4))) +
+              " " +
+              x.toFixed(1) +
+              " " +
+              (mid + wob(i * 4 + 3, 4));
           }
           return d;
         };
@@ -176,16 +223,26 @@
           var p = document.querySelector(target + " path");
           var len = p.getTotalLength();
           gsap.set(p, { strokeDasharray: len, strokeDashoffset: len });
-          tl.to(p, { strokeDashoffset: 0, duration: dur === undefined ? 0.55 : dur, ease: "power2.inOut" }, at);
+          tl.to(
+            p,
+            { strokeDashoffset: 0, duration: dur === undefined ? 0.55 : dur, ease: "power2.inOut" },
+            at,
+          );
         };
         window.hwMarkOff = function (tl, target, at) {
           tl.to(target, { opacity: 0, duration: 0.3, ease: "power2.in" }, at);
         };
 
         // ---- self-preview ----
-        document.querySelector("#hw-un-m1 path").setAttribute("d", window.hwMarkPath(620, 34, "underline", 4));
-        document.querySelector("#hw-un-m2 path").setAttribute("d", window.hwMarkPath(480, 34, "strike", 6));
-        document.querySelector("#hw-un-m3 path").setAttribute("d", window.hwMarkPath(40, 110, "bracket", 8));
+        document
+          .querySelector("#hw-un-m1 path")
+          .setAttribute("d", window.hwMarkPath(620, 34, "underline", 4));
+        document
+          .querySelector("#hw-un-m2 path")
+          .setAttribute("d", window.hwMarkPath(480, 34, "strike", 6));
+        document
+          .querySelector("#hw-un-m3 path")
+          .setAttribute("d", window.hwMarkPath(40, 110, "bracket", 8));
         var tl = gsap.timeline({ paused: true });
         window.hwMarkOn(tl, "#hw-un-m1", 0.4);
         window.hwMarkOn(tl, "#hw-un-m2", 1.0);
diff --git a/registry/components/mk-emphasis-type/demo.html b/registry/components/mk-emphasis-type/demo.html
index 070bf8a0e..dd55374ab 100644
--- a/registry/components/mk-emphasis-type/demo.html
+++ b/registry/components/mk-emphasis-type/demo.html
@@ -66,7 +66,7 @@
         data-start="0"
         data-duration="4"
         data-track-index="0"
-        style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
       ></div>
     </div>
     <script>
diff --git a/registry/components/mk-emphasis-type/mk-emphasis-type.html b/registry/components/mk-emphasis-type/mk-emphasis-type.html
index 7b6390736..35c30fab9 100644
--- a/registry/components/mk-emphasis-type/mk-emphasis-type.html
+++ b/registry/components/mk-emphasis-type/mk-emphasis-type.html
@@ -63,7 +63,7 @@
         data-start="0"
         data-duration="4"
         data-track-index="0"
-        style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
       ></div>
     </div>
     <script>
diff --git a/registry/components/mk-usage-arc/demo.html b/registry/components/mk-usage-arc/demo.html
index 3e608f1fb..91572b896 100644
--- a/registry/components/mk-usage-arc/demo.html
+++ b/registry/components/mk-usage-arc/demo.html
@@ -90,7 +90,13 @@
       <div class="mk-arc" id="mk-arc-demo" style="top: 430px; left: 850px">
         <svg viewBox="0 0 220 220">
           <circle class="mk-arc-track" cx="110" cy="110" r="92"></circle>
-          <circle class="mk-arc-fill" cx="110" cy="110" r="92" transform="rotate(-90 110 110)"></circle>
+          <circle
+            class="mk-arc-fill"
+            cx="110"
+            cy="110"
+            r="92"
+            transform="rotate(-90 110 110)"
+          ></circle>
         </svg>
         <div class="mk-arc-center">
           <span class="mk-arc-num">0%</span>
@@ -103,7 +109,7 @@
         data-start="0"
         data-duration="4"
         data-track-index="0"
-        style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
       ></div>
     </div>
     <script>
@@ -121,7 +127,11 @@
           gsap.set(el, { opacity: 0, y: 16 });
           gsap.set(fill, { strokeDasharray: C, strokeDashoffset: C });
           tl.to(el, { opacity: 1, y: 0, duration: 0.6, ease: "power3.out" }, at);
-          tl.to(fill, { strokeDashoffset: C * (1 - value), duration: 1.1, ease: "power2.inOut" }, at + 0.15);
+          tl.to(
+            fill,
+            { strokeDashoffset: C * (1 - value), duration: 1.1, ease: "power2.inOut" },
+            at + 0.15,
+          );
           var st = { v: 0 };
           tl.to(
             st,
@@ -133,7 +143,7 @@
                 num.textContent = Math.round(st.v * 100) + "%";
               },
             },
-            at + 0.15
+            at + 0.15,
           );
         };
         window.mkArcOut = function (tl, target, at) {
diff --git a/registry/components/mk-usage-arc/mk-usage-arc.html b/registry/components/mk-usage-arc/mk-usage-arc.html
index 852205d64..08f4a537b 100644
--- a/registry/components/mk-usage-arc/mk-usage-arc.html
+++ b/registry/components/mk-usage-arc/mk-usage-arc.html
@@ -87,7 +87,13 @@
       <div class="mk-arc" id="mk-arc-demo" style="top: 430px; left: 850px">
         <svg viewBox="0 0 220 220">
           <circle class="mk-arc-track" cx="110" cy="110" r="92"></circle>
-          <circle class="mk-arc-fill" cx="110" cy="110" r="92" transform="rotate(-90 110 110)"></circle>
+          <circle
+            class="mk-arc-fill"
+            cx="110"
+            cy="110"
+            r="92"
+            transform="rotate(-90 110 110)"
+          ></circle>
         </svg>
         <div class="mk-arc-center">
           <span class="mk-arc-num">0%</span>
@@ -100,7 +106,7 @@
         data-start="0"
         data-duration="4"
         data-track-index="0"
-        style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
       ></div>
     </div>
     <script>
@@ -118,7 +124,11 @@
           gsap.set(el, { opacity: 0, y: 16 });
           gsap.set(fill, { strokeDasharray: C, strokeDashoffset: C });
           tl.to(el, { opacity: 1, y: 0, duration: 0.6, ease: "power3.out" }, at);
-          tl.to(fill, { strokeDashoffset: C * (1 - value), duration: 1.1, ease: "power2.inOut" }, at + 0.15);
+          tl.to(
+            fill,
+            { strokeDashoffset: C * (1 - value), duration: 1.1, ease: "power2.inOut" },
+            at + 0.15,
+          );
           var st = { v: 0 };
           tl.to(
             st,
@@ -130,7 +140,7 @@
                 num.textContent = Math.round(st.v * 100) + "%";
               },
             },
-            at + 0.15
+            at + 0.15,
           );
         };
         window.mkArcOut = function (tl, target, at) {
diff --git a/registry/components/yt-camera-move/demo.html b/registry/components/yt-camera-move/demo.html
index 0513db398..1f97e1a08 100644
--- a/registry/components/yt-camera-move/demo.html
+++ b/registry/components/yt-camera-move/demo.html
@@ -103,7 +103,7 @@
         data-start="0"
         data-duration="4"
         data-track-index="0"
-        style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
       ></div>
     </div>
     <script>
@@ -117,7 +117,10 @@
         window.ytCameraMove = function (tl, target, at, opts) {
           opts = opts || {};
           var dur = opts.dur === undefined ? 1.2 : opts.dur;
-          gsap.set(target, { transformPerspective: 1200, transformOrigin: opts.origin || "50% 50%" });
+          gsap.set(target, {
+            transformPerspective: 1200,
+            transformOrigin: opts.origin || "50% 50%",
+          });
           tl.to(
             target,
             {
@@ -130,7 +133,7 @@
               duration: dur,
               ease: opts.ease || "power2.inOut",
             },
-            at
+            at,
           );
         };
         // Return to rest (same easing family).
@@ -148,7 +151,7 @@
               duration: opts.dur === undefined ? 1.2 : opts.dur,
               ease: opts.ease || "power2.inOut",
             },
-            at
+            at,
           );
         };
         // Edge-defocus pulse synced to a move (overlay fades in then out).
diff --git a/registry/components/yt-camera-move/yt-camera-move.html b/registry/components/yt-camera-move/yt-camera-move.html
index 33f370b09..945c03368 100644
--- a/registry/components/yt-camera-move/yt-camera-move.html
+++ b/registry/components/yt-camera-move/yt-camera-move.html
@@ -100,7 +100,7 @@
         data-start="0"
         data-duration="4"
         data-track-index="0"
-        style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
       ></div>
     </div>
     <script>
@@ -114,7 +114,10 @@
         window.ytCameraMove = function (tl, target, at, opts) {
           opts = opts || {};
           var dur = opts.dur === undefined ? 1.2 : opts.dur;
-          gsap.set(target, { transformPerspective: 1200, transformOrigin: opts.origin || "50% 50%" });
+          gsap.set(target, {
+            transformPerspective: 1200,
+            transformOrigin: opts.origin || "50% 50%",
+          });
           tl.to(
             target,
             {
@@ -127,7 +130,7 @@
               duration: dur,
               ease: opts.ease || "power2.inOut",
             },
-            at
+            at,
           );
         };
         // Return to rest (same easing family).
@@ -145,7 +148,7 @@
               duration: opts.dur === undefined ? 1.2 : opts.dur,
               ease: opts.ease || "power2.inOut",
             },
-            at
+            at,
           );
         };
         // Edge-defocus pulse synced to a move (overlay fades in then out).
diff --git a/registry/components/yt-circle-pointer/demo.html b/registry/components/yt-circle-pointer/demo.html
index 8b01629fd..0571fda65 100644
--- a/registry/components/yt-circle-pointer/demo.html
+++ b/registry/components/yt-circle-pointer/demo.html
@@ -94,7 +94,11 @@
       data-height="1080"
     >
       <div id="yt-ptr-scene"><span>the thing</span></div>
-      <div class="yt-circle" id="yt-ptr-circle" style="left: 760px; top: 440px; width: 420px; height: 210px">
+      <div
+        class="yt-circle"
+        id="yt-ptr-circle"
+        style="left: 760px; top: 440px; width: 420px; height: 210px"
+      >
         <svg viewBox="0 0 420 210"><ellipse cx="210" cy="105" rx="196" ry="88"></ellipse></svg>
       </div>
       <div class="yt-count" id="yt-ptr-count" style="right: 140px; top: 110px">
@@ -106,7 +110,7 @@
         data-start="0"
         data-duration="5"
         data-track-index="0"
-        style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
       ></div>
     </div>
     <script>
@@ -118,7 +122,11 @@
           var el = document.querySelector(target + " ellipse");
           var len = el.getTotalLength();
           gsap.set(el, { strokeDasharray: len, strokeDashoffset: len });
-          tl.to(el, { strokeDashoffset: 0, duration: dur === undefined ? 0.7 : dur, ease: "power2.inOut" }, at);
+          tl.to(
+            el,
+            { strokeDashoffset: 0, duration: dur === undefined ? 0.7 : dur, ease: "power2.inOut" },
+            at,
+          );
         };
         window.ytCircleOff = function (tl, target, at) {
           tl.to(target, { opacity: 0, duration: 0.35, ease: "power2.in" }, at);
@@ -140,7 +148,7 @@
                 num.textContent = String(Math.ceil(st.v));
               },
             },
-            at
+            at,
           );
           for (var i = 1; i <= from; i++) {
             tl.to(target, { scale: 1.07, duration: 0.09, ease: "sine.out" }, at + i - 0.09);
diff --git a/registry/components/yt-circle-pointer/yt-circle-pointer.html b/registry/components/yt-circle-pointer/yt-circle-pointer.html
index dfb801ca6..62a2f260a 100644
--- a/registry/components/yt-circle-pointer/yt-circle-pointer.html
+++ b/registry/components/yt-circle-pointer/yt-circle-pointer.html
@@ -91,7 +91,11 @@
       data-height="1080"
     >
       <div id="yt-ptr-scene"><span>the thing</span></div>
-      <div class="yt-circle" id="yt-ptr-circle" style="left: 760px; top: 440px; width: 420px; height: 210px">
+      <div
+        class="yt-circle"
+        id="yt-ptr-circle"
+        style="left: 760px; top: 440px; width: 420px; height: 210px"
+      >
         <svg viewBox="0 0 420 210"><ellipse cx="210" cy="105" rx="196" ry="88"></ellipse></svg>
       </div>
       <div class="yt-count" id="yt-ptr-count" style="right: 140px; top: 110px">
@@ -103,7 +107,7 @@
         data-start="0"
         data-duration="5"
         data-track-index="0"
-        style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
       ></div>
     </div>
     <script>
@@ -115,7 +119,11 @@
           var el = document.querySelector(target + " ellipse");
           var len = el.getTotalLength();
           gsap.set(el, { strokeDasharray: len, strokeDashoffset: len });
-          tl.to(el, { strokeDashoffset: 0, duration: dur === undefined ? 0.7 : dur, ease: "power2.inOut" }, at);
+          tl.to(
+            el,
+            { strokeDashoffset: 0, duration: dur === undefined ? 0.7 : dur, ease: "power2.inOut" },
+            at,
+          );
         };
         window.ytCircleOff = function (tl, target, at) {
           tl.to(target, { opacity: 0, duration: 0.35, ease: "power2.in" }, at);
@@ -137,7 +145,7 @@
                 num.textContent = String(Math.ceil(st.v));
               },
             },
-            at
+            at,
           );
           for (var i = 1; i <= from; i++) {
             tl.to(target, { scale: 1.07, duration: 0.09, ease: "sine.out" }, at + i - 0.09);
diff --git a/registry/components/yt-feather-highlight/demo.html b/registry/components/yt-feather-highlight/demo.html
index b09fec06f..a24d435b4 100644
--- a/registry/components/yt-feather-highlight/demo.html
+++ b/registry/components/yt-feather-highlight/demo.html
@@ -99,7 +99,7 @@
         data-start="0"
         data-duration="5"
         data-track-index="0"
-        style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
       ></div>
     </div>
     <script>
diff --git a/registry/components/yt-feather-highlight/yt-feather-highlight.html b/registry/components/yt-feather-highlight/yt-feather-highlight.html
index 19397d62d..43701dc80 100644
--- a/registry/components/yt-feather-highlight/yt-feather-highlight.html
+++ b/registry/components/yt-feather-highlight/yt-feather-highlight.html
@@ -96,7 +96,7 @@
         data-start="0"
         data-duration="5"
         data-track-index="0"
-        style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
       ></div>
     </div>
     <script>
diff --git a/registry/components/yt-screen-warp/demo.html b/registry/components/yt-screen-warp/demo.html
index d4cc94670..8fff71cf4 100644
--- a/registry/components/yt-screen-warp/demo.html
+++ b/registry/components/yt-screen-warp/demo.html
@@ -91,7 +91,7 @@
         data-start="0"
         data-duration="4"
         data-track-index="0"
-        style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
       ></div>
     </div>
     <script>
diff --git a/registry/components/yt-screen-warp/yt-screen-warp.html b/registry/components/yt-screen-warp/yt-screen-warp.html
index c91bd825f..1c362a300 100644
--- a/registry/components/yt-screen-warp/yt-screen-warp.html
+++ b/registry/components/yt-screen-warp/yt-screen-warp.html
@@ -88,7 +88,7 @@
         data-start="0"
         data-duration="4"
         data-track-index="0"
-        style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
       ></div>
     </div>
     <script>