fix(catalog): reveal Matrix Decode captions with autoAlpha so the docs preview renders

The demo and snippet flipped word spans with zero-duration display sets,
which the seek-driven docs player never applies after its style restore:
the composition played 8s of black. autoAlpha reveals with the scrambles
as same-length absolute overlays follow the keyframes contract (never
tween display) and survive seeks and loop wraps. Scramble text now
matches each word's length so it decodes in place instead of jumping.

Author: miguel-heygen

docs/catalog/components/caption-matrix-decode.mdx

@@ -96,13 +96,17 @@ That writes one file: `compositions/components/caption-matrix-decode.html`.
         position: relative;
       }
       .sc-real {
-        display: none;
-      }
-      .sc-scr0 {
-        display: none;
+        opacity: 0;
+        visibility: hidden;
       }
+      .sc-scr0,
       .sc-scr1 {
-        display: none;
+        position: absolute;
+        left: 0;
+        top: 0;
+        white-space: nowrap;
+        opacity: 0;
+        visibility: hidden;
       }
     </style>
   </head>
@@ -150,10 +154,10 @@ That writes one file: `compositions/components/caption-matrix-decode.html`.
 
         var ALPHANUM = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
 
-        function scrambleChars(seed) {
+        function scrambleChars(seed, length) {
           var rng = mulberry32(seed);
           var result = "";
-          for (var i = 0; i < 4; i++) {
+          for (var i = 0; i < length; i++) {
             result += ALPHANUM[Math.floor(rng() * ALPHANUM.length)];
           }
           return result;
@@ -234,13 +238,13 @@ That writes one file: `compositions/components/caption-matrix-decode.html`.
             var scr0 = document.createElement("span");
             scr0.className = "sc-scr0";
             scr0.id = "sc-scr0-" + wi;
-            scr0.textContent = scrambleChars(wi * 1000 + 0);
+            scr0.textContent = scrambleChars(wi * 1000 + 0, w.text.length);
             wordWrap.appendChild(scr0);
 
             var scr1 = document.createElement("span");
             scr1.className = "sc-scr1";
             scr1.id = "sc-scr1-" + wi;
-            scr1.textContent = scrambleChars(wi * 1000 + 1);
+            scr1.textContent = scrambleChars(wi * 1000 + 1, w.text.length);
             wordWrap.appendChild(scr1);
 
             grp.appendChild(wordWrap);
@@ -257,11 +261,11 @@ That writes one file: `compositions/components/caption-matrix-decode.html`.
             var scr0El = document.getElementById("sc-scr0-" + wi);
             var scr1El = document.getElementById("sc-scr1-" + wi);
 
-            tl.set(scr0El, { display: "inline" }, w.start);
-            tl.set(scr1El, { display: "inline" }, w.start + 0.1);
-            tl.set(scr0El, { display: "none" }, w.start + 0.1);
-            tl.set(realEl, { display: "inline" }, w.start + 0.2);
-            tl.set(scr1El, { display: "none" }, w.start + 0.2);
+            tl.set(scr0El, { autoAlpha: 1 }, w.start);
+            tl.set(scr1El, { autoAlpha: 1 }, w.start + 0.1);
+            tl.set(scr0El, { autoAlpha: 0 }, w.start + 0.1);
+            tl.set(realEl, { autoAlpha: 1 }, w.start + 0.2);
+            tl.set(scr1El, { autoAlpha: 0 }, w.start + 0.2);
           });
 
           tl.to(grp, { opacity: 0, duration: 0.12 }, g.end - 0.12);