fix: make registry blocks pass lint errors (#564)

registry/blocks/app-showcase/app-showcase.html

@@ -25,6 +25,7 @@
       data-composition-id="app-showcase"
       data-width="1920"
       data-height="1080"
+      data-start="0"
       data-duration="5.5"
     >
       <!-- Background -->

registry/blocks/chromatic-radial-split/chromatic-radial-split.html

@@ -190,6 +190,7 @@
 
       <div
         id="driver"
+        class="clip"
         data-start="0"
         data-duration="4"
         data-track-index="0"

registry/blocks/cinematic-zoom/cinematic-zoom.html

@@ -190,6 +190,7 @@
 
       <div
         id="driver"
+        class="clip"
         data-start="0"
         data-duration="4"
         data-track-index="0"

registry/blocks/cross-warp-morph/cross-warp-morph.html

@@ -190,6 +190,7 @@
 
       <div
         id="driver"
+        class="clip"
         data-start="0"
         data-duration="4"
         data-track-index="0"

registry/blocks/data-chart/data-chart.html

@@ -33,6 +33,7 @@
       data-composition-id="data-chart"
       data-width="1920"
       data-height="1080"
+      data-start="0"
       data-duration="15"
     >
       <div class="chart-container">

registry/blocks/domain-warp-dissolve/domain-warp-dissolve.html

@@ -190,6 +190,7 @@
 
       <div
         id="driver"
+        class="clip"
         data-start="0"
         data-duration="4"
         data-track-index="0"

registry/blocks/flash-through-white/flash-through-white.html

@@ -190,6 +190,7 @@
 
       <div
         id="driver"
+        class="clip"
         data-start="0"
         data-duration="4"
         data-track-index="0"

registry/blocks/flowchart/flowchart.html

@@ -33,6 +33,7 @@
       data-composition-id="flowchart"
       data-width="1920"
       data-height="1080"
+      data-start="0"
       data-duration="12"
     >
       <div class="canvas">
@@ -309,32 +310,32 @@
         (function () {
           const tl = gsap.timeline({ paused: true });
           const S = '[data-composition-id="flowchart"]';
-          const nodePython = document.querySelector(`${S} #node-python`);
-          const pythonText = document.querySelector(`${S} #python-text`);
+          const nodePython = document.querySelector(S + " #node-python");
+          const pythonText = document.querySelector(S + " #python-text");
 
           // 1. Root node scales in
-          tl.to(`${S} #node-root`, { scale: 1, duration: 0.4, ease: "power2.out" });
+          tl.to(S + " #node-root", { scale: 1, duration: 0.4, ease: "power2.out" });
 
           // 2. Hold
           tl.addLabel("hold1", "+=0.6");
 
           // 3. Connectors draw
           tl.to(
-            `${S} .connector#path-1-L, ${S} .connector#path-1-R`,
+            S + " .connector#path-1-L, " + S + " .connector#path-1-R",
             { strokeDashoffset: 0, duration: 0.5, ease: "none" },
             "hold1",
           );
 
           tl.to(
-            `${S} #label-yes, ${S} #label-not-sure`,
+            S + " #label-yes, " + S + " #label-not-sure",
             { opacity: 1, duration: 0.2 },
             "hold1+=0.25",
           );
 
           // 4. Level 2 nodes
-          tl.to(`${S} #node-yes`, { scale: 1, duration: 0.4, ease: "back.out(1.7)" }, "hold1+=0.4");
+          tl.to(S + " #node-yes", { scale: 1, duration: 0.4, ease: "back.out(1.7)" }, "hold1+=0.4");
           tl.to(
-            `${S} #node-not-sure`,
+            S + " #node-not-sure",
             { scale: 1, duration: 0.4, ease: "back.out(1.7)" },
             "hold1+=0.6",
           );
@@ -344,17 +345,24 @@
 
           // 6. Level 2→3 connectors
           tl.to(
-            `${S} .connector#path-2-LL, ${S} .connector#path-2-LR, ${S} .connector#path-2-RL, ${S} .connector#path-2-RR`,
+            S +
+              " .connector#path-2-LL, " +
+              S +
+              " .connector#path-2-LR, " +
+              S +
+              " .connector#path-2-RL, " +
+              S +
+              " .connector#path-2-RR",
             { strokeDashoffset: 0, duration: 0.4, ease: "none" },
             "hold2",
           );
 
           // 7. Leaf nodes
           const leafNodes = [
-            `${S} #node-python`,
-            `${S} #node-nocode`,
-            `${S} #node-website`,
-            `${S} #node-course`,
+            S + " #node-python",
+            S + " #node-nocode",
+            S + " #node-website",
+            S + " #node-course",
           ];
           leafNodes.forEach((id, i) => {
             tl.to(
@@ -364,14 +372,14 @@
             );
           });
 
-          tl.to(`${S} .squiggle-container`, { opacity: 1, duration: 0.1 }, "hold2+=0.3");
+          tl.to(S + " .squiggle-container", { opacity: 1, duration: 0.1 }, "hold2+=0.3");
 
           // 8. Hold
           tl.addLabel("hold3", "+=0.8");
 
           // 9. Cursor drifts in
           tl.to(
-            `${S} #cursor`,
+            S + " #cursor",
             { left: 450, top: 540, duration: 1, ease: "power1.inOut" },
             "hold3",
           );
@@ -384,11 +392,11 @@
               border.className = "selection-border";
               nodePython.appendChild(border);
             }
-            gsap.set(`${S} .selection-border`, { opacity: 1 });
+            gsap.set(S + " .selection-border", { opacity: 1 });
           }, "hold3+=1");
 
           tl.to(
-            `${S} #cursor`,
+            S + " #cursor",
             { scale: 0.8, duration: 0.05, yoyo: true, repeat: 1, overwrite: "auto" },
             "hold3+=1",
           );
