feat(registry): seed transition blocks — 14 shader + 14 CSS showcase (#270)

## What

Add 28 transition blocks from the Hyperframe Template Structure catalog, bringing the registry to 53 total items.

### Shader transitions (14 blocks, WebGL, 4s each)
`domain-warp-dissolve`, `ridged-burn`, `whip-pan`, `sdf-iris`, `ripple-waves`, `gravitational-lens`, `cinematic-zoom`, `chromatic-radial-split`, `glitch`, `swirl-vortex`, `thermal-distortion`, `flash-through-white`, `cross-warp-morph`, `light-leak`

### CSS transition showcases (14 blocks, various durations)
`transitions-3d`, `transitions-blur`, `transitions-cover`, `transitions-destruction`, `transitions-dissolve`, `transitions-distortion`, `transitions-grid`, `transitions-light`, `transitions-mechanical`, `transitions-other`, `transitions-push`, `transitions-radial`, `transitions-scale`, `transitions-shader`

## Why

Phase D content accumulation. Transitions are the most-requested category for the catalog.

## How

- Shader transitions extracted from `shader-showcase.zip`, each a standalone HTML with WebGL shaders
- CSS transitions extracted from `showcase-bundle.zip`, each a standalone showcase page
- All tagged with `transition` + `shader` or `showcase` for catalog grouping
- Preview thumbnails generated for all 28 blocks
- Catalog pages + index regenerated

## Test plan

- [x] All 28 blocks produce preview thumbnails
- [x] `registry-item.json` validates for all blocks
- [x] Catalog pages generated (45 total items in catalog-index.json)
- [x] `oxfmt --check` passes

registry/blocks/flowchart/flowchart.html

@@ -308,40 +308,54 @@
       <script>
         (function () {
           const tl = gsap.timeline({ paused: true });
-          const nodePython = document.querySelector("#node-python");
-          const pythonText = document.querySelector("#python-text");
+          const S = '[data-composition-id="flowchart"]';
+          const nodePython = document.querySelector(`${S} #node-python`);
+          const pythonText = document.querySelector(`${S} #python-text`);
 
           // 1. Root node scales in
-          tl.to("#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(
-            ".connector#path-1-L, .connector#path-1-R",
+            `${S} .connector#path-1-L, ${S} .connector#path-1-R`,
             { strokeDashoffset: 0, duration: 0.5, ease: "none" },
             "hold1",
           );
 
-          tl.to("#label-yes, #label-not-sure", { opacity: 1, duration: 0.2 }, "hold1+=0.25");
+          tl.to(
+            `${S} #label-yes, ${S} #label-not-sure`,
+            { opacity: 1, duration: 0.2 },
+            "hold1+=0.25",
+          );
 
           // 4. Level 2 nodes
-          tl.to("#node-yes", { scale: 1, duration: 0.4, ease: "back.out(1.7)" }, "hold1+=0.4");
-          tl.to("#node-not-sure", { scale: 1, duration: 0.4, ease: "back.out(1.7)" }, "hold1+=0.6");
+          tl.to(`${S} #node-yes`, { scale: 1, duration: 0.4, ease: "back.out(1.7)" }, "hold1+=0.4");
+          tl.to(
+            `${S} #node-not-sure`,
+            { scale: 1, duration: 0.4, ease: "back.out(1.7)" },
+            "hold1+=0.6",
+          );
 
           // 5. Hold
           tl.addLabel("hold2", "+=0.5");
 
           // 6. Level 2→3 connectors
           tl.to(
-            ".connector#path-2-LL, .connector#path-2-LR, .connector#path-2-RL, .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 = ["#node-python", "#node-nocode", "#node-website", "#node-course"];
+          const leafNodes = [
+            `${S} #node-python`,
+            `${S} #node-nocode`,
+            `${S} #node-website`,
+            `${S} #node-course`,
+          ];
           leafNodes.forEach((id, i) => {
             tl.to(
               id,
@@ -350,13 +364,17 @@
             );
           });
 
-          tl.to(".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("#cursor", { left: 450, top: 540, duration: 1, ease: "power1.inOut" }, "hold3");
+          tl.to(
+            `${S} #cursor`,
+            { left: 450, top: 540, duration: 1, ease: "power1.inOut" },
+            "hold3",
+          );
 
           // 10. Cursor clicks — selection border
           tl.add(() => {
@@ -366,11 +384,11 @@
               border.className = "selection-border";
               nodePython.appendChild(border);
             }
-            gsap.set(".selection-border", { opacity: 1 });
+            gsap.set(`${S} .selection-border`, { opacity: 1 });
           }, "hold3+=1");
 
           tl.to(
-            "#cursor",
+            `${S} #cursor`,
             { scale: 0.8, duration: 0.05, yoyo: true, repeat: 1, overwrite: "auto" },
             "hold3+=1",
           );
@@ -380,7 +398,7 @@
 
           // 12. Double-click to highlight "Pythom"
           tl.to(
-            "#cursor",
+            `${S} #cursor`,
             { scale: 0.8, duration: 0.05, yoyo: true, repeat: 3, overwrite: "auto" },
             "hold4",
           );
@@ -408,29 +426,33 @@
           const typingEnd = typingStart + words.length * 0.05;
           tl.add(() => {
             if (pythonText) pythonText.innerHTML = "Start with Python";
-            gsap.set(".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("#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(
-            "#cursor",
+            `${S} #cursor`,
             { scale: 0.8, duration: 0.05, yoyo: true, repeat: 1, overwrite: "auto" },
             "hold6+=0.3",
           );
-          tl.to(".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("#emoji-thumb", { scale: 1, duration: 0.15, ease: "back.out(2)" }, "hold6+=0.4");
+          tl.to(
+            `${S} #emoji-thumb`,
+            { scale: 1, duration: 0.15, ease: "back.out(2)" },
+            "hold6+=0.4",
+          );
 
           // 18. Hold
           tl.addLabel("hold7", "+=2");
 
           // 19. Fade out
-          tl.to("#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;