From e20e794d8cf1327324d9d6edb25d2d04b1808eb2 Mon Sep 17 00:00:00 2001
From: Miguel Angel Simon Sierra <miguel.sierra@heygen.com>
Date: Wed, 8 Jul 2026 23:54:45 -0400
Subject: [PATCH] fix(registry): remediate centering and seek-reversibility
 defects from PSNR checkpoint (U10x)

---
 .../blue-sweater-intro-video.html             | 33 +++++++++-------
 registry/blocks/code-diff/code-diff.html      | 19 +++++----
 .../blocks/code-highlight/code-highlight.html | 23 ++++++-----
 registry/blocks/code-morph/code-morph.html    | 19 +++++----
 registry/blocks/code-scroll/code-scroll.html  | 23 ++++++-----
 .../code-snippet-flight.html                  | 23 ++++++-----
 registry/blocks/code-typing/code-typing.html  | 19 +++++----
 .../liquid-glass-notification.html            | 39 ++++++++-----------
 skills-manifest.json                          | 24 ++++++------
 .../hyperframes-animation/adapters/animejs.md |  6 +++
 10 files changed, 133 insertions(+), 95 deletions(-)

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 b6af3f532f..2c300a8df4 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
@@ -149,12 +149,17 @@
         color: var(--claude);
       }
 
