diff --git a/registry/blocks/app-showcase/app-showcase.html b/registry/blocks/app-showcase/app-showcase.html
index 52b7c2d107..6b973f3414 100644
--- a/registry/blocks/app-showcase/app-showcase.html
+++ b/registry/blocks/app-showcase/app-showcase.html
@@ -767,49 +767,129 @@
         }
       </style>
 
-      <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+      <script src="https://cdn.jsdelivr.net/npm/animejs@4.5.0/dist/bundles/anime.umd.min.js"></script>
       <script>
         (function () {
           var S = '[data-composition-id="app-showcase"] ';
-          window.__timelines = window.__timelines || {};
-          var tl = gsap.timeline({ paused: true });
+          var tl = anime.createTimeline({ autoplay: false });
+
+          function toMs(seconds) {
+            return typeof seconds === "number" ? Math.round(seconds * 1000) : seconds;
+          }
+
+          function mapEase(ease) {
+            if (typeof ease !== "string") return ease;
+            var compact = ease.replace(/\s+/g, "");
+            if (compact === "none") return "linear";
+            var power = compact.match(/^power([1-4])\.(in|out|inOut)$/);
+            if (power) {
+              return power[2] + ["", "Quad", "Cubic", "Quart", "Quint"][Number(power[1])];
+            }
+            var family = compact.match(/^(sine|circ|expo|bounce)\.(in|out|inOut)$/);
+            if (family) {
+              return family[2] + family[1][0].toUpperCase() + family[1].slice(1);
+            }
+            var parameterized = compact.match(/^(back|elastic)\.(in|out|inOut)(?:\((.*)\))?$/);
+            if (parameterized) {
+              return (
+                parameterized[2] +
+                parameterized[1][0].toUpperCase() +
+                parameterized[1].slice(1) +
+                (parameterized[3] ? "(" + parameterized[3] + ")" : "")
+              );
+            }
+            return compact;
+          }
+
+          function isCssTarget(targets) {
+            if (typeof targets === "string") return true;
+            if (targets && targets.nodeType === 1) return true;
+            if (Array.isArray(targets)) return targets.some(isCssTarget);
+            return (
+              targets &&
+              typeof targets.length === "number" &&
+              targets[0] &&
+              targets[0].nodeType === 1
+            );
+          }
+
+          function propName(name, cssTarget) {
+            if (!cssTarget) return name;
+            return (
+              {
+                x: "translateX",
+                y: "translateY",
+                z: "translateZ",
+                rotation: "rotate",
+              }[name] || name
+            );
+          }
+
+          function normalize(vars, cssTarget) {
+            var out = {};
+            Object.keys(vars).forEach(function (key) {
+              if (key === "duration") out.duration = toMs(vars.duration);
+              else if (key === "ease") out.ease = mapEase(vars.ease);
+              else if (key === "stagger") {
+                var stagger = vars.stagger;
+                if (typeof stagger === "number") out.delay = anime.stagger(toMs(stagger));
+                else if (stagger && typeof stagger.each === "number") {
+                  out.delay = anime.stagger(toMs(stagger.each), { ease: mapEase(stagger.ease) });
+                }
+              } else {
+                out[propName(key, cssTarget)] = vars[key];
+              }
+            });
+            return out;
+          }
+
+          function addSet(targets, vars, position) {
+            var params = normalize(vars, isCssTarget(targets));
+            params.duration = 0;
+            params.ease = "linear";
+            tl.add(targets, params, toMs(position || 0));
+          }
+
+          function addTo(targets, vars, position) {
+            tl.add(targets, normalize(vars, isCssTarget(targets)), toMs(position || 0));
+          }
 
           // ── SVG setup ──
           var graphLine = document.querySelector(S + "#s3GraphLine");
           var graphLen = graphLine.getTotalLength();
-          gsap.set(graphLine, { strokeDasharray: graphLen, strokeDashoffset: graphLen });
+          addSet(graphLine, { strokeDasharray: graphLen, strokeDashoffset: graphLen });
 
           var graphArea = document.querySelector(S + "#s3GraphArea");
-          gsap.set(graphArea, { opacity: 0 });
+          addSet(graphArea, { opacity: 0 });
 
           var graphDots = document.querySelectorAll(S + ".graph-dot");
-          gsap.set(graphDots, { opacity: 0, scale: 0 });
+          addSet(graphDots, { opacity: 0, scale: 0 });
 
           var CIRC = 2 * 3.14159265 * 52;
-          gsap.set(S + "#s3Ring", { strokeDasharray: CIRC, strokeDashoffset: CIRC });
+          addSet(S + "#s3Ring", { strokeDasharray: CIRC, strokeDashoffset: CIRC });
 
           // ── Initial states ──
-          gsap.set(S + ".s3-bg", { opacity: 0 });
-          gsap.set(S + ".s3-bg-glow", { opacity: 0 });
+          addSet(S + ".s3-bg", { opacity: 0 });
+          addSet(S + ".s3-bg-glow", { opacity: 0 });
           // Center phone: starts scaled down + hidden
-          gsap.set(S + "#s3PhoneCenter", { opacity: 0, scale: 0.85 });
+          addSet(S + "#s3PhoneCenter", { opacity: 0, scale: 0.85 });
           // Side phones: start stacked behind center (same position), hidden
-          gsap.set(S + "#s3PhoneLeft", { opacity: 0, x: 0, rotation: 0 });
-          gsap.set(S + "#s3PhoneRight", { opacity: 0, x: 0, rotation: 0 });
-          gsap.set(S + ".bar-value", { width: "0%" });
-          gsap.set(S + "#s3Tagline", { opacity: 0, y: 20 });
-          gsap.set(S + ".left-cta", { opacity: 0, y: 12 });
+          addSet(S + "#s3PhoneLeft", { opacity: 0, x: 0, rotation: 0 });
+          addSet(S + "#s3PhoneRight", { opacity: 0, x: 0, rotation: 0 });
+          addSet(S + ".bar-value", { width: "0%" });
+          addSet(S + "#s3Tagline", { opacity: 0, y: 20 });
+          addSet(S + ".left-cta", { opacity: 0, y: 12 });
 
           // ════════════════════════════════════
           // BUILD PHASE (0–2s)
           // ════════════════════════════════════
 
           // Background
-          tl.to(S + ".s3-bg", { opacity: 1, duration: 0.8, ease: "power1.out" }, 0);
-          tl.to(S + ".s3-bg-glow", { opacity: 1, duration: 1.2, ease: "power1.out" }, 0.2);
+          addTo(S + ".s3-bg", { opacity: 1, duration: 0.8, ease: "power1.out" }, 0);
+          addTo(S + ".s3-bg-glow", { opacity: 1, duration: 1.2, ease: "power1.out" }, 0.2);
 
           // Center phone — scales up first
-          tl.to(
+          addTo(
             S + "#s3PhoneCenter",
             {
               scale: 1,
@@ -821,8 +901,8 @@
           );
 
           // Side phones: opacity matches center (0.7s, back.out), fan starts at 0.1
-          tl.to(S + "#s3PhoneLeft", { opacity: 1, duration: 0.7, ease: "back.out(1.4)" }, 0.3);
-          tl.to(
+          addTo(S + "#s3PhoneLeft", { opacity: 1, duration: 0.7, ease: "back.out(1.4)" }, 0.3);
+          addTo(
             S + "#s3PhoneLeft",
             {
               x: -340,
@@ -833,8 +913,8 @@
             0.3,
           );
 
-          tl.to(S + "#s3PhoneRight", { opacity: 1, duration: 0.7, ease: "back.out(1.4)" }, 0.4);
-          tl.to(
+          addTo(S + "#s3PhoneRight", { opacity: 1, duration: 0.7, ease: "back.out(1.4)" }, 0.4);
+          addTo(
             S + "#s3PhoneRight",
             {
               x: 340,
@@ -850,7 +930,7 @@
           // ════════════════════════════════════
 
           // Progress ring fills to 2/3
-          tl.to(
+          addTo(
             S + "#s3Ring",
             {
               strokeDashoffset: CIRC * (1 - 2 / 3),
@@ -861,12 +941,12 @@
           );
 
           // Activity bars stagger in
-          tl.to(S + "#s3Bar1", { width: "75%", duration: 0.8, ease: "power3.out" }, 2.1);
-          tl.to(S + "#s3Bar2", { width: "50%", duration: 0.8, ease: "power3.out" }, 2.3);
-          tl.to(S + "#s3Bar3", { width: "90%", duration: 0.8, ease: "power3.out" }, 2.5);
+          addTo(S + "#s3Bar1", { width: "75%", duration: 0.8, ease: "power3.out" }, 2.1);
+          addTo(S + "#s3Bar2", { width: "50%", duration: 0.8, ease: "power3.out" }, 2.3);
+          addTo(S + "#s3Bar3", { width: "90%", duration: 0.8, ease: "power3.out" }, 2.5);
 
           // Graph line draws on
-          tl.to(
+          addTo(
             graphLine,
             {
               strokeDashoffset: 0,
@@ -877,10 +957,10 @@
           );
 
           // Graph area fades in
-          tl.to(graphArea, { opacity: 0.15, duration: 0.8, ease: "power1.out" }, 2.6);
+          addTo(graphArea, { opacity: 0.15, duration: 0.8, ease: "power1.out" }, 2.6);
 
           // Graph dots pop in
-          tl.to(
+          addTo(
             graphDots,
             {
               opacity: 1,
@@ -893,7 +973,7 @@
           );
 
           // Tagline and CTA on left phone
-          tl.to(
+          addTo(
             S + "#s3Tagline",
             {
               opacity: 1,
@@ -903,7 +983,7 @@
             },
             2.2,
           );
-          tl.to(
+          addTo(
             S + ".left-cta",
             {
               opacity: 1,
@@ -915,7 +995,7 @@
           );
 
           // Ambient slow scale push
-          tl.to(
+          addTo(
             S + "#s3Stage",
             {
               scale: 1.02,
@@ -930,16 +1010,16 @@
           // ════════════════════════════════════
 
           // Subtle glow pulse on lime accent elements
-          tl.to(S + ".ring-fill", { opacity: 0.65, duration: 0.6, ease: "sine.inOut" }, 4.0);
-          tl.to(S + ".ring-fill", { opacity: 1, duration: 0.6, ease: "sine.inOut" }, 4.6);
+          addTo(S + ".ring-fill", { opacity: 0.65, duration: 0.6, ease: "sine.inOut" }, 4.0);
+          addTo(S + ".ring-fill", { opacity: 1, duration: 0.6, ease: "sine.inOut" }, 4.6);
 
-          tl.to(S + ".bar-value", { opacity: 0.7, duration: 0.6, ease: "sine.inOut" }, 4.1);
-          tl.to(S + ".bar-value", { opacity: 1, duration: 0.6, ease: "sine.inOut" }, 4.7);
+          addTo(S + ".bar-value", { opacity: 0.7, duration: 0.6, ease: "sine.inOut" }, 4.1);
+          addTo(S + ".bar-value", { opacity: 1, duration: 0.6, ease: "sine.inOut" }, 4.7);
 
-          tl.to(graphLine, { opacity: 0.65, duration: 0.6, ease: "sine.inOut" }, 4.05);
-          tl.to(graphLine, { opacity: 1, duration: 0.6, ease: "sine.inOut" }, 4.65);
+          addTo(graphLine, { opacity: 0.65, duration: 0.6, ease: "sine.inOut" }, 4.05);
+          addTo(graphLine, { opacity: 1, duration: 0.6, ease: "sine.inOut" }, 4.65);
 
-          window.__timelines["app-showcase"] = tl;
+          hyperframesAnime.register("app-showcase", tl, { labels: {} });
         })();
       </script>
     </div>
diff --git a/registry/blocks/blue-sweater-intro-video/blue-sweater-intro-video.html b/registry/blocks/blue-sweater-intro-video/blue-sweater-intro-video.html
index c96f1c3700..b6af3f532f 100644
--- a/registry/blocks/blue-sweater-intro-video/blue-sweater-intro-video.html
+++ b/registry/blocks/blue-sweater-intro-video/blue-sweater-intro-video.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=1920, height=1080" />
     <title>Blue Sweater Intro Video</title>
-    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/animejs@4.5.0/dist/bundles/anime.umd.min.js"></script>
     <style>
       :root {
         --bg: #f7f1ef;
@@ -958,8 +958,6 @@
     </div>
 
     <script>
-      window.__timelines = window.__timelines || {};
-
       const promptEl = document.querySelector("#promptText");
       const promptText = promptEl.textContent.replace(/\s+/g, " ").trim();
       promptEl.textContent = "";
@@ -969,56 +967,199 @@
         promptEl.appendChild(span);
       }
 
-      const tl = gsap.timeline({ paused: true, defaults: { ease: "power3.out" } });
+      const tl = anime.createTimeline({ autoplay: false });
+      const tweenDefaults = { ease: "outQuart" };
 
-      tl.set(["#warmup", "#intro", "#burst", "#brand", "#ui"], { opacity: 0 });
-      tl.set("#cursor", { x: 690, y: 846, rotation: -8, scale: 0.72, opacity: 0 });
-      tl.set(".panel-full", { opacity: 0 });
-      tl.set(".panel-thinking", { opacity: 0 });
-      tl.set(".prompt-text span", { opacity: 0 });
-      tl.set("#sendFull", { opacity: 0, scale: 0.84 });
-      tl.set([".selection-box", ".intro-remnant", ".frag", ".final-wordmark"], { opacity: 0 });
-      tl.set([".x-result", ".social-card"], { opacity: 0 });
-      tl.set(".x-trigger", { scale: 1 });
+      function toMs(seconds) {
+        return typeof seconds === "number" ? Math.round(seconds * 1000) : seconds;
+      }
 
-      tl.to("#warmup", { opacity: 1, duration: 0.01 }, 0);
-      tl.fromTo(
+      function mapEase(ease) {
+        if (typeof ease !== "string") return ease;
+        const compact = ease.replace(/\s+/g, "");
+        if (compact === "none") return "linear";
+        const power = compact.match(/^power([1-4])\.(in|out|inOut)$/);
+        if (power) {
+          return power[2] + ["", "Quad", "Cubic", "Quart", "Quint"][Number(power[1])];
+        }
+        const family = compact.match(/^(sine|circ|expo|bounce)\.(in|out|inOut)$/);
+        if (family) {
+          return family[2] + family[1][0].toUpperCase() + family[1].slice(1);
+        }
+        const parameterized = compact.match(/^(back|elastic)\.(in|out|inOut)(?:\((.*)\))?$/);
+        if (parameterized) {
+          return (
+            parameterized[2] +
+            parameterized[1][0].toUpperCase() +
+            parameterized[1].slice(1) +
+            (parameterized[3] ? "(" + parameterized[3] + ")" : "")
+          );
+        }
+        return compact;
+      }
+
+      function isCssTarget(targets) {
+        if (typeof targets === "string") return true;
+        if (targets && targets.nodeType === 1) return true;
+        if (Array.isArray(targets)) return targets.some(isCssTarget);
+        return (
+          targets && typeof targets.length === "number" && targets[0] && targets[0].nodeType === 1
+        );
+      }
+
+      function propName(name, cssTarget) {
+        if (!cssTarget) return name;
+        return (
+          {
+            x: "translateX",
+            y: "translateY",
+            z: "translateZ",
+            rotation: "rotate",
+          }[name] || name
+        );
+      }
+
+      function staggerDelay(stagger) {
+        if (typeof stagger === "number") return anime.stagger(toMs(stagger));
+        if (!stagger) return undefined;
+        if (typeof stagger.each === "number") {
+          return anime.stagger(toMs(stagger.each), { ease: mapEase(stagger.ease) });
+        }
+        if (typeof stagger.amount === "number") {
+          const amount = toMs(stagger.amount);
+          return function (_target, index, total) {
+            return total <= 1 ? 0 : (amount * index) / (total - 1);
+          };
+        }
+        return undefined;
+      }
+
+      function normalize(vars, cssTarget, useDefaults) {
+        const out = {};
+        if (useDefaults && tweenDefaults.ease && vars.ease === undefined)
+          out.ease = tweenDefaults.ease;
+        Object.keys(vars).forEach(function (key) {
+          if (key === "duration") out.duration = toMs(vars.duration);
+          else if (key === "ease") out.ease = mapEase(vars.ease);
+          else if (key === "stagger") {
+            const delay = staggerDelay(vars.stagger);
+            if (delay) out.delay = delay;
+          } else if (key === "overwrite" || key === "force3D") {
+            return;
+          } else if (key === "keyframes") {
+            out.keyframes = vars.keyframes.map(function (frame) {
+              return normalize(frame, cssTarget, false);
+            });
+          } else {
+            out[propName(key, cssTarget)] = vars[key];
+          }
+        });
+        return out;
+      }
+
+      function finalValue(key) {
+        if (key === "opacity") return 1;
+        if (key === "scale" || key === "scaleX" || key === "scaleY") return 1;
+        if (key === "x" || key === "y" || key === "rotation") return 0;
+        if (key === "filter") return "blur(0px)";
+        return undefined;
+      }
+
+      function addSet(tl, targets, vars, position) {
+        const params = normalize(vars, isCssTarget(targets), false);
+        params.duration = 0;
+        params.ease = "linear";
+        tl.add(targets, params, toMs(position || 0));
+      }
+
+      function addTo(tl, targets, vars, position) {
+        tl.add(targets, normalize(vars, isCssTarget(targets), true), toMs(position || 0));
+      }
+
+      function addFrom(tl, targets, vars, position) {
+        const cssTarget = isCssTarget(targets);
+        const params = normalize(vars, cssTarget, true);
+        Object.keys(vars).forEach(function (key) {
+          if (
+            key === "duration" ||
+            key === "ease" ||
+            key === "stagger" ||
+            key === "overwrite" ||
+            key === "force3D"
+          )
+            return;
+          const end = finalValue(key);
+          if (end !== undefined) params[propName(key, cssTarget)] = [vars[key], end];
+        });
+        tl.add(targets, params, toMs(position || 0));
+      }
+
+      function addFromTo(tl, targets, fromVars, toVars, position) {
+        const cssTarget = isCssTarget(targets);
+        const params = normalize(toVars, cssTarget, true);
+        Object.keys(fromVars).forEach(function (key) {
+          if (key === "duration" || key === "ease" || key === "stagger") return;
+          const mapped = propName(key, cssTarget);
+          params[mapped] = [fromVars[key], toVars[key]];
+        });
+        tl.add(targets, params, toMs(position || 0));
+      }
+
+      addSet(tl, ["#warmup", "#intro", "#burst", "#brand", "#ui"], { opacity: 0 });
+      addSet(tl, "#cursor", { x: 690, y: 846, rotation: -8, scale: 0.72, opacity: 0 });
+      addSet(tl, ".panel-full", { opacity: 0 });
+      addSet(tl, ".panel-thinking", { opacity: 0 });
+      addSet(tl, ".prompt-text span", { opacity: 0 });
+      addSet(tl, "#sendFull", { opacity: 0, scale: 0.84 });
+      addSet(tl, [".selection-box", ".intro-remnant", ".frag", ".final-wordmark"], { opacity: 0 });
+      addSet(tl, [".x-result", ".social-card"], { opacity: 0 });
+      addSet(tl, ".x-trigger", { scale: 1 });
+
+      addTo(tl, "#warmup", { opacity: 1, duration: 0.01 }, 0);
+      addFromTo(
+        tl,
         "#warmBlock",
         { x: -820, scaleX: 0.42, opacity: 0, filter: "blur(14px)" },
         { x: -25, scaleX: 1, opacity: 1, filter: "blur(0px)", duration: 0.22, ease: "power2.out" },
         0.02,
       );
-      tl.to(
+      addTo(
+        tl,
         "#warmBlock",
         { x: 620, opacity: 0, filter: "blur(18px)", duration: 0.24, ease: "power2.in" },
         0.25,
       );
-      tl.to("#warmup", { opacity: 0, duration: 0.08 }, 0.4);
+      addTo(tl, "#warmup", { opacity: 0, duration: 0.08 }, 0.4);
 
-      tl.to("#intro", { opacity: 1, duration: 0.1 }, 0.44);
-      tl.fromTo(
+      addTo(tl, "#intro", { opacity: 1, duration: 0.1 }, 0.44);
+      addFromTo(
+        tl,
         "#introTitle",
         { opacity: 0, y: 26, filter: "blur(10px)" },
         { opacity: 1, y: 0, filter: "blur(0px)", duration: 0.46, ease: "expo.out" },
         0.48,
       );
-      tl.to("#cursor", { opacity: 1, duration: 0.12 }, 0.44);
-      tl.to(
+      addTo(tl, "#cursor", { opacity: 1, duration: 0.12 }, 0.44);
+      addTo(
+        tl,
         "#cursor",
         { x: 942, y: 604, rotation: -3, duration: 0.36, ease: "power2.inOut", overwrite: "auto" },
         0.44,
       );
-      tl.to(
+      addTo(
+        tl,
         "#cursor",
         { x: 982, y: 642, rotation: -6, duration: 0.24, ease: "power2.inOut", overwrite: "auto" },
         1.28,
       );
-      tl.to(
+      addTo(
+        tl,
         "#introTitle",
         { opacity: 0.26, filter: "blur(4px)", duration: 0.03, ease: "power2.in" },
         1.43,
       );
-      tl.fromTo(
+      addFromTo(
+        tl,
         ".intro-remnant",
         { opacity: 0, x: 0, y: 0, filter: "blur(2px)" },
         {
@@ -1032,26 +1173,30 @@
         },
         1.435,
       );
-      tl.to(
+      addTo(
+        tl,
         "#introTitle",
         { opacity: 0, y: -8, filter: "blur(10px)", duration: 0.08, ease: "power2.in" },
         1.47,
       );
-      tl.to(
+      addTo(
+        tl,
         ".intro-remnant",
         { opacity: 0, filter: "blur(11px)", duration: 0.07, ease: "power2.in" },
         1.49,
       );
-      tl.to("#intro", { opacity: 0, duration: 0.06 }, 1.56);
+      addTo(tl, "#intro", { opacity: 0, duration: 0.06 }, 1.56);
 
-      tl.to("#burst", { opacity: 1, duration: 0.02 }, 1.4);
-      tl.fromTo(
+      addTo(tl, "#burst", { opacity: 1, duration: 0.02 }, 1.4);
+      addFromTo(
+        tl,
         ".burst-star",
         { opacity: 0, scale: 0.08, rotation: -20 },
         { opacity: 1, scale: 0.16, rotation: -6, duration: 0.08, ease: "power2.out" },
         1.43,
       );
-      tl.to(
+      addTo(
+        tl,
         ".burst-star",
         { scale: 1, rotation: 0, duration: 0.42, ease: "expo.out", overwrite: "auto" },
         1.55,
@@ -1103,13 +1248,14 @@
           fade: 2.33,
         },
       ];
-      gsap.utils.toArray(".burst-block").forEach((block, index) => {
+      Array.from(document.querySelectorAll(".burst-block")).forEach((block, index) => {
         const path = blockPaths[index];
         if (!path) {
-          tl.set(block, { opacity: 0 });
+          addSet(tl, block, { opacity: 0 });
           return;
         }
-        tl.set(
+        addSet(
+          tl,
           block,
           {
             x: path.source[0],
@@ -1120,7 +1266,8 @@
           },
           1.45,
         );
-        tl.to(
+        addTo(
+          tl,
           block,
           {
             opacity: 1,
@@ -1132,7 +1279,8 @@
           },
           1.455,
         );
-        tl.to(
+        addTo(
+          tl,
           block,
           {
             x: path.scatter[0],
@@ -1143,7 +1291,8 @@
           },
           1.5,
         );
-        tl.to(
+        addTo(
+          tl,
           block,
           {
             x: path.drift[0],
@@ -1154,12 +1303,14 @@
           },
           1.7,
         );
-        tl.to(
+        addTo(
+          tl,
           block,
           { x: path.select[0], y: path.select[1], rotation: 0, duration: 0.2, ease: "sine.inOut" },
           1.9,
         );
-        tl.to(
+        addTo(
+          tl,
           block,
           {
             x: path.squeeze[0],
@@ -1172,7 +1323,8 @@
           },
           2.1,
         );
-        tl.to(
+        addTo(
+          tl,
           block,
           {
             x: path.release[0],
@@ -1185,23 +1337,27 @@
           },
           2.17,
         );
-        tl.to(
+        addTo(
+          tl,
           block,
           { opacity: 0, scale: 0.38, filter: "blur(7px)", duration: 0.05, ease: "power2.in" },
           path.fade,
         );
       });
-      tl.to(
+      addTo(
+        tl,
         "#cursor",
         { x: 1540, y: 112, rotation: -9, duration: 0.26, ease: "power2.inOut", overwrite: "auto" },
         1.56,
       );
-      tl.to(
+      addTo(
+        tl,
         "#cursor",
         { x: 380, y: 252, rotation: -7, duration: 0.16, ease: "power2.inOut", overwrite: "auto" },
         1.82,
       );
-      tl.fromTo(
+      addFromTo(
+        tl,
         ".selection-box",
         { opacity: 0, scaleX: 0.06, scaleY: 0.1, x: 0, y: 0, filter: "blur(3px)" },
         {
@@ -1216,22 +1372,26 @@
         },
         1.96,
       );
-      tl.to(
+      addTo(
+        tl,
         "#cursor",
         { x: 930, y: 478, rotation: -4, duration: 0.14, ease: "power2.inOut", overwrite: "auto" },
         1.96,
       );
-      tl.to(
+      addTo(
+        tl,
         "#cursor",
         { x: 1168, y: 560, rotation: -4, duration: 0.14, ease: "power2.inOut", overwrite: "auto" },
         2.12,
       );
-      tl.to(
+      addTo(
+        tl,
         ".selection-box",
         { x: 220, y: 158, width: 640, height: 190, duration: 0.2, ease: "power2.inOut" },
         2.16,
       );
-      tl.to(
+      addTo(
+        tl,
         ".burst-star",
         {
           x: 118,
@@ -1245,7 +1405,7 @@
         2.12,
       );
 
-      tl.to("#brand", { opacity: 1, duration: 0.04 }, 2.08);
+      addTo(tl, "#brand", { opacity: 1, duration: 0.04 }, 2.08);
 
       const fragmentMotion = [
         {
@@ -1291,7 +1451,8 @@
       ];
 
       fragmentMotion.forEach((piece, index) => {
-        tl.fromTo(
+        addFromTo(
+          tl,
           piece.selector,
           {
             opacity: 0,
@@ -1312,7 +1473,8 @@
           },
           2.12 + index * 0.004,
         );
-        tl.to(
+        addTo(
+          tl,
           piece.selector,
           {
             x: piece.settle[0],
@@ -1325,7 +1487,8 @@
           },
           2.28 + index * 0.003,
         );
-        tl.to(
+        addTo(
+          tl,
           piece.selector,
           {
             opacity: 0,
@@ -1340,7 +1503,8 @@
         );
       });
 
-      tl.fromTo(
+      addFromTo(
+        tl,
         ".final-wordmark",
         { opacity: 0, x: -12, y: 8, scale: 0.995, filter: "blur(5px)" },
         {
@@ -1355,63 +1519,88 @@
         },
         2.38,
       );
-      tl.to(".burst-star", { opacity: 0, duration: 0.12, ease: "power2.in" }, 2.32);
-      tl.to(
+      addTo(tl, ".burst-star", { opacity: 0, duration: 0.12, ease: "power2.in" }, 2.32);
+      addTo(
+        tl,
         ".selection-box",
         { opacity: 0, filter: "blur(5px)", duration: 0.16, ease: "power2.in" },
         2.33,
       );
-      tl.to(
+      addTo(
+        tl,
         "#cursor",
         { x: 1256, y: 587, rotation: -3, duration: 0.3, ease: "power2.inOut", overwrite: "auto" },
         2.34,
       );
-      tl.to("#burst", { opacity: 0, filter: "blur(6px)", duration: 0.14, ease: "power2.in" }, 2.58);
-      tl.to("#cursor", { opacity: 0, duration: 0.13, ease: "power2.in" }, 2.86);
-      tl.set("#cursor", { opacity: 0 }, 3.0);
-      tl.to(
+      addTo(
+        tl,
+        "#burst",
+        { opacity: 0, filter: "blur(6px)", duration: 0.14, ease: "power2.in" },
+        2.58,
+      );
+      addTo(tl, "#cursor", { opacity: 0, duration: 0.13, ease: "power2.in" }, 2.86);
+      addSet(tl, "#cursor", { opacity: 0 }, 3.0);
+      addTo(
+        tl,
         "#brand",
         { opacity: 0, y: 26, filter: "blur(9px)", duration: 0.22, ease: "power2.in" },
         2.9,
       );
 
-      tl.to("#ui", { opacity: 1, duration: 0.08 }, 3.02);
-      tl.fromTo(
+      addTo(tl, "#ui", { opacity: 1, duration: 0.08 }, 3.02);
+      addFromTo(
+        tl,
         ".input-stack",
         { opacity: 0, scale: 0.88, y: 92, filter: "blur(14px)" },
         { opacity: 1, scale: 1, y: 0, filter: "blur(0px)", duration: 0.66, ease: "expo.out" },
         3.05,
       );
-      tl.fromTo(
+      addFromTo(
+        tl,
         ".star-panel",
         { opacity: 0, scale: 0.5, rotation: -16 },
         { opacity: 1, scale: 1, rotation: 0, duration: 0.38, ease: "power3.out" },
         3.18,
       );
-      tl.fromTo(".placeholder", { opacity: 0, y: 12 }, { opacity: 1, y: 0, duration: 0.34 }, 3.3);
-      tl.fromTo(
+      addFromTo(
+        tl,
+        ".placeholder",
+        { opacity: 0, y: 12 },
+        { opacity: 1, y: 0, duration: 0.34 },
+        3.3,
+      );
+      addFromTo(
+        tl,
         ".panel-empty .panel-plus, .panel-empty .model",
         { opacity: 0, y: 10 },
         { opacity: 1, y: 0, duration: 0.3, stagger: 0.06 },
         3.42,
       );
 
-      tl.to(".panel-empty", { opacity: 0, duration: 0.18, ease: "power2.inOut" }, 4.12);
-      tl.to(".panel-full", { opacity: 1, duration: 0.18, ease: "power2.inOut" }, 4.12);
-      tl.to(
+      addTo(tl, ".panel-empty", { opacity: 0, duration: 0.18, ease: "power2.inOut" }, 4.12);
+      addTo(tl, ".panel-full", { opacity: 1, duration: 0.18, ease: "power2.inOut" }, 4.12);
+      addTo(
+        tl,
         ".input-stack",
         { scale: 1.32, x: 300, y: -100, duration: 0.26, ease: "power2.inOut" },
         4.14,
       );
-      tl.to(".input-stack", { scale: 1, x: 0, y: 0, duration: 0.74, ease: "power2.inOut" }, 4.92);
+      addTo(
+        tl,
+        ".input-stack",
+        { scale: 1, x: 0, y: 0, duration: 0.74, ease: "power2.inOut" },
+        4.92,
+      );
 
-      tl.to(
+      addTo(
+        tl,
         ".prompt-text span",
         { opacity: 1, duration: 0.01, stagger: { amount: 2.85 }, ease: "none" },
         4.18,
       );
-      tl.to("#sendFull", { opacity: 1, scale: 1, duration: 0.24, ease: "power3.out" }, 7.32);
-      tl.fromTo(
+      addTo(tl, "#sendFull", { opacity: 1, scale: 1, duration: 0.24, ease: "power3.out" }, 7.32);
+      addFromTo(
+        tl,
         "#cursor",
         { x: 1328, y: 900, rotation: -6, scale: 1, opacity: 0 },
         {
@@ -1425,52 +1614,54 @@
         },
         6.92,
       );
-      tl.to(
+      addTo(
+        tl,
         "#cursor",
         { x: 1512, y: 620, rotation: -5, duration: 0.5, ease: "power2.inOut" },
         7.44,
       );
 
-      tl.to("#sendFull", { scale: 0.86, duration: 0.08, ease: "power2.in" }, 7.9);
-      tl.to("#sendFull", { scale: 1, duration: 0.14, ease: "back.out(1.7)" }, 7.98);
-      tl.to(".panel-full", { opacity: 0, duration: 0.16, ease: "power2.inOut" }, 8.15);
-      tl.to(".panel-thinking", { opacity: 1, duration: 0.18, ease: "power2.inOut" }, 8.15);
-      tl.set(".thinking-line", { opacity: 0 }, 8.24);
-      tl.to(
+      addTo(tl, "#sendFull", { scale: 0.86, duration: 0.08, ease: "power2.in" }, 7.9);
+      addTo(tl, "#sendFull", { scale: 1, duration: 0.14, ease: "back.out(1.7)" }, 7.98);
+      addTo(tl, ".panel-full", { opacity: 0, duration: 0.16, ease: "power2.inOut" }, 8.15);
+      addTo(tl, ".panel-thinking", { opacity: 1, duration: 0.18, ease: "power2.inOut" }, 8.15);
+      addSet(tl, ".thinking-line", { opacity: 0 }, 8.24);
+      addTo(
+        tl,
         ".thinking-line",
         { opacity: 1, duration: 0.3, ease: "power3.out", overwrite: "auto" },
         8.25,
       );
-      tl.to("#cursor", { x: 1554, y: 620, rotation: -5, duration: 0.28, ease: "power2.out" }, 7.94);
-      tl.to(
+      addTo(
+        tl,
+        "#cursor",
+        { x: 1554, y: 620, rotation: -5, duration: 0.28, ease: "power2.out" },
+        7.94,
+      );
+      addTo(
+        tl,
         ".thinking-line",
         { opacity: 0, duration: 0.18, ease: "power2.inOut", overwrite: "auto" },
         8.64,
       );
-      tl.fromTo(
+      addFromTo(
+        tl,
         ".x-result",
         { opacity: 0, y: 12 },
         { opacity: 1, y: 0, duration: 0.28, ease: "power3.out" },
         8.82,
       );
-      tl.to(
+      addTo(
+        tl,
         "#cursor",
         { x: 365, y: 418, rotation: -6, duration: 0.58, ease: "power2.inOut", overwrite: "auto" },
         8.74,
       );
-      tl.to(
-        ".x-trigger",
-        {
-          keyframes: [
-            { scale: 0.88, duration: 0.08, ease: "power2.in" },
-            { scale: 1, duration: 0.14, ease: "back.out(1.7)" },
-          ],
-          overwrite: "auto",
-        },
-        9.34,
-      );
-      tl.to(".x-result", { opacity: 0, y: -8, duration: 0.18, ease: "power2.inOut" }, 9.5);
-      tl.to(
+      addTo(tl, ".x-trigger", { scale: 0.88, duration: 0.08, ease: "power2.in" }, 9.34);
+      addTo(tl, ".x-trigger", { scale: 1, duration: 0.14, ease: "back.out(1.7)" }, 9.42);
+      addTo(tl, ".x-result", { opacity: 0, y: -8, duration: 0.18, ease: "power2.inOut" }, 9.5);
+      addTo(
+        tl,
         ".input-stack",
         {
           opacity: 0,
@@ -1482,42 +1673,48 @@
         },
         9.5,
       );
-      tl.to(
+      addTo(
+        tl,
         ".star-panel",
         { opacity: 0, scale: 0.72, rotation: 12, duration: 0.28, ease: "power2.inOut" },
         9.5,
       );
-      tl.fromTo(
+      addFromTo(
+        tl,
         ".social-card",
         { opacity: 0, y: 34, scale: 0.88, filter: "blur(12px)" },
         { opacity: 1, y: 0, scale: 1, filter: "blur(0px)", duration: 0.6, ease: "expo.out" },
         9.86,
       );
-      tl.to(
+      addTo(
+        tl,
         "#cursor",
         { x: 1408, y: 246, rotation: -5, duration: 0.42, ease: "power2.inOut", overwrite: "auto" },
         9.96,
       );
-      tl.to(
+      addTo(
+        tl,
         "#cursor",
         { x: 1242, y: 446, rotation: -5, duration: 0.36, ease: "power2.inOut", overwrite: "auto" },
         10.5,
       );
-      tl.to(".follow-button", { scale: 0.9, duration: 0.08, ease: "power2.in" }, 10.88);
-      tl.to(
+      addTo(tl, ".follow-button", { scale: 0.9, duration: 0.08, ease: "power2.in" }, 10.88);
+      addTo(
+        tl,
         ".follow-button",
         { scale: 1, backgroundColor: "#2f2f2f", duration: 0.28, ease: "elastic.out(1, 0.45)" },
         10.96,
       );
-      tl.to(".follow-label-follow", { opacity: 0, duration: 0.08, ease: "none" }, 10.96);
-      tl.to(".follow-label-following", { opacity: 1, duration: 0.08, ease: "none" }, 10.99);
-      tl.to(
+      addTo(tl, ".follow-label-follow", { opacity: 0, duration: 0.08, ease: "none" }, 10.96);
+      addTo(tl, ".follow-label-following", { opacity: 1, duration: 0.08, ease: "none" }, 10.99);
+      addTo(
+        tl,
         "#cursor",
         { x: 1286, y: 472, rotation: -5, duration: 0.16, ease: "power2.out", overwrite: "auto" },
         11,
       );
 
-      window.__timelines["blue-sweater-intro-video"] = tl;
+      hyperframesAnime.register("blue-sweater-intro-video", tl, { labels: {} });
     </script>
   </body>
 </html>
diff --git a/registry/blocks/code-3d-extrude/code-3d-extrude.html b/registry/blocks/code-3d-extrude/code-3d-extrude.html
index db6ba28ce4..2cb657827a 100644
--- a/registry/blocks/code-3d-extrude/code-3d-extrude.html
+++ b/registry/blocks/code-3d-extrude/code-3d-extrude.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=1920, height=1080" />
     <title>Code 3D Extrude</title>
-    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/animejs@4.5.0/dist/bundles/anime.umd.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js"></script>
     <style>
       * {
@@ -338,10 +338,10 @@
       // Bridges the baked Shiki tokens (window.__TOKENS) into Three.js: the tokens are drawn once
       // to an offscreen 2D canvas (a CanvasTexture), which then drives a lit 3D slab, a dissolve
       // shader, or a GPU particle system. Determinism per the project contract:
-      //   - render only via tl.eventCallback("onUpdate", …) + one initial render() — never rAF
+      //   - render only via anime timeline onUpdate + one initial render() — never rAF
       //   - all randomness from a seeded mulberry32 — never Math.random / Date.now
       //   - canvas drawn once after document.fonts.ready (final glyph metrics)
-      //   - paused GSAP timeline registered on window.__timelines[id]; HF seeks it per frame
+      //   - paused anime.js timeline registered by composition id; HF seeks it per frame
       //
       // Each block sets window.__BLOCK = { id, effect, seq, duration, seed } and includes this engine.
       (function () {
@@ -359,6 +359,35 @@
           };
         }
 
+        function toMs(seconds) {
+          return typeof seconds === "number" ? Math.round(seconds * 1000) : seconds;
+        }
+
+        function mapEase(ease) {
+          if (typeof ease !== "string") return ease;
+          var compact = ease.replace(/\s+/g, "");
+          if (compact === "none") return "linear";
+          var power = compact.match(/^power([1-4])\.(in|out|inOut)$/);
+          if (power) {
+            return power[2] + ["", "Quad", "Cubic", "Quart", "Quint"][Number(power[1])];
+          }
+          var family = compact.match(/^(sine|circ|expo|bounce)\.(in|out|inOut)$/);
+          if (family) {
+            return family[2] + family[1][0].toUpperCase() + family[1].slice(1);
+          }
+          return compact;
+        }
+
+        function addTo(tl, targets, vars, position) {
+          var params = {};
+          Object.keys(vars).forEach(function (key) {
+            if (key === "duration") params.duration = toMs(vars.duration);
+            else if (key === "ease") params.ease = mapEase(vars.ease);
+            else params[key] = vars[key];
+          });
+          tl.add(targets, params, toMs(position || 0));
+        }
+
         // ---- split a token state into lines of {content,color} --------------------
         function splitLines(state) {
           var lines = [[]];
@@ -517,9 +546,15 @@
           st.rotY = -1.0;
           st.rotX = 0.4;
           st.camZ = fitZ + 6;
-          tl.to(st, { rotY: 0, rotX: 0, camZ: fitZ, duration: dur * 0.6, ease: "power3.out" }, 0);
+          addTo(
+            tl,
+            st,
+            { rotY: 0, rotX: 0, camZ: fitZ, duration: dur * 0.6, ease: "power3.out" },
+            0,
+          );
           // gentle breathing drift at rest (subtle — stays readable)
-          tl.to(
+          addTo(
+            tl,
             st,
             { rotY: 0.06, rotX: -0.02, duration: dur * 0.4, ease: "sine.inOut" },
             dur * 0.6,
@@ -572,9 +607,6 @@
           var glcanvas = document.getElementById("gl");
           var W = 1920;
           var H = 1080;
-          window.__timelines = window.__timelines || {};
-          var tl = gsap.timeline({ paused: true });
-          window.__timelines[spec.id] = tl; // register synchronously
 
           var THREE = window.THREE;
           var renderer = new THREE.WebGLRenderer({
@@ -588,16 +620,24 @@
           var scene = new THREE.Scene();
           var camera = new THREE.PerspectiveCamera(45, W / H, 0.1, 200);
           var st = {};
+          var render = function () {};
+          var tl = anime.createTimeline({
+            autoplay: false,
+            onUpdate: function () {
+              render();
+            },
+          });
+          hyperframesAnime.register(spec.id, tl, { labels: {} });
 
           document.fonts.ready.then(function () {
             var renderFn = buildEffect(THREE, scene, camera, renderer, spec, st, tl);
-            function render() {
+            render = function () {
               renderFn();
               renderer.render(scene, camera);
-            }
-            tl.eventCallback("onUpdate", render);
-            var dur = parseFloat(root.dataset.duration) || tl.duration();
-            tl.to({}, { duration: dur }, 0); // pad to full composition length
+            };
+            var dur = parseFloat(root.dataset.duration) || spec.duration;
+            var pad = { value: 0 };
+            addTo(tl, pad, { value: 1, duration: dur, ease: "none" }, 0);
             render(); // paint frame 0
             window.addEventListener("beforeunload", function () {
               disposeGL(renderer, scene);
diff --git a/registry/blocks/code-diff/code-diff.html b/registry/blocks/code-diff/code-diff.html
index 03c5a940c3..a4669e5b45 100644
--- a/registry/blocks/code-diff/code-diff.html
+++ b/registry/blocks/code-diff/code-diff.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=1920, height=1080" />
     <title>Code Diff</title>
-    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/animejs@4.5.0/dist/bundles/anime.umd.min.js"></script>
     <style>
       * {
         margin: 0;
@@ -601,11 +601,11 @@
       // hf-code-anim.js — self-contained code-animation engine for HyperFrames registry blocks.
       //
       // Reuses Shiki Magic Move's baked output (window.__TOKENS, baked at author time) and
-      // drives the animation as a PAUSED GSAP timeline the HyperFrames engine seeks per frame —
-      // NOT CSS transitions (those break under non-sequential frame seeking). FLIP measurement
-      // runs once inside document.fonts.ready (glyph metrics must be final). Each block sets
+      // builds one seekable anime.js timeline the HyperFrames engine seeks per frame — NOT CSS
+      // transitions (those break under non-sequential frame seeking). FLIP measurement runs once
+      // after the DOM is built. Each block sets
       // window.__BLOCK = { id, effect, seq, line?, duration } and includes this engine; the
-      // engine builds one scene that fills the composition and registers window.__timelines[id].
+      // engine builds one scene that fills the composition and registers the timeline.
       (function () {
         "use strict";
         var T = window.__TOKENS || {};
@@ -727,6 +727,85 @@
         // ---- single-scene effect builders (fade in, play, hold to end) -------------
         var FADE = 0.45;
 
+        function toMs(seconds) {
+          return typeof seconds === "number" ? Math.round(seconds * 1000) : seconds;
+        }
+
+        function mapEase(ease) {
+          if (typeof ease !== "string") return ease;
+          var compact = ease.replace(/\s+/g, "");
+          if (compact === "none") return "linear";
+          var power = compact.match(/^power([1-4])\.(in|out|inOut)$/);
+          if (power) {
+            return power[2] + ["", "Quad", "Cubic", "Quart", "Quint"][Number(power[1])];
+          }
+          return compact;
+        }
+
+        function isCssTarget(targets) {
+          if (typeof targets === "string") return true;
+          if (targets && targets.nodeType === 1) return true;
+          if (Array.isArray(targets)) return targets.some(isCssTarget);
+          return (
+            targets && typeof targets.length === "number" && targets[0] && targets[0].nodeType === 1
+          );
+        }
+
+        function propName(name, cssTarget) {
+          if (!cssTarget) return name;
+          return { x: "translateX", y: "translateY", rotation: "rotate" }[name] || name;
+        }
+
+        function normalize(vars, cssTarget) {
+          var out = {};
+          Object.keys(vars).forEach(function (key) {
+            if (key === "duration") out.duration = toMs(vars.duration);
+            else if (key === "ease") out.ease = mapEase(vars.ease);
+            else out[propName(key, cssTarget)] = vars[key];
+          });
+          return out;
+        }
+
+        function finalValue(key) {
+          if (key === "opacity") return 1;
+          if (key === "scale" || key === "scaleX" || key === "scaleY") return 1;
+          if (key === "x" || key === "y" || key === "rotation") return 0;
+          return undefined;
+        }
+
+        function addSet(tl, targets, vars, position) {
+          var params = normalize(vars, isCssTarget(targets));
+          params.duration = 0;
+          params.ease = "linear";
+          tl.add(targets, params, toMs(position || 0));
+        }
+
+        function addTo(tl, targets, vars, position) {
+          tl.add(targets, normalize(vars, isCssTarget(targets)), toMs(position || 0));
+        }
+
+        function addFrom(tl, targets, vars, position) {
+          var cssTarget = isCssTarget(targets);
+          var params = normalize(vars, cssTarget);
+          Object.keys(vars).forEach(function (key) {
+            if (key === "duration" || key === "ease") return;
+            var end = finalValue(key);
+            if (end !== undefined) params[propName(key, cssTarget)] = [vars[key], end];
+          });
+          tl.add(targets, params, toMs(position || 0));
+        }
+
+        function addFromTo(tl, targets, fromVars, toVars, position) {
+          var cssTarget = isCssTarget(targets);
+          var params = normalize(toVars, cssTarget);
+          Object.keys(fromVars).forEach(function (key) {
+            if (key === "duration" || key === "ease") return;
+            var mapped = propName(key, cssTarget);
+            params[mapped] = [fromVars[key], toVars[key]];
+          });
+          tl.add(targets, params, toMs(position || 0));
+        }
+
         function diff(tl, surface, states, start) {
           var DEL = 0.55;
           var ADD = 0.6;
@@ -755,11 +834,12 @@
             if (op.type === "del") delEls.push(ln);
             if (op.type === "add") addEls.push(ln);
           });
-          tl.set(parts.scene, { opacity: 0 }, 0);
-          tl.to(parts.scene, { opacity: 1, duration: FADE, ease: "power1.out" }, start);
+          addSet(tl, parts.scene, { opacity: 0 }, 0);
+          addTo(tl, parts.scene, { opacity: 1, duration: FADE, ease: "power1.out" }, start);
           var atDel = start + FADE + 0.3;
           delEls.forEach(function (el, k) {
-            tl.fromTo(
+            addFromTo(
+              tl,
               el,
               { height: 46, opacity: 1 },
               { height: 0, opacity: 0, duration: DEL, ease: "power2.inOut" },
@@ -768,8 +848,9 @@
           });
           var atAdd = atDel + DEL + 0.15;
           addEls.forEach(function (el, k) {
-            tl.set(el, { height: 0, opacity: 0 }, 0);
-            tl.fromTo(
+            addSet(tl, el, { height: 0, opacity: 0 }, 0);
+            addFromTo(
+              tl,
               el,
               { height: 0, opacity: 0 },
               { height: 46, opacity: 1, duration: ADD, ease: "power2.out" },
@@ -788,24 +869,18 @@
           var spec = window.__BLOCK;
           var surface = document.getElementById("surface");
           var root = document.getElementById("root");
-          window.__timelines = window.__timelines || {};
-          var tl = gsap.timeline({ paused: true });
-          // Build inside fonts.ready (glyph metrics must be final), then register.
-          // Register ONLY after the timeline is fully built: the runtime's
-          // sub-composition readiness gate treats "key present" as "ready" and
-          // nests the child once. An empty timeline registered before this build
-          // would be nested empty and never re-nested → blank render when used as
-          // a sub-composition. See the contract in engine frameCapture.ts.
-          document.fonts.ready.then(function () {
-            tl.from("#editor", { opacity: 0, scale: 0.985, duration: 0.5, ease: "power2.out" }, 0);
-            buildEffect(tl, surface, spec);
-            var dur = parseFloat(root.dataset.duration) || tl.duration();
-            tl.to({}, { duration: dur }, 0); // pad to full composition length
-            window.__timelines["code-diff"] = tl; // register AFTER setup completes
-            if (typeof window.__hfForceTimelineRebind === "function") {
-              window.__hfForceTimelineRebind(); // re-nest now that we are populated
-            }
-          });
+          var tl = anime.createTimeline({ autoplay: false });
+          addFrom(
+            tl,
+            "#editor",
+            { opacity: 0, scale: 0.985, duration: 0.5, ease: "power2.out" },
+            0,
+          );
+          buildEffect(tl, surface, spec);
+          var dur = parseFloat(root.dataset.duration) || 6;
+          var pad = { value: 0 };
+          addTo(tl, pad, { value: 1, duration: dur, ease: "none" }, 0);
+          hyperframesAnime.register("code-diff", tl, { labels: {} });
         }
 
         if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
diff --git a/registry/blocks/code-highlight/code-highlight.html b/registry/blocks/code-highlight/code-highlight.html
index 1d6dd76e94..3f698e9229 100644
--- a/registry/blocks/code-highlight/code-highlight.html
+++ b/registry/blocks/code-highlight/code-highlight.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=1920, height=1080" />
     <title>Code Highlight Sweep</title>
-    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/animejs@4.5.0/dist/bundles/anime.umd.min.js"></script>
     <style>
       * {
         margin: 0;
@@ -544,11 +544,11 @@
       // hf-code-anim.js — self-contained code-animation engine for HyperFrames registry blocks.
       //
       // Reuses Shiki Magic Move's baked output (window.__TOKENS, baked at author time) and
-      // drives the animation as a PAUSED GSAP timeline the HyperFrames engine seeks per frame —
-      // NOT CSS transitions (those break under non-sequential frame seeking). FLIP measurement
-      // runs once inside document.fonts.ready (glyph metrics must be final). Each block sets
+      // builds one seekable anime.js timeline the HyperFrames engine seeks per frame — NOT CSS
+      // transitions (those break under non-sequential frame seeking). FLIP measurement runs once
+      // after the DOM is built. Each block sets
       // window.__BLOCK = { id, effect, seq, line?, duration } and includes this engine; the
-      // engine builds one scene that fills the composition and registers window.__timelines[id].
+      // engine builds one scene that fills the composition and registers the timeline.
       (function () {
         "use strict";
         var T = window.__TOKENS || {};
@@ -670,6 +670,85 @@
         // ---- single-scene effect builders (fade in, play, hold to end) -------------
         var FADE = 0.45;
 
+        function toMs(seconds) {
+          return typeof seconds === "number" ? Math.round(seconds * 1000) : seconds;
+        }
+
+        function mapEase(ease) {
+          if (typeof ease !== "string") return ease;
+          var compact = ease.replace(/\s+/g, "");
+          if (compact === "none") return "linear";
+          var power = compact.match(/^power([1-4])\.(in|out|inOut)$/);
+          if (power) {
+            return power[2] + ["", "Quad", "Cubic", "Quart", "Quint"][Number(power[1])];
+          }
+          return compact;
+        }
+
+        function isCssTarget(targets) {
+          if (typeof targets === "string") return true;
+          if (targets && targets.nodeType === 1) return true;
+          if (Array.isArray(targets)) return targets.some(isCssTarget);
+          return (
+            targets && typeof targets.length === "number" && targets[0] && targets[0].nodeType === 1
+          );
+        }
+
+        function propName(name, cssTarget) {
+          if (!cssTarget) return name;
+          return { x: "translateX", y: "translateY", rotation: "rotate" }[name] || name;
+        }
+
+        function normalize(vars, cssTarget) {
+          var out = {};
+          Object.keys(vars).forEach(function (key) {
+            if (key === "duration") out.duration = toMs(vars.duration);
+            else if (key === "ease") out.ease = mapEase(vars.ease);
+            else out[propName(key, cssTarget)] = vars[key];
+          });
+          return out;
+        }
+
+        function finalValue(key) {
+          if (key === "opacity") return 1;
+          if (key === "scale" || key === "scaleX" || key === "scaleY") return 1;
+          if (key === "x" || key === "y" || key === "rotation") return 0;
+          return undefined;
+        }
+
+        function addSet(tl, targets, vars, position) {
+          var params = normalize(vars, isCssTarget(targets));
+          params.duration = 0;
+          params.ease = "linear";
+          tl.add(targets, params, toMs(position || 0));
+        }
+
+        function addTo(tl, targets, vars, position) {
+          tl.add(targets, normalize(vars, isCssTarget(targets)), toMs(position || 0));
+        }
+
+        function addFrom(tl, targets, vars, position) {
+          var cssTarget = isCssTarget(targets);
+          var params = normalize(vars, cssTarget);
+          Object.keys(vars).forEach(function (key) {
+            if (key === "duration" || key === "ease") return;
+            var end = finalValue(key);
+            if (end !== undefined) params[propName(key, cssTarget)] = [vars[key], end];
+          });
+          tl.add(targets, params, toMs(position || 0));
+        }
+
+        function addFromTo(tl, targets, fromVars, toVars, position) {
+          var cssTarget = isCssTarget(targets);
+          var params = normalize(toVars, cssTarget);
+          Object.keys(fromVars).forEach(function (key) {
+            if (key === "duration" || key === "ease") return;
+            var mapped = propName(key, cssTarget);
+            params[mapped] = [fromVars[key], toVars[key]];
+          });
+          tl.add(targets, params, toMs(position || 0));
+        }
+
         function highlight(tl, surface, state, start, targetIdx) {
           var SWEEP = 0.9;
           var parts = makeScene(surface, true);
@@ -686,10 +765,11 @@
           box.style.top = lr.top - base.top - 1 + "px";
           box.style.height = lr.height + 2 + "px";
           code.insertBefore(box, code.firstChild);
-          tl.set(parts.scene, { opacity: 0 }, 0);
-          tl.to(parts.scene, { opacity: 1, duration: FADE, ease: "power1.out" }, start);
+          addSet(tl, parts.scene, { opacity: 0 }, 0);
+          addTo(tl, parts.scene, { opacity: 1, duration: FADE, ease: "power1.out" }, start);
           var at = start + FADE + 0.2;
-          tl.fromTo(
+          addFromTo(
+            tl,
             box,
             { width: 0, opacity: 0 },
             { width: lr.width + 18, opacity: 1, duration: SWEEP, ease: "power2.inOut" },
@@ -697,7 +777,8 @@
           );
           for (var i = 0; i < lines.length; i++) {
             if (i === idx) continue;
-            tl.fromTo(
+            addFromTo(
+              tl,
               lines[i],
               { opacity: 1 },
               { opacity: 0.45, duration: SWEEP, ease: "power2.inOut" },
@@ -717,24 +798,18 @@
           var spec = window.__BLOCK;
           var surface = document.getElementById("surface");
           var root = document.getElementById("root");
-          window.__timelines = window.__timelines || {};
-          var tl = gsap.timeline({ paused: true });
-          // Build inside fonts.ready (glyph metrics must be final), then register.
-          // Register ONLY after the timeline is fully built: the runtime's
-          // sub-composition readiness gate treats "key present" as "ready" and
-          // nests the child once. An empty timeline registered before this build
-          // would be nested empty and never re-nested → blank render when used as
-          // a sub-composition. See the contract in engine frameCapture.ts.
-          document.fonts.ready.then(function () {
-            tl.from("#editor", { opacity: 0, scale: 0.985, duration: 0.5, ease: "power2.out" }, 0);
-            buildEffect(tl, surface, spec);
-            var dur = parseFloat(root.dataset.duration) || tl.duration();
-            tl.to({}, { duration: dur }, 0); // pad to full composition length
-            window.__timelines["code-highlight"] = tl; // register AFTER setup completes
-            if (typeof window.__hfForceTimelineRebind === "function") {
-              window.__hfForceTimelineRebind(); // re-nest now that we are populated
-            }
-          });
+          var tl = anime.createTimeline({ autoplay: false });
+          addFrom(
+            tl,
+            "#editor",
+            { opacity: 0, scale: 0.985, duration: 0.5, ease: "power2.out" },
+            0,
+          );
+          buildEffect(tl, surface, spec);
+          var dur = parseFloat(root.dataset.duration) || 5;
+          var pad = { value: 0 };
+          addTo(tl, pad, { value: 1, duration: dur, ease: "none" }, 0);
+          hyperframesAnime.register("code-highlight", tl, { labels: {} });
         }
 
         if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
diff --git a/registry/blocks/code-morph/code-morph.html b/registry/blocks/code-morph/code-morph.html
index b79c584392..52b33093e5 100644
--- a/registry/blocks/code-morph/code-morph.html
+++ b/registry/blocks/code-morph/code-morph.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=1920, height=1080" />
     <title>Code Morph</title>
-    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/animejs@4.5.0/dist/bundles/anime.umd.min.js"></script>
     <style>
       * {
         margin: 0;
@@ -990,11 +990,11 @@
       // hf-code-anim.js — self-contained code-animation engine for HyperFrames registry blocks.
       //
       // Reuses Shiki Magic Move's baked output (window.__TOKENS, baked at author time) and
-      // drives the animation as a PAUSED GSAP timeline the HyperFrames engine seeks per frame —
-      // NOT CSS transitions (those break under non-sequential frame seeking). FLIP measurement
-      // runs once inside document.fonts.ready (glyph metrics must be final). Each block sets
+      // builds one seekable anime.js timeline the HyperFrames engine seeks per frame — NOT CSS
+      // transitions (those break under non-sequential frame seeking). FLIP measurement runs once
+      // after the DOM is built. Each block sets
       // window.__BLOCK = { id, effect, seq, line?, duration } and includes this engine; the
-      // engine builds one scene that fills the composition and registers window.__timelines[id].
+      // engine builds one scene that fills the composition and registers the timeline.
       (function () {
         "use strict";
         var T = window.__TOKENS || {};
@@ -1116,6 +1116,85 @@
         // ---- single-scene effect builders (fade in, play, hold to end) -------------
         var FADE = 0.45;
 
+        function toMs(seconds) {
+          return typeof seconds === "number" ? Math.round(seconds * 1000) : seconds;
+        }
+
+        function mapEase(ease) {
+          if (typeof ease !== "string") return ease;
+          var compact = ease.replace(/\s+/g, "");
+          if (compact === "none") return "linear";
+          var power = compact.match(/^power([1-4])\.(in|out|inOut)$/);
+          if (power) {
+            return power[2] + ["", "Quad", "Cubic", "Quart", "Quint"][Number(power[1])];
+          }
+          return compact;
+        }
+
+        function isCssTarget(targets) {
+          if (typeof targets === "string") return true;
+          if (targets && targets.nodeType === 1) return true;
+          if (Array.isArray(targets)) return targets.some(isCssTarget);
+          return (
+            targets && typeof targets.length === "number" && targets[0] && targets[0].nodeType === 1
+          );
+        }
+
+        function propName(name, cssTarget) {
+          if (!cssTarget) return name;
+          return { x: "translateX", y: "translateY", rotation: "rotate" }[name] || name;
+        }
+
+        function normalize(vars, cssTarget) {
+          var out = {};
+          Object.keys(vars).forEach(function (key) {
+            if (key === "duration") out.duration = toMs(vars.duration);
+            else if (key === "ease") out.ease = mapEase(vars.ease);
+            else out[propName(key, cssTarget)] = vars[key];
+          });
+          return out;
+        }
+
+        function finalValue(key) {
+          if (key === "opacity") return 1;
+          if (key === "scale" || key === "scaleX" || key === "scaleY") return 1;
+          if (key === "x" || key === "y" || key === "rotation") return 0;
+          return undefined;
+        }
+
+        function addSet(tl, targets, vars, position) {
+          var params = normalize(vars, isCssTarget(targets));
+          params.duration = 0;
+          params.ease = "linear";
+          tl.add(targets, params, toMs(position || 0));
+        }
+
+        function addTo(tl, targets, vars, position) {
+          tl.add(targets, normalize(vars, isCssTarget(targets)), toMs(position || 0));
+        }
+
+        function addFrom(tl, targets, vars, position) {
+          var cssTarget = isCssTarget(targets);
+          var params = normalize(vars, cssTarget);
+          Object.keys(vars).forEach(function (key) {
+            if (key === "duration" || key === "ease") return;
+            var end = finalValue(key);
+            if (end !== undefined) params[propName(key, cssTarget)] = [vars[key], end];
+          });
+          tl.add(targets, params, toMs(position || 0));
+        }
+
+        function addFromTo(tl, targets, fromVars, toVars, position) {
+          var cssTarget = isCssTarget(targets);
+          var params = normalize(toVars, cssTarget);
+          Object.keys(fromVars).forEach(function (key) {
+            if (key === "duration" || key === "ease") return;
+            var mapped = propName(key, cssTarget);
+            params[mapped] = [fromVars[key], toVars[key]];
+          });
+          tl.add(targets, params, toMs(position || 0));
+        }
+
         function morph(tl, surface, states, start) {
           var STEP = 1.2;
           var HOLD = 1.0;
@@ -1128,25 +1207,27 @@
             var toEls = renderState(code, states[s + 1]);
             var toR = rectsOf(toEls);
             var base = code.getBoundingClientRect();
-            var seg = gsap.timeline();
             var ENTER_AT = STEP * 0.45;
             var FD = STEP * 0.5;
+            var segStart = t + FADE;
             toEls.forEach(function (el, k) {
               var fr = fromR.get(k);
               var tr = toR.get(k);
               if (fr) {
-                seg.fromTo(
+                addFromTo(
+                  tl,
                   el,
                   { x: fr.left - tr.left, y: fr.top - tr.top },
                   { x: 0, y: 0, duration: STEP, ease: "power2.inOut" },
-                  0,
+                  segStart,
                 );
               } else {
-                seg.fromTo(
+                addFromTo(
+                  tl,
                   el,
                   { opacity: 0 },
                   { opacity: 1, duration: FD, ease: "power1.out" },
-                  ENTER_AT,
+                  segStart + ENTER_AT,
                 );
               }
             });
@@ -1164,16 +1245,25 @@
               span.style.top = r.top - base.top + "px";
               span.style.color = tok.color;
               code.appendChild(span);
-              seg.fromTo(span, { opacity: 1 }, { opacity: 0, duration: FD, ease: "power1.in" }, 0);
+              addFromTo(
+                tl,
+                span,
+                { opacity: 1 },
+                { opacity: 0, duration: FD, ease: "power1.in" },
+                segStart,
+              );
             }
-            var segStart = t + FADE;
             var segEnd = segStart + STEP + HOLD;
             var isLast = s === states.length - 2;
-            tl.set(parts.scene, { opacity: 0 }, 0);
-            tl.to(parts.scene, { opacity: 1, duration: FADE, ease: "power1.out" }, t);
+            addSet(tl, parts.scene, { opacity: 0 }, 0);
+            addTo(tl, parts.scene, { opacity: 1, duration: FADE, ease: "power1.out" }, t);
             if (!isLast)
-              tl.to(parts.scene, { opacity: 0, duration: FADE, ease: "power1.in" }, segEnd - FADE);
-            tl.add(seg, segStart);
+              addTo(
+                tl,
+                parts.scene,
+                { opacity: 0, duration: FADE, ease: "power1.in" },
+                segEnd - FADE,
+              );
             t = segEnd - FADE;
           }
         }
@@ -1188,24 +1278,18 @@
           var spec = window.__BLOCK;
           var surface = document.getElementById("surface");
           var root = document.getElementById("root");
-          window.__timelines = window.__timelines || {};
-          var tl = gsap.timeline({ paused: true });
-          // Build inside fonts.ready (glyph metrics must be final), then register.
-          // Register ONLY after the timeline is fully built: the runtime's
-          // sub-composition readiness gate treats "key present" as "ready" and
-          // nests the child once. An empty timeline registered before this build
-          // would be nested empty and never re-nested → blank render when used as
-          // a sub-composition. See the contract in engine frameCapture.ts.
-          document.fonts.ready.then(function () {
-            tl.from("#editor", { opacity: 0, scale: 0.985, duration: 0.5, ease: "power2.out" }, 0);
-            buildEffect(tl, surface, spec);
-            var dur = parseFloat(root.dataset.duration) || tl.duration();
-            tl.to({}, { duration: dur }, 0); // pad to full composition length
-            window.__timelines["code-morph"] = tl; // register AFTER setup completes
-            if (typeof window.__hfForceTimelineRebind === "function") {
-              window.__hfForceTimelineRebind(); // re-nest now that we are populated
-            }
-          });
+          var tl = anime.createTimeline({ autoplay: false });
+          addFrom(
+            tl,
+            "#editor",
+            { opacity: 0, scale: 0.985, duration: 0.5, ease: "power2.out" },
+            0,
+          );
+          buildEffect(tl, surface, spec);
+          var dur = parseFloat(root.dataset.duration) || 7;
+          var pad = { value: 0 };
+          addTo(tl, pad, { value: 1, duration: dur, ease: "none" }, 0);
+          hyperframesAnime.register("code-morph", tl, { labels: {} });
         }
 
         if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
diff --git a/registry/blocks/code-morph/registry-item.json b/registry/blocks/code-morph/registry-item.json
index 9807525d63..f8da077a27 100644
--- a/registry/blocks/code-morph/registry-item.json
+++ b/registry/blocks/code-morph/registry-item.json
@@ -3,7 +3,7 @@
   "name": "code-morph",
   "type": "hyperframes:block",
   "title": "Code Morph",
-  "description": "One snippet transforms into another — tokens glide between positions, leavers fade out, enterers fade in. Shiki Magic Move re-driven as a paused GSAP timeline.",
+  "description": "One snippet transforms into another — tokens glide between positions, leavers fade out, enterers fade in. Shiki Magic Move re-driven as a paused anime.js timeline.",
   "dimensions": {
     "width": 1920,
     "height": 1080
diff --git a/registry/blocks/code-particle-assemble/code-particle-assemble.html b/registry/blocks/code-particle-assemble/code-particle-assemble.html
index 5734fdab50..4fb6bf68d8 100644
--- a/registry/blocks/code-particle-assemble/code-particle-assemble.html
+++ b/registry/blocks/code-particle-assemble/code-particle-assemble.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=1920, height=1080" />
     <title>Code Particle Assemble</title>
-    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/animejs@4.5.0/dist/bundles/anime.umd.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js"></script>
     <style>
       * {
@@ -194,10 +194,10 @@
       // Bridges the baked Shiki tokens (window.__TOKENS) into Three.js: the tokens are drawn once
       // to an offscreen 2D canvas (a CanvasTexture), which then drives a lit 3D slab, a dissolve
       // shader, or a GPU particle system. Determinism per the project contract:
-      //   - render only via tl.eventCallback("onUpdate", …) + one initial render() — never rAF
+      //   - render only via anime timeline onUpdate + one initial render() — never rAF
       //   - all randomness from a seeded mulberry32 — never Math.random / Date.now
       //   - canvas drawn once after document.fonts.ready (final glyph metrics)
-      //   - paused GSAP timeline registered on window.__timelines[id]; HF seeks it per frame
+      //   - paused anime.js timeline registered by composition id; HF seeks it per frame
       //
       // Each block sets window.__BLOCK = { id, effect, seq, duration, seed } and includes this engine.
       (function () {
@@ -215,6 +215,31 @@
           };
         }
 
+        function toMs(seconds) {
+          return typeof seconds === "number" ? Math.round(seconds * 1000) : seconds;
+        }
+
+        function mapEase(ease) {
+          if (typeof ease !== "string") return ease;
+          var compact = ease.replace(/\s+/g, "");
+          if (compact === "none") return "linear";
+          var power = compact.match(/^power([1-4])\.(in|out|inOut)$/);
+          if (power) {
+            return power[2] + ["", "Quad", "Cubic", "Quart", "Quint"][Number(power[1])];
+          }
+          return compact;
+        }
+
+        function addTo(tl, targets, vars, position) {
+          var params = {};
+          Object.keys(vars).forEach(function (key) {
+            if (key === "duration") params.duration = toMs(vars.duration);
+            else if (key === "ease") params.ease = mapEase(vars.ease);
+            else params[key] = vars[key];
+          });
+          tl.add(targets, params, toMs(position || 0));
+        }
+
         // ---- split a token state into lines of {content,color} --------------------
         function splitLines(state) {
           var lines = [[]];
@@ -394,9 +419,14 @@
           camera.position.z = Math.max(fitH, fitW);
           camera.lookAt(0, 0, 0);
 
-          tl.to(uniforms.uProgress, { value: 1.0, duration: dur * 0.72, ease: "power2.out" }, 0);
+          addTo(
+            tl,
+            uniforms.uProgress,
+            { value: 1.0, duration: dur * 0.72, ease: "power2.out" },
+            0,
+          );
 
-          // uProgress is tweened by GSAP; the boot loop's render() draws once per frame.
+          // uProgress is tweened by anime.js; the boot loop's render() draws once per frame.
           return function () {};
         }
 
@@ -438,9 +468,6 @@
           var glcanvas = document.getElementById("gl");
           var W = 1920;
           var H = 1080;
-          window.__timelines = window.__timelines || {};
-          var tl = gsap.timeline({ paused: true });
-          window.__timelines[spec.id] = tl; // register synchronously
 
           var THREE = window.THREE;
           var renderer = new THREE.WebGLRenderer({
@@ -454,16 +481,24 @@
           var scene = new THREE.Scene();
           var camera = new THREE.PerspectiveCamera(45, W / H, 0.1, 200);
           var st = {};
+          var render = function () {};
+          var tl = anime.createTimeline({
+            autoplay: false,
+            onUpdate: function () {
+              render();
+            },
+          });
+          hyperframesAnime.register(spec.id, tl, { labels: {} });
 
           document.fonts.ready.then(function () {
             var renderFn = buildEffect(THREE, scene, camera, renderer, spec, st, tl);
-            function render() {
+            render = function () {
               renderFn();
               renderer.render(scene, camera);
-            }
-            tl.eventCallback("onUpdate", render);
-            var dur = parseFloat(root.dataset.duration) || tl.duration();
-            tl.to({}, { duration: dur }, 0); // pad to full composition length
+            };
+            var dur = parseFloat(root.dataset.duration) || spec.duration;
+            var pad = { value: 0 };
+            addTo(tl, pad, { value: 1, duration: dur, ease: "none" }, 0);
             render(); // paint frame 0
             window.addEventListener("beforeunload", function () {
               disposeGL(renderer, scene);
diff --git a/registry/blocks/code-scroll/code-scroll.html b/registry/blocks/code-scroll/code-scroll.html
index 55517a332c..da3edc317e 100644
--- a/registry/blocks/code-scroll/code-scroll.html
+++ b/registry/blocks/code-scroll/code-scroll.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=1920, height=1080" />
     <title>Code Scroll To Line</title>
-    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/animejs@4.5.0/dist/bundles/anime.umd.min.js"></script>
     <style>
       * {
         margin: 0;
@@ -1354,11 +1354,11 @@
       // hf-code-anim.js — self-contained code-animation engine for HyperFrames registry blocks.
       //
       // Reuses Shiki Magic Move's baked output (window.__TOKENS, baked at author time) and
-      // drives the animation as a PAUSED GSAP timeline the HyperFrames engine seeks per frame —
-      // NOT CSS transitions (those break under non-sequential frame seeking). FLIP measurement
-      // runs once inside document.fonts.ready (glyph metrics must be final). Each block sets
+      // builds one seekable anime.js timeline the HyperFrames engine seeks per frame — NOT CSS
+      // transitions (those break under non-sequential frame seeking). FLIP measurement runs once
+      // after the DOM is built. Each block sets
       // window.__BLOCK = { id, effect, seq, line?, duration } and includes this engine; the
-      // engine builds one scene that fills the composition and registers window.__timelines[id].
+      // engine builds one scene that fills the composition and registers the timeline.
       (function () {
         "use strict";
         var T = window.__TOKENS || {};
@@ -1480,6 +1480,85 @@
         // ---- single-scene effect builders (fade in, play, hold to end) -------------
         var FADE = 0.45;
 
+        function toMs(seconds) {
+          return typeof seconds === "number" ? Math.round(seconds * 1000) : seconds;
+        }
+
+        function mapEase(ease) {
+          if (typeof ease !== "string") return ease;
+          var compact = ease.replace(/\s+/g, "");
+          if (compact === "none") return "linear";
+          var power = compact.match(/^power([1-4])\.(in|out|inOut)$/);
+          if (power) {
+            return power[2] + ["", "Quad", "Cubic", "Quart", "Quint"][Number(power[1])];
+          }
+          return compact;
+        }
+
+        function isCssTarget(targets) {
+          if (typeof targets === "string") return true;
+          if (targets && targets.nodeType === 1) return true;
+          if (Array.isArray(targets)) return targets.some(isCssTarget);
+          return (
+            targets && typeof targets.length === "number" && targets[0] && targets[0].nodeType === 1
+          );
+        }
+
+        function propName(name, cssTarget) {
+          if (!cssTarget) return name;
+          return { x: "translateX", y: "translateY", rotation: "rotate" }[name] || name;
+        }
+
+        function normalize(vars, cssTarget) {
+          var out = {};
+          Object.keys(vars).forEach(function (key) {
+            if (key === "duration") out.duration = toMs(vars.duration);
+            else if (key === "ease") out.ease = mapEase(vars.ease);
+            else out[propName(key, cssTarget)] = vars[key];
+          });
+          return out;
+        }
+
+        function finalValue(key) {
+          if (key === "opacity") return 1;
+          if (key === "scale" || key === "scaleX" || key === "scaleY") return 1;
+          if (key === "x" || key === "y" || key === "rotation") return 0;
+          return undefined;
+        }
+
+        function addSet(tl, targets, vars, position) {
+          var params = normalize(vars, isCssTarget(targets));
+          params.duration = 0;
+          params.ease = "linear";
+          tl.add(targets, params, toMs(position || 0));
+        }
+
+        function addTo(tl, targets, vars, position) {
+          tl.add(targets, normalize(vars, isCssTarget(targets)), toMs(position || 0));
+        }
+
+        function addFrom(tl, targets, vars, position) {
+          var cssTarget = isCssTarget(targets);
+          var params = normalize(vars, cssTarget);
+          Object.keys(vars).forEach(function (key) {
+            if (key === "duration" || key === "ease") return;
+            var end = finalValue(key);
+            if (end !== undefined) params[propName(key, cssTarget)] = [vars[key], end];
+          });
+          tl.add(targets, params, toMs(position || 0));
+        }
+
+        function addFromTo(tl, targets, fromVars, toVars, position) {
+          var cssTarget = isCssTarget(targets);
+          var params = normalize(toVars, cssTarget);
+          Object.keys(fromVars).forEach(function (key) {
+            if (key === "duration" || key === "ease") return;
+            var mapped = propName(key, cssTarget);
+            params[mapped] = [fromVars[key], toVars[key]];
+          });
+          tl.add(targets, params, toMs(position || 0));
+        }
+
         function scroll(tl, surface, state, start, targetLine) {
           var SCROLL = 1.7;
           var parts = makeScene(surface, true);
@@ -1499,11 +1578,12 @@
           box.style.width = lr.width + 18 + "px";
           box.style.height = lr.height + 2 + "px";
           code.insertBefore(box, code.firstChild);
-          tl.set(parts.scene, { opacity: 0 }, 0);
-          tl.to(parts.scene, { opacity: 1, duration: FADE, ease: "power1.out" }, start);
-          tl.set(box, { opacity: 0 }, 0);
+          addSet(tl, parts.scene, { opacity: 0 }, 0);
+          addTo(tl, parts.scene, { opacity: 1, duration: FADE, ease: "power1.out" }, start);
+          addSet(tl, box, { opacity: 0 }, 0);
           var at = start + FADE + 0.35;
-          tl.fromTo(
+          addFromTo(
+            tl,
             [code, parts.gutter],
             { y: 0 },
             { y: dy, duration: SCROLL, ease: "power2.inOut" },
@@ -1512,14 +1592,15 @@
           var arrAt = at + SCROLL;
           for (var i = 0; i < lines.length; i++) {
             if (i === idx) continue;
-            tl.fromTo(
+            addFromTo(
+              tl,
               lines[i],
               { opacity: 1 },
               { opacity: 0.35, duration: 0.5, ease: "power1.out" },
               arrAt - 0.35,
             );
           }
-          tl.to(box, { opacity: 1, duration: 0.45, ease: "power1.out" }, arrAt - 0.35);
+          addTo(tl, box, { opacity: 1, duration: 0.45, ease: "power1.out" }, arrAt - 0.35);
         }
 
         function buildEffect(tl, surface, spec) {
@@ -1532,24 +1613,18 @@
           var spec = window.__BLOCK;
           var surface = document.getElementById("surface");
           var root = document.getElementById("root");
-          window.__timelines = window.__timelines || {};
-          var tl = gsap.timeline({ paused: true });
-          // Build inside fonts.ready (glyph metrics must be final), then register.
-          // Register ONLY after the timeline is fully built: the runtime's
-          // sub-composition readiness gate treats "key present" as "ready" and
-          // nests the child once. An empty timeline registered before this build
-          // would be nested empty and never re-nested → blank render when used as
-          // a sub-composition. See the contract in engine frameCapture.ts.
-          document.fonts.ready.then(function () {
-            tl.from("#editor", { opacity: 0, scale: 0.985, duration: 0.5, ease: "power2.out" }, 0);
-            buildEffect(tl, surface, spec);
-            var dur = parseFloat(root.dataset.duration) || tl.duration();
-            tl.to({}, { duration: dur }, 0); // pad to full composition length
-            window.__timelines["code-scroll"] = tl; // register AFTER setup completes
-            if (typeof window.__hfForceTimelineRebind === "function") {
-              window.__hfForceTimelineRebind(); // re-nest now that we are populated
-            }
-          });
+          var tl = anime.createTimeline({ autoplay: false });
+          addFrom(
+            tl,
+            "#editor",
+            { opacity: 0, scale: 0.985, duration: 0.5, ease: "power2.out" },
+            0,
+          );
+          buildEffect(tl, surface, spec);
+          var dur = parseFloat(root.dataset.duration) || 6;
+          var pad = { value: 0 };
+          addTo(tl, pad, { value: 1, duration: dur, ease: "none" }, 0);
+          hyperframesAnime.register("code-scroll", tl, { labels: {} });
         }
 
         if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
diff --git a/registry/blocks/code-typing/code-typing.html b/registry/blocks/code-typing/code-typing.html
index 5a30750005..d976fb3ab8 100644
--- a/registry/blocks/code-typing/code-typing.html
+++ b/registry/blocks/code-typing/code-typing.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=1920, height=1080" />
     <title>Code Typing</title>
-    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/animejs@4.5.0/dist/bundles/anime.umd.min.js"></script>
     <style>
       * {
         margin: 0;
@@ -536,11 +536,11 @@
       // hf-code-anim.js — self-contained code-animation engine for HyperFrames registry blocks.
       //
       // Reuses Shiki Magic Move's baked output (window.__TOKENS, baked at author time) and
-      // drives the animation as a PAUSED GSAP timeline the HyperFrames engine seeks per frame —
-      // NOT CSS transitions (those break under non-sequential frame seeking). FLIP measurement
-      // runs once inside document.fonts.ready (glyph metrics must be final). Each block sets
+      // builds one seekable anime.js timeline the HyperFrames engine seeks per frame — NOT CSS
+      // transitions (those break under non-sequential frame seeking). FLIP measurement runs once
+      // after the DOM is built. Each block sets
       // window.__BLOCK = { id, effect, seq, line?, duration } and includes this engine; the
-      // engine builds one scene that fills the composition and registers window.__timelines[id].
+      // engine builds one scene that fills the composition and registers the timeline.
       (function () {
         "use strict";
         var T = window.__TOKENS || {};
@@ -662,6 +662,74 @@
         // ---- single-scene effect builders (fade in, play, hold to end) -------------
         var FADE = 0.45;
 
+        function toMs(seconds) {
+          return typeof seconds === "number" ? Math.round(seconds * 1000) : seconds;
+        }
+
+        function mapEase(ease) {
+          if (typeof ease !== "string") return ease;
+          var compact = ease.replace(/\s+/g, "");
+          if (compact === "none") return "linear";
+          var power = compact.match(/^power([1-4])\.(in|out|inOut)$/);
+          if (power) {
+            return power[2] + ["", "Quad", "Cubic", "Quart", "Quint"][Number(power[1])];
+          }
+          return compact;
+        }
+
+        function isCssTarget(targets) {
+          if (typeof targets === "string") return true;
+          if (targets && targets.nodeType === 1) return true;
+          if (Array.isArray(targets)) return targets.some(isCssTarget);
+          return (
+            targets && typeof targets.length === "number" && targets[0] && targets[0].nodeType === 1
+          );
+        }
+
+        function propName(name, cssTarget) {
+          if (!cssTarget) return name;
+          return { x: "translateX", y: "translateY", rotation: "rotate" }[name] || name;
+        }
+
+        function normalize(vars, cssTarget) {
+          var out = {};
+          Object.keys(vars).forEach(function (key) {
+            if (key === "duration") out.duration = toMs(vars.duration);
+            else if (key === "ease") out.ease = mapEase(vars.ease);
+            else out[propName(key, cssTarget)] = vars[key];
+          });
+          return out;
+        }
+
+        function finalValue(key) {
+          if (key === "opacity") return 1;
+          if (key === "scale" || key === "scaleX" || key === "scaleY") return 1;
+          if (key === "x" || key === "y" || key === "rotation") return 0;
+          return undefined;
+        }
+
+        function addSet(tl, targets, vars, position) {
+          var params = normalize(vars, isCssTarget(targets));
+          params.duration = 0;
+          params.ease = "linear";
+          tl.add(targets, params, toMs(position || 0));
+        }
+
+        function addTo(tl, targets, vars, position) {
+          tl.add(targets, normalize(vars, isCssTarget(targets)), toMs(position || 0));
+        }
+
+        function addFrom(tl, targets, vars, position) {
+          var cssTarget = isCssTarget(targets);
+          var params = normalize(vars, cssTarget);
+          Object.keys(vars).forEach(function (key) {
+            if (key === "duration" || key === "ease") return;
+            var end = finalValue(key);
+            if (end !== undefined) params[propName(key, cssTarget)] = [vars[key], end];
+          });
+          tl.add(targets, params, toMs(position || 0));
+        }
+
         function typing(tl, surface, state, start) {
           var PER = 0.028; // seconds per character — smooth, fast typewriter
           var parts = makeScene(surface, true);
@@ -702,22 +770,23 @@
           caret.className = "caret";
           code.appendChild(caret);
 
-          tl.set(parts.scene, { opacity: 0 }, 0);
-          tl.to(parts.scene, { opacity: 1, duration: FADE, ease: "power1.out" }, start);
+          addSet(tl, parts.scene, { opacity: 0 }, 0);
+          addTo(tl, parts.scene, { opacity: 1, duration: FADE, ease: "power1.out" }, start);
 
           var t0 = start + FADE;
           if (chars.length) {
             var r0 = chars[0].el.getBoundingClientRect();
-            tl.set(caret, { x: r0.left - base.left, y: r0.top - base.top, opacity: 1 }, 0);
+            addSet(tl, caret, { x: r0.left - base.left, y: r0.top - base.top, opacity: 1 }, 0);
           }
           chars.forEach(function (c, i) {
             var at = t0 + i * PER;
-            tl.set(c.el, { opacity: 0 }, 0);
+            addSet(tl, c.el, { opacity: 0 }, 0);
             // soft per-char fade (overlaps neighbors → smooth wave); whitespace appears instantly
-            tl.to(c.el, { opacity: 1, duration: c.ws ? 0.01 : 0.12, ease: "power1.out" }, at);
+            addTo(tl, c.el, { opacity: 1, duration: c.ws ? 0.01 : 0.12, ease: "power1.out" }, at);
             // caret glides at constant speed to each char's right edge (linear = no stop-start jitter)
             var r = c.el.getBoundingClientRect();
-            tl.to(
+            addTo(
+              tl,
               caret,
               { x: r.right - base.left, y: r.top - base.top, duration: PER, ease: "none" },
               at,
@@ -735,24 +804,18 @@
           var spec = window.__BLOCK;
           var surface = document.getElementById("surface");
           var root = document.getElementById("root");
-          window.__timelines = window.__timelines || {};
-          var tl = gsap.timeline({ paused: true });
-          // Build inside fonts.ready (glyph metrics must be final), then register.
-          // Register ONLY after the timeline is fully built: the runtime's
-          // sub-composition readiness gate treats "key present" as "ready" and
-          // nests the child once. An empty timeline registered before this build
-          // would be nested empty and never re-nested → blank render when used as
-          // a sub-composition. See the contract in engine frameCapture.ts.
-          document.fonts.ready.then(function () {
-            tl.from("#editor", { opacity: 0, scale: 0.985, duration: 0.5, ease: "power2.out" }, 0);
-            buildEffect(tl, surface, spec);
-            var dur = parseFloat(root.dataset.duration) || tl.duration();
-            tl.to({}, { duration: dur }, 0); // pad to full composition length
-            window.__timelines["code-typing"] = tl; // register AFTER setup completes
-            if (typeof window.__hfForceTimelineRebind === "function") {
-              window.__hfForceTimelineRebind(); // re-nest now that we are populated
-            }
-          });
+          var tl = anime.createTimeline({ autoplay: false });
+          addFrom(
+            tl,
+            "#editor",
+            { opacity: 0, scale: 0.985, duration: 0.5, ease: "power2.out" },
+            0,
+          );
+          buildEffect(tl, surface, spec);
+          var dur = parseFloat(root.dataset.duration) || 5;
+          var pad = { value: 0 };
+          addTo(tl, pad, { value: 1, duration: dur, ease: "none" }, 0);
+          hyperframesAnime.register("code-typing", tl, { labels: {} });
         }
 
         if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
diff --git a/registry/blocks/ui-3d-reveal/ui-3d-reveal.html b/registry/blocks/ui-3d-reveal/ui-3d-reveal.html
index 7707480b56..09b66d014a 100644
--- a/registry/blocks/ui-3d-reveal/ui-3d-reveal.html
+++ b/registry/blocks/ui-3d-reveal/ui-3d-reveal.html
@@ -10,7 +10,7 @@
       href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=block"
       rel="stylesheet"
     />
-    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/animejs@4.5.0/dist/bundles/anime.umd.min.js"></script>
     <style>
       * {
         margin: 0;
@@ -2480,7 +2480,117 @@
       <script>
         (function () {
           var S = '[data-composition-id="ui-3d-reveal"]';
-          var tl = gsap.timeline({ paused: true });
+          var tl = anime.createTimeline({ autoplay: false });
+
+          function toMs(seconds) {
+            return seconds * 1000;
+          }
+
+          function mapEase(ease) {
+            if (!ease || ease === "none") return "linear";
+            if (typeof ease === "function") return ease;
+            var compact = String(ease).replace(/\s+/g, "");
+            var power = compact.match(/^power([1-4])\.(in|out|inOut)$/);
+            if (power) {
+              var names = { 1: "Quad", 2: "Cubic", 3: "Quart", 4: "Quint" };
+              var dirs = { in: "in", out: "out", inOut: "inOut" };
+              return dirs[power[2]] + names[power[1]];
+            }
+            var family = compact.match(/^(sine|expo|back)\.(in|out|inOut)(\(.*\))?$/);
+            if (family) {
+              var familyNames = { sine: "Sine", expo: "Expo", back: "Back" };
+              var familyDirs = { in: "in", out: "out", inOut: "inOut" };
+              return familyDirs[family[2]] + familyNames[family[1]] + (family[3] || "");
+            }
+            return ease;
+          }
+
+          function inOutSine(t) {
+            return -(Math.cos(Math.PI * t) - 1) / 2;
+          }
+
+          function segmentEase(ease, endProgress) {
+            var endValue = ease(endProgress);
+            return function (t) {
+              return endValue === 0 ? 0 : ease(t * endProgress) / endValue;
+            };
+          }
+
+          function resolveTarget(target) {
+            if (!Array.isArray(target)) return target;
+            return target.reduce(function (items, item) {
+              if (typeof item === "string") {
+                return items.concat(Array.from(document.querySelectorAll(item)));
+              }
+              items.push(item);
+              return items;
+            }, []);
+          }
+
+          function isCssTarget(target) {
+            return (
+              typeof target === "string" ||
+              target instanceof Element ||
+              target instanceof NodeList ||
+              Array.isArray(target)
+            );
+          }
+
+          function propName(target, key) {
+            if (!isCssTarget(target)) return key;
+            var props = {
+              x: "translateX",
+              y: "translateY",
+              z: "translateZ",
+              rotationY: "rotateY",
+              scale: "scale",
+            };
+            return props[key] || key;
+          }
+
+          function staggerDelay(value) {
+            if (typeof value === "number") return anime.stagger(toMs(value));
+            if (value && typeof value === "object") {
+              var options = {};
+              Object.keys(value).forEach(function (key) {
+                options[key] = key === "each" || key === "amount" ? toMs(value[key]) : value[key];
+                if (key === "ease") options[key] = mapEase(value[key]);
+              });
+              return anime.stagger(options.each || 0, options);
+            }
+            return value;
+          }
+
+          function normalize(target, vars) {
+            var out = {};
+            Object.keys(vars).forEach(function (key) {
+              if (key === "duration" || key === "delay") out[key] = toMs(vars[key]);
+              else if (key === "ease") out.ease = mapEase(vars[key]);
+              else if (key === "stagger") out.delay = staggerDelay(vars[key]);
+              else if (key !== "yoyo" && key !== "repeat" && key !== "overwrite")
+                out[propName(target, key)] = vars[key];
+            });
+            return out;
+          }
+
+          function addSet(target, vars, position) {
+            var resolved = resolveTarget(target);
+            tl.add(
+              resolved,
+              Object.assign(normalize(target, vars), { duration: 0 }),
+              toMs(position || 0),
+            );
+          }
+
+          function addTo(target, vars, position) {
+            var resolved = resolveTarget(target);
+            tl.add(resolved, normalize(target, vars), toMs(position || 0));
+          }
+
+          function addFromTo(target, fromVars, toVars, position) {
+            addSet(target, fromVars, position);
+            addTo(target, toVars, position);
+          }
 
           var wrapper = document.querySelector(S + " .card-wrapper");
           var scene = document.querySelector(S + " .scene");
@@ -2509,8 +2619,8 @@
           // ─────────────────────────────────────────────────────
           // INITIAL STATE
           // ─────────────────────────────────────────────────────
-          gsap.set(wrapper, { opacity: 0, scale: 0.74, rotationY: 0, y: 24 });
-          gsap.set(
+          addSet(wrapper, { opacity: 0, scale: 0.74, rotationY: 0, y: 24 });
+          addSet(
             [
               S + " .fig-toolbar",
               S + " .fig-layers",
@@ -2521,53 +2631,53 @@
             ],
             { opacity: 0 },
           );
-          gsap.set(S + " .fig-toolbar", { y: -10 });
-          gsap.set(S + " .fig-layers", { x: -16 });
-          gsap.set(S + " .fig-props", { x: 16 });
-          gsap.set(S + " .layer-item", { x: -8 });
-          gsap.set(S + " .artboard", { scale: 0.94, opacity: 0 });
+          addSet(S + " .fig-toolbar", { y: -10 });
+          addSet(S + " .fig-layers", { x: -16 });
+          addSet(S + " .fig-props", { x: 16 });
+          addSet(S + " .layer-item", { x: -8 });
+          addSet(S + " .artboard", { scale: 0.94, opacity: 0 });
 
           // ═════════════════════════════════════════════════════
           // PHASE 0 — LOGO INTRO  (0 – 1.35s)
           // Stroke draw cascade → color fill flash → scale to 0
           // ═════════════════════════════════════════════════════
 
-          tl.to(
+          addTo(
             S + " .il-stroke-1",
             { strokeDashoffset: 0, duration: 0.4, ease: "power1.inOut" },
             0.0,
           );
-          tl.to(
+          addTo(
             S + " .il-stroke-2",
             { strokeDashoffset: 0, duration: 0.4, ease: "power1.inOut" },
             0.06,
           );
-          tl.to(
+          addTo(
             S + " .il-stroke-3",
             { strokeDashoffset: 0, duration: 0.4, ease: "power1.inOut" },
             0.12,
           );
-          tl.to(
+          addTo(
             S + " .il-stroke-4",
             { strokeDashoffset: 0, duration: 0.4, ease: "power1.inOut" },
             0.18,
           );
-          tl.to(
+          addTo(
             S + " .il-stroke-5",
             { strokeDashoffset: 0, duration: 0.4, ease: "power1.inOut" },
             0.24,
           );
 
-          tl.to(S + " .il-fill-1", { opacity: 1, duration: 0.08 }, 0.5);
-          tl.to(S + " .il-fill-2", { opacity: 1, duration: 0.08 }, 0.54);
-          tl.to(S + " .il-fill-3", { opacity: 1, duration: 0.08 }, 0.58);
-          tl.to(S + " .il-fill-4", { opacity: 1, duration: 0.08 }, 0.62);
-          tl.to(S + " .il-fill-5", { opacity: 1, duration: 0.08 }, 0.66);
-          tl.to(S + " .il-stroke", { opacity: 0.3, duration: 0.15 }, 0.6);
+          addTo(S + " .il-fill-1", { opacity: 1, duration: 0.08 }, 0.5);
+          addTo(S + " .il-fill-2", { opacity: 1, duration: 0.08 }, 0.54);
+          addTo(S + " .il-fill-3", { opacity: 1, duration: 0.08 }, 0.58);
+          addTo(S + " .il-fill-4", { opacity: 1, duration: 0.08 }, 0.62);
+          addTo(S + " .il-fill-5", { opacity: 1, duration: 0.08 }, 0.66);
+          addTo(S + " .il-stroke", { opacity: 0.3, duration: 0.15 }, 0.6);
 
           // Scale the logo down to nothing
-          tl.to(S + " .il-stroke", { opacity: 0, duration: 0.2 }, 1.0);
-          tl.to(
+          addTo(S + " .il-stroke", { opacity: 0, duration: 0.2 }, 1.0);
+          addTo(
             S + " .intro-logo",
             {
               scale: 0,
@@ -2583,7 +2693,7 @@
           // ═════════════════════════════════════════════════════
           var T = 1.5;
 
-          tl.to(
+          addTo(
             wrapper,
             {
               opacity: 1,
@@ -2595,7 +2705,7 @@
             T + 0.0,
           );
 
-          tl.to(
+          addTo(
             cardGlow,
             {
               opacity: 0.5,
@@ -2605,7 +2715,7 @@
             T + 0.05,
           );
 
-          tl.to(
+          addTo(
             S + " .fig-toolbar",
             {
               opacity: 1,
@@ -2616,7 +2726,7 @@
             T + 0.23,
           );
 
-          tl.to(
+          addTo(
             S + " .fig-layers",
             {
               opacity: 1,
@@ -2627,7 +2737,7 @@
             T + 0.35,
           );
 
-          tl.to(
+          addTo(
             S + " .fig-props",
             {
               opacity: 1,
@@ -2638,7 +2748,7 @@
             T + 0.37,
           );
 
-          tl.to(
+          addTo(
             S + " .fig-canvas",
             {
               opacity: 1,
@@ -2648,7 +2758,7 @@
             T + 0.45,
           );
 
-          tl.to(
+          addTo(
             S + " .artboard",
             {
               opacity: 1,
@@ -2659,7 +2769,7 @@
             T + 0.5,
           );
 
-          tl.to(
+          addTo(
             S + " .layer-item",
             {
               opacity: 1,
@@ -2671,7 +2781,7 @@
             T + 0.57,
           );
 
-          tl.to(
+          addTo(
             S + " .selection-ring",
             {
               opacity: 1,
@@ -2686,7 +2796,7 @@
           // Bigger zoom: 0.79 → 1.15 so the UI fills the frame
           // ═════════════════════════════════════════════════════
 
-          tl.to(
+          addTo(
             wrapper,
             {
               scale: 1.15,
@@ -2696,7 +2806,7 @@
             3.5,
           );
 
-          tl.to(
+          addTo(
             cardGlow,
             {
               opacity: 0.85,
@@ -2712,7 +2822,7 @@
           // Steeper angle (-34°) for more dramatic depth reveal
           // ═════════════════════════════════════════════════════
 
-          tl.to(
+          addTo(
             wrapper,
             {
               rotationY: -34,
@@ -2722,7 +2832,7 @@
             4.2,
           );
 
-          tl.to(
+          addTo(
             wrapper,
             {
               y: -16,
@@ -2736,7 +2846,7 @@
           // PHASE 4 — 3D HOLD  (5.55 – 7.3s)
           // ═════════════════════════════════════════════════════
 
-          tl.to(
+          addTo(
             wrapper,
             {
               y: -8,
@@ -2747,7 +2857,7 @@
             5.55,
           );
 
-          tl.to(
+          addTo(
             wrapper,
             {
               y: -20,
@@ -2758,16 +2868,17 @@
             6.45,
           );
 
-          tl.to(
+          addTo(cardGlow, { opacity: 0.7, duration: 0.9, ease: "sine.inOut" }, 5.55);
+          var glowReturnProgress = (7.3 - 6.45) / 0.9;
+          var glowOpacityAtExit = 0.7 + (0.85 - 0.7) * inOutSine(glowReturnProgress);
+          addTo(
             cardGlow,
             {
-              opacity: 0.7,
-              duration: 0.9,
-              ease: "sine.inOut",
-              yoyo: true,
-              repeat: 1,
+              opacity: glowOpacityAtExit,
+              duration: 0.85,
+              ease: segmentEase(inOutSine, glowReturnProgress),
             },
-            5.55,
+            6.45,
           );
 
           // ═════════════════════════════════════════════════════
@@ -2777,7 +2888,7 @@
           // dramatic 3D exit — card turns away and vanishes.
           // ═════════════════════════════════════════════════════
 
-          tl.to(
+          addTo(
             scene,
             {
               x: -2200,
@@ -2787,7 +2898,7 @@
             7.3,
           );
 
-          tl.to(
+          addTo(
             wrapper,
             {
               z: -7500,
@@ -2798,7 +2909,7 @@
             7.3,
           );
 
-          tl.to(
+          addTo(
             cardGlow,
             {
               opacity: 0,
@@ -2813,51 +2924,51 @@
           // ═════════════════════════════════════════════════════
           var O = 7.9;
 
-          tl.set(S + " .outro-layer", { opacity: 1 }, O);
+          addSet(S + " .outro-layer", { opacity: 1 }, O);
 
           // Stroke draw cascade
-          tl.to(
+          addTo(
             S + " .ol-stroke-1",
             { strokeDashoffset: 0, duration: 0.8, ease: "power1.inOut" },
             O + 0.0,
           );
-          tl.to(
+          addTo(
             S + " .ol-stroke-2",
             { strokeDashoffset: 0, duration: 0.8, ease: "power1.inOut" },
             O + 0.15,
           );
-          tl.to(
+          addTo(
             S + " .ol-stroke-3",
             { strokeDashoffset: 0, duration: 0.8, ease: "power1.inOut" },
             O + 0.3,
           );
-          tl.to(
+          addTo(
             S + " .ol-stroke-4",
             { strokeDashoffset: 0, duration: 0.8, ease: "power1.inOut" },
             O + 0.45,
           );
-          tl.to(
+          addTo(
             S + " .ol-stroke-5",
             { strokeDashoffset: 0, duration: 0.8, ease: "power1.inOut" },
             O + 0.6,
           );
 
           // Color fill cascade
-          tl.to(S + " .ol-fill-1", { opacity: 1, duration: 0.15, ease: "power1.out" }, O + 1.4);
-          tl.to(S + " .ol-fill-2", { opacity: 1, duration: 0.15, ease: "power1.out" }, O + 1.55);
-          tl.to(S + " .ol-fill-3", { opacity: 1, duration: 0.15, ease: "power1.out" }, O + 1.7);
-          tl.to(S + " .ol-fill-4", { opacity: 1, duration: 0.15, ease: "power1.out" }, O + 1.85);
-          tl.to(S + " .ol-fill-5", { opacity: 1, duration: 0.15, ease: "power1.out" }, O + 2.0);
-          tl.to(S + " .ol-stroke", { opacity: 0.3, duration: 0.4, ease: "none" }, O + 1.8);
+          addTo(S + " .ol-fill-1", { opacity: 1, duration: 0.15, ease: "power1.out" }, O + 1.4);
+          addTo(S + " .ol-fill-2", { opacity: 1, duration: 0.15, ease: "power1.out" }, O + 1.55);
+          addTo(S + " .ol-fill-3", { opacity: 1, duration: 0.15, ease: "power1.out" }, O + 1.7);
+          addTo(S + " .ol-fill-4", { opacity: 1, duration: 0.15, ease: "power1.out" }, O + 1.85);
+          addTo(S + " .ol-fill-5", { opacity: 1, duration: 0.15, ease: "power1.out" }, O + 2.0);
+          addTo(S + " .ol-stroke", { opacity: 0.3, duration: 0.4, ease: "none" }, O + 1.8);
 
           // Subtle scale settle
-          tl.fromTo(
+          addFromTo(
             S + " .outro-logo",
             { scale: 1, transformOrigin: "80px 120px" },
             { scale: 1.04, duration: 0.2, ease: "power2.out" },
             O + 2.3,
           );
-          tl.to(
+          addTo(
             S + " .outro-logo",
             {
               scale: 1,
@@ -2871,7 +2982,7 @@
           // Tagline letter stagger
           var letters = document.querySelectorAll(S + " .otl");
           for (var k = 0; k < letters.length; k++) {
-            tl.fromTo(
+            addFromTo(
               letters[k],
               { opacity: 0, y: 8 },
               { opacity: 1, y: 0, duration: 0.12, ease: "power2.out" },
@@ -2880,7 +2991,7 @@
           }
 
           // URL pill: stroke draw → fill → text
-          tl.to(
+          addTo(
             S + " .url-border",
             {
               strokeDashoffset: 0,
@@ -2889,11 +3000,11 @@
             },
             O + 3.8,
           );
-          tl.to(S + " .url-bg", { opacity: 1, duration: 0.15 }, O + 4.15);
-          tl.to(S + " .url-text", { opacity: 1, duration: 0.2 }, O + 4.2);
+          addTo(S + " .url-bg", { opacity: 1, duration: 0.15 }, O + 4.15);
+          addTo(S + " .url-text", { opacity: 1, duration: 0.2 }, O + 4.2);
 
           // Fade to black
-          tl.to(
+          addTo(
             S + " .outro-fade",
             {
               opacity: 1,
@@ -2903,8 +3014,7 @@
             O + 4.8,
           );
 
-          window.__timelines = window.__timelines || {};
-          window.__timelines["ui-3d-reveal"] = tl;
+          hyperframesAnime.register("ui-3d-reveal", tl, { labels: {} });
         })();
       </script>
     </div>
diff --git a/registry/blocks/vfx-iphone-device/vfx-iphone-device.html b/registry/blocks/vfx-iphone-device/vfx-iphone-device.html
index 4902b729e7..27216eb01c 100644
--- a/registry/blocks/vfx-iphone-device/vfx-iphone-device.html
+++ b/registry/blocks/vfx-iphone-device/vfx-iphone-device.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=1920, height=1080" />
     <title>Devices Canvas — HTML-in-Canvas API Showcase</title>
-    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/animejs@4.5.0/dist/bundles/anime.umd.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/loaders/DRACOLoader.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/loaders/GLTFLoader.js"></script>
@@ -618,8 +618,8 @@
           requestAnimationFrame(function () {
             paintReady = true;
             captureScreens();
-            window.__timelines = window.__timelines || {};
-            window.__timelines["devices-canvas"] = tl;
+            tl.seek(tl.currentTime || 0);
+            render();
           });
         });
       }
@@ -718,7 +718,7 @@
         lapGrp.rotation.set(S.lpRX, S.lpRY, S.lpRZ);
         turntable.rotation.y = S.turn;
         // Single morphing glass — orbits around device edges, never overlaps screen
-        var t = tl.time();
+        var t = tl.currentTime / 1000;
         var geoIdx = Math.floor(d * 0.8) % glassGeos.length;
         if (glassLens.geometry !== glassGeos[geoIdx]) glassLens.geometry = glassGeos[geoIdx];
         glassLens.rotation.set(d * 0.7, d * 0.9, d * 0.4);
@@ -756,64 +756,99 @@
         renderer.render(scene, camera);
       }
 
-      // ── GSAP Timeline — Product Review Edit ────────────────────────────
-      // __timelines created in onReady() after GLTF models load
-      var tl = gsap.timeline({ paused: true });
+      function toMs(seconds) {
+        return seconds * 1000;
+      }
 
-      tl.to(S, { p: 1, drift: 15, duration: 15, ease: "none", onUpdate: render }, 0);
+      function addTo(target, vars, position) {
+        var out = {};
+        Object.keys(vars).forEach(function (key) {
+          if (key === "duration" || key === "delay") out[key] = toMs(vars[key]);
+          else if (key === "ease" && vars[key] === "none") out.ease = "linear";
+          else out[key] = vars[key];
+        });
+        tl.add(target, out, toMs(position || 0));
+      }
+
+      function segmentEase(ease, endProgress) {
+        var endValue = ease(endProgress);
+        return function (t) {
+          return endValue === 0 ? 0 : ease(t * endProgress) / endValue;
+        };
+      }
+
+      // ── Anime Timeline — Product Review Edit ───────────────────────────
+      var tl = anime.createTimeline({
+        autoplay: false,
+        onUpdate: render,
+      });
+
+      addTo(S, { p: 1, drift: 15, duration: 15, ease: "none" }, 0);
 
       // ── Act 1 (0–3.5s): iPhone FRONT — hero close-up showing hyperframes.dev
-      tl.to(S, { phRY: PI + 0.06, phRX: 0.015, duration: 1.5, ease: breatheEase }, 0.3);
-      tl.to(S, { phRY: PI - 0.04, phRX: -0.01, duration: 1.5, ease: breatheEase }, 1.8);
+      addTo(S, { phRY: PI + 0.06, phRX: 0.015, duration: 1.5, ease: breatheEase }, 0.3);
+      addTo(S, { phRY: PI - 0.04, phRX: -0.01, duration: 1.5, ease: breatheEase }, 1.8);
 
       // ── Act 2 (3.5–7s): iPhone spins 180° to show BACK (camera, titanium, Apple logo)
-      tl.to(S, { phRY: PI * 2, duration: 2.2, ease: spinEase }, 3.5);
-      tl.to(S, { cZ: 4.8, cY: 0.25, duration: 2, ease: driftEase }, 3.5);
+      var phRYSpinProgress = 2 / 2.2;
+      var phRYSpinBoundary = PI - 0.04 + (PI * 2 - (PI - 0.04)) * spinEase(phRYSpinProgress);
+      addTo(
+        S,
+        { phRY: phRYSpinBoundary, duration: 2, ease: segmentEase(spinEase, phRYSpinProgress) },
+        3.5,
+      );
+      addTo(S, { cZ: 4.8, cY: 0.25, duration: 2, ease: driftEase }, 3.5);
       // Hold back view — slight orbit to appreciate hardware
-      tl.to(
+      addTo(
         S,
         { phRY: PI * 2 + 0.15, phRX: 0.04, cX: 0.15, duration: 1.5, ease: breatheEase },
         5.5,
       );
 
       // ── Act 3 (7–9s): iPhone spins back to front, then exits LEFT off screen
-      tl.to(S, { phRY: PI * 3, duration: 1.8, ease: snapEase }, 7);
-      tl.to(S, { cZ: 3.5, cY: 0.2, duration: 1.5, ease: driftEase }, 7);
-      tl.to(S, { phX: -6, phZ: 0.3, duration: 2, ease: spinEase }, 8);
+      addTo(S, { phRY: PI * 3, duration: 1.8, ease: snapEase }, 7);
+      addTo(S, { cZ: 3.5, cY: 0.2, duration: 1.5, ease: driftEase }, 7);
+      addTo(S, { phX: -6, phZ: 0.3, duration: 2, ease: spinEase }, 8);
 
       // ── Act 4 (9–11s): MacBook enters from right, hero close-up
-      tl.to(S, { lpX: 0, duration: 2, ease: enterEase }, 9);
-      tl.to(S, { cX: 0, clX: 0, cZ: 5, cY: 0.3, clY: -0.1, duration: 2, ease: driftEase }, 9);
-      tl.to(S, { lpRY: 0.06, duration: 1.5, ease: breatheEase }, 10);
+      addTo(S, { lpX: 0, duration: 2, ease: enterEase }, 9);
+      addTo(S, { cX: 0, clX: 0, cZ: 5, cY: 0.3, clY: -0.1, duration: 2, ease: driftEase }, 9);
+      var lpRYEntryProgress = 1 / 1.5;
+      var lpRYEntryBoundary = 0.06 * breatheEase(lpRYEntryProgress);
+      addTo(
+        S,
+        { lpRY: lpRYEntryBoundary, duration: 1, ease: segmentEase(breatheEase, lpRYEntryProgress) },
+        10,
+      );
 
       // ── Act 5 (11–12.5s): iPhone returns, both settle for turntable
-      tl.to(S, { phX: -2.0, duration: 1.5, ease: enterEase }, 11);
-      tl.to(S, { lpX: 2.2, duration: 1.5, ease: breatheEase }, 11);
-      tl.to(
+      addTo(S, { phX: -2.0, duration: 1.5, ease: enterEase }, 11);
+      addTo(S, { lpX: 2.2, duration: 1.5, ease: breatheEase }, 11);
+      addTo(
         S,
         { cX: 0.1, clX: 0.1, cZ: 7.5, cY: 0.5, clY: -0.1, duration: 1.5, ease: driftEase },
         11,
       );
-      tl.to(S, { phRY: PI * 3, lpRY: 0, duration: 1, ease: breatheEase }, 11);
+      addTo(S, { phRY: PI * 3, lpRY: 0, duration: 1, ease: breatheEase }, 11);
 
       // ── Act 6 (12.5–15s): 360° turntable — both devices rotate together
-      tl.to(S, { turn: PI * 2, duration: 2.5, ease: spinEase }, 12.5);
+      addTo(S, { turn: PI * 2, duration: 2.5, ease: spinEase }, 12.5);
 
       // ── Live HTML Animations (captured to 3D textures every frame) ──
       // Title fade in
-      tl.to(S, { titleFade: 1, duration: 0.8, ease: breatheEase }, 0.3);
+      addTo(S, { titleFade: 1, duration: 0.8, ease: breatheEase }, 0.3);
       // Counter animates up
-      tl.to(S, { counter: 43, duration: 2, ease: driftEase }, 0.5);
+      addTo(S, { counter: 43, duration: 2, ease: driftEase }, 0.5);
       // Cards stagger in (0→1 reveals all cards sequentially)
-      tl.to(S, { cardReveal: 1, duration: 3, ease: breatheEase }, 0.8);
+      addTo(S, { cardReveal: 1, duration: 3, ease: breatheEase }, 0.8);
       // Scroll during hero shots
-      tl.to(S, { scroll: 0.6, duration: 3, ease: breatheEase }, 1.5);
-      tl.to(S, { scroll: 0, duration: 1.5, ease: driftEase }, 7);
+      addTo(S, { scroll: 0.6, duration: 3, ease: breatheEase }, 1.5);
+      addTo(S, { scroll: 0, duration: 1.5, ease: driftEase }, 7);
       // Scroll on MacBook reveal
-      tl.to(S, { scroll: 0.8, duration: 3, ease: breatheEase }, 9.5);
-      tl.to(S, { scroll: 0.3, duration: 2, ease: driftEase }, 13);
+      addTo(S, { scroll: 0.8, duration: 3, ease: breatheEase }, 9.5);
+      addTo(S, { scroll: 0.3, duration: 2, ease: driftEase }, 13);
 
-      // __timelines registered in onReady() after GLTF models load
+      hyperframesAnime.register("devices-canvas", tl, { labels: {} });
     </script>
   </body>
 </html>
diff --git a/registry/blocks/vfx-liquid-background/vfx-liquid-background.html b/registry/blocks/vfx-liquid-background/vfx-liquid-background.html
index c0f1b7a026..9180103615 100644
--- a/registry/blocks/vfx-liquid-background/vfx-liquid-background.html
+++ b/registry/blocks/vfx-liquid-background/vfx-liquid-background.html
@@ -518,13 +518,11 @@
       </style>
 
       <!-- ═══════════════ SCRIPTS ═══════════════ -->
-      <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+      <script src="https://cdn.jsdelivr.net/npm/animejs@4.5.0/dist/bundles/anime.umd.min.js"></script>
       <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js"></script>
 
       <script>
-        window.__timelines = window.__timelines || {};
-
-        setTimeout(function () {
+        (function () {
           // ── Capture panel textures via html2canvas-like rasterization ──
           // We use hidden canvases + drawImage of the panels for texture source.
           // Since drawElementImage requires chrome flags, we rasterize the panels
@@ -1052,14 +1050,51 @@
             renderer.render(scene, camera);
           }
 
+          function toMs(seconds) {
+            return seconds * 1000;
+          }
+
+          function mapEase(ease) {
+            if (!ease || ease === "none") return "linear";
+            var compact = String(ease).replace(/\s+/g, "");
+            var family = compact.match(/^(power[1-4]|sine)\.(in|out|inOut)$/);
+            if (family) {
+              var names = {
+                power1: "Quad",
+                power2: "Cubic",
+                power3: "Quart",
+                power4: "Quint",
+                sine: "Sine",
+              };
+              var dirs = { in: "in", out: "out", inOut: "inOut" };
+              return dirs[family[2]] + names[family[1]];
+            }
+            return ease;
+          }
+
+          function addTo(target, vars, position) {
+            var out = {};
+            Object.keys(vars).forEach(function (key) {
+              if (key === "duration" || key === "delay") out[key] = toMs(vars[key]);
+              else if (key === "ease") out.ease = mapEase(vars[key]);
+              else out[key] = vars[key];
+            });
+            tl.add(target, out, toMs(position || 0));
+          }
+
           // ═══════════════════════════════════════════════════════
-          // GSAP DRIVER TIMELINE
+          // ANIME DRIVER TIMELINE
           // ═══════════════════════════════════════════════════════
 
-          var tl = gsap.timeline({ paused: true });
+          var tl = anime.createTimeline({
+            autoplay: false,
+            onUpdate: function () {
+              renderAt(tl.currentTime / 1000);
+            },
+          });
 
           // Phase 1 (0-2s): Panel A appears, gentle waves begin
-          tl.to(
+          addTo(
             uniforms.uWaveIntensity,
             {
               value: 1.0,
@@ -1069,7 +1104,7 @@
             0,
           );
 
-          tl.to(
+          addTo(
             uniforms.uRippleIntensity,
             {
               value: 0.6,
@@ -1080,7 +1115,7 @@
           );
 
           // Phase 2 (2-4.5s): Waves flowing, camera tilts slightly
-          tl.to(
+          addTo(
             camera.rotation,
             {
               x: 0.06,
@@ -1092,7 +1127,7 @@
           );
 
           // Phase 3 (4.5-5.5s): Waves intensify for transition
-          tl.to(
+          addTo(
             uniforms.uWaveIntensity,
             {
               value: 2.5,
@@ -1102,7 +1137,7 @@
             4.5,
           );
 
-          tl.to(
+          addTo(
             uniforms.uRippleIntensity,
             {
               value: 2.0,
@@ -1113,7 +1148,7 @@
           );
 
           // Phase 4 (5-7s): Crossfade from Panel A to Panel B
-          tl.to(
+          addTo(
             uniforms.uMix,
             {
               value: 1.0,
@@ -1124,7 +1159,7 @@
           );
 
           // Phase 5 (6.5-8.5s): Waves settle back down
-          tl.to(
+          addTo(
             uniforms.uWaveIntensity,
             {
               value: 1.0,
@@ -1134,7 +1169,7 @@
             6.5,
           );
 
-          tl.to(
+          addTo(
             uniforms.uRippleIntensity,
             {
               value: 0.5,
@@ -1145,7 +1180,7 @@
           );
 
           // Camera returns to center
-          tl.to(
+          addTo(
             camera.rotation,
             {
               x: -0.03,
@@ -1157,28 +1192,28 @@
           );
 
           // Phase 6 (9-11s): Gentle breathing waves on Panel B
-          tl.to(
+          addTo(
             uniforms.uWaveIntensity,
             {
-              value: 0.7,
-              duration: 2.0,
+              value: 0.7439339828220179,
+              duration: 1.5,
               ease: "sine.inOut",
             },
             9,
           );
 
-          tl.to(
+          addTo(
             uniforms.uRippleIntensity,
             {
-              value: 0.3,
-              duration: 2.0,
+              value: 0.3292893218813453,
+              duration: 1.5,
               ease: "sine.inOut",
             },
             9,
           );
 
           // Phase 7 (10.5-12s): Waves fade to still
-          tl.to(
+          addTo(
             uniforms.uWaveIntensity,
             {
               value: 0.0,
@@ -1188,7 +1223,7 @@
             10.5,
           );
 
-          tl.to(
+          addTo(
             uniforms.uRippleIntensity,
             {
               value: 0.0,
@@ -1198,7 +1233,7 @@
             10.5,
           );
 
-          tl.to(
+          addTo(
             camera.rotation,
             {
               x: 0,
@@ -1209,35 +1244,14 @@
             10.5,
           );
 
-          // Driver tween: runs the full 12s, drives uTime and renders each frame
-          tl.to(
-            { frame: 0 },
-            {
-              frame: 1,
-              duration: 12,
-              ease: "none",
-              onUpdate: function () {
-                var time = tl.time();
-                uniforms.uTime.value = time;
-                renderer.render(scene, camera);
-              },
-            },
-            0,
-          );
+          // Driver tween: runs the full 12s; render time comes from the timeline.
+          addTo({ frame: 0 }, { frame: 1, duration: 12, ease: "none" }, 0);
 
-          window.__timelines["vfx-liquid-background"] = tl;
-
-          // ── hf-seek integration for Three.js adapter ──
-          window.addEventListener("hf-seek", function (e) {
-            var t = e.detail.time;
-            tl.seek(t);
-            uniforms.uTime.value = t;
-            renderer.render(scene, camera);
-          });
+          hyperframesAnime.register("vfx-liquid-background", tl, { labels: {} });
 
           // Initial render
           renderAt(0);
-        }, 0);
+        })();
       </script>
     </div>
   </body>
diff --git a/registry/blocks/vfx-liquid-glass/vfx-liquid-glass.html b/registry/blocks/vfx-liquid-glass/vfx-liquid-glass.html
index 2ac7ac0543..19941914e5 100644
--- a/registry/blocks/vfx-liquid-glass/vfx-liquid-glass.html
+++ b/registry/blocks/vfx-liquid-glass/vfx-liquid-glass.html
@@ -8,7 +8,7 @@
       href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap"
       rel="stylesheet"
     />
-    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/animejs@4.5.0/dist/bundles/anime.umd.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/shaders/CopyShader.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/shaders/LuminosityHighPassShader.js"></script>
@@ -633,7 +633,7 @@
       var grainPass = new THREE.ShaderPass(GrainShader);
       composer.addPass(grainPass);
 
-      // ── Pointer State (GSAP-animated, replaces mouse) ──────────────────
+      // ── Pointer State (timeline-animated, replaces mouse) ──────────────
       var ptr = { x: 0.16, y: 0.04 };
       var REVEAL_R = 2.18;
       var PTR_WORLD = new THREE.Vector2();
@@ -720,27 +720,59 @@
         composer.render();
       }
 
-      // ── GSAP Timeline ──────────────────────────────────────────────────
-      window.__timelines = window.__timelines || {};
-      var tl = gsap.timeline({ paused: true });
+      function toMs(seconds) {
+        return seconds * 1000;
+      }
 
-      tl.to({ _: 0 }, { _: 1, duration: DURATION, ease: "none" }, 0);
+      function mapEase(ease) {
+        if (!ease || ease === "none") return "linear";
+        var compact = String(ease).replace(/\s+/g, "");
+        var family = compact.match(/^(power[1-4]|sine)\.(in|out|inOut)$/);
+        if (family) {
+          var names = {
+            power1: "Quad",
+            power2: "Cubic",
+            power3: "Quart",
+            power4: "Quint",
+            sine: "Sine",
+          };
+          var dirs = { in: "in", out: "out", inOut: "inOut" };
+          return dirs[family[2]] + names[family[1]];
+        }
+        return ease;
+      }
 
-      // Pointer choreography — smooth wandering reveal
-      tl.set(ptr, { x: 0.16, y: 0.04 }, 0);
-      tl.to(ptr, { x: 0.45, y: -0.15, duration: 3.5, ease: "sine.inOut" }, 0.5);
-      tl.to(ptr, { x: -0.35, y: 0.25, duration: 3.5, ease: "sine.inOut" }, 4);
-      tl.to(ptr, { x: 0.15, y: -0.35, duration: 3, ease: "sine.inOut" }, 7.5);
-      tl.to(ptr, { x: -0.45, y: 0.05, duration: 3, ease: "sine.inOut" }, 10.5);
-      tl.to(ptr, { x: 0.3, y: 0.2, duration: 3, ease: "sine.inOut" }, 13.5);
-      tl.to(ptr, { x: -0.1, y: -0.1, duration: 2.5, ease: "sine.inOut" }, 16.5);
-      tl.to(ptr, { x: 0.16, y: 0.04, duration: 1, ease: "power2.inOut" }, 19);
+      function addTo(target, vars, position) {
+        var out = {};
+        Object.keys(vars).forEach(function (key) {
+          if (key === "duration" || key === "delay") out[key] = toMs(vars[key]);
+          else if (key === "ease") out.ease = mapEase(vars[key]);
+          else out[key] = vars[key];
+        });
+        tl.add(target, out, toMs(position || 0));
+      }
 
-      tl.eventCallback("onUpdate", function () {
-        renderScene(tl.time());
+      // ── Anime Timeline ─────────────────────────────────────────────────
+      var tl = anime.createTimeline({
+        autoplay: false,
+        onUpdate: function () {
+          renderScene(tl.currentTime / 1000);
+        },
       });
 
-      window.__timelines["liquid-glass"] = tl;
+      addTo({ _: 0 }, { _: 1, duration: DURATION, ease: "none" }, 0);
+
+      // Pointer choreography: smooth wandering reveal.
+      addTo(ptr, { x: 0.16, y: 0.04, duration: 0.5, ease: "none" }, 0);
+      addTo(ptr, { x: 0.45, y: -0.15, duration: 3.5, ease: "sine.inOut" }, 0.5);
+      addTo(ptr, { x: -0.35, y: 0.25, duration: 3.5, ease: "sine.inOut" }, 4);
+      addTo(ptr, { x: 0.15, y: -0.35, duration: 3, ease: "sine.inOut" }, 7.5);
+      addTo(ptr, { x: -0.45, y: 0.05, duration: 3, ease: "sine.inOut" }, 10.5);
+      addTo(ptr, { x: 0.3, y: 0.2, duration: 3, ease: "sine.inOut" }, 13.5);
+      addTo(ptr, { x: -0.1, y: -0.1, duration: 2.5, ease: "sine.inOut" }, 16.5);
+      addTo(ptr, { x: 0.16, y: 0.04, duration: 1, ease: "power2.inOut" }, 19);
+
+      hyperframesAnime.register("liquid-glass", tl, { labels: {} });
 
       setTimeout(function () {
         captureBackdrop();
diff --git a/registry/blocks/vfx-magnetic/vfx-magnetic.html b/registry/blocks/vfx-magnetic/vfx-magnetic.html
index 521020e0a7..b956e8444c 100644
--- a/registry/blocks/vfx-magnetic/vfx-magnetic.html
+++ b/registry/blocks/vfx-magnetic/vfx-magnetic.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=1920, height=1080" />
     <title>Magnetic Cursor — HTML-in-Canvas</title>
-    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/animejs@4.5.0/dist/bundles/anime.umd.min.js"></script>
     <style>
       *,
       *::before,
@@ -385,64 +385,89 @@
         progress: 0,
       };
 
-      // ── GSAP Timeline ────────────────────────────────────────────────
-      window.__timelines = window.__timelines || {};
-      var tl = gsap.timeline({ paused: true });
+      function toMs(seconds) {
+        return seconds * 1000;
+      }
+
+      function mapEase(ease) {
+        if (!ease || ease === "none") return "linear";
+        var compact = String(ease).replace(/\s+/g, "");
+        var family = compact.match(/^(power[1-4]|sine)\.(in|out|inOut)$/);
+        if (family) {
+          var names = {
+            power1: "Quad",
+            power2: "Cubic",
+            power3: "Quart",
+            power4: "Quint",
+            sine: "Sine",
+          };
+          var dirs = { in: "in", out: "out", inOut: "inOut" };
+          return dirs[family[2]] + names[family[1]];
+        }
+        return ease;
+      }
+
+      function addTo(target, vars, position) {
+        var out = {};
+        Object.keys(vars).forEach(function (key) {
+          if (key === "duration" || key === "delay") out[key] = toMs(vars[key]);
+          else if (key === "ease") out.ease = mapEase(vars[key]);
+          else out[key] = vars[key];
+        });
+        tl.add(target, out, toMs(position || 0));
+      }
+
+      // ── Anime Timeline ───────────────────────────────────────────────
+      var tl = anime.createTimeline({
+        autoplay: false,
+        onUpdate: function () {
+          S.progress = tl.currentTime / toMs(15);
+          cursorDot.style.left = S.mouseX * W + "px";
+          cursorDot.style.top = S.mouseY * H + "px";
+          render(S.mouseX, S.mouseY, S.repel, S.strength);
+        },
+      });
 
       // Driver tween
-      tl.to(
-        S,
-        {
-          progress: 1,
-          duration: 15,
-          ease: "none",
-          onUpdate: function () {
-            // Update cursor dot position
-            cursorDot.style.left = S.mouseX * W + "px";
-            cursorDot.style.top = S.mouseY * H + "px";
-            render(S.mouseX, S.mouseY, S.repel, S.strength);
-          },
-        },
-        0,
-      );
+      addTo(S, { progress: 1, duration: 15, ease: "none" }, 0);
 
       // Cursor appears
-      tl.to(cursorDot, { opacity: 1, duration: 0.3 }, 0.5);
-      tl.to(S, { strength: 1, duration: 0.5, ease: "power2.out" }, 0.5);
+      addTo(cursorDot, { opacity: 1, duration: 0.3 }, 0.5);
+      addTo(S, { strength: 1, duration: 0.5, ease: "power2.out" }, 0.5);
 
       // Cursor path: smooth figure-8 across the page
       // Phase 1: sweep across heading
-      tl.to(S, { mouseX: 0.35, mouseY: 0.3, duration: 2, ease: "power1.inOut" }, 1);
-      tl.to(S, { mouseX: 0.6, mouseY: 0.35, duration: 2, ease: "power1.inOut" }, 3);
+      addTo(S, { mouseX: 0.35, mouseY: 0.3, duration: 2, ease: "power1.inOut" }, 1);
+      addTo(S, { mouseX: 0.6, mouseY: 0.35, duration: 2, ease: "power1.inOut" }, 3);
 
       // Phase 2: circle around text
-      tl.to(S, { mouseX: 0.4, mouseY: 0.5, duration: 1.5, ease: "sine.inOut" }, 5);
-      tl.to(S, { mouseX: 0.55, mouseY: 0.55, duration: 1.5, ease: "sine.inOut" }, 6.5);
+      addTo(S, { mouseX: 0.4, mouseY: 0.5, duration: 1.5, ease: "sine.inOut" }, 5);
+      addTo(S, { mouseX: 0.55, mouseY: 0.55, duration: 1.5, ease: "sine.inOut" }, 6.5);
 
       // Phase 3: repel pulse
-      tl.to(S, { repel: 1, duration: 0.2, ease: "power4.out" }, 8);
-      tl.to(S, { repel: 0, duration: 0.5, ease: "power2.out" }, 8.5);
+      addTo(S, { repel: 1, duration: 0.2, ease: "power4.out" }, 8);
+      addTo(S, { repel: 0, duration: 0.5, ease: "power2.out" }, 8.5);
 
       // Phase 4: sweep across cards
-      tl.to(S, { mouseX: 0.3, mouseY: 0.75, duration: 2, ease: "power1.inOut" }, 9);
-      tl.to(S, { mouseX: 0.65, mouseY: 0.72, duration: 2, ease: "power1.inOut" }, 11);
+      addTo(S, { mouseX: 0.3, mouseY: 0.75, duration: 2, ease: "power1.inOut" }, 9);
+      addTo(S, { mouseX: 0.65, mouseY: 0.72, duration: 2, ease: "power1.inOut" }, 11);
 
       // Phase 5: exit
-      tl.to(S, { mouseX: 0.8, mouseY: 0.2, duration: 1.5, ease: "power2.inOut" }, 13);
-      tl.to(S, { strength: 0, duration: 0.5 }, 14);
-      tl.to(cursorDot, { opacity: 0, duration: 0.3 }, 14.2);
+      addTo(S, { mouseX: 0.8, mouseY: 0.2, duration: 1.5, ease: "power2.inOut" }, 13);
+      addTo(S, { strength: 0, duration: 0.5 }, 14);
+      addTo(cursorDot, { opacity: 0, duration: 0.3 }, 14.2);
 
       // Subtitles
-      tl.to("#sub1", { opacity: 1, duration: 0.3 }, 1);
-      tl.to("#sub1", { opacity: 0, duration: 0.3 }, 3.5);
-      tl.to("#sub2", { opacity: 1, duration: 0.3 }, 4);
-      tl.to("#sub2", { opacity: 0, duration: 0.3 }, 6.5);
-      tl.to("#sub3", { opacity: 1, duration: 0.3 }, 7.5);
-      tl.to("#sub3", { opacity: 0, duration: 0.3 }, 9.5);
-      tl.to("#sub4", { opacity: 1, duration: 0.3 }, 10.5);
-      tl.to("#sub4", { opacity: 0, duration: 0.3 }, 13);
+      addTo("#sub1", { opacity: 1, duration: 0.3 }, 1);
+      addTo("#sub1", { opacity: 0, duration: 0.3 }, 3.5);
+      addTo("#sub2", { opacity: 1, duration: 0.3 }, 4);
+      addTo("#sub2", { opacity: 0, duration: 0.3 }, 6.5);
+      addTo("#sub3", { opacity: 1, duration: 0.3 }, 7.5);
+      addTo("#sub3", { opacity: 0, duration: 0.3 }, 9.5);
+      addTo("#sub4", { opacity: 1, duration: 0.3 }, 10.5);
+      addTo("#sub4", { opacity: 0, duration: 0.3 }, 13);
 
-      window.__timelines["magnetic-cursor"] = tl;
+      hyperframesAnime.register("magnetic-cursor", tl, { labels: {} });
 
       // Paint event for texture upload
       canvas.onpaint = function () {
diff --git a/registry/blocks/vfx-portal/vfx-portal.html b/registry/blocks/vfx-portal/vfx-portal.html
index aec7eb4b2c..ddafe7a348 100644
--- a/registry/blocks/vfx-portal/vfx-portal.html
+++ b/registry/blocks/vfx-portal/vfx-portal.html
@@ -8,7 +8,7 @@
       href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
       rel="stylesheet"
     />
-    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/animejs@4.5.0/dist/bundles/anime.umd.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js"></script>
     <style>
       *,
@@ -660,13 +660,73 @@
         time: 0.0,
       };
 
-      // ── GSAP Timeline ──────────────────────────────────────────────────
-      window.__timelines = window.__timelines || {};
-      var tl = gsap.timeline({ paused: true });
+      function toMs(seconds) {
+        return seconds * 1000;
+      }
+
+      function mapEase(ease) {
+        if (!ease || ease === "none") return "linear";
+        var compact = String(ease).replace(/\s+/g, "");
+        var family = compact.match(/^(power[1-4]|sine)\.(in|out|inOut)$/);
+        if (family) {
+          var names = {
+            power1: "Quad",
+            power2: "Cubic",
+            power3: "Quart",
+            power4: "Quint",
+            sine: "Sine",
+          };
+          var dirs = { in: "in", out: "out", inOut: "inOut" };
+          return dirs[family[2]] + names[family[1]];
+        }
+        return ease;
+      }
+
+      function addTo(target, vars, position) {
+        var out = {};
+        Object.keys(vars).forEach(function (key) {
+          if (key === "duration" || key === "delay") out[key] = toMs(vars[key]);
+          else if (key === "ease") out.ease = mapEase(vars[key]);
+          else out[key] = vars[key];
+        });
+        tl.add(target, out, toMs(position || 0));
+      }
+
+      function renderPortal(t) {
+        animState.time = t;
+
+        // Update portal shader uniforms
+        portalUniforms.portalRadius.value = animState.portalRadius;
+        portalUniforms.edgeWidth.value = animState.edgeWidth;
+        portalUniforms.chromaticStrength.value = animState.chromaticStrength;
+        portalUniforms.distortionStrength.value = animState.distortionStrength;
+        portalUniforms.time.value = t;
+        portalUniforms.energyIntensity.value = animState.energyIntensity;
+
+        // Update camera Z for push-through effect
+        camera.position.z = animState.cameraZ;
+
+        // Recalculate quad scale to always fill the view at current camera Z
+        var currentVFov = (camera.fov * Math.PI) / 180;
+        var currentH = 2 * Math.tan(currentVFov / 2) * camera.position.z;
+        var currentW = currentH * (W / H);
+        frontQuad.scale.set(currentW / quadW, currentH / quadH, 1);
+        darkQuad.scale.set(currentW / quadW, currentH / quadH, 1);
+
+        renderer.render(scene, camera);
+      }
+
+      // ── Anime Timeline ─────────────────────────────────────────────────
+      var tl = anime.createTimeline({
+        autoplay: false,
+        onUpdate: function () {
+          renderPortal(tl.currentTime / 1000);
+        },
+      });
 
       // Phase 1: Hold on light mode (0 - 1.5s)
       // Subtle energy buildup at center before portal opens
-      tl.to(
+      addTo(
         animState,
         {
           energyIntensity: 0.3,
@@ -677,7 +737,7 @@
       );
 
       // Phase 2: Portal tears open (1.5 - 5.0s)
-      tl.to(
+      addTo(
         animState,
         {
           portalRadius: 0.85,
@@ -687,7 +747,7 @@
         1.5,
       );
 
-      tl.to(
+      addTo(
         animState,
         {
           energyIntensity: 1.0,
@@ -697,7 +757,7 @@
         1.5,
       );
 
-      tl.to(
+      addTo(
         animState,
         {
           chromaticStrength: 0.035,
@@ -707,7 +767,7 @@
         1.5,
       );
 
-      tl.to(
+      addTo(
         animState,
         {
           distortionStrength: 0.06,
@@ -717,7 +777,7 @@
         1.5,
       );
 
-      tl.to(
+      addTo(
         animState,
         {
           edgeWidth: 0.08,
@@ -728,7 +788,7 @@
       );
 
       // Phase 3: Camera pushes through portal (3.5 - 6.5s)
-      tl.to(
+      addTo(
         animState,
         {
           cameraZ: 1.4,
@@ -739,7 +799,7 @@
       );
 
       // Phase 4: Portal overshoots to cover full screen (5.0 - 7.0s)
-      tl.to(
+      addTo(
         animState,
         {
           portalRadius: 1.8,
@@ -750,7 +810,7 @@
       );
 
       // Energy peaks then fades as we emerge
-      tl.to(
+      addTo(
         animState,
         {
           energyIntensity: 1.5,
@@ -760,7 +820,7 @@
         5.0,
       );
 
-      tl.to(
+      addTo(
         animState,
         {
           energyIntensity: 0.0,
@@ -771,7 +831,7 @@
       );
 
       // Chromatic aberration peaks during push-through
-      tl.to(
+      addTo(
         animState,
         {
           chromaticStrength: 0.06,
@@ -781,7 +841,7 @@
         5.5,
       );
 
-      tl.to(
+      addTo(
         animState,
         {
           chromaticStrength: 0.0,
@@ -792,7 +852,7 @@
       );
 
       // Distortion fades
-      tl.to(
+      addTo(
         animState,
         {
           distortionStrength: 0.0,
@@ -804,7 +864,7 @@
 
       // Phase 5: Settle in dark mode (7.0 - 10s)
       // Camera eases to final position
-      tl.to(
+      addTo(
         animState,
         {
           cameraZ: 2.8,
@@ -814,42 +874,9 @@
         7.0,
       );
 
-      // ── Render Loop via Timeline ───────────────────────────────────────
-      tl.to(
-        { v: 0 },
-        {
-          v: 1,
-          duration: 10,
-          ease: "none",
-          onUpdate: function () {
-            var t = tl.time();
-            animState.time = t;
+      addTo({ v: 0 }, { v: 1, duration: 10, ease: "none" }, 0);
 
-            // Update portal shader uniforms
-            portalUniforms.portalRadius.value = animState.portalRadius;
-            portalUniforms.edgeWidth.value = animState.edgeWidth;
-            portalUniforms.chromaticStrength.value = animState.chromaticStrength;
-            portalUniforms.distortionStrength.value = animState.distortionStrength;
-            portalUniforms.time.value = t;
-            portalUniforms.energyIntensity.value = animState.energyIntensity;
-
-            // Update camera Z for push-through effect
-            camera.position.z = animState.cameraZ;
-
-            // Recalculate quad scale to always fill the view at current camera Z
-            var currentVFov = (camera.fov * Math.PI) / 180;
-            var currentH = 2 * Math.tan(currentVFov / 2) * camera.position.z;
-            var currentW = currentH * (W / H);
-            frontQuad.scale.set(currentW / quadW, currentH / quadH, 1);
-            darkQuad.scale.set(currentW / quadW, currentH / quadH, 1);
-
-            renderer.render(scene, camera);
-          },
-        },
-        0,
-      );
-
-      window.__timelines["portal-transition"] = tl;
+      hyperframesAnime.register("portal-transition", tl, { labels: {} });
 
       // ── Deferred Init ──────────────────────────────────────────────────
       setTimeout(function () {
diff --git a/registry/blocks/vfx-shatter/vfx-shatter.html b/registry/blocks/vfx-shatter/vfx-shatter.html
index ab5a7dd211..0cbf310dc0 100644
--- a/registry/blocks/vfx-shatter/vfx-shatter.html
+++ b/registry/blocks/vfx-shatter/vfx-shatter.html
@@ -8,7 +8,7 @@
       href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap"
       rel="stylesheet"
     />
-    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/animejs@4.5.0/dist/bundles/anime.umd.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js"></script>
     <style>
       *,
@@ -1123,26 +1123,18 @@
         renderer.render(scene, camera);
       }
 
-      // ── GSAP Timeline ──────────────────────────────────────────────────
-      window.__timelines = window.__timelines || {};
-      var tl = gsap.timeline({ paused: true });
-
-      // Driver tween: spans full duration, renders each frame via onUpdate
-      var timeProxy = { t: 0 };
-      tl.to(
-        timeProxy,
-        {
-          t: DURATION,
-          duration: DURATION,
-          ease: "none",
-          onUpdate: function () {
-            renderFrame(timeProxy.t);
-          },
+      // ── Anime Timeline ─────────────────────────────────────────────────
+      var tl = anime.createTimeline({
+        autoplay: false,
+        onUpdate: function () {
+          renderFrame(tl.currentTime / 1000);
         },
-        0,
-      );
+      });
 
-      window.__timelines["glass-shatter"] = tl;
+      // Driver tween: spans full duration; render time comes from the timeline.
+      tl.add({ t: 0 }, { t: DURATION, duration: DURATION * 1000, ease: "linear" }, 0);
+
+      hyperframesAnime.register("glass-shatter", tl, { labels: {} });
 
       // ── Deferred Init ──────────────────────────────────────────────────
       setTimeout(function () {
diff --git a/registry/blocks/vfx-text-cursor/vfx-text-cursor.html b/registry/blocks/vfx-text-cursor/vfx-text-cursor.html
index 64661b91d4..302ad0f1e1 100644
--- a/registry/blocks/vfx-text-cursor/vfx-text-cursor.html
+++ b/registry/blocks/vfx-text-cursor/vfx-text-cursor.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=1920, height=1080" />
     <title>VFX Text Cursor</title>
-    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/animejs@4.5.0/dist/bundles/anime.umd.min.js"></script>
   </head>
   <body style="margin: 0; overflow: hidden">
     <div
@@ -294,6 +294,11 @@
           display: inline-block;
         }
 
+        [data-composition-id="vfx-text-cursor"] .html-char {
+          display: inline-block;
+          opacity: 0;
+        }
+
         [data-composition-id="vfx-text-cursor"] .html-caret {
           position: absolute;
           left: 0;
@@ -323,8 +328,6 @@
       </style>
 
       <script>
-        window.__timelines = window.__timelines || {};
-
         (function () {
           var WIDTH = 1920;
           var HEIGHT = 1080;
@@ -354,12 +357,102 @@
             return -0.806 * t * t + 1.806 * t;
           };
           var htmlText = "HTML";
+          var htmlChars = [];
+
+          function toMs(seconds) {
+            return seconds * 1000;
+          }
+
+          function mapEase(ease) {
+            if (!ease || ease === "none") return "linear";
+            if (typeof ease === "function") return ease;
+            var compact = String(ease).replace(/\s+/g, "");
+            var family = compact.match(/^(power[1-4]|expo)\.(in|out|inOut)$/);
+            if (family) {
+              var names = {
+                power1: "Quad",
+                power2: "Cubic",
+                power3: "Quart",
+                power4: "Quint",
+                expo: "Expo",
+              };
+              var dirs = { in: "in", out: "out", inOut: "inOut" };
+              return dirs[family[2]] + names[family[1]];
+            }
+            return ease;
+          }
+
+          function isCssTarget(target) {
+            return (
+              typeof target === "string" ||
+              target instanceof Element ||
+              target instanceof NodeList ||
+              Array.isArray(target)
+            );
+          }
+
+          function propName(target, key) {
+            if (!isCssTarget(target)) return key;
+            var props = { x: "translateX", y: "translateY", scale: "scale" };
+            return props[key] || key;
+          }
+
+          function staggerDelay(value) {
+            if (typeof value === "number") return anime.stagger(toMs(value));
+            if (value && typeof value === "object") {
+              var options = {};
+              Object.keys(value).forEach(function (key) {
+                options[key] = key === "each" || key === "amount" ? toMs(value[key]) : value[key];
+              });
+              return anime.stagger(options.each || 0, options);
+            }
+            return value;
+          }
+
+          function normalize(target, vars) {
+            var out = {};
+            Object.keys(vars).forEach(function (key) {
+              if (key === "duration" || key === "delay") out[key] = toMs(vars[key]);
+              else if (key === "ease") out.ease = mapEase(vars[key]);
+              else if (key === "stagger") out.delay = staggerDelay(vars[key]);
+              else out[propName(target, key)] = vars[key];
+            });
+            return out;
+          }
+
+          function addSet(tl, target, vars, position) {
+            tl.add(
+              target,
+              Object.assign(normalize(target, vars), { duration: 0 }),
+              toMs(position || 0),
+            );
+          }
+
+          function addTo(tl, target, vars, position) {
+            tl.add(target, normalize(target, vars), toMs(position || 0));
+          }
+
+          function addFromTo(tl, target, fromVars, toVars, position) {
+            addSet(tl, target, fromVars, position);
+            addTo(tl, target, toVars, position);
+          }
+
+          function prepareHtmlText() {
+            htmlType.textContent = "";
+            htmlChars = htmlText.split("").map(function (char) {
+              var span = document.createElement("span");
+              span.className = "html-char";
+              span.textContent = char;
+              htmlType.appendChild(span);
+              return span;
+            });
+          }
+
+          prepareHtmlText();
 
           function getTitleOffset() {
             var cardRect = nextCard.getBoundingClientRect();
-            htmlType.textContent = htmlText;
             var htmlRect = htmlType.getBoundingClientRect();
-            htmlType.textContent = "";
             return {
               x: cardRect.left + cardRect.width * 0.5 - (htmlRect.left + htmlRect.width * 0.5),
               y: cardRect.top + cardRect.height * 0.5 - (htmlRect.top + htmlRect.height * 0.5),
@@ -374,39 +467,30 @@
             var slideEnd = slideStart + 0.05;
             var titleOffset = getTitleOffset();
 
-            tl.call(
-              function () {
-                htmlType.textContent = "";
-                htmlCaret.style.left = "0px";
-              },
-              [],
-              0,
-            );
-            tl.set(
+            var caretPositions = htmlChars.map(function (_, idx) {
+              return htmlChars.slice(0, idx + 1).reduce(function (width, span) {
+                return width + span.getBoundingClientRect().width;
+              }, 0);
+            });
+
+            addSet(tl, htmlChars, { opacity: 0 }, 0);
+            addSet(tl, htmlCaret, { opacity: 0, x: 0 }, 0);
+            addSet(
+              tl,
               htmlWord,
               { x: titleOffset.x, y: titleOffset.y, scale: 1.8, transformOrigin: "50% 50%" },
               0,
             );
-            tl.set(htmlCaret, { opacity: 0 }, 0);
-            tl.set(htmlCaret, { opacity: 1 }, htmlStart - 0.05);
+            addSet(tl, htmlCaret, { opacity: 1 }, htmlStart - 0.05);
 
-            for (var i = 1; i <= htmlText.length; i += 1) {
-              (function (idx) {
-                tl.call(
-                  function () {
-                    htmlType.textContent = htmlText.slice(0, idx);
-                    htmlCaret.style.left = htmlType.offsetWidth + "px";
-                    if (idx === htmlText.length) {
-                      htmlCaret.style.opacity = "0";
-                    }
-                  },
-                  [],
-                  htmlStart + (idx - 1) * typeStep,
-                );
-              })(i);
+            for (var i = 0; i < htmlChars.length; i += 1) {
+              addSet(tl, htmlChars[i], { opacity: 1 }, htmlStart + i * typeStep);
+              addSet(tl, htmlCaret, { x: caretPositions[i] }, htmlStart + i * typeStep);
             }
+            addSet(tl, htmlCaret, { opacity: 0 }, typeEnd);
 
-            tl.to(
+            addTo(
+              tl,
               htmlWord,
               {
                 x: 0,
@@ -417,7 +501,8 @@
               },
               slideStart,
             );
-            tl.to(
+            addTo(
+              tl,
               supportingWords,
               {
                 opacity: 1,
@@ -439,19 +524,26 @@
             ctx.fillStyle = "#000";
             ctx.fillRect(0, 0, WIDTH, HEIGHT);
 
-            var tl = gsap.timeline({ paused: true });
-            tl.set(nextCard, { opacity: 0, scale: 1.45, filter: "blur(14px)" }, 0);
-            tl.set(phraseA, { opacity: 1, x: 0, y: 0, scale: 1, filter: "blur(0px)" }, 0);
-            tl.set(supportingWords, { opacity: 0, y: 54, scale: 0.96, filter: "blur(10px)" }, 0);
-            tl.set(phraseB, { opacity: 0, x: 1480, y: 0, scale: 1, filter: "blur(8px)" }, 0);
-            tl.to(state, { logoY: 0, duration: 1, ease: "power4.out" }, 0);
-            tl.set(nextCard, { opacity: 1, scale: 1.45, filter: "blur(14px)" }, 3.1);
-            tl.to(
+            var tl = anime.createTimeline({ autoplay: false });
+            addSet(tl, nextCard, { opacity: 0, scale: 1.45, filter: "blur(14px)" }, 0);
+            addSet(tl, phraseA, { opacity: 1, x: 0, y: 0, scale: 1, filter: "blur(0px)" }, 0);
+            addSet(
+              tl,
+              supportingWords,
+              { opacity: 0, y: 54, scale: 0.96, filter: "blur(10px)" },
+              0,
+            );
+            addSet(tl, phraseB, { opacity: 0, x: 1480, y: 0, scale: 1, filter: "blur(8px)" }, 0);
+            addTo(tl, state, { logoY: 0, duration: 1, ease: "power4.out" }, 0);
+            addFromTo(
+              tl,
               nextCard,
+              { opacity: 1, scale: 1.45, filter: "blur(14px)" },
               { scale: 0.88, filter: "blur(0px)", duration: 0.9, ease: entryEase },
               3.1,
             );
-            tl.to(
+            addTo(
+              tl,
               nextCard,
               { scale: 0.84, filter: "blur(1.5px)", duration: 0.4, ease: "none" },
               4.0,
@@ -459,23 +551,21 @@
             var phraseAReady = addTextCardSequence(tl, 3.15);
             var phraseAExit = phraseAReady + 0.5;
             var phraseBStart = phraseAExit + 0.36;
-            tl.to(
+            addTo(
+              tl,
               phraseA,
               { x: -1480, filter: "blur(8px)", duration: 0.36, ease: "power2.in" },
               phraseAExit,
             );
-            tl.set(phraseA, { opacity: 0 }, phraseBStart);
-            tl.set(
+            addSet(tl, phraseA, { opacity: 0 }, phraseBStart);
+            addFromTo(
+              tl,
               phraseB,
               { opacity: 1, x: 1480, y: 0, scale: 1, filter: "blur(8px)" },
-              phraseBStart,
-            );
-            tl.to(
-              phraseB,
               { x: 0, filter: "blur(0px)", duration: 0.48, ease: "expo.out" },
               phraseBStart,
             );
-            window.__timelines["vfx-text-cursor"] = tl;
+            hyperframesAnime.register("vfx-text-cursor", tl, { labels: {} });
             return;
           }
 
@@ -724,62 +814,62 @@
           }
 
           render();
-          var tl = gsap.timeline({
-            paused: true,
+          var tl = anime.createTimeline({
+            autoplay: false,
             onUpdate: render,
           });
 
-          tl.set(canvas, { opacity: 1, filter: "blur(0px)" }, 0);
-          tl.set(nextCard, { opacity: 0, scale: 1.45, filter: "blur(14px)" }, 0);
-          tl.set(phraseA, { opacity: 1, x: 0, y: 0, scale: 1, filter: "blur(0px)" }, 0);
-          tl.set(supportingWords, { opacity: 0, y: 54, scale: 0.96, filter: "blur(10px)" }, 0);
-          tl.set(phraseB, { opacity: 0, x: 1480, y: 0, scale: 1, filter: "blur(8px)" }, 0);
-          tl.set(state, { logoY: 760, effectMix: 0, progress: 0, logoScale: 1 }, 0);
-          tl.to(
+          addSet(tl, canvas, { opacity: 1, filter: "blur(0px)" }, 0);
+          addSet(tl, nextCard, { opacity: 0, scale: 1.45, filter: "blur(14px)" }, 0);
+          addSet(tl, phraseA, { opacity: 1, x: 0, y: 0, scale: 1, filter: "blur(0px)" }, 0);
+          addSet(tl, supportingWords, { opacity: 0, y: 54, scale: 0.96, filter: "blur(10px)" }, 0);
+          addSet(tl, phraseB, { opacity: 0, x: 1480, y: 0, scale: 1, filter: "blur(8px)" }, 0);
+          addTo(
+            tl,
             state,
             {
               logoY: 0,
               duration: 1,
               ease: "power4.out",
-              onUpdate: render,
             },
             0,
           );
 
-          tl.to(
+          addTo(
+            tl,
             state,
             {
               effectMix: 1,
               duration: 0.34,
               ease: "power3.out",
-              onUpdate: render,
             },
             0.72,
           );
 
-          tl.to(
+          addTo(
+            tl,
             state,
             {
               progress: 1,
               duration: 2.28,
               ease: "none",
-              onUpdate: render,
             },
             0.72,
           );
 
-          tl.to(
+          addTo(
+            tl,
             state,
             {
               logoScale: 0.4,
               duration: 0.2,
               ease: "expo.in",
-              onUpdate: render,
             },
             2.9,
           );
 
-          tl.to(
+          addTo(
+            tl,
             canvas,
             {
               opacity: 0,
@@ -790,9 +880,10 @@
             2.9,
           );
 
-          tl.set(nextCard, { opacity: 1, scale: 1.45, filter: "blur(14px)" }, 3.1);
-          tl.to(
+          addFromTo(
+            tl,
             nextCard,
+            { opacity: 1, scale: 1.45, filter: "blur(14px)" },
             {
               scale: 0.88,
               filter: "blur(0px)",
@@ -801,7 +892,8 @@
             },
             3.1,
           );
-          tl.to(
+          addTo(
+            tl,
             nextCard,
             {
               scale: 0.84,
@@ -814,7 +906,8 @@
           var phraseAReady = addTextCardSequence(tl, 3.15);
           var phraseAExit = phraseAReady + 0.5;
           var phraseBStart = phraseAExit + 0.36;
-          tl.to(
+          addTo(
+            tl,
             phraseA,
             {
               x: -1480,
@@ -824,8 +917,9 @@
             },
             phraseAExit,
           );
-          tl.set(phraseA, { opacity: 0 }, phraseBStart);
-          tl.set(
+          addSet(tl, phraseA, { opacity: 0 }, phraseBStart);
+          addFromTo(
+            tl,
             phraseB,
             {
               opacity: 1,
@@ -834,10 +928,6 @@
               scale: 1,
               filter: "blur(8px)",
             },
-            phraseBStart,
-          );
-          tl.to(
-            phraseB,
             {
               x: 0,
               filter: "blur(0px)",
@@ -847,7 +937,7 @@
             phraseBStart,
           );
 
-          window.__timelines["vfx-text-cursor"] = tl;
+          hyperframesAnime.register("vfx-text-cursor", tl, { labels: {} });
         })();
       </script>
     </div>
diff --git a/registry/blocks/vpn-youtube-spot/vpn-youtube-spot.html b/registry/blocks/vpn-youtube-spot/vpn-youtube-spot.html
index ca0cdf5c81..658c985565 100644
--- a/registry/blocks/vpn-youtube-spot/vpn-youtube-spot.html
+++ b/registry/blocks/vpn-youtube-spot/vpn-youtube-spot.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=1920, height=1080" />
-    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/animejs@4.5.0/dist/bundles/anime.umd.min.js"></script>
     <style>
       * {
         box-sizing: border-box;
@@ -555,12 +555,28 @@
 
       .percent {
         position: absolute;
+        width: 132px;
+        height: 56px;
+        display: grid;
+        place-items: center;
         color: #111111;
         font-size: 48px;
         line-height: 1;
         font-weight: 900;
       }
 
+      .progress-value {
+        position: absolute;
+        inset: 0;
+        display: grid;
+        place-items: center;
+        opacity: 0;
+      }
+
+      .progress-value.progress-0 {
+        opacity: 1;
+      }
+
       .shield-status {
         display: flex;
         align-items: center;
@@ -766,7 +782,7 @@
                         <circle class="track" cx="14" cy="14" r="11"></circle>
                         <circle class="progress" cx="14" cy="14" r="11"></circle>
                       </svg>
-                      <span class="open-label"></span>
+                      <span class="open-label">OPEN</span>
                     </div>
                   </div>
                 </div>
@@ -792,7 +808,13 @@
                     <circle class="big-track" cx="80" cy="80" r="70"></circle>
                     <circle id="progressArc" class="big-progress" cx="80" cy="80" r="70"></circle>
                   </svg>
-                  <div class="percent" id="progressText">0%</div>
+                  <div class="percent" id="progressText">
+                    <span class="progress-value progress-0">0%</span>
+                    <span class="progress-value progress-18">18%</span>
+                    <span class="progress-value progress-52">52%</span>
+                    <span class="progress-value progress-87">87%</span>
+                    <span class="progress-value progress-100">100%</span>
+                  </div>
                 </div>
                 <div class="shield-status">
                   <div class="check">✓</div>
@@ -814,174 +836,318 @@
     </div>
 
     <script>
-      window.__timelines = window.__timelines || {};
+      const tweenDefaults = { duration: 0.45, ease: "power3.out" };
+      const tl = anime.createTimeline({ autoplay: false });
 
-      gsap.defaults({ force3D: true });
+      function toMs(seconds) {
+        return seconds * 1000;
+      }
 
-      const tl = gsap.timeline({
-        paused: true,
-        defaults: { duration: 0.45, ease: "power3.out" },
-      });
+      function mapEase(ease) {
+        if (!ease || ease === "none") return "linear";
+        if (typeof ease === "function") return ease;
+        const compact = String(ease).replace(/\s+/g, "");
+        const power = compact.match(/^power([1-4])\.(in|out|inOut)$/);
+        if (power) {
+          const names = { 1: "Quad", 2: "Cubic", 3: "Quart", 4: "Quint" };
+          const dirs = { in: "in", out: "out", inOut: "inOut" };
+          return dirs[power[2]] + names[power[1]];
+        }
+        const family = compact.match(/^(sine|back|elastic)\.(in|out|inOut)(\(.*\))?$/);
+        if (family) {
+          const names = { sine: "Sine", back: "Back", elastic: "Elastic" };
+          const dirs = { in: "in", out: "out", inOut: "inOut" };
+          return dirs[family[2]] + names[family[1]] + (family[3] || "");
+        }
+        return ease;
+      }
 
-      const breatheRepeats = Math.ceil(7 / 2.4) - 1;
+      function reverseEase(ease) {
+        if (!ease) return "power3.in";
+        return String(ease)
+          .replace(/\.out(\(|$)/, ".in$1")
+          .replace(/\.in(\(|$)/, ".out$1");
+      }
 
-      tl.from(
+      function outQuart(t) {
+        return 1 - Math.pow(1 - t, 4);
+      }
+
+      function inCubic(t) {
+        return t * t * t;
+      }
+
+      function segmentEase(ease, endProgress) {
+        const endValue = ease(endProgress);
+        return function (t) {
+          return endValue === 0 ? 0 : ease(t * endProgress) / endValue;
+        };
+      }
+
+      function isCssTarget(target) {
+        return (
+          typeof target === "string" ||
+          target instanceof Element ||
+          target instanceof NodeList ||
+          Array.isArray(target)
+        );
+      }
+
+      function propName(target, key) {
+        if (!isCssTarget(target)) return key;
+        const props = { x: "translateX", y: "translateY", rotation: "rotate" };
+        return props[key] || key;
+      }
+
+      function staggerDelay(value) {
+        if (typeof value === "number") return anime.stagger(toMs(value));
+        if (value && typeof value === "object") {
+          const options = {};
+          Object.keys(value).forEach(function (key) {
+            options[key] = key === "each" || key === "amount" ? toMs(value[key]) : value[key];
+          });
+          return anime.stagger(options.each || 0, options);
+        }
+        return value;
+      }
+
+      function normalize(target, vars, applyDefaults) {
+        const out = {};
+        let hasDuration = false;
+        let hasEase = false;
+        Object.keys(vars).forEach(function (key) {
+          if (key === "duration" || key === "delay") {
+            out[key] = toMs(vars[key]);
+            if (key === "duration") hasDuration = true;
+          } else if (key === "ease") {
+            out.ease = mapEase(vars[key]);
+            hasEase = true;
+          } else if (key === "stagger") {
+            out.delay = staggerDelay(vars[key]);
+          } else if (key !== "overwrite" && key !== "force3D") {
+            out[propName(target, key)] = vars[key];
+          }
+        });
+        if (applyDefaults && !hasDuration) out.duration = toMs(tweenDefaults.duration);
+        if (applyDefaults && !hasEase) out.ease = mapEase(tweenDefaults.ease);
+        return out;
+      }
+
+      function firstElement(target) {
+        if (typeof target === "string") return document.querySelector(target);
+        if (target instanceof Element) return target;
+        if (target instanceof NodeList || Array.isArray(target)) return target[0];
+        return null;
+      }
+
+      function finalValue(target, key) {
+        const el = firstElement(target);
+        if (key === "x" || key === "y" || key === "rotation") return 0;
+        if (key === "scale" || key === "scaleX" || key === "scaleY") return 1;
+        if (key === "opacity" && el) return Number(getComputedStyle(el).opacity || 1);
+        return undefined;
+      }
+
+      function addSet(target, vars, position) {
+        tl.add(
+          target,
+          Object.assign(normalize(target, vars, false), { duration: 0 }),
+          toMs(position || 0),
+        );
+      }
+
+      function addTo(target, vars, position) {
+        tl.add(target, normalize(target, vars, true), toMs(position || 0));
+      }
+
+      function addFrom(target, fromVars, position) {
+        const start = {};
+        const end = {};
+        Object.keys(fromVars).forEach(function (key) {
+          if (key === "duration" || key === "delay" || key === "ease" || key === "stagger") return;
+          start[key] = fromVars[key];
+          const value = finalValue(target, key);
+          if (value !== undefined) end[key] = value;
+        });
+        addSet(target, start, position);
+        addTo(target, Object.assign({}, fromVars, end), position);
+      }
+
+      function addFromTo(target, fromVars, toVars, position) {
+        addSet(target, fromVars, position);
+        addTo(target, toVars, position);
+      }
+
+      function addPulse(target, peakScale, duration, position, ease, baseScale) {
+        const startScale = baseScale == null ? 1 : baseScale;
+        const activeEase = ease || tweenDefaults.ease;
+        addTo(target, { scale: peakScale, duration, ease: activeEase }, position);
+        addTo(
+          target,
+          { scale: startScale, duration, ease: reverseEase(activeEase) },
+          position + duration,
+        );
+      }
+
+      function showProgress(previousSelector, nextSelector, position) {
+        addSet(previousSelector, { opacity: 0 }, position);
+        addSet(nextSelector, { opacity: 1 }, position);
+      }
+
+      addFrom(
         ".headline span",
         { y: 46, opacity: 0, stagger: 0.055, duration: 0.38, ease: "back.out(1.35)" },
         0.05,
-      )
-        .from(".headline .sub", { y: 20, opacity: 0, duration: 0.28 }, 0.2)
-        .from(".ambient-word", { scale: 0.92, opacity: 0, duration: 0.5 }, 0.08)
-        .from(".ambient-line", { scaleX: 0, opacity: 0, stagger: 0.08, duration: 0.42 }, 0.16)
-        .to(
-          ".ambient-line",
-          {
-            scaleX: 1.08,
-            opacity: 0.55,
-            duration: 2.4,
-            yoyo: true,
-            repeat: breatheRepeats,
-            ease: "sine.inOut",
-          },
-          0.55,
-        )
-        .from(
-          ".phone",
-          {
-            y: 760,
-            scale: 0.82,
-            rotation: -2.5,
-            opacity: 0,
-            duration: 0.47,
-            ease: "back.out(1.6)",
-          },
-          0,
-        )
-        .from(".store-title", { y: 26, opacity: 0, duration: 0.28 }, 0.28)
-        .from(".avatar", { scale: 0.4, opacity: 0, duration: 0.24, ease: "back.out(1.8)" }, 0.34)
-        .from(".search-pill", { y: 18, opacity: 0, duration: 0.26 }, 0.4)
-        .from(
-          ".store-row",
-          { y: 44, opacity: 0, stagger: 0.035, duration: 0.36, ease: "power3.out" },
-          0.48,
-        );
+      );
+      addFrom(".headline .sub", { y: 20, opacity: 0, duration: 0.28 }, 0.2);
+      addFrom(".ambient-word", { scale: 0.92, opacity: 0, duration: 0.5 }, 0.08);
+      addFrom(".ambient-line", { scaleX: 0, opacity: 0, stagger: 0.08, duration: 0.42 }, 0.16);
+      addTo(
+        ".ambient-line",
+        { scaleX: 1.08, opacity: 0.55, duration: 2.4, ease: "sine.inOut" },
+        0.55,
+      );
+      addTo(".ambient-line", { scaleX: 1, opacity: 1, duration: 2.4, ease: "sine.inOut" }, 2.95);
+      addTo(
+        ".ambient-line",
+        { scaleX: 1.08, opacity: 0.55, duration: 2.4, ease: "sine.inOut" },
+        5.35,
+      );
+      addFrom(
+        ".phone",
+        { y: 760, scale: 0.82, rotation: -2.5, opacity: 0, duration: 0.47, ease: "back.out(1.6)" },
+        0,
+      );
+      addFrom(".store-title", { y: 26, opacity: 0, duration: 0.28 }, 0.28);
+      addFrom(".avatar", { scale: 0.4, opacity: 0, duration: 0.24, ease: "back.out(1.8)" }, 0.34);
+      addFrom(".search-pill", { y: 18, opacity: 0, duration: 0.26 }, 0.4);
+      addFrom(
+        ".store-row",
+        { y: 44, opacity: 0, stagger: 0.035, duration: 0.36, ease: "power3.out" },
+        0.48,
+      );
 
-      tl.to(".scroll-content", { y: -456, duration: 1.2, ease: "power4.out" }, 0.62)
-        .to(
-          ".screen-window",
-          { scale: 1.012, duration: 0.18, yoyo: true, repeat: 1, ease: "power2.out" },
-          0.92,
-        )
-        .to(
-          ".screen-window",
-          { scale: 1.014, duration: 0.14, yoyo: true, repeat: 1, ease: "power2.out" },
-          1.25,
-        )
-        .to(
-          "#vpn-row",
-          {
-            scale: 1.035,
-            outlineWidth: 3,
-            outlineColor: "rgba(0,122,255,0.34)",
-            duration: 0.2,
-            ease: "back.out(1.7)",
-          },
-          1.72,
-        )
-        .to("#vpn-row", { scale: 1, duration: 0.22 }, 1.93)
-        .fromTo(
-          ".tap-dot",
-          { scale: 0.25, opacity: 0.95 },
-          { scale: 2.15, opacity: 0, duration: 0.42, ease: "power2.out" },
-          2.02,
-        )
-        .to("#vpn-row .get-button", { scale: 0.82, duration: 0.1, ease: "power3.in" }, 2.04)
-        .to("#vpn-row .get-button", { scale: 1, duration: 0.14, ease: "back.out(2)" }, 2.14);
+      addTo(".scroll-content", { y: -456, duration: 1.2, ease: "power4.out" }, 0.62);
+      addTo(".screen-window", { scale: 1.012, duration: 0.18, ease: "power2.out" }, 0.92);
+      const screenReturnRatio = (1.25 - 1.1) / 0.18;
+      const screenScaleAtSecondPulse = 1.012 + (1 - 1.012) * inCubic(screenReturnRatio);
+      addTo(
+        ".screen-window",
+        {
+          scale: screenScaleAtSecondPulse,
+          duration: 0.15,
+          ease: segmentEase(inCubic, screenReturnRatio),
+        },
+        1.1,
+      );
+      addPulse(".screen-window", 1.014, 0.14, 1.25, "power2.out", screenScaleAtSecondPulse);
+      addTo(
+        "#vpn-row",
+        {
+          scale: 1.035,
+          outlineWidth: 3,
+          outlineColor: "rgba(0,122,255,0.34)",
+          duration: 0.2,
+          ease: "back.out(1.7)",
+        },
+        1.72,
+      );
+      addTo("#vpn-row", { scale: 1, duration: 0.22 }, 1.93);
+      addFromTo(
+        ".tap-dot",
+        { scale: 0.25, opacity: 0.95 },
+        { scale: 2.15, opacity: 0, duration: 0.42, ease: "power2.out" },
+        2.02,
+      );
+      addTo("#vpn-row .get-button", { scale: 0.82, duration: 0.1, ease: "power3.in" }, 2.04);
+      addTo("#vpn-row .get-button", { scale: 1, duration: 0.14, ease: "back.out(2)" }, 2.14);
 
-      tl.fromTo(
+      addFromTo(
         ".detail-view",
         { y: 620, scale: 0.92, opacity: 0 },
         { y: 0, scale: 1, opacity: 1, duration: 0.46, ease: "power4.out" },
         2.32,
-      )
-        .from(".detail-card", { y: 56, scale: 0.96, duration: 0.42, ease: "back.out(1.2)" }, 2.34)
-        .from(
-          ".detail-icon",
-          { scale: 0.55, rotation: -8, opacity: 0, duration: 0.32, ease: "back.out(1.8)" },
-          2.47,
-        )
-        .from(".detail-title", { y: 20, opacity: 0, duration: 0.28 }, 2.54)
-        .from(".detail-sub", { y: 14, opacity: 0, duration: 0.24 }, 2.6)
-        .from(
-          ".install-button",
-          { scale: 0.72, opacity: 0, duration: 0.24, ease: "back.out(2)" },
-          2.66,
-        )
-        .from(".stat", { y: 28, opacity: 0, stagger: 0.05, duration: 0.3 }, 2.78)
-        .from(".progress-panel", { y: 42, scale: 0.96, opacity: 0, duration: 0.38 }, 2.92);
+      );
+      addFrom(".detail-card", { y: 56, scale: 0.96, duration: 0.42, ease: "back.out(1.2)" }, 2.34);
+      addFrom(
+        ".detail-icon",
+        { scale: 0.55, rotation: -8, opacity: 0, duration: 0.32, ease: "back.out(1.8)" },
+        2.47,
+      );
+      addFrom(".detail-title", { y: 20, opacity: 0, duration: 0.28 }, 2.54);
+      addFrom(".detail-sub", { y: 14, opacity: 0, duration: 0.24 }, 2.6);
+      addFrom(
+        ".install-button",
+        { scale: 0.72, opacity: 0, duration: 0.24, ease: "back.out(2)" },
+        2.66,
+      );
+      addFrom(".stat", { y: 28, opacity: 0, stagger: 0.05, duration: 0.3 }, 2.78);
+      addFrom(".progress-panel", { y: 42, opacity: 0, duration: 0.38, ease: "power3.out" }, 2.92);
+      const progressPanelRatio = (3.18 - 2.92) / 0.38;
+      const progressPanelScale = 0.96 + (1 - 0.96) * outQuart(progressPanelRatio);
+      addFromTo(
+        ".progress-panel",
+        { scale: 0.96 },
+        {
+          scale: progressPanelScale,
+          duration: 0.26,
+          ease: segmentEase(outQuart, progressPanelRatio),
+        },
+        2.92,
+      );
 
-      tl.to(".install-label", { y: -18, opacity: 0, duration: 0.16 }, 2.86)
-        .set(".install-label", { textContent: "" }, 3.02)
-        .to(".ring", { opacity: 1, duration: 0.16 }, 2.96)
-        .fromTo(
-          ".ring .progress",
-          { strokeDashoffset: 69 },
-          { strokeDashoffset: 0, duration: 1.2, ease: "power2.inOut" },
-          3.04,
-        )
-        .fromTo(
-          "#progressArc",
-          { strokeDashoffset: 440 },
-          { strokeDashoffset: 0, duration: 1.42, ease: "power2.inOut" },
-          3.02,
-        )
-        .set("#progressText", { textContent: "18%" }, 3.18)
-        .to(".progress-panel", { scale: 1.025, duration: 0.12, yoyo: true, repeat: 1 }, 3.18)
-        .set("#progressText", { textContent: "52%" }, 3.56)
-        .to(".progress-panel", { scale: 1.03, duration: 0.12, yoyo: true, repeat: 1 }, 3.56)
-        .set("#progressText", { textContent: "87%" }, 3.9)
-        .to(".progress-panel", { scale: 1.035, duration: 0.12, yoyo: true, repeat: 1 }, 3.9)
-        .set("#progressText", { textContent: "100%" }, 4.28)
-        .to(
-          ".progress-panel",
-          { scale: 1.04, duration: 0.12, yoyo: true, repeat: 1, ease: "back.out(1.7)" },
-          4.28,
-        )
-        .to(".ring", { scale: 0.35, opacity: 0, duration: 0.16 }, 4.44)
-        .to(".install-button", { backgroundColor: "#34c759", width: 94, duration: 0.18 }, 4.5)
-        .set(".open-label", { textContent: "OPEN" }, 4.52)
-        .to(".open-label", { opacity: 1, duration: 0.16 }, 4.56)
-        .fromTo(
-          ".shield-status",
-          { y: 22, scale: 0.9, opacity: 0 },
-          { y: 0, scale: 1, opacity: 1, duration: 0.34, ease: "back.out(1.8)" },
-          4.62,
-        )
-        .to(
-          ".phone",
-          { scale: 1.025, duration: 0.18, yoyo: true, repeat: 1, ease: "back.out(1.5)" },
-          4.7,
-        );
+      addTo(".install-label", { y: -18, opacity: 0, duration: 0.16 }, 2.86);
+      addTo(".ring", { opacity: 1, duration: 0.16 }, 2.96);
+      addFromTo(
+        ".ring .progress",
+        { strokeDashoffset: 69 },
+        { strokeDashoffset: 0, duration: 1.2, ease: "power2.inOut" },
+        3.04,
+      );
+      addFromTo(
+        "#progressArc",
+        { strokeDashoffset: 440 },
+        { strokeDashoffset: 0, duration: 1.42, ease: "power2.inOut" },
+        3.02,
+      );
+      showProgress(".progress-0", ".progress-18", 3.18);
+      addPulse(".progress-panel", 1.025, 0.12, 3.18, "power3.out", progressPanelScale);
+      showProgress(".progress-18", ".progress-52", 3.56);
+      addPulse(".progress-panel", 1.03, 0.12, 3.56, "power3.out", progressPanelScale);
+      showProgress(".progress-52", ".progress-87", 3.9);
+      addPulse(".progress-panel", 1.035, 0.12, 3.9, "power3.out", progressPanelScale);
+      showProgress(".progress-87", ".progress-100", 4.28);
+      addPulse(".progress-panel", 1.04, 0.12, 4.28, "back.out(1.7)", progressPanelScale);
+      addTo(".ring", { scale: 0.35, opacity: 0, duration: 0.16 }, 4.44);
+      addTo(".install-button", { backgroundColor: "#34c759", width: 94, duration: 0.18 }, 4.5);
+      addTo(".open-label", { opacity: 1, duration: 0.16 }, 4.56);
+      addFromTo(
+        ".shield-status",
+        { y: 22, scale: 0.9, opacity: 0 },
+        { y: 0, scale: 1, opacity: 1, duration: 0.34, ease: "back.out(1.8)" },
+        4.62,
+      );
+      addPulse(".phone", 1.025, 0.18, 4.7, "back.out(1.5)");
 
-      tl.to(".headline", { y: -18, opacity: 0.35, duration: 0.22 }, 5.18)
-        .to(".ambient-word", { opacity: 0.018, duration: 0.22 }, 5.18)
-        .to(".snap-shadow", { opacity: 1, scaleX: 0.8, duration: 0.16 }, 5.35)
-        .fromTo(
-          ".speed-lines",
-          { y: -220, opacity: 0 },
-          { y: 420, opacity: 1, duration: 0.26, ease: "power4.in" },
-          5.42,
-        )
-        .to(
-          ".phone",
-          { y: 1050, scale: 0.78, rotation: -3.5, duration: 0.48, ease: "power4.in" },
-          5.44,
-        )
-        .to(".snap-shadow", { opacity: 0, scaleX: 1.6, duration: 0.28 }, 5.62)
-        .to(".speed-lines", { opacity: 0, duration: 0.2 }, 5.74)
-        .to(".white-wipe", { opacity: 1, duration: 0.42, ease: "power2.out" }, 5.86);
+      addTo(".headline", { y: -18, opacity: 0.35, duration: 0.22 }, 5.18);
+      addTo(".ambient-word", { opacity: 0.018, duration: 0.22 }, 5.18);
+      addTo(".snap-shadow", { opacity: 1, scaleX: 0.8, duration: 0.16 }, 5.35);
+      addFromTo(
+        ".speed-lines",
+        { y: -220, opacity: 0 },
+        { y: 420, opacity: 1, duration: 0.26, ease: "power4.in" },
+        5.42,
+      );
+      addTo(
+        ".phone",
+        { y: 1050, scale: 0.78, rotation: -3.5, duration: 0.48, ease: "power4.in" },
+        5.44,
+      );
+      addTo(".snap-shadow", { opacity: 0, scaleX: 1.6, duration: 0.28 }, 5.62);
+      addTo(".speed-lines", { opacity: 0, duration: 0.2 }, 5.74);
+      addTo(".white-wipe", { opacity: 1, duration: 0.42, ease: "power2.out" }, 5.86);
 
-      window.__timelines["vpn-youtube-spot"] = tl;
+      hyperframesAnime.register("vpn-youtube-spot", tl, { labels: {} });
     </script>
   </body>
 </html>