diff --git a/docs/catalog/components/colorama-wipe.mdx b/docs/catalog/components/colorama-wipe.mdx
new file mode 100644
index 0000000000..d1b4ade65f
--- /dev/null
+++ b/docs/catalog/components/colorama-wipe.mdx
@@ -0,0 +1,411 @@
+---
+title: "Colorama Wipe"
+description: "Headline reveal through a feathered, leaning wipe front that is blurred and colour-mapped as it passes, then settles to clean type and wipes off again — the After Effects masked-text + Compound Blur + Colorama 'shiny wipe' as a deterministic canvas effect on any text element"
+mode: "frame"
+---
+
+import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
+import { InstallCommand } from "/snippets/install-command.jsx";
+
+<CatalogDetail
+  compositionId="colorama-wipe"
+  compositionSrc="compositions/components/colorama-wipe.html"
+  title="Colorama Wipe"
+  description="Headline reveal through a feathered, leaning wipe front that is blurred and colour-mapped as it passes, then settles to clean type and wipes off again — the After Effects masked-text + Compound Blur + Colorama 'shiny wipe' as a deterministic canvas effect on any text element"
+  variables={[]}
+  meta={{"category":"Typography & Text","badge":"Stable","codeLines":352}}
+  attribution={{"path":"registry/components/colorama-wipe","tags":["text","reveal","wipe","colorama","gradient","blur","headline","saas"]}}
+  hasCode
+  rawUrl="https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/components/colorama-wipe/colorama-wipe.html"
+>
+
+<CatalogSlot slot="code">
+
+```html colorama-wipe.html
+<!--
+  Colorama Wipe — a headline reveals through a feathered, leaning wipe front that is blurred and colour-mapped
+  as it passes, then settles to clean type (the After Effects "shiny wipe": masked text + Compound Blur +
+  Colorama over a moving gradient, with a crisp duplicate fading on top).
+
+  Usage: paste this snippet into your composition AFTER GSAP, then in your script, once fonts are loaded and
+  all other tweens are defined, call:
+
+    attachColoramaWipe("#cw-headline", tl, { at: 0.3, in: 0.75, hold: 2.0, out: 0.55 });
+    window.__timelines["your-comp"] = tl;
+
+  The target is any element that holds one line of text. The component measures it, hides it
+  (visibility: hidden — layout is untouched) and paints the effect on two canvases over its box for the
+  window [at, at + in + hold + out]. Outside that window nothing is drawn, so the element is invisible: the
+  wipe owns the element's on-screen life. Call it once per element; a second call on the same element is ignored.
+
+  Requirements:
+  - Call after `document.fonts.ready` (the text is rasterised once at attach; a late font swap is not seen).
+  - The composition root (nearest ancestor with data-composition-id) must be the positioning context; the
+    canvases are placed by the element's offset inside it.
+  - One line of text. Multi-line targets: attach one wipe per line element.
+  - GSAP must be loaded before this snippet.
+
+  Options (all optional):
+    at        seconds on the host timeline the wipe enters (default 0)
+    in        entry wipe duration, s (0.75)      hold   fully revealed, s (2.0)      out   exit wipe, s (0.55)
+    cycle     Colorama output cycle, [[pos 0..1, [r,g,b]], ...] intensity -> colour (default: black -> navy ->
+              blue -> azure -> cyan -> violet -> lavender -> white)
+    feather   front softness as a multiple of the text height (2.4)
+    tilt      lean of the front in degrees; the bottom of a glyph lags the top (40)
+    blur      compound-blur maximum as a multiple of the text height (0.15)
+    trail     fraction of the text width behind the front still blurred (0.55)
+    noise     intensity jitter 0..1 (0.03)
+    crisp     fade a sharp copy on top once the front has cleared the text (true)
+    scale     effect canvas resolution as a fraction of the box (0.5); 1 for hero type over ~600 px
+
+  Deterministic: no Math.random, no clocks; every frame is a pure function of the timeline time.
+-->
+
+<style>
+  .cw-src {
+    visibility: hidden; /* layout stays; the canvases paint in its place */
+  }
+  .cw-stage {
+    position: absolute;
+    pointer-events: none;
+    overflow: visible;
+  }
+  .cw-stage canvas {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+</style>
+
+<script>
+  (function () {
+    var DEFAULTS = {
+      at: 0,
+      in: 0.75,
+      hold: 2.0,
+      out: 0.55,
+      cycle: [
+        [0.0, [0, 0, 0]],
+        [0.18, [0, 0, 0]],
+        [0.28, [0, 2, 127]],
+        [0.4, [8, 20, 240]],
+        [0.5, [26, 122, 224]],
+        [0.58, [80, 225, 240]],
+        [0.66, [20, 24, 220]],
+        [0.76, [50, 50, 240]],
+        [0.87, [128, 128, 242]],
+        [0.95, [200, 198, 240]],
+        [1.0, [242, 238, 252]],
+      ],
+      feather: 2.4,
+      tilt: 40,
+      blur: 0.15,
+      trail: 0.55,
+      noise: 0.03,
+      crisp: true,
+      scale: 0.5,
+    };
+    var LEVELS = [0.04, 0.14, 0.3, 0.55, 1.0]; // blur radii as fractions of the maximum
+    var ease = gsap.parseEase("power2.inOut");
+
+    function lut(cycle) {
+      var out = new Uint8ClampedArray(256 * 3);
+      for (var i = 0; i < 256; i++) {
+        var v = i / 255,
+          k = 0;
+        while (k < cycle.length - 2 && cycle[k + 1][0] < v) k++;
+        var a = cycle[k][0],
+          ca = cycle[k][1],
+          b = cycle[k + 1][0],
+          cb = cycle[k + 1][1];
+        var u = Math.min(1, Math.max(0, (v - a) / (b - a)));
+        for (var c = 0; c < 3; c++) out[i * 3 + c] = ca[c] + (cb[c] - ca[c]) * u;
+      }
+      return out;
+    }
+    function hash(x, y, f) {
+      var h = (x * 374761393 + y * 668265263 + f * 2147483647) | 0;
+      h = (h ^ (h >>> 13)) * 1274126177;
+      return ((h ^ (h >>> 16)) >>> 0) / 4294967296;
+    }
+    function mk(w, h) {
+      var c = document.createElement("canvas");
+      c.width = w;
+      c.height = h;
+      return c;
+    }
+
+    window.attachColoramaWipe = function (target, tl, opts) {
+      var el = typeof target === "string" ? document.querySelector(target) : target;
+      if (!el) {
+        console.warn("[colorama-wipe] no element for", target);
+        return null;
+      }
+      if (el.__cw) return el.__cw;
+      var o = Object.assign({}, DEFAULTS, opts || {});
+      var root = el.closest("[data-composition-id]") || el.parentElement;
+      var cs = getComputedStyle(el);
+      var text = el.textContent.trim();
+      var font = cs.fontStyle + " " + cs.fontWeight + " " + cs.fontSize + " " + cs.fontFamily;
+      var size = parseFloat(cs.fontSize);
+
+      // geometry in composition px: the element's box, padded for feather + blur bleed
+      var rr = root.getBoundingClientRect(),
+        er = el.getBoundingClientRect();
+      var k = root.offsetWidth / rr.width || 1; // undo any preview scaling
+      var ex = (er.left - rr.left) * k,
+        ey = (er.top - rr.top) * k,
+        ew = er.width * k,
+        eh = er.height * k;
+      var F = o.feather * size,
+        MAXB = o.blur * size,
+        TILT = (o.tilt * Math.PI) / 180;
+      var padX = Math.ceil(F * 0.6 + MAXB * 3),
+        padY = Math.ceil(MAXB * 3 + eh * 0.25);
+      var BX = ex - padX,
+        BY = ey - padY,
+        BW = ew + padX * 2,
+        BH = eh + padY * 2;
+
+      // stage over the element
+      var stage = document.createElement("div");
+      stage.className = "cw-stage";
+      stage.style.left = BX + "px";
+      stage.style.top = BY + "px";
+      stage.style.width = BW + "px";
+      stage.style.height = BH + "px";
+      var S = o.scale,
+        FW = Math.max(2, Math.round(BW * S)),
+        FH = Math.max(2, Math.round(BH * S));
+      var fx = mk(FW, FH),
+        fctx = fx.getContext("2d", { willReadFrequently: true });
+      var crisp = mk(Math.round(BW), Math.round(BH)),
+        cctx = crisp.getContext("2d");
+      stage.appendChild(fx);
+      stage.appendChild(crisp);
+      el.classList.add("cw-src");
+      el.parentElement.insertBefore(stage, el.nextSibling);
+      // the stage must position against the composition root like the element does
+      if (getComputedStyle(el.parentElement).position === "static" && el.parentElement !== root)
+        root.appendChild(stage);
+
+      // text geometry inside the box, comp px
+      var tx0 = padX,
+        tw = ew,
+        ty = padY + eh / 2,
+        baseline = 0.04 * size;
+      cctx.font = font;
+      cctx.textBaseline = "middle";
+      cctx.textAlign = "center";
+      var measured = cctx.measureText(text).width;
+      if (measured > 0) {
+        tx0 = padX + (ew - measured) / 2;
+        tw = measured;
+      }
+      var x0 = tx0,
+        x1 = tx0 + tw,
+        cx = tx0 + tw / 2;
+
+      // offscreen buffers (effect res)
+      var textC = mk(FW, FH),
+        tctx = textC.getContext("2d");
+      var maskedC = mk(FW, FH),
+        mctx = maskedC.getContext("2d");
+      var blurC = LEVELS.map(function () {
+        return mk(FW, FH);
+      });
+      var bctx = blurC.map(function (c) {
+        return c.getContext("2d", { willReadFrequently: true });
+      });
+      var mapC = mk(FW, FH),
+        mapctx = mapC.getContext("2d", { willReadFrequently: true });
+      var LUT = lut(o.cycle);
+      var dxT = Math.cos(TILT),
+        dyT = Math.sin(TILT);
+
+      // rasterise the text once (half res) — alpha = glyph coverage = Colorama intensity
+      tctx.clearRect(0, 0, FW, FH);
+      tctx.fillStyle = "#fff";
+      tctx.font = font.replace(cs.fontSize, size * S + "px");
+      tctx.textBaseline = "middle";
+      tctx.textAlign = "center";
+      tctx.fillText(text, cx * S, (ty + baseline) * S);
+
+      function tilted(ctx, fxp, len, c0, c1) {
+        var gx = fxp * S,
+          gy = ty * S;
+        var g = ctx.createLinearGradient(gx, gy, gx + dxT * len * S, gy + dyT * len * S);
+        g.addColorStop(0, c0);
+        g.addColorStop(1, c1);
+        return g;
+      }
+
+      var total = o.in + o.hold + o.out;
+      function draw(lt) {
+        // lt = seconds since `at`
+        if (lt < 0 || lt > total) {
+          fctx.clearRect(0, 0, FW, FH);
+          cctx.clearRect(0, 0, crisp.width, crisp.height);
+          return;
+        }
+        var pIn = Math.min(1, Math.max(0, lt / o.in));
+        var pOut = Math.min(1, Math.max(0, (lt - o.in - o.hold) / o.out));
+        var front = x0 - F * 0.4 + (tw + F * 1.7) * ease(pIn);
+        var back = x0 - F * 0.7 + (tw + F * 1.5) * ease(pOut);
+
+        // 1. feathered mask around the front (and the closing edge on exit)
+        mctx.clearRect(0, 0, FW, FH);
+        mctx.globalCompositeOperation = "source-over";
+        mctx.drawImage(textC, 0, 0);
+        mctx.globalCompositeOperation = "destination-in";
+        mctx.fillStyle = tilted(mctx, front - F, F, "rgba(0,0,0,1)", "rgba(0,0,0,0)");
+        mctx.fillRect(0, 0, FW, FH);
+        if (pOut > 0) {
+          mctx.fillStyle = tilted(mctx, back, F, "rgba(0,0,0,0)", "rgba(0,0,0,1)");
+          mctx.fillRect(0, 0, FW, FH);
+        }
+        mctx.globalCompositeOperation = "source-over";
+
+        // 2. compound blur: blur levels mixed per pixel by a front-following map
+        for (var i = 0; i < LEVELS.length; i++) {
+          var c = bctx[i];
+          c.clearRect(0, 0, FW, FH);
+          c.filter = "blur(" + MAXB * LEVELS[i] * S + "px)";
+          c.drawImage(maskedC, 0, 0);
+          c.filter = "none";
+        }
+        var trail = tw * o.trail;
+        mapctx.fillStyle = tilted(mapctx, front - trail - F, trail + F * 0.8, "#000", "#fff");
+        mapctx.fillRect(0, 0, FW, FH);
+        if (pOut > 0) {
+          mapctx.globalCompositeOperation = "lighter";
+          mapctx.fillStyle = tilted(mapctx, back - F * 0.2, trail + F * 0.2, "#fff", "#000");
+          mapctx.fillRect(0, 0, FW, FH);
+          mapctx.globalCompositeOperation = "source-over";
+        }
+        var map = mapctx.getImageData(0, 0, FW, FH).data;
+        var lv = bctx.map(function (c) {
+          return c.getImageData(0, 0, FW, FH).data;
+        });
+
+        // 3. Colorama with per-pixel whitening: tint only in the transition zone, clean type behind the front,
+        //    tint returning ahead of the closing edge
+        var out = fctx.createImageData(FW, FH),
+          od = out.data,
+          n = LEVELS.length - 1,
+          frame = Math.round(lt * 30);
+        var FS = F * S,
+          frontS = front * S,
+          backS = back * S,
+          tyS = ty * S;
+        for (var p = 0, y = 0; y < FH; y++) {
+          var lean = (y / FH - 0.5) * 0.5,
+            yT = (y - tyS) * dyT;
+          for (var x = 0; x < FW; x++, p += 4) {
+            var sF = (x - frontS) * dxT + yT;
+            var white = (-sF - FS * 0.6) / (FS * 0.5);
+            white = white < 0 ? 0 : white > 1 ? 1 : white;
+            if (pOut > 0) {
+              var sB = (x - backS) * dxT + yT;
+              var keep = (sB - FS * 0.7) / (FS * 0.6);
+              keep = keep < 0 ? 0 : keep > 1 ? 1 : keep;
+              white *= keep;
+            }
+            var m = map[p] / 255 + lean;
+            m = m < 0 ? 0 : m > 1 ? 1 : m;
+            var f = m * n,
+              li = Math.min(n - 1, Math.floor(f)),
+              u = f - li;
+            var cov = (lv[li][p + 3] * (1 - u) + lv[li + 1][p + 3] * u) / 255; // glyph coverage after blur
+            if (cov < 0.002) {
+              od[p + 3] = 0;
+              continue;
+            } // no ink: stay transparent
+            var lum = cov + (hash(x, y, frame) - 0.5) * o.noise;
+            var idx = lum <= 0 ? 0 : lum >= 1 ? 255 : (lum * 255) | 0;
+            var g = white >= 1 ? 255 : idx; // clean type is solid white; alpha carries the edge
+            od[p] = LUT[idx * 3] + (g - LUT[idx * 3]) * white;
+            od[p + 1] = LUT[idx * 3 + 1] + (g - LUT[idx * 3 + 1]) * white;
+            od[p + 2] = LUT[idx * 3 + 2] + (g - LUT[idx * 3 + 2]) * white;
+            od[p + 3] = white >= 1 ? Math.min(255, cov * 255) : Math.min(255, cov * 255 * 4); // soft edge where tinted, coverage alpha when clean
+          }
+        }
+        fctx.putImageData(out, 0, 0);
+
+        // 4. crisp duplicate on top, fading up as the front clears the text, dropping on exit
+        cctx.clearRect(0, 0, crisp.width, crisp.height);
+        if (o.crisp) {
+          var opIn = Math.min(1, Math.max(0, (lt - o.in * 0.95) / 0.35)),
+            opOut = 1 - Math.min(1, Math.max(0, pOut / 0.35));
+          cctx.globalAlpha = opIn * opOut;
+          if (cctx.globalAlpha > 0) {
+            cctx.fillStyle = "#fff";
+            cctx.font = font;
+            cctx.textBaseline = "middle";
+            cctx.textAlign = "center";
+            cctx.fillText(text, cx, ty + baseline);
+          }
+          cctx.globalAlpha = 1;
+        }
+      }
+
+      // one linear clock tween at `at`; at progress 0 the mask shows nothing, at progress 1 the exit has closed,
+      // so a seek anywhere outside the window still paints an empty stage
+      var clock = { t: 0 };
+      draw(0);
+      tl.fromTo(
+        clock,
+        { t: 0 },
+        {
+          t: total,
+          duration: total,
+          ease: "none",
+          onUpdate: function () {
+            draw(clock.t);
+          },
+        },
+        o.at,
+      );
+
+      el.__cw = { stage: stage, draw: draw, total: total, options: o };
+      return el.__cw;
+    };
+  })();
+</script>
+```
+
+</CatalogSlot>
+
+<CatalogSlot slot="install">
+
+<InstallCommand command="npx hyperframes add colorama-wipe" item="colorama-wipe" />
+
+That writes one file: `compositions/components/colorama-wipe.html`.
+
+</CatalogSlot>
+
+<CatalogSlot slot="docs">
+
+## Paste it into your composition
+
+Open `compositions/components/colorama-wipe.html` and copy what is inside into your own composition.
+The file opens with a comment header that walks you through it.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
+{/* hf:generated-footer */}
+
+Tagged `text` `reveal` `wipe` `colorama` `gradient` `blur` `headline` `saas`.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
+
+</CatalogSlot>
+
+</CatalogDetail>
diff --git a/docs/docs.json b/docs/docs.json
index 5fe4fd0ad3..e271cd75e2 100644
--- a/docs/docs.json
+++ b/docs/docs.json
@@ -510,12 +510,12 @@
               },
               {
                 "group": "Data & charts",
-                "tag": "18",
+                "tag": "17",
                 "expanded": false,
                 "pages": [
                   {
                     "group": "Data",
-                    "tag": "18",
+                    "tag": "17",
                     "expanded": false,
                     "pages": [
                       "catalog/components/animated-bar-chart",
@@ -534,7 +534,7 @@
                       "catalog/blocks/us-map-bubble",
                       "catalog/blocks/us-map-flow",
                       "catalog/blocks/us-map-hex",
-                      "catalog/blocks/week-in-merges",
+                      "catalog/blocks/week-in-merges", 
                       "catalog/blocks/world-map"
                     ]
                   }
diff --git a/docs/public/catalog-index.json b/docs/public/catalog-index.json
index a8aa956bde..857715fb3a 100644
--- a/docs/public/catalog-index.json
+++ b/docs/public/catalog-index.json
@@ -1729,6 +1729,24 @@
     "href": "/catalog/blocks/code-typing",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-typing.png"
   },
+  {
+    "name": "colorama-wipe",
+    "type": "component",
+    "title": "Colorama Wipe",
+    "description": "Headline reveal through a feathered, leaning wipe front that is blurred and colour-mapped as it passes, then settles to clean type and wipes off again — the After Effects masked-text + Compound Blur + Colorama 'shiny wipe' as a deterministic canvas effect on any text element",
+    "tags": [
+      "text",
+      "reveal",
+      "wipe",
+      "colorama",
+      "gradient",
+      "blur",
+      "headline",
+      "saas"
+    ],
+    "href": "/catalog/components/colorama-wipe",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/colorama-wipe.png"
+  },
   {
     "name": "comparison-split",
     "type": "component",
@@ -5699,20 +5717,6 @@
     "href": "/catalog/blocks/vpn-youtube-spot",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vpn-youtube-spot.png"
   },
-  {
-    "name": "week-in-merges",
-    "type": "block",
-    "title": "Week in Merges",
-    "description": "Each author's avatar bounces across their row at a speed set by how many pull requests they merged",
-    "tags": [
-      "data",
-      "chart",
-      "ranking",
-      "leaderboard"
-    ],
-    "href": "/catalog/blocks/week-in-merges",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/week-in-merges.png"
-  },
   {
     "name": "weight-wave",
     "type": "block",
diff --git a/docs/public/catalog/components/colorama-wipe.json b/docs/public/catalog/components/colorama-wipe.json
new file mode 100644
index 0000000000..8c5977ed0a
--- /dev/null
+++ b/docs/public/catalog/components/colorama-wipe.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Colorama Wipe</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n  </head>\n  <body style=\"margin: 0; background: #0a0a0a\">\n    <main\n      data-composition-id=\"colorama-wipe\"\n      data-duration=\"3.6\"\n      style=\"\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        display: grid;\n        place-items: center;\n        background: #0a0a0a;\n      \"\n    >\n      <h1\n        id=\"cw-headline\"\n        style=\"\n          margin: 0;\n          font:\n            800 132px/1 Montserrat,\n            sans-serif;\n          color: #fff;\n        \"\n      >\n        COLORAMA WIPE\n      </h1>\n    </main>\n    <!--\n  Colorama Wipe — a headline reveals through a feathered, leaning wipe front that is blurred and colour-mapped\n  as it passes, then settles to clean type (the After Effects \"shiny wipe\": masked text + Compound Blur +\n  Colorama over a moving gradient, with a crisp duplicate fading on top).\n\n  Usage: paste this snippet into your composition AFTER GSAP, then in your script, once fonts are loaded and\n  all other tweens are defined, call:\n\n    attachColoramaWipe(\"#cw-headline\", tl, { at: 0.3, in: 0.75, hold: 2.0, out: 0.55 });\n    window.__timelines[\"your-comp\"] = tl;\n\n  The target is any element that holds one line of text. The component measures it, hides it\n  (visibility: hidden — layout is untouched) and paints the effect on two canvases over its box for the\n  window [at, at + in + hold + out]. Outside that window nothing is drawn, so the element is invisible: the\n  wipe owns the element's on-screen life. Call it once per element; a second call on the same element is ignored.\n\n  Requirements:\n  - Call after `document.fonts.ready` (the text is rasterised once at attach; a late font swap is not seen).\n  - The composition root (nearest ancestor with data-composition-id) must be the positioning context; the\n    canvases are placed by the element's offset inside it.\n  - One line of text. Multi-line targets: attach one wipe per line element.\n  - GSAP must be loaded before this snippet.\n\n  Options (all optional):\n    at        seconds on the host timeline the wipe enters (default 0)\n    in        entry wipe duration, s (0.75)      hold   fully revealed, s (2.0)      out   exit wipe, s (0.55)\n    cycle     Colorama output cycle, [[pos 0..1, [r,g,b]], ...] intensity -> colour (default: black -> navy ->\n              blue -> azure -> cyan -> violet -> lavender -> white)\n    feather   front softness as a multiple of the text height (2.4)\n    tilt      lean of the front in degrees; the bottom of a glyph lags the top (40)\n    blur      compound-blur maximum as a multiple of the text height (0.15)\n    trail     fraction of the text width behind the front still blurred (0.55)\n    noise     intensity jitter 0..1 (0.03)\n    crisp     fade a sharp copy on top once the front has cleared the text (true)\n    scale     effect canvas resolution as a fraction of the box (0.5); 1 for hero type over ~600 px\n\n  Deterministic: no Math.random, no clocks; every frame is a pure function of the timeline time.\n-->\n\n    <style>\n      .cw-src {\n        visibility: hidden; /* layout stays; the canvases paint in its place */\n      }\n      .cw-stage {\n        position: absolute;\n        pointer-events: none;\n        overflow: visible;\n      }\n      .cw-stage canvas {\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        display: block;\n      }\n    </style>\n\n    <script>\n      (function () {\n        var DEFAULTS = {\n          at: 0,\n          in: 0.75,\n          hold: 2.0,\n          out: 0.55,\n          cycle: [\n            [0.0, [0, 0, 0]],\n            [0.18, [0, 0, 0]],\n            [0.28, [0, 2, 127]],\n            [0.4, [8, 20, 240]],\n            [0.5, [26, 122, 224]],\n            [0.58, [80, 225, 240]],\n            [0.66, [20, 24, 220]],\n            [0.76, [50, 50, 240]],\n            [0.87, [128, 128, 242]],\n            [0.95, [200, 198, 240]],\n            [1.0, [242, 238, 252]],\n          ],\n          feather: 2.4,\n          tilt: 40,\n          blur: 0.15,\n          trail: 0.55,\n          noise: 0.03,\n          crisp: true,\n          scale: 0.5,\n        };\n        var LEVELS = [0.04, 0.14, 0.3, 0.55, 1.0]; // blur radii as fractions of the maximum\n        var ease = gsap.parseEase(\"power2.inOut\");\n\n        function lut(cycle) {\n          var out = new Uint8ClampedArray(256 * 3);\n          for (var i = 0; i < 256; i++) {\n            var v = i / 255,\n              k = 0;\n            while (k < cycle.length - 2 && cycle[k + 1][0] < v) k++;\n            var a = cycle[k][0],\n              ca = cycle[k][1],\n              b = cycle[k + 1][0],\n              cb = cycle[k + 1][1];\n            var u = Math.min(1, Math.max(0, (v - a) / (b - a)));\n            for (var c = 0; c < 3; c++) out[i * 3 + c] = ca[c] + (cb[c] - ca[c]) * u;\n          }\n          return out;\n        }\n        function hash(x, y, f) {\n          var h = (x * 374761393 + y * 668265263 + f * 2147483647) | 0;\n          h = (h ^ (h >>> 13)) * 1274126177;\n          return ((h ^ (h >>> 16)) >>> 0) / 4294967296;\n        }\n        function mk(w, h) {\n          var c = document.createElement(\"canvas\");\n          c.width = w;\n          c.height = h;\n          return c;\n        }\n\n        window.attachColoramaWipe = function (target, tl, opts) {\n          var el = typeof target === \"string\" ? document.querySelector(target) : target;\n          if (!el) {\n            console.warn(\"[colorama-wipe] no element for\", target);\n            return null;\n          }\n          if (el.__cw) return el.__cw;\n          var o = Object.assign({}, DEFAULTS, opts || {});\n          var root = el.closest(\"[data-composition-id]\") || el.parentElement;\n          var cs = getComputedStyle(el);\n          var text = el.textContent.trim();\n          var font = cs.fontStyle + \" \" + cs.fontWeight + \" \" + cs.fontSize + \" \" + cs.fontFamily;\n          var size = parseFloat(cs.fontSize);\n\n          // geometry in composition px: the element's box, padded for feather + blur bleed\n          var rr = root.getBoundingClientRect(),\n            er = el.getBoundingClientRect();\n          var k = root.offsetWidth / rr.width || 1; // undo any preview scaling\n          var ex = (er.left - rr.left) * k,\n            ey = (er.top - rr.top) * k,\n            ew = er.width * k,\n            eh = er.height * k;\n          var F = o.feather * size,\n            MAXB = o.blur * size,\n            TILT = (o.tilt * Math.PI) / 180;\n          var padX = Math.ceil(F * 0.6 + MAXB * 3),\n            padY = Math.ceil(MAXB * 3 + eh * 0.25);\n          var BX = ex - padX,\n            BY = ey - padY,\n            BW = ew + padX * 2,\n            BH = eh + padY * 2;\n\n          // stage over the element\n          var stage = document.createElement(\"div\");\n          stage.className = \"cw-stage\";\n          stage.style.left = BX + \"px\";\n          stage.style.top = BY + \"px\";\n          stage.style.width = BW + \"px\";\n          stage.style.height = BH + \"px\";\n          var S = o.scale,\n            FW = Math.max(2, Math.round(BW * S)),\n            FH = Math.max(2, Math.round(BH * S));\n          var fx = mk(FW, FH),\n            fctx = fx.getContext(\"2d\", { willReadFrequently: true });\n          var crisp = mk(Math.round(BW), Math.round(BH)),\n            cctx = crisp.getContext(\"2d\");\n          stage.appendChild(fx);\n          stage.appendChild(crisp);\n          el.classList.add(\"cw-src\");\n          el.parentElement.insertBefore(stage, el.nextSibling);\n          // the stage must position against the composition root like the element does\n          if (getComputedStyle(el.parentElement).position === \"static\" && el.parentElement !== root)\n            root.appendChild(stage);\n\n          // text geometry inside the box, comp px\n          var tx0 = padX,\n            tw = ew,\n            ty = padY + eh / 2,\n            baseline = 0.04 * size;\n          cctx.font = font;\n          cctx.textBaseline = \"middle\";\n          cctx.textAlign = \"center\";\n          var measured = cctx.measureText(text).width;\n          if (measured > 0) {\n            tx0 = padX + (ew - measured) / 2;\n            tw = measured;\n          }\n          var x0 = tx0,\n            x1 = tx0 + tw,\n            cx = tx0 + tw / 2;\n\n          // offscreen buffers (effect res)\n          var textC = mk(FW, FH),\n            tctx = textC.getContext(\"2d\");\n          var maskedC = mk(FW, FH),\n            mctx = maskedC.getContext(\"2d\");\n          var blurC = LEVELS.map(function () {\n            return mk(FW, FH);\n          });\n          var bctx = blurC.map(function (c) {\n            return c.getContext(\"2d\", { willReadFrequently: true });\n          });\n          var mapC = mk(FW, FH),\n            mapctx = mapC.getContext(\"2d\", { willReadFrequently: true });\n          var LUT = lut(o.cycle);\n          var dxT = Math.cos(TILT),\n            dyT = Math.sin(TILT);\n\n          // rasterise the text once (half res) — alpha = glyph coverage = Colorama intensity\n          tctx.clearRect(0, 0, FW, FH);\n          tctx.fillStyle = \"#fff\";\n          tctx.font = font.replace(cs.fontSize, size * S + \"px\");\n          tctx.textBaseline = \"middle\";\n          tctx.textAlign = \"center\";\n          tctx.fillText(text, cx * S, (ty + baseline) * S);\n\n          function tilted(ctx, fxp, len, c0, c1) {\n            var gx = fxp * S,\n              gy = ty * S;\n            var g = ctx.createLinearGradient(gx, gy, gx + dxT * len * S, gy + dyT * len * S);\n            g.addColorStop(0, c0);\n            g.addColorStop(1, c1);\n            return g;\n          }\n\n          var total = o.in + o.hold + o.out;\n          function draw(lt) {\n            // lt = seconds since `at`\n            if (lt < 0 || lt > total) {\n              fctx.clearRect(0, 0, FW, FH);\n              cctx.clearRect(0, 0, crisp.width, crisp.height);\n              return;\n            }\n            var pIn = Math.min(1, Math.max(0, lt / o.in));\n            var pOut = Math.min(1, Math.max(0, (lt - o.in - o.hold) / o.out));\n            var front = x0 - F * 0.4 + (tw + F * 1.7) * ease(pIn);\n            var back = x0 - F * 0.7 + (tw + F * 1.5) * ease(pOut);\n\n            // 1. feathered mask around the front (and the closing edge on exit)\n            mctx.clearRect(0, 0, FW, FH);\n            mctx.globalCompositeOperation = \"source-over\";\n            mctx.drawImage(textC, 0, 0);\n            mctx.globalCompositeOperation = \"destination-in\";\n            mctx.fillStyle = tilted(mctx, front - F, F, \"rgba(0,0,0,1)\", \"rgba(0,0,0,0)\");\n            mctx.fillRect(0, 0, FW, FH);\n            if (pOut > 0) {\n              mctx.fillStyle = tilted(mctx, back, F, \"rgba(0,0,0,0)\", \"rgba(0,0,0,1)\");\n              mctx.fillRect(0, 0, FW, FH);\n            }\n            mctx.globalCompositeOperation = \"source-over\";\n\n            // 2. compound blur: blur levels mixed per pixel by a front-following map\n            for (var i = 0; i < LEVELS.length; i++) {\n              var c = bctx[i];\n              c.clearRect(0, 0, FW, FH);\n              c.filter = \"blur(\" + MAXB * LEVELS[i] * S + \"px)\";\n              c.drawImage(maskedC, 0, 0);\n              c.filter = \"none\";\n            }\n            var trail = tw * o.trail;\n            mapctx.fillStyle = tilted(mapctx, front - trail - F, trail + F * 0.8, \"#000\", \"#fff\");\n            mapctx.fillRect(0, 0, FW, FH);\n            if (pOut > 0) {\n              mapctx.globalCompositeOperation = \"lighter\";\n              mapctx.fillStyle = tilted(mapctx, back - F * 0.2, trail + F * 0.2, \"#fff\", \"#000\");\n              mapctx.fillRect(0, 0, FW, FH);\n              mapctx.globalCompositeOperation = \"source-over\";\n            }\n            var map = mapctx.getImageData(0, 0, FW, FH).data;\n            var lv = bctx.map(function (c) {\n              return c.getImageData(0, 0, FW, FH).data;\n            });\n\n            // 3. Colorama with per-pixel whitening: tint only in the transition zone, clean type behind the front,\n            //    tint returning ahead of the closing edge\n            var out = fctx.createImageData(FW, FH),\n              od = out.data,\n              n = LEVELS.length - 1,\n              frame = Math.round(lt * 30);\n            var FS = F * S,\n              frontS = front * S,\n              backS = back * S,\n              tyS = ty * S;\n            for (var p = 0, y = 0; y < FH; y++) {\n              var lean = (y / FH - 0.5) * 0.5,\n                yT = (y - tyS) * dyT;\n              for (var x = 0; x < FW; x++, p += 4) {\n                var sF = (x - frontS) * dxT + yT;\n                var white = (-sF - FS * 0.6) / (FS * 0.5);\n                white = white < 0 ? 0 : white > 1 ? 1 : white;\n                if (pOut > 0) {\n                  var sB = (x - backS) * dxT + yT;\n                  var keep = (sB - FS * 0.7) / (FS * 0.6);\n                  keep = keep < 0 ? 0 : keep > 1 ? 1 : keep;\n                  white *= keep;\n                }\n                var m = map[p] / 255 + lean;\n                m = m < 0 ? 0 : m > 1 ? 1 : m;\n                var f = m * n,\n                  li = Math.min(n - 1, Math.floor(f)),\n                  u = f - li;\n                var cov = (lv[li][p + 3] * (1 - u) + lv[li + 1][p + 3] * u) / 255; // glyph coverage after blur\n                if (cov < 0.002) {\n                  od[p + 3] = 0;\n                  continue;\n                } // no ink: stay transparent\n                var lum = cov + (hash(x, y, frame) - 0.5) * o.noise;\n                var idx = lum <= 0 ? 0 : lum >= 1 ? 255 : (lum * 255) | 0;\n                var g = white >= 1 ? 255 : idx; // clean type is solid white; alpha carries the edge\n                od[p] = LUT[idx * 3] + (g - LUT[idx * 3]) * white;\n                od[p + 1] = LUT[idx * 3 + 1] + (g - LUT[idx * 3 + 1]) * white;\n                od[p + 2] = LUT[idx * 3 + 2] + (g - LUT[idx * 3 + 2]) * white;\n                od[p + 3] = white >= 1 ? Math.min(255, cov * 255) : Math.min(255, cov * 255 * 4); // soft edge where tinted, coverage alpha when clean\n              }\n            }\n            fctx.putImageData(out, 0, 0);\n\n            // 4. crisp duplicate on top, fading up as the front clears the text, dropping on exit\n            cctx.clearRect(0, 0, crisp.width, crisp.height);\n            if (o.crisp) {\n              var opIn = Math.min(1, Math.max(0, (lt - o.in * 0.95) / 0.35)),\n                opOut = 1 - Math.min(1, Math.max(0, pOut / 0.35));\n              cctx.globalAlpha = opIn * opOut;\n              if (cctx.globalAlpha > 0) {\n                cctx.fillStyle = \"#fff\";\n                cctx.font = font;\n                cctx.textBaseline = \"middle\";\n                cctx.textAlign = \"center\";\n                cctx.fillText(text, cx, ty + baseline);\n              }\n              cctx.globalAlpha = 1;\n            }\n          }\n\n          // one linear clock tween at `at`; at progress 0 the mask shows nothing, at progress 1 the exit has closed,\n          // so a seek anywhere outside the window still paints an empty stage\n          var clock = { t: 0 };\n          draw(0);\n          tl.fromTo(\n            clock,\n            { t: 0 },\n            {\n              t: total,\n              duration: total,\n              ease: \"none\",\n              onUpdate: function () {\n                draw(clock.t);\n              },\n            },\n            o.at,\n          );\n\n          el.__cw = { stage: stage, draw: draw, total: total, options: o };\n          return el.__cw;\n        };\n      })();\n    </script>\n\n    <script>\n      document.fonts.ready.then(function () {\n        var tl = gsap.timeline({ paused: true });\n        attachColoramaWipe(\"#cw-headline\", tl, { at: 0.25, in: 0.75, hold: 1.9, out: 0.7 });\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"colorama-wipe\"] = tl;\n      });\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/registry/catalog-artifact/local-vectors.bin b/registry/catalog-artifact/local-vectors.bin
index 43ac281ec8..fc1ac45c35 100644
Binary files a/registry/catalog-artifact/local-vectors.bin and b/registry/catalog-artifact/local-vectors.bin differ
diff --git a/registry/catalog-artifact/local-vectors.json b/registry/catalog-artifact/local-vectors.json
index 02f5825684..410878edb0 100644
--- a/registry/catalog-artifact/local-vectors.json
+++ b/registry/catalog-artifact/local-vectors.json
@@ -2,7 +2,7 @@
   "model": "bge-small-en-v1.5",
   "modelRevision": "ea104dacec62c0de699686887e3f920caeb4f3e3",
   "dimensions": 384,
-  "revision": "eda107eecb902f204b6308c85794d269d5d53a8583c12008b3972f3efacb312a",
+  "revision": "656d5d91e8e44f809baa80031dac6af45afdadec7784cffa47ab1b7940c1a137",
   "names": [
     "ai-chat-reveal",
     "animated-bar-chart",
@@ -119,6 +119,7 @@
     "code-snippet-visual-studio-light",
     "code-terminal-run",
     "code-typing",
+    "colorama-wipe",
     "comparison-split",
     "confetti",
     "conic-progress-ring",
diff --git a/registry/components/colorama-wipe/colorama-wipe.html b/registry/components/colorama-wipe/colorama-wipe.html
new file mode 100644
index 0000000000..8cbd87a0b8
--- /dev/null
+++ b/registry/components/colorama-wipe/colorama-wipe.html
@@ -0,0 +1,358 @@
+<!--
+  Colorama Wipe — a headline reveals through a feathered, leaning wipe front that is blurred and colour-mapped
+  as it passes, then settles to clean type (the After Effects "shiny wipe": masked text + Compound Blur +
+  Colorama over a moving gradient, with a crisp duplicate fading on top).
+
+  Usage: paste this snippet into your composition AFTER GSAP, then in your script, once fonts are loaded and
+  all other tweens are defined, call:
+
+    attachColoramaWipe("#cw-headline", tl, { at: 0.3, in: 0.75, hold: 2.0, out: 0.55 });
+    window.__timelines["your-comp"] = tl;
+
+  The target is any element that holds one line of text. The component measures it, hides it
+  (visibility: hidden — layout is untouched) and paints the effect on two canvases over its box for the
+  window [at, at + in + hold + out]. Outside that window nothing is drawn, so the element is invisible: the
+  wipe owns the element's on-screen life. Call it once per element; a second call on the same element is ignored.
+
+  Requirements:
+  - Call after `document.fonts.ready` (the text is rasterised once at attach; a late font swap is not seen).
+  - The composition root (nearest ancestor with data-composition-id) must be the positioning context; the
+    canvases are placed by the element's offset inside it.
+  - One line of text. Multi-line targets: attach one wipe per line element.
+  - GSAP must be loaded before this snippet.
+
+  Options (all optional):
+    at        seconds on the host timeline the wipe enters (default 0)
+    in        entry wipe duration, s (0.75)      hold   fully revealed, s (2.0)      out   exit wipe, s (0.55)
+    cycle     Colorama output cycle, [[pos 0..1, [r,g,b]], ...] intensity -> colour (default: black -> navy ->
+              blue -> azure -> cyan -> violet -> lavender -> white)
+    feather   front softness as a multiple of the text height (2.4)
+    tilt      lean of the front in degrees; the bottom of a glyph lags the top (40)
+    blur      compound-blur maximum as a multiple of the text height (0.15)
+    trail     fraction of the text width behind the front still blurred (0.55)
+    noise     intensity jitter 0..1 (0.03)
+    crisp     fade a sharp copy on top once the front has cleared the text (true)
+    scale     effect canvas resolution as a fraction of the box (0.5); 1 for hero type over ~600 px
+
+  Deterministic: no Math.random, no clocks; every frame is a pure function of the timeline time.
+-->
+
+<style>
+  .cw-src {
+    visibility: hidden; /* layout stays; the canvases paint in its place */
+  }
+  .cw-stage {
+    position: absolute;
+    pointer-events: none;
+    overflow: visible;
+  }
+  .cw-stage canvas {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+</style>
+
+<script>
+  (function () {
+    var DEFAULTS = {
+      at: 0,
+      in: 0.75,
+      hold: 2.0,
+      out: 0.55,
+      cycle: [
+        [0.0, [0, 0, 0]],
+        [0.18, [0, 0, 0]],
+        [0.28, [0, 2, 127]],
+        [0.4, [8, 20, 240]],
+        [0.5, [26, 122, 224]],
+        [0.58, [80, 225, 240]],
+        [0.66, [20, 24, 220]],
+        [0.76, [50, 50, 240]],
+        [0.87, [128, 128, 242]],
+        [0.95, [200, 198, 240]],
+        [1.0, [242, 238, 252]],
+      ],
+      feather: 2.4,
+      tilt: 40,
+      blur: 0.15,
+      trail: 0.55,
+      noise: 0.03,
+      crisp: true,
+      scale: 0.5,
+    };
+    var LEVELS = [0.04, 0.14, 0.3, 0.55, 1.0]; // blur radii as fractions of the maximum
+    var ease = gsap.parseEase("power2.inOut");
+
+    function lut(cycle) {
+      var out = new Uint8ClampedArray(256 * 3);
+      for (var i = 0; i < 256; i++) {
+        var v = i / 255,
+          k = 0;
+        while (k < cycle.length - 2 && cycle[k + 1][0] < v) k++;
+        var a = cycle[k][0],
+          ca = cycle[k][1],
+          b = cycle[k + 1][0],
+          cb = cycle[k + 1][1];
+        var u = Math.min(1, Math.max(0, (v - a) / (b - a)));
+        for (var c = 0; c < 3; c++) out[i * 3 + c] = ca[c] + (cb[c] - ca[c]) * u;
+      }
+      return out;
+    }
+    function hash(x, y, f) {
+      var h = (x * 374761393 + y * 668265263 + f * 2147483647) | 0;
+      h = (h ^ (h >>> 13)) * 1274126177;
+      return ((h ^ (h >>> 16)) >>> 0) / 4294967296;
+    }
+    function mk(w, h) {
+      var c = document.createElement("canvas");
+      c.width = w;
+      c.height = h;
+      return c;
+    }
+
+    window.attachColoramaWipe = function (target, tl, opts) {
+      var el = typeof target === "string" ? document.querySelector(target) : target;
+      if (!el) {
+        console.warn("[colorama-wipe] no element for", target);
+        return null;
+      }
+      if (el.__cw) return el.__cw;
+      var o = Object.assign({}, DEFAULTS, opts || {});
+      var root = el.closest("[data-composition-id]") || el.parentElement;
+      var cs = getComputedStyle(el);
+      var text = el.textContent.trim();
+      var font = cs.fontStyle + " " + cs.fontWeight + " " + cs.fontSize + " " + cs.fontFamily;
+      var size = parseFloat(cs.fontSize);
+
+      // geometry in composition px: the element's box, padded for feather + blur bleed
+      var rr = root.getBoundingClientRect(),
+        er = el.getBoundingClientRect();
+      var k = root.offsetWidth / rr.width || 1; // undo any preview scaling
+      var ex = (er.left - rr.left) * k,
+        ey = (er.top - rr.top) * k,
+        ew = er.width * k,
+        eh = er.height * k;
+      var F = o.feather * size,
+        MAXB = o.blur * size,
+        TILT = (o.tilt * Math.PI) / 180;
+      var padX = Math.ceil(F * 0.6 + MAXB * 3),
+        padY = Math.ceil(MAXB * 3 + eh * 0.25);
+      var BX = ex - padX,
+        BY = ey - padY,
+        BW = ew + padX * 2,
+        BH = eh + padY * 2;
+
+      // stage over the element
+      var stage = document.createElement("div");
+      stage.className = "cw-stage";
+      stage.style.left = BX + "px";
+      stage.style.top = BY + "px";
+      stage.style.width = BW + "px";
+      stage.style.height = BH + "px";
+      var S = o.scale,
+        FW = Math.max(2, Math.round(BW * S)),
+        FH = Math.max(2, Math.round(BH * S));
+      var fx = mk(FW, FH),
+        fctx = fx.getContext("2d", { willReadFrequently: true });
+      var crisp = mk(Math.round(BW), Math.round(BH)),
+        cctx = crisp.getContext("2d");
+      stage.appendChild(fx);
+      stage.appendChild(crisp);
+      el.classList.add("cw-src");
+      el.parentElement.insertBefore(stage, el.nextSibling);
+      // the stage must position against the composition root like the element does
+      if (getComputedStyle(el.parentElement).position === "static" && el.parentElement !== root)
+        root.appendChild(stage);
+
+      // text geometry inside the box, comp px
+      var tx0 = padX,
+        tw = ew,
+        ty = padY + eh / 2,
+        baseline = 0.04 * size;
+      cctx.font = font;
+      cctx.textBaseline = "middle";
+      cctx.textAlign = "center";
+      var measured = cctx.measureText(text).width;
+      if (measured > 0) {
+        tx0 = padX + (ew - measured) / 2;
+        tw = measured;
+      }
+      var x0 = tx0,
+        x1 = tx0 + tw,
+        cx = tx0 + tw / 2;
+
+      // offscreen buffers (effect res)
+      var textC = mk(FW, FH),
+        tctx = textC.getContext("2d");
+      var maskedC = mk(FW, FH),
+        mctx = maskedC.getContext("2d");
+      var blurC = LEVELS.map(function () {
+        return mk(FW, FH);
+      });
+      var bctx = blurC.map(function (c) {
+        return c.getContext("2d", { willReadFrequently: true });
+      });
+      var mapC = mk(FW, FH),
+        mapctx = mapC.getContext("2d", { willReadFrequently: true });
+      var LUT = lut(o.cycle);
+      var dxT = Math.cos(TILT),
+        dyT = Math.sin(TILT);
+
+      // rasterise the text once (half res) — alpha = glyph coverage = Colorama intensity
+      tctx.clearRect(0, 0, FW, FH);
+      tctx.fillStyle = "#fff";
+      tctx.font = font.replace(cs.fontSize, size * S + "px");
+      tctx.textBaseline = "middle";
+      tctx.textAlign = "center";
+      tctx.fillText(text, cx * S, (ty + baseline) * S);
+
+      function tilted(ctx, fxp, len, c0, c1) {
+        var gx = fxp * S,
+          gy = ty * S;
+        var g = ctx.createLinearGradient(gx, gy, gx + dxT * len * S, gy + dyT * len * S);
+        g.addColorStop(0, c0);
+        g.addColorStop(1, c1);
+        return g;
+      }
+
+      var total = o.in + o.hold + o.out;
+      function draw(lt) {
+        // lt = seconds since `at`
+        if (lt < 0 || lt > total) {
+          fctx.clearRect(0, 0, FW, FH);
+          cctx.clearRect(0, 0, crisp.width, crisp.height);
+          return;
+        }
+        var pIn = Math.min(1, Math.max(0, lt / o.in));
+        var pOut = Math.min(1, Math.max(0, (lt - o.in - o.hold) / o.out));
+        var front = x0 - F * 0.4 + (tw + F * 1.7) * ease(pIn);
+        var back = x0 - F * 0.7 + (tw + F * 1.5) * ease(pOut);
+
+        // 1. feathered mask around the front (and the closing edge on exit)
+        mctx.clearRect(0, 0, FW, FH);
+        mctx.globalCompositeOperation = "source-over";
+        mctx.drawImage(textC, 0, 0);
+        mctx.globalCompositeOperation = "destination-in";
+        mctx.fillStyle = tilted(mctx, front - F, F, "rgba(0,0,0,1)", "rgba(0,0,0,0)");
+        mctx.fillRect(0, 0, FW, FH);
+        if (pOut > 0) {
+          mctx.fillStyle = tilted(mctx, back, F, "rgba(0,0,0,0)", "rgba(0,0,0,1)");
+          mctx.fillRect(0, 0, FW, FH);
+        }
+        mctx.globalCompositeOperation = "source-over";
+
+        // 2. compound blur: blur levels mixed per pixel by a front-following map
+        for (var i = 0; i < LEVELS.length; i++) {
+          var c = bctx[i];
+          c.clearRect(0, 0, FW, FH);
+          c.filter = "blur(" + MAXB * LEVELS[i] * S + "px)";
+          c.drawImage(maskedC, 0, 0);
+          c.filter = "none";
+        }
+        var trail = tw * o.trail;
+        mapctx.fillStyle = tilted(mapctx, front - trail - F, trail + F * 0.8, "#000", "#fff");
+        mapctx.fillRect(0, 0, FW, FH);
+        if (pOut > 0) {
+          mapctx.globalCompositeOperation = "lighter";
+          mapctx.fillStyle = tilted(mapctx, back - F * 0.2, trail + F * 0.2, "#fff", "#000");
+          mapctx.fillRect(0, 0, FW, FH);
+          mapctx.globalCompositeOperation = "source-over";
+        }
+        var map = mapctx.getImageData(0, 0, FW, FH).data;
+        var lv = bctx.map(function (c) {
+          return c.getImageData(0, 0, FW, FH).data;
+        });
+
+        // 3. Colorama with per-pixel whitening: tint only in the transition zone, clean type behind the front,
+        //    tint returning ahead of the closing edge
+        var out = fctx.createImageData(FW, FH),
+          od = out.data,
+          n = LEVELS.length - 1,
+          frame = Math.round(lt * 30);
+        var FS = F * S,
+          frontS = front * S,
+          backS = back * S,
+          tyS = ty * S;
+        for (var p = 0, y = 0; y < FH; y++) {
+          var lean = (y / FH - 0.5) * 0.5,
+            yT = (y - tyS) * dyT;
+          for (var x = 0; x < FW; x++, p += 4) {
+            var sF = (x - frontS) * dxT + yT;
+            var white = (-sF - FS * 0.6) / (FS * 0.5);
+            white = white < 0 ? 0 : white > 1 ? 1 : white;
+            if (pOut > 0) {
+              var sB = (x - backS) * dxT + yT;
+              var keep = (sB - FS * 0.7) / (FS * 0.6);
+              keep = keep < 0 ? 0 : keep > 1 ? 1 : keep;
+              white *= keep;
+            }
+            var m = map[p] / 255 + lean;
+            m = m < 0 ? 0 : m > 1 ? 1 : m;
+            var f = m * n,
+              li = Math.min(n - 1, Math.floor(f)),
+              u = f - li;
+            var cov = (lv[li][p + 3] * (1 - u) + lv[li + 1][p + 3] * u) / 255; // glyph coverage after blur
+            if (cov < 0.002) {
+              od[p + 3] = 0;
+              continue;
+            } // no ink: stay transparent
+            var lum = cov + (hash(x, y, frame) - 0.5) * o.noise;
+            var idx = lum <= 0 ? 0 : lum >= 1 ? 255 : (lum * 255) | 0;
+            var g = white >= 1 ? 255 : idx; // clean type is solid white; alpha carries the edge
+            od[p] = LUT[idx * 3] + (g - LUT[idx * 3]) * white;
+            od[p + 1] = LUT[idx * 3 + 1] + (g - LUT[idx * 3 + 1]) * white;
+            od[p + 2] = LUT[idx * 3 + 2] + (g - LUT[idx * 3 + 2]) * white;
+            od[p + 3] = white >= 1 ? Math.min(255, cov * 255) : Math.min(255, cov * 255 * 4); // soft edge where tinted, coverage alpha when clean
+          }
+        }
+        fctx.putImageData(out, 0, 0);
+
+        // 4. crisp duplicate on top, fading up as the front clears the text, dropping on exit
+        cctx.clearRect(0, 0, crisp.width, crisp.height);
+        if (o.crisp) {
+          var opIn = Math.min(1, Math.max(0, (lt - o.in * 0.95) / 0.35)),
+            opOut = 1 - Math.min(1, Math.max(0, pOut / 0.35));
+          cctx.globalAlpha = opIn * opOut;
+          if (cctx.globalAlpha > 0) {
+            cctx.fillStyle = "#fff";
+            cctx.font = font;
+            cctx.textBaseline = "middle";
+            cctx.textAlign = "center";
+            cctx.fillText(text, cx, ty + baseline);
+          }
+          cctx.globalAlpha = 1;
+        }
+      }
+
+      // one linear clock tween at `at`; at progress 0 the mask shows nothing, at progress 1 the exit has closed,
+      // so a seek anywhere outside the window still paints an empty stage
+      var clock = { t: 0 };
+      function cleanup() {
+        stage.remove();
+        el.classList.remove("cw-src");
+        delete el.__cw;
+      }
+      draw(0);
+      tl.fromTo(
+        clock,
+        { t: 0 },
+        {
+          t: total,
+          duration: total,
+          ease: "none",
+          onUpdate: function () {
+            draw(clock.t);
+          },
+          onInterrupt: cleanup,
+        },
+        o.at,
+      );
+
+      el.__cw = { stage: stage, draw: draw, total: total, options: o };
+      return el.__cw;
+    };
+  })();
+</script>
diff --git a/registry/components/colorama-wipe/demo.html b/registry/components/colorama-wipe/demo.html
new file mode 100644
index 0000000000..e7a4fbdfd9
--- /dev/null
+++ b/registry/components/colorama-wipe/demo.html
@@ -0,0 +1,397 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Colorama Wipe</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body style="margin: 0; background: #0a0a0a">
+    <main
+      data-composition-id="colorama-wipe"
+      data-duration="3.6"
+      style="
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #0a0a0a;
+      "
+    >
+      <h1
+        id="cw-headline"
+        style="
+          margin: 0;
+          font:
+            800 132px/1 Montserrat,
+            sans-serif;
+          color: #fff;
+        "
+      >
+        COLORAMA WIPE
+      </h1>
+    </main>
+    <!--
+  Colorama Wipe — a headline reveals through a feathered, leaning wipe front that is blurred and colour-mapped
+  as it passes, then settles to clean type (the After Effects "shiny wipe": masked text + Compound Blur +
+  Colorama over a moving gradient, with a crisp duplicate fading on top).
+
+  Usage: paste this snippet into your composition AFTER GSAP, then in your script, once fonts are loaded and
+  all other tweens are defined, call:
+
+    attachColoramaWipe("#cw-headline", tl, { at: 0.3, in: 0.75, hold: 2.0, out: 0.55 });
+    window.__timelines["your-comp"] = tl;
+
+  The target is any element that holds one line of text. The component measures it, hides it
+  (visibility: hidden — layout is untouched) and paints the effect on two canvases over its box for the
+  window [at, at + in + hold + out]. Outside that window nothing is drawn, so the element is invisible: the
+  wipe owns the element's on-screen life. Call it once per element; a second call on the same element is ignored.
+
+  Requirements:
+  - Call after `document.fonts.ready` (the text is rasterised once at attach; a late font swap is not seen).
+  - The composition root (nearest ancestor with data-composition-id) must be the positioning context; the
+    canvases are placed by the element's offset inside it.
+  - One line of text. Multi-line targets: attach one wipe per line element.
+  - GSAP must be loaded before this snippet.
+
+  Options (all optional):
+    at        seconds on the host timeline the wipe enters (default 0)
+    in        entry wipe duration, s (0.75)      hold   fully revealed, s (2.0)      out   exit wipe, s (0.55)
+    cycle     Colorama output cycle, [[pos 0..1, [r,g,b]], ...] intensity -> colour (default: black -> navy ->
+              blue -> azure -> cyan -> violet -> lavender -> white)
+    feather   front softness as a multiple of the text height (2.4)
+    tilt      lean of the front in degrees; the bottom of a glyph lags the top (40)
+    blur      compound-blur maximum as a multiple of the text height (0.15)
+    trail     fraction of the text width behind the front still blurred (0.55)
+    noise     intensity jitter 0..1 (0.03)
+    crisp     fade a sharp copy on top once the front has cleared the text (true)
+    scale     effect canvas resolution as a fraction of the box (0.5); 1 for hero type over ~600 px
+
+  Deterministic: no Math.random, no clocks; every frame is a pure function of the timeline time.
+-->
+
+    <style>
+      .cw-src {
+        visibility: hidden; /* layout stays; the canvases paint in its place */
+      }
+      .cw-stage {
+        position: absolute;
+        pointer-events: none;
+        overflow: visible;
+      }
+      .cw-stage canvas {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        display: block;
+      }
+    </style>
+
+    <script>
+      (function () {
+        var DEFAULTS = {
+          at: 0,
+          in: 0.75,
+          hold: 2.0,
+          out: 0.55,
+          cycle: [
+            [0.0, [0, 0, 0]],
+            [0.18, [0, 0, 0]],
+            [0.28, [0, 2, 127]],
+            [0.4, [8, 20, 240]],
+            [0.5, [26, 122, 224]],
+            [0.58, [80, 225, 240]],
+            [0.66, [20, 24, 220]],
+            [0.76, [50, 50, 240]],
+            [0.87, [128, 128, 242]],
+            [0.95, [200, 198, 240]],
+            [1.0, [242, 238, 252]],
+          ],
+          feather: 2.4,
+          tilt: 40,
+          blur: 0.15,
+          trail: 0.55,
+          noise: 0.03,
+          crisp: true,
+          scale: 0.5,
+        };
+        var LEVELS = [0.04, 0.14, 0.3, 0.55, 1.0]; // blur radii as fractions of the maximum
+        var ease = gsap.parseEase("power2.inOut");
+
+        function lut(cycle) {
+          var out = new Uint8ClampedArray(256 * 3);
+          for (var i = 0; i < 256; i++) {
+            var v = i / 255,
+              k = 0;
+            while (k < cycle.length - 2 && cycle[k + 1][0] < v) k++;
+            var a = cycle[k][0],
+              ca = cycle[k][1],
+              b = cycle[k + 1][0],
+              cb = cycle[k + 1][1];
+            var u = Math.min(1, Math.max(0, (v - a) / (b - a)));
+            for (var c = 0; c < 3; c++) out[i * 3 + c] = ca[c] + (cb[c] - ca[c]) * u;
+          }
+          return out;
+        }
+        function hash(x, y, f) {
+          var h = (x * 374761393 + y * 668265263 + f * 2147483647) | 0;
+          h = (h ^ (h >>> 13)) * 1274126177;
+          return ((h ^ (h >>> 16)) >>> 0) / 4294967296;
+        }
+        function mk(w, h) {
+          var c = document.createElement("canvas");
+          c.width = w;
+          c.height = h;
+          return c;
+        }
+
+        window.attachColoramaWipe = function (target, tl, opts) {
+          var el = typeof target === "string" ? document.querySelector(target) : target;
+          if (!el) {
+            console.warn("[colorama-wipe] no element for", target);
+            return null;
+          }
+          if (el.__cw) return el.__cw;
+          var o = Object.assign({}, DEFAULTS, opts || {});
+          var root = el.closest("[data-composition-id]") || el.parentElement;
+          var cs = getComputedStyle(el);
+          var text = el.textContent.trim();
+          var font = cs.fontStyle + " " + cs.fontWeight + " " + cs.fontSize + " " + cs.fontFamily;
+          var size = parseFloat(cs.fontSize);
+
+          // geometry in composition px: the element's box, padded for feather + blur bleed
+          var rr = root.getBoundingClientRect(),
+            er = el.getBoundingClientRect();
+          var k = root.offsetWidth / rr.width || 1; // undo any preview scaling
+          var ex = (er.left - rr.left) * k,
+            ey = (er.top - rr.top) * k,
+            ew = er.width * k,
+            eh = er.height * k;
+          var F = o.feather * size,
+            MAXB = o.blur * size,
+            TILT = (o.tilt * Math.PI) / 180;
+          var padX = Math.ceil(F * 0.6 + MAXB * 3),
+            padY = Math.ceil(MAXB * 3 + eh * 0.25);
+          var BX = ex - padX,
+            BY = ey - padY,
+            BW = ew + padX * 2,
+            BH = eh + padY * 2;
+
+          // stage over the element
+          var stage = document.createElement("div");
+          stage.className = "cw-stage";
+          stage.style.left = BX + "px";
+          stage.style.top = BY + "px";
+          stage.style.width = BW + "px";
+          stage.style.height = BH + "px";
+          var S = o.scale,
+            FW = Math.max(2, Math.round(BW * S)),
+            FH = Math.max(2, Math.round(BH * S));
+          var fx = mk(FW, FH),
+            fctx = fx.getContext("2d", { willReadFrequently: true });
+          var crisp = mk(Math.round(BW), Math.round(BH)),
+            cctx = crisp.getContext("2d");
+          stage.appendChild(fx);
+          stage.appendChild(crisp);
+          el.classList.add("cw-src");
+          el.parentElement.insertBefore(stage, el.nextSibling);
+          // the stage must position against the composition root like the element does
+          if (getComputedStyle(el.parentElement).position === "static" && el.parentElement !== root)
+            root.appendChild(stage);
+
+          // text geometry inside the box, comp px
+          var tx0 = padX,
+            tw = ew,
+            ty = padY + eh / 2,
+            baseline = 0.04 * size;
+          cctx.font = font;
+          cctx.textBaseline = "middle";
+          cctx.textAlign = "center";
+          var measured = cctx.measureText(text).width;
+          if (measured > 0) {
+            tx0 = padX + (ew - measured) / 2;
+            tw = measured;
+          }
+          var x0 = tx0,
+            x1 = tx0 + tw,
+            cx = tx0 + tw / 2;
+
+          // offscreen buffers (effect res)
+          var textC = mk(FW, FH),
+            tctx = textC.getContext("2d");
+          var maskedC = mk(FW, FH),
+            mctx = maskedC.getContext("2d");
+          var blurC = LEVELS.map(function () {
+            return mk(FW, FH);
+          });
+          var bctx = blurC.map(function (c) {
+            return c.getContext("2d", { willReadFrequently: true });
+          });
+          var mapC = mk(FW, FH),
+            mapctx = mapC.getContext("2d", { willReadFrequently: true });
+          var LUT = lut(o.cycle);
+          var dxT = Math.cos(TILT),
+            dyT = Math.sin(TILT);
+
+          // rasterise the text once (half res) — alpha = glyph coverage = Colorama intensity
+          tctx.clearRect(0, 0, FW, FH);
+          tctx.fillStyle = "#fff";
+          tctx.font = font.replace(cs.fontSize, size * S + "px");
+          tctx.textBaseline = "middle";
+          tctx.textAlign = "center";
+          tctx.fillText(text, cx * S, (ty + baseline) * S);
+
+          function tilted(ctx, fxp, len, c0, c1) {
+            var gx = fxp * S,
+              gy = ty * S;
+            var g = ctx.createLinearGradient(gx, gy, gx + dxT * len * S, gy + dyT * len * S);
+            g.addColorStop(0, c0);
+            g.addColorStop(1, c1);
+            return g;
+          }
+
+          var total = o.in + o.hold + o.out;
+          function draw(lt) {
+            // lt = seconds since `at`
+            if (lt < 0 || lt > total) {
+              fctx.clearRect(0, 0, FW, FH);
+              cctx.clearRect(0, 0, crisp.width, crisp.height);
+              return;
+            }
+            var pIn = Math.min(1, Math.max(0, lt / o.in));
+            var pOut = Math.min(1, Math.max(0, (lt - o.in - o.hold) / o.out));
+            var front = x0 - F * 0.4 + (tw + F * 1.7) * ease(pIn);
+            var back = x0 - F * 0.7 + (tw + F * 1.5) * ease(pOut);
+
+            // 1. feathered mask around the front (and the closing edge on exit)
+            mctx.clearRect(0, 0, FW, FH);
+            mctx.globalCompositeOperation = "source-over";
+            mctx.drawImage(textC, 0, 0);
+            mctx.globalCompositeOperation = "destination-in";
+            mctx.fillStyle = tilted(mctx, front - F, F, "rgba(0,0,0,1)", "rgba(0,0,0,0)");
+            mctx.fillRect(0, 0, FW, FH);
+            if (pOut > 0) {
+              mctx.fillStyle = tilted(mctx, back, F, "rgba(0,0,0,0)", "rgba(0,0,0,1)");
+              mctx.fillRect(0, 0, FW, FH);
+            }
+            mctx.globalCompositeOperation = "source-over";
+
+            // 2. compound blur: blur levels mixed per pixel by a front-following map
+            for (var i = 0; i < LEVELS.length; i++) {
+              var c = bctx[i];
+              c.clearRect(0, 0, FW, FH);
+              c.filter = "blur(" + MAXB * LEVELS[i] * S + "px)";
+              c.drawImage(maskedC, 0, 0);
+              c.filter = "none";
+            }
+            var trail = tw * o.trail;
+            mapctx.fillStyle = tilted(mapctx, front - trail - F, trail + F * 0.8, "#000", "#fff");
+            mapctx.fillRect(0, 0, FW, FH);
+            if (pOut > 0) {
+              mapctx.globalCompositeOperation = "lighter";
+              mapctx.fillStyle = tilted(mapctx, back - F * 0.2, trail + F * 0.2, "#fff", "#000");
+              mapctx.fillRect(0, 0, FW, FH);
+              mapctx.globalCompositeOperation = "source-over";
+            }
+            var map = mapctx.getImageData(0, 0, FW, FH).data;
+            var lv = bctx.map(function (c) {
+              return c.getImageData(0, 0, FW, FH).data;
+            });
+
+            // 3. Colorama with per-pixel whitening: tint only in the transition zone, clean type behind the front,
+            //    tint returning ahead of the closing edge
+            var out = fctx.createImageData(FW, FH),
+              od = out.data,
+              n = LEVELS.length - 1,
+              frame = Math.round(lt * 30);
+            var FS = F * S,
+              frontS = front * S,
+              backS = back * S,
+              tyS = ty * S;
+            for (var p = 0, y = 0; y < FH; y++) {
+              var lean = (y / FH - 0.5) * 0.5,
+                yT = (y - tyS) * dyT;
+              for (var x = 0; x < FW; x++, p += 4) {
+                var sF = (x - frontS) * dxT + yT;
+                var white = (-sF - FS * 0.6) / (FS * 0.5);
+                white = white < 0 ? 0 : white > 1 ? 1 : white;
+                if (pOut > 0) {
+                  var sB = (x - backS) * dxT + yT;
+                  var keep = (sB - FS * 0.7) / (FS * 0.6);
+                  keep = keep < 0 ? 0 : keep > 1 ? 1 : keep;
+                  white *= keep;
+                }
+                var m = map[p] / 255 + lean;
+                m = m < 0 ? 0 : m > 1 ? 1 : m;
+                var f = m * n,
+                  li = Math.min(n - 1, Math.floor(f)),
+                  u = f - li;
+                var cov = (lv[li][p + 3] * (1 - u) + lv[li + 1][p + 3] * u) / 255; // glyph coverage after blur
+                if (cov < 0.002) {
+                  od[p + 3] = 0;
+                  continue;
+                } // no ink: stay transparent
+                var lum = cov + (hash(x, y, frame) - 0.5) * o.noise;
+                var idx = lum <= 0 ? 0 : lum >= 1 ? 255 : (lum * 255) | 0;
+                var g = white >= 1 ? 255 : idx; // clean type is solid white; alpha carries the edge
+                od[p] = LUT[idx * 3] + (g - LUT[idx * 3]) * white;
+                od[p + 1] = LUT[idx * 3 + 1] + (g - LUT[idx * 3 + 1]) * white;
+                od[p + 2] = LUT[idx * 3 + 2] + (g - LUT[idx * 3 + 2]) * white;
+                od[p + 3] = white >= 1 ? Math.min(255, cov * 255) : Math.min(255, cov * 255 * 4); // soft edge where tinted, coverage alpha when clean
+              }
+            }
+            fctx.putImageData(out, 0, 0);
+
+            // 4. crisp duplicate on top, fading up as the front clears the text, dropping on exit
+            cctx.clearRect(0, 0, crisp.width, crisp.height);
+            if (o.crisp) {
+              var opIn = Math.min(1, Math.max(0, (lt - o.in * 0.95) / 0.35)),
+                opOut = 1 - Math.min(1, Math.max(0, pOut / 0.35));
+              cctx.globalAlpha = opIn * opOut;
+              if (cctx.globalAlpha > 0) {
+                cctx.fillStyle = "#fff";
+                cctx.font = font;
+                cctx.textBaseline = "middle";
+                cctx.textAlign = "center";
+                cctx.fillText(text, cx, ty + baseline);
+              }
+              cctx.globalAlpha = 1;
+            }
+          }
+
+          // one linear clock tween at `at`; at progress 0 the mask shows nothing, at progress 1 the exit has closed,
+          // so a seek anywhere outside the window still paints an empty stage
+          var clock = { t: 0 };
+          draw(0);
+          tl.fromTo(
+            clock,
+            { t: 0 },
+            {
+              t: total,
+              duration: total,
+              ease: "none",
+              onUpdate: function () {
+                draw(clock.t);
+              },
+            },
+            o.at,
+          );
+
+          el.__cw = { stage: stage, draw: draw, total: total, options: o };
+          return el.__cw;
+        };
+      })();
+    </script>
+
+    <script>
+      document.fonts.ready.then(function () {
+        var tl = gsap.timeline({ paused: true });
+        attachColoramaWipe("#cw-headline", tl, { at: 0.25, in: 0.75, hold: 1.9, out: 0.7 });
+        window.__timelines = window.__timelines || {};
+        window.__timelines["colorama-wipe"] = tl;
+      });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/colorama-wipe/registry-item.json b/registry/components/colorama-wipe/registry-item.json
new file mode 100644
index 0000000000..1b3529b607
--- /dev/null
+++ b/registry/components/colorama-wipe/registry-item.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "colorama-wipe",
+  "type": "hyperframes:component",
+  "title": "Colorama Wipe",
+  "description": "Headline reveal through a feathered, leaning wipe front that is blurred and colour-mapped as it passes, then settles to clean type and wipes off again — the After Effects masked-text + Compound Blur + Colorama 'shiny wipe' as a deterministic canvas effect on any text element",
+  "tags": ["text", "reveal", "wipe", "colorama", "gradient", "blur", "headline", "saas"],
+  "files": [
+    {
+      "path": "colorama-wipe.html",
+      "target": "compositions/components/colorama-wipe.html",
+      "type": "hyperframes:snippet"
+    }
+  ]
+}
diff --git a/registry/registry.json b/registry/registry.json
index 79227f43c1..113f5fe904 100644
--- a/registry/registry.json
+++ b/registry/registry.json
@@ -3,6 +3,42 @@
   "name": "hyperframes",
   "homepage": "https://hyperframes.heygen.com",
   "items": [
+    {
+      "name": "decision-tree",
+      "type": "hyperframes:example"
+    },
+    {
+      "name": "kinetic-type",
+      "type": "hyperframes:example"
+    },
+    {
+      "name": "nyt-graph",
+      "type": "hyperframes:example"
+    },
+    {
+      "name": "play-mode",
+      "type": "hyperframes:example"
+    },
+    {
+      "name": "product-promo",
+      "type": "hyperframes:example"
+    },
+    {
+      "name": "swiss-grid",
+      "type": "hyperframes:example"
+    },
+    {
+      "name": "vignelli",
+      "type": "hyperframes:example"
+    },
+    {
+      "name": "vscode-theme-visualizer",
+      "type": "hyperframes:example"
+    },
+    {
+      "name": "warm-grain",
+      "type": "hyperframes:example"
+    },
     {
       "name": "ai-chat-reveal",
       "type": "hyperframes:block"
@@ -707,10 +743,6 @@
       "name": "vpn-youtube-spot",
       "type": "hyperframes:block"
     },
-    {
-      "name": "week-in-merges",
-      "type": "hyperframes:block"
-    },
     {
       "name": "weight-wave",
       "type": "hyperframes:block"
@@ -927,6 +959,10 @@
       "name": "code-terminal-run",
       "type": "hyperframes:component"
     },
+    {
+      "name": "colorama-wipe",
+      "type": "hyperframes:component"
+    },
     {
       "name": "comparison-split",
       "type": "hyperframes:component"
@@ -1634,45 +1670,9 @@
     {
       "name": "zoom-through-transition",
       "type": "hyperframes:component"
-    },
-    {
-      "name": "decision-tree",
-      "type": "hyperframes:example"
-    },
-    {
-      "name": "kinetic-type",
-      "type": "hyperframes:example"
-    },
-    {
-      "name": "nyt-graph",
-      "type": "hyperframes:example"
-    },
-    {
-      "name": "play-mode",
-      "type": "hyperframes:example"
-    },
-    {
-      "name": "product-promo",
-      "type": "hyperframes:example"
-    },
-    {
-      "name": "swiss-grid",
-      "type": "hyperframes:example"
-    },
-    {
-      "name": "vignelli",
-      "type": "hyperframes:example"
-    },
-    {
-      "name": "vscode-theme-visualizer",
-      "type": "hyperframes:example"
-    },
-    {
-      "name": "warm-grain",
-      "type": "hyperframes:example"
     }
   ],
   "catalogArtifact": {
-    "revision": "eda107eecb902f204b6308c85794d269d5d53a8583c12008b3972f3efacb312a"
+    "revision": "656d5d91e8e44f809baa80031dac6af45afdadec7784cffa47ab1b7940c1a137"
   }
 }