-      .star-center {
+      .star-center-anchor {
+        position: absolute;
         left: 960px;
         top: 530px;
+        transform: translate(-50%, -50%);
+      }
+
+      .star-center {
+        position: relative;
         width: 150px;
         height: 150px;
-        transform: translate(-50%, -50%);
       }
 
       .star-brand {
@@ -765,17 +770,19 @@
           <div class="burst-block burst-d"></div>
           <div class="burst-block burst-e"></div>
           <div class="burst-block burst-f"></div>
-          <div class="claude-star star-center burst-star" aria-hidden="true">
-            <svg viewBox="-50 -50 100 100">
-              <g stroke="currentColor" stroke-width="8" stroke-linecap="round">
-                <line x1="0" y1="-38" x2="0" y2="38" />
-                <line x1="-38" y1="0" x2="38" y2="0" />
-                <line x1="-27" y1="-27" x2="27" y2="27" />
-                <line x1="-27" y1="27" x2="27" y2="-27" />
-                <line x1="-14" y1="-35" x2="14" y2="35" />
-                <line x1="-35" y1="-14" x2="35" y2="14" />
-              </g>
-            </svg>
+          <div class="star-center-anchor">
+            <div class="claude-star star-center burst-star" aria-hidden="true">
+              <svg viewBox="-50 -50 100 100">
+                <g stroke="currentColor" stroke-width="8" stroke-linecap="round">
+                  <line x1="0" y1="-38" x2="0" y2="38" />
+                  <line x1="-38" y1="0" x2="38" y2="0" />
+                  <line x1="-27" y1="-27" x2="27" y2="27" />
+                  <line x1="-27" y1="27" x2="27" y2="-27" />
+                  <line x1="-14" y1="-35" x2="14" y2="35" />
+                  <line x1="-35" y1="-14" x2="35" y2="14" />
+                </g>
+              </svg>
+            </div>
           </div>
         </div>
       </div>
diff --git a/registry/blocks/code-diff/code-diff.html b/registry/blocks/code-diff/code-diff.html
index a4669e5b45..bec3f0fab4 100644
--- a/registry/blocks/code-diff/code-diff.html
+++ b/registry/blocks/code-diff/code-diff.html
@@ -57,11 +57,14 @@
         right: -200px;
         bottom: -260px;
       }
-      .editor {
+      .editor-anchor {
         position: absolute;
         left: 50%;
         top: 50%;
         transform: translate(-50%, -50%);
+      }
+      .editor {
+        position: relative;
         width: 1380px;
         height: 800px;
         background: #0b0f17;
@@ -240,14 +243,16 @@
       <div class="bg-grid" data-layout-ignore></div>
       <div class="bg-glow a" data-layout-ignore></div>
       <div class="bg-glow b" data-layout-ignore></div>
-      <div class="editor" id="editor" data-layout-ignore>
-        <div class="titlebar">
-          <div class="dots">
-            <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
+      <div class="editor-anchor">
+        <div class="editor" id="editor" data-layout-ignore>
+          <div class="titlebar">
+            <div class="dots">
+              <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
+            </div>
+            <span class="filename"><span class="accent">greet.js</span> — Code Diff</span>
           </div>
-          <span class="filename"><span class="accent">greet.js</span> — Code Diff</span>
+          <div class="code-surface" id="surface"></div>
         </div>
-        <div class="code-surface" id="surface"></div>
       </div>
     </div>
     <script>
diff --git a/registry/blocks/code-highlight/code-highlight.html b/registry/blocks/code-highlight/code-highlight.html
index 3f698e9229..f96cc8f581 100644
--- a/registry/blocks/code-highlight/code-highlight.html
+++ b/registry/blocks/code-highlight/code-highlight.html
@@ -57,11 +57,14 @@
         right: -200px;
         bottom: -260px;
       }
-      .editor {
+      .editor-anchor {
         position: absolute;
         left: 50%;
         top: 50%;
         transform: translate(-50%, -50%);
+      }
+      .editor {
+        position: relative;
         width: 1380px;
         height: 800px;
         background: #0b0f17;
@@ -240,16 +243,18 @@
       <div class="bg-grid" data-layout-ignore></div>
       <div class="bg-glow a" data-layout-ignore></div>
       <div class="bg-glow b" data-layout-ignore></div>
-      <div class="editor" id="editor" data-layout-ignore>
-        <div class="titlebar">
-          <div class="dots">
-            <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
+      <div class="editor-anchor">
+        <div class="editor" id="editor" data-layout-ignore>
+          <div class="titlebar">
+            <div class="dots">
+              <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
+            </div>
+            <span class="filename"
+              ><span class="accent">loadConfig.js</span> — Code Highlight Sweep</span
+            >
           </div>
-          <span class="filename"
-            ><span class="accent">loadConfig.js</span> — Code Highlight Sweep</span
-          >
+          <div class="code-surface" id="surface"></div>
         </div>
-        <div class="code-surface" id="surface"></div>
       </div>
     </div>
     <script>
diff --git a/registry/blocks/code-morph/code-morph.html b/registry/blocks/code-morph/code-morph.html
index 52b33093e5..9e2ff6a591 100644
--- a/registry/blocks/code-morph/code-morph.html
+++ b/registry/blocks/code-morph/code-morph.html
@@ -57,11 +57,14 @@
         right: -200px;
         bottom: -260px;
       }
-      .editor {
+      .editor-anchor {
         position: absolute;
         left: 50%;
         top: 50%;
         transform: translate(-50%, -50%);
+      }
+      .editor {
+        position: relative;
         width: 1380px;
         height: 800px;
         background: #0b0f17;
@@ -240,14 +243,16 @@
       <div class="bg-grid" data-layout-ignore></div>
       <div class="bg-glow a" data-layout-ignore></div>
       <div class="bg-glow b" data-layout-ignore></div>
-      <div class="editor" id="editor" data-layout-ignore>
-        <div class="titlebar">
-          <div class="dots">
-            <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
+      <div class="editor-anchor">
+        <div class="editor" id="editor" data-layout-ignore>
+          <div class="titlebar">
+            <div class="dots">
+              <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
+            </div>
+            <span class="filename"><span class="accent">refactor.js</span> — Code Morph</span>
           </div>
-          <span class="filename"><span class="accent">refactor.js</span> — Code Morph</span>
+          <div class="code-surface" id="surface"></div>
         </div>
-        <div class="code-surface" id="surface"></div>
       </div>
     </div>
     <script>
diff --git a/registry/blocks/code-scroll/code-scroll.html b/registry/blocks/code-scroll/code-scroll.html
index da3edc317e..933951fce8 100644
--- a/registry/blocks/code-scroll/code-scroll.html
+++ b/registry/blocks/code-scroll/code-scroll.html
@@ -57,11 +57,14 @@
         right: -200px;
         bottom: -260px;
       }
-      .editor {
+      .editor-anchor {
         position: absolute;
         left: 50%;
         top: 50%;
         transform: translate(-50%, -50%);
+      }
+      .editor {
+        position: relative;
         width: 1380px;
         height: 800px;
         background: #0b0f17;
@@ -240,16 +243,18 @@
       <div class="bg-grid" data-layout-ignore></div>
       <div class="bg-glow a" data-layout-ignore></div>
       <div class="bg-glow b" data-layout-ignore></div>
-      <div class="editor" id="editor" data-layout-ignore>
-        <div class="titlebar">
-          <div class="dots">
-            <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
+      <div class="editor-anchor">
+        <div class="editor" id="editor" data-layout-ignore>
+          <div class="titlebar">
+            <div class="dots">
+              <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
+            </div>
+            <span class="filename"
+              ><span class="accent">fetchWithRetry.js</span> — Code Scroll To Line</span
+            >
           </div>
-          <span class="filename"
-            ><span class="accent">fetchWithRetry.js</span> — Code Scroll To Line</span
-          >
+          <div class="code-surface" id="surface"></div>
         </div>
-        <div class="code-surface" id="surface"></div>
       </div>
     </div>
     <script>
diff --git a/registry/blocks/code-snippet-flight/code-snippet-flight.html b/registry/blocks/code-snippet-flight/code-snippet-flight.html
index f650b28c38..dee1ee26d8 100644
--- a/registry/blocks/code-snippet-flight/code-snippet-flight.html
+++ b/registry/blocks/code-snippet-flight/code-snippet-flight.html
@@ -57,11 +57,14 @@
         right: -200px;
         bottom: -260px;
       }
-      .editor {
+      .editor-anchor {
         position: absolute;
         left: 50%;
         top: 50%;
         transform: translate(-50%, -50%);
+      }
+      .editor {
+        position: relative;
         width: 1380px;
         height: 800px;
         background: #0b0f17;
@@ -240,16 +243,18 @@
       <div class="bg-grid" data-layout-ignore></div>
       <div class="bg-glow a" data-layout-ignore></div>
       <div class="bg-glow b" data-layout-ignore></div>
-      <div class="editor" id="editor" data-layout-ignore>
-        <div class="titlebar">
-          <div class="dots">
-            <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
+      <div class="editor-anchor">
+        <div class="editor" id="editor" data-layout-ignore>
+          <div class="titlebar">
+            <div class="dots">
+              <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
+            </div>
+            <span class="filename"
+              ><span class="accent">pipeline.js</span> — Code Snippet Flight</span
+            >
           </div>
-          <span class="filename"
-            ><span class="accent">pipeline.js</span> — Code Snippet Flight</span
-          >
+          <div class="code-surface" id="surface"></div>
         </div>
-        <div class="code-surface" id="surface"></div>
       </div>
     </div>
     <script>
diff --git a/registry/blocks/code-typing/code-typing.html b/registry/blocks/code-typing/code-typing.html
index d976fb3ab8..2add09bb11 100644
--- a/registry/blocks/code-typing/code-typing.html
+++ b/registry/blocks/code-typing/code-typing.html
@@ -57,11 +57,14 @@
         right: -200px;
         bottom: -260px;
       }
-      .editor {
+      .editor-anchor {
         position: absolute;
         left: 50%;
         top: 50%;
         transform: translate(-50%, -50%);
+      }
+      .editor {
+        position: relative;
         width: 1380px;
         height: 800px;
         background: #0b0f17;
@@ -240,14 +243,16 @@
       <div class="bg-grid" data-layout-ignore></div>
       <div class="bg-glow a" data-layout-ignore></div>
       <div class="bg-glow b" data-layout-ignore></div>
-      <div class="editor" id="editor" data-layout-ignore>
-        <div class="titlebar">
-          <div class="dots">
-            <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
+      <div class="editor-anchor">
+        <div class="editor" id="editor" data-layout-ignore>
+          <div class="titlebar">
+            <div class="dots">
+              <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
+            </div>
+            <span class="filename"><span class="accent">loadConfig.js</span> — Code Typing</span>
           </div>
-          <span class="filename"><span class="accent">loadConfig.js</span> — Code Typing</span>
+          <div class="code-surface" id="surface"></div>
         </div>
-        <div class="code-surface" id="surface"></div>
       </div>
     </div>
     <script>
diff --git a/registry/blocks/liquid-glass-notification/liquid-glass-notification.html b/registry/blocks/liquid-glass-notification/liquid-glass-notification.html
index 9ee95900d1..7904d55e78 100644
--- a/registry/blocks/liquid-glass-notification/liquid-glass-notification.html
+++ b/registry/blocks/liquid-glass-notification/liquid-glass-notification.html
@@ -374,29 +374,24 @@
           if (glassCanvas.requestPaint) glassCanvas.requestPaint();
         });
 
-        var tl = anime.createTimeline({ autoplay: false });
-
-        tl.add(
-          {},
-          {
-            duration: 8000,
-            ease: "linear",
-            onUpdate: function (self) {
-              var t = self.currentTime / 1000;
-              uniforms.uTime.value = t;
-              threeRenderer.render(threeScene, threeCamera);
-              if (lgReady) {
-                glassCanvas.onpaint = function () {
-                  glassCtx.clearRect(0, 0, 1920, 1080);
-                  glassCtx.drawImage(threeCanvas, 0, 0, 1920, 1080);
-                  lg.renderGlassElements();
-                };
-                if (glassCanvas.requestPaint) glassCanvas.requestPaint();
-              }
-            },
+        var tl = anime.createTimeline({
+          autoplay: false,
+          onUpdate: function () {
+            var t = tl.currentTime / 1000;
+            uniforms.uTime.value = t;
+            threeRenderer.render(threeScene, threeCamera);
+            if (lgReady) {
+              glassCanvas.onpaint = function () {
+                glassCtx.clearRect(0, 0, 1920, 1080);
+                glassCtx.drawImage(threeCanvas, 0, 0, 1920, 1080);
+                lg.renderGlassElements();
+              };
+              if (glassCanvas.requestPaint) glassCanvas.requestPaint();
+            }
           },
-          0,
-        );
+        });
+
+        tl.add({}, { duration: 8000, ease: "linear" }, 0);
 
         var renderStatus = document.getElementById("render-status");
         var renderCopy = document.getElementById("render-copy");
diff --git a/skills-manifest.json b/skills-manifest.json
index f369aa70f1..51e3fffd57 100644
--- a/skills-manifest.json
+++ b/skills-manifest.json
@@ -2,7 +2,7 @@
   "source": "heygen-com/hyperframes",
   "skills": {
     "embedded-captions": {
-      "hash": "58b5eb242623bd7c",
+      "hash": "d1e0f77984f45275",
       "files": 144
     },
     "faceless-explainer": {
@@ -14,23 +14,23 @@
       "files": 1
     },
     "general-video": {
-      "hash": "ea9b072ce2a8c8b3",
+      "hash": "3e04f67ccb825ca8",
       "files": 1
     },
     "hyperframes": {
-      "hash": "e6a7c5d7acc3c891",
+      "hash": "339d7704a1742b68",
       "files": 1
     },
     "hyperframes-animation": {
-      "hash": "973a75a908705898",
+      "hash": "7b891aa66417202b",
       "files": 116
     },
     "hyperframes-cli": {
-      "hash": "493e59cafaab3d10",
+      "hash": "198b9c39927c41a7",
       "files": 7
     },
     "hyperframes-core": {
-      "hash": "2b1fb57fc6964e76",
+      "hash": "d12ba57cd3589ec8",
       "files": 14
     },
     "hyperframes-creative": {
@@ -38,11 +38,11 @@
       "files": 69
     },
     "hyperframes-keyframes": {
-      "hash": "555c0cd491c40cea",
+      "hash": "dd7dcb55f5fa9b2f",
       "files": 3
     },
     "hyperframes-registry": {
-      "hash": "e3b389526834109d",
+      "hash": "646799bfb0ebc087",
       "files": 10
     },
     "media-use": {
@@ -50,7 +50,7 @@
       "files": 103
     },
     "motion-graphics": {
-      "hash": "49f6beedfb4d3118",
+      "hash": "442084adb90b49de",
       "files": 23
     },
     "music-to-video": {
@@ -66,11 +66,11 @@
       "files": 20
     },
     "remotion-to-hyperframes": {
-      "hash": "dd322fe322636fa1",
+      "hash": "f2682a876abd52b4",
       "files": 70
     },
     "slideshow": {
-      "hash": "f3fc51ba40359ae6",
+      "hash": "8159f964b1a4e813",
       "files": 2
     },
     "talking-head-recut": {
@@ -78,7 +78,7 @@
       "files": 27
     },
     "website-to-video": {
-      "hash": "5b9209255913947e",
+      "hash": "5b176e6dd7b05ef8",
       "files": 32
     }
   }
diff --git a/skills/hyperframes-animation/adapters/animejs.md b/skills/hyperframes-animation/adapters/animejs.md
index da3d942708..49981d0d22 100644
--- a/skills/hyperframes-animation/adapters/animejs.md
+++ b/skills/hyperframes-animation/adapters/animejs.md
@@ -105,6 +105,12 @@ If the root omits `data-duration`, HyperFrames infers render duration from the l
 - Do not derive stagger amounts, target order, random-looking offsets, or jitter from unseeded `Math.random()` or wall-clock reads.
 - Do not mutate render-critical state from `onUpdate` using clocks, network, input state, or accumulated previous-frame state.
 
+### Imperative DOM mutation is not seek-safe
+
+Imperative DOM mutations, such as `element.textContent` writes or `.call()`-driven content changes, are not seek-reversible and break cold-seek priming and Studio scrubbing. Render-critical content reveals must be property tweens on pre-rendered elements, such as spans for text, not callbacks that mutate DOM state as a side effect of a driver value changing.
+
+A tween's `onUpdate` may derive a value that is purely a function of the timeline's own current position. For example, it can drive a shader uniform from the timeline's own `currentTime`, or write a formatted number from a value that anime.js is itself tweening. It must never be the only mechanism revealing or hiding actual render-critical content, because there is no guarantee the callback fires for every seek in every direction on every render or scrub path.
+
 ### One Property Owner
 
 Two independently registered anime.js instances must never animate the same CSS property on the same element at overlapping times. HyperFrames seeks registered instances independently, and the last property writer can become order-dependent. Anime.js does not provide an automatic overwrite manager for separate registered instances.