@@ -398,7 +406,7 @@
 
           // 12. Double-click to highlight "Pythom"
           tl.to(
-            `${S} #cursor`,
+            S + " #cursor",
             { scale: 0.8, duration: 0.05, yoyo: true, repeat: 3, overwrite: "auto" },
             "hold4",
           );
@@ -426,24 +434,24 @@
           const typingEnd = typingStart + words.length * 0.05;
           tl.add(() => {
             if (pythonText) pythonText.innerHTML = "Start with Python";
-            gsap.set(`${S} .squiggle-container`, { opacity: 0 });
+            gsap.set(S + " .squiggle-container", { opacity: 0 });
           }, typingEnd);
 
           // 15. Hold
           tl.addLabel("hold6", typingEnd + 0.5);
 
           // 16. Cursor clicks away to deselect
-          tl.to(`${S} #cursor`, { left: 500, top: 580, duration: 0.3, overwrite: "auto" }, "hold6");
+          tl.to(S + " #cursor", { left: 500, top: 580, duration: 0.3, overwrite: "auto" }, "hold6");
           tl.to(
-            `${S} #cursor`,
+            S + " #cursor",
             { scale: 0.8, duration: 0.05, yoyo: true, repeat: 1, overwrite: "auto" },
             "hold6+=0.3",
           );
-          tl.to(`${S} .selection-border`, { opacity: 0, duration: 0.1 }, "hold6+=0.3");
+          tl.to(S + " .selection-border", { opacity: 0, duration: 0.1 }, "hold6+=0.3");
 
           // 17. Emoji pop
           tl.to(
-            `${S} #emoji-thumb`,
+            S + " #emoji-thumb",
             { scale: 1, duration: 0.15, ease: "back.out(2)" },
             "hold6+=0.4",
           );
@@ -452,7 +460,7 @@
           tl.addLabel("hold7", "+=2");
 
           // 19. Fade out
-          tl.to(`${S} #fade-overlay`, { opacity: 1, duration: 0.5 }, "hold7");
+          tl.to(S + " #fade-overlay", { opacity: 1, duration: 0.5 }, "hold7");
 
           window.__timelines = window.__timelines || {};
           window.__timelines["flowchart"] = tl;

registry/blocks/glitch/glitch.html

@@ -190,6 +190,7 @@
 
       <div
         id="driver"
+        class="clip"
         data-start="0"
         data-duration="4"
         data-track-index="0"

registry/blocks/gravitational-lens/gravitational-lens.html

@@ -189,6 +189,7 @@
 
       <div
         id="driver"
+        class="clip"
         data-start="0"
         data-duration="4"
         data-track-index="0"

registry/blocks/light-leak/light-leak.html

@@ -189,6 +189,7 @@
 
       <div
         id="driver"
+        class="clip"
         data-start="0"
         data-duration="4"
         data-track-index="0"

registry/blocks/logo-outro/logo-outro.html

@@ -33,6 +33,7 @@
       data-composition-id="logo-outro"
       data-width="1920"
       data-height="1080"
+      data-start="0"
       data-duration="6"
     >
       <div class="canvas">

registry/blocks/ridged-burn/ridged-burn.html

@@ -190,6 +190,7 @@
 
       <div
         id="driver"
+        class="clip"
         data-start="0"
         data-duration="4"
         data-track-index="0"

registry/blocks/ripple-waves/ripple-waves.html

@@ -190,6 +190,7 @@
 
       <div
         id="driver"
+        class="clip"
         data-start="0"
         data-duration="4"
         data-track-index="0"

registry/blocks/sdf-iris/sdf-iris.html

@@ -190,6 +190,7 @@
 
       <div
         id="driver"
+        class="clip"
         data-start="0"
         data-duration="4"
         data-track-index="0"

registry/blocks/swirl-vortex/swirl-vortex.html

@@ -189,6 +189,7 @@
 
       <div
         id="driver"
+        class="clip"
         data-start="0"
         data-duration="4"
         data-track-index="0"

registry/blocks/thermal-distortion/thermal-distortion.html

@@ -190,6 +190,7 @@
 
       <div
         id="driver"
+        class="clip"
         data-start="0"
         data-duration="4"
         data-track-index="0"

registry/blocks/ui-3d-reveal/ui-3d-reveal.html

@@ -28,7 +28,13 @@
     </style>
   </head>
   <body>
-    <div data-composition-id="ui-3d-reveal" data-width="1920" data-height="1080" data-duration="13">
+    <div
+      data-composition-id="ui-3d-reveal"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="13"
+    >
       <!-- Background: Figma outer canvas dark -->
       <div class="bg-base"></div>
       <div class="bg-glow" id="bgGlow"></div>
@@ -2897,6 +2903,7 @@
             O + 4.8,
           );
 
+          window.__timelines = window.__timelines || {};
           window.__timelines["ui-3d-reveal"] = tl;
         })();
       </script>

registry/blocks/whip-pan/whip-pan.html

@@ -190,6 +190,7 @@
 
       <div
         id="driver"
+        class="clip"
         data-start="0"
         data-duration="4"
         data-track-index="0"