From 7809838c05bad7b10cd5d00b77c078536bb026eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Mon, 15 Jun 2026 16:31:27 -0400
Subject: [PATCH 1/7] feat(registry): add Code Animations catalog section + 6
 blocks
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds a "Code Animations" catalog section with six self-contained,
deterministic code-animation blocks for building beautiful code-snippet
videos: code-morph, code-snippet-flight, code-typing, code-diff,
code-highlight, code-scroll.

Each block reuses Shiki Magic Move's tokenizer + diff (baked at author
time) and drives the motion as a paused GSAP timeline the engine seeks
per frame — no CSS transitions, no render-time network. They group
separately from the static code-snippet themes via a dedicated
code-animation tag.

- registry: 6 blocks (html + registry-item.json) + registry.json entries
- catalog: 6 docs pages + a Code Animations nav group
- studio: new code-animation block category (resolveBlockCategory keys on
  the code-animation tag; existing code-snippet themes are untouched)
- generator: groupForItem maps code-animation -> Code Animations
---
 docs/catalog/blocks/code-diff.mdx             |   44 +
 docs/catalog/blocks/code-highlight.mdx        |   44 +
 docs/catalog/blocks/code-morph.mdx            |   44 +
 docs/catalog/blocks/code-scroll.mdx           |   44 +
 docs/catalog/blocks/code-snippet-flight.mdx   |   44 +
 docs/catalog/blocks/code-typing.mdx           |   44 +
 docs/docs.json                                |   11 +
 packages/core/src/registry/types.ts           |    5 +-
 packages/studio/src/utils/blockCategories.ts  |    4 +-
 registry/blocks/code-diff/code-diff.html      | 1042 ++++++++++
 registry/blocks/code-diff/registry-item.json  |   24 +
 .../blocks/code-highlight/code-highlight.html |  985 +++++++++
 .../blocks/code-highlight/registry-item.json  |   24 +
 registry/blocks/code-morph/code-morph.html    | 1431 +++++++++++++
 registry/blocks/code-morph/registry-item.json |   24 +
 registry/blocks/code-scroll/code-scroll.html  | 1795 +++++++++++++++++
 .../blocks/code-scroll/registry-item.json     |   24 +
 .../code-snippet-flight.html                  |  887 ++++++++
 .../code-snippet-flight/registry-item.json    |   24 +
 registry/blocks/code-typing/code-typing.html  |  977 +++++++++
 .../blocks/code-typing/registry-item.json     |   24 +
 registry/registry.json                        |   24 +
 scripts/generate-catalog-pages.ts             |   21 +-
 23 files changed, 7579 insertions(+), 11 deletions(-)
 create mode 100644 docs/catalog/blocks/code-diff.mdx
 create mode 100644 docs/catalog/blocks/code-highlight.mdx
 create mode 100644 docs/catalog/blocks/code-morph.mdx
 create mode 100644 docs/catalog/blocks/code-scroll.mdx
 create mode 100644 docs/catalog/blocks/code-snippet-flight.mdx
 create mode 100644 docs/catalog/blocks/code-typing.mdx
 create mode 100644 registry/blocks/code-diff/code-diff.html
 create mode 100644 registry/blocks/code-diff/registry-item.json
 create mode 100644 registry/blocks/code-highlight/code-highlight.html
 create mode 100644 registry/blocks/code-highlight/registry-item.json
 create mode 100644 registry/blocks/code-morph/code-morph.html
 create mode 100644 registry/blocks/code-morph/registry-item.json
 create mode 100644 registry/blocks/code-scroll/code-scroll.html
 create mode 100644 registry/blocks/code-scroll/registry-item.json
 create mode 100644 registry/blocks/code-snippet-flight/code-snippet-flight.html
 create mode 100644 registry/blocks/code-snippet-flight/registry-item.json
 create mode 100644 registry/blocks/code-typing/code-typing.html
 create mode 100644 registry/blocks/code-typing/registry-item.json

diff --git a/docs/catalog/blocks/code-diff.mdx b/docs/catalog/blocks/code-diff.mdx
new file mode 100644
index 0000000000..d17740fa81
--- /dev/null
+++ b/docs/catalog/blocks/code-diff.mdx
@@ -0,0 +1,44 @@
+---
+title: "Code Diff"
+description: "An edit shown as a colored diff — removed lines collapse in red, added lines expand in green."
+---
+
+# Code Diff
+
+An edit shown as a colored diff — removed lines collapse in red, added lines expand in green.
+
+`code` `code-animation` `diff` `developer`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-diff.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-diff.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add code-diff
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 6s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `code-diff.html` | `compositions/code-diff.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="code-diff" data-composition-src="compositions/code-diff.html" data-start="0" data-duration="6" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
diff --git a/docs/catalog/blocks/code-highlight.mdx b/docs/catalog/blocks/code-highlight.mdx
new file mode 100644
index 0000000000..690b5772e6
--- /dev/null
+++ b/docs/catalog/blocks/code-highlight.mdx
@@ -0,0 +1,44 @@
+---
+title: "Code Highlight Sweep"
+description: "A highlight band sweeps across a target line while the surrounding context dims — draws the eye to one line."
+---
+
+# Code Highlight Sweep
+
+A highlight band sweeps across a target line while the surrounding context dims — draws the eye to one line.
+
+`code` `code-animation` `highlight` `developer`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-highlight.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-highlight.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add code-highlight
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 5s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `code-highlight.html` | `compositions/code-highlight.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="code-highlight" data-composition-src="compositions/code-highlight.html" data-start="0" data-duration="5" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
diff --git a/docs/catalog/blocks/code-morph.mdx b/docs/catalog/blocks/code-morph.mdx
new file mode 100644
index 0000000000..b5f8b52e06
--- /dev/null
+++ b/docs/catalog/blocks/code-morph.mdx
@@ -0,0 +1,44 @@
+---
+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."
+---
+
+# Code Morph
+
+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.
+
+`code` `code-animation` `morph` `refactor` `developer`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-morph.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-morph.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add code-morph
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 7s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `code-morph.html` | `compositions/code-morph.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="code-morph" data-composition-src="compositions/code-morph.html" data-start="0" data-duration="7" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
diff --git a/docs/catalog/blocks/code-scroll.mdx b/docs/catalog/blocks/code-scroll.mdx
new file mode 100644
index 0000000000..8f5ef33236
--- /dev/null
+++ b/docs/catalog/blocks/code-scroll.mdx
@@ -0,0 +1,44 @@
+---
+title: "Code Scroll To Line"
+description: "The camera scrolls a long file to bring a target line to center and spotlights it — for walking through real modules."
+---
+
+# Code Scroll To Line
+
+The camera scrolls a long file to bring a target line to center and spotlights it — for walking through real modules.
+
+`code` `code-animation` `scroll` `developer`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-scroll.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-scroll.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add code-scroll
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 6s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `code-scroll.html` | `compositions/code-scroll.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="code-scroll" data-composition-src="compositions/code-scroll.html" data-start="0" data-duration="6" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
diff --git a/docs/catalog/blocks/code-snippet-flight.mdx b/docs/catalog/blocks/code-snippet-flight.mdx
new file mode 100644
index 0000000000..547a869614
--- /dev/null
+++ b/docs/catalog/blocks/code-snippet-flight.mdx
@@ -0,0 +1,44 @@
+---
+title: "Code Snippet Flight"
+description: "Discrete code snippets fly in from the side and assemble into a stacked program, staggered. Block-level FLIP."
+---
+
+# Code Snippet Flight
+
+Discrete code snippets fly in from the side and assemble into a stacked program, staggered. Block-level FLIP.
+
+`code` `code-animation` `flight` `developer`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-flight.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-flight.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add code-snippet-flight
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 6s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `code-snippet-flight.html` | `compositions/code-snippet-flight.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="code-snippet-flight" data-composition-src="compositions/code-snippet-flight.html" data-start="0" data-duration="6" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
diff --git a/docs/catalog/blocks/code-typing.mdx b/docs/catalog/blocks/code-typing.mdx
new file mode 100644
index 0000000000..d706d6b7d7
--- /dev/null
+++ b/docs/catalog/blocks/code-typing.mdx
@@ -0,0 +1,44 @@
+---
+title: "Code Typing"
+description: "Token-streamed typing reveal with a caret that tracks the frontier — deterministic, no CSS animation."
+---
+
+# Code Typing
+
+Token-streamed typing reveal with a caret that tracks the frontier — deterministic, no CSS animation.
+
+`code` `code-animation` `typing` `developer`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-typing.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-typing.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add code-typing
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 5s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `code-typing.html` | `compositions/code-typing.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="code-typing" data-composition-src="compositions/code-typing.html" data-start="0" data-duration="5" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
diff --git a/docs/docs.json b/docs/docs.json
index c8a1caac63..6c15a4d5c8 100644
--- a/docs/docs.json
+++ b/docs/docs.json
@@ -276,6 +276,17 @@
               "catalog/blocks/code-snippet-visual-studio-dark",
               "catalog/blocks/code-snippet-visual-studio-light"
             ]
+          },
+          {
+            "group": "Code Animations",
+            "pages": [
+              "catalog/blocks/code-morph",
+              "catalog/blocks/code-snippet-flight",
+              "catalog/blocks/code-typing",
+              "catalog/blocks/code-diff",
+              "catalog/blocks/code-highlight",
+              "catalog/blocks/code-scroll"
+            ]
           }
         ]
       },
diff --git a/packages/core/src/registry/types.ts b/packages/core/src/registry/types.ts
index cd7ae29c68..94797a9aaa 100644
--- a/packages/core/src/registry/types.ts
+++ b/packages/core/src/registry/types.ts
@@ -182,7 +182,8 @@ export type BlockCategory =
   | "scenes"
   | "captions"
   | "effects"
-  | "text-effects";
+  | "text-effects"
+  | "code-animation";
 
 export interface BlockCategoryMeta {
   id: BlockCategory;
@@ -192,6 +193,7 @@ export interface BlockCategoryMeta {
 
 export const BLOCK_CATEGORIES: BlockCategoryMeta[] = [
   { id: "captions", label: "Captions", color: "cyan" },
+  { id: "code-animation", label: "Code Animations", color: "emerald" },
   { id: "vfx", label: "VFX", color: "purple" },
   { id: "transitions", label: "Transitions", color: "blue" },
   { id: "effects", label: "Effects", color: "rose" },
@@ -205,6 +207,7 @@ export function resolveBlockCategory(tags: string[] | undefined): BlockCategory
   if (!tags || tags.length === 0) return "scenes";
   const set = new Set(tags);
   if (set.has("captions") || set.has("caption-style")) return "captions";
+  if (set.has("code-animation")) return "code-animation";
   if (set.has("transition")) return "transitions";
   if (set.has("social") || set.has("overlay")) return "social";
   if (set.has("data") || set.has("chart") || set.has("map")) return "data";
diff --git a/packages/studio/src/utils/blockCategories.ts b/packages/studio/src/utils/blockCategories.ts
index 6358ed6482..fc077b64ef 100644
--- a/packages/studio/src/utils/blockCategories.ts
+++ b/packages/studio/src/utils/blockCategories.ts
@@ -1,11 +1,10 @@
 import {
   type BlockCategory,
-  type BlockCategoryMeta,
   BLOCK_CATEGORIES,
   resolveBlockCategory,
 } from "@hyperframes/core/registry";
 
-export type { BlockCategory, BlockCategoryMeta };
+export type { BlockCategory };
 export { BLOCK_CATEGORIES, resolveBlockCategory };
 
 const COLOR_MAP: Record<BlockCategory, { bg: string; text: string; dot: string }> = {
@@ -17,6 +16,7 @@ const COLOR_MAP: Record<BlockCategory, { bg: string; text: string; dot: string }
   captions: { bg: "bg-cyan-500/15", text: "text-cyan-400", dot: "bg-cyan-400" },
   effects: { bg: "bg-rose-500/15", text: "text-rose-400", dot: "bg-rose-400" },
   "text-effects": { bg: "bg-violet-500/15", text: "text-violet-400", dot: "bg-violet-400" },
+  "code-animation": { bg: "bg-emerald-500/15", text: "text-emerald-400", dot: "bg-emerald-400" },
 };
 
 export function getCategoryColors(category: BlockCategory) {
diff --git a/registry/blocks/code-diff/code-diff.html b/registry/blocks/code-diff/code-diff.html
new file mode 100644
index 0000000000..7fa59b6456
--- /dev/null
+++ b/registry/blocks/code-diff/code-diff.html
@@ -0,0 +1,1042 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <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>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #05070b;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        font-family: "JetBrains Mono", monospace;
+        color: #e6edf3;
+      }
+      .bg-field {
+        position: absolute;
+        inset: 0;
+        background: radial-gradient(1200px 700px at 50% 18%, #0e1726 0%, #070b12 55%, #05070b 100%);
+      }
+      .bg-grid {
+        position: absolute;
+        inset: 0;
+        background-image:
+          linear-gradient(rgba(88, 166, 255, 0.05) 1px, transparent 1px),
+          linear-gradient(90deg, rgba(88, 166, 255, 0.05) 1px, transparent 1px);
+        background-size: 64px 64px;
+        mask-image: radial-gradient(1100px 620px at 50% 42%, #000 0%, transparent 78%);
+      }
+      .bg-glow {
+        position: absolute;
+        width: 900px;
+        height: 900px;
+        border-radius: 50%;
+        filter: blur(120px);
+        opacity: 0.5;
+      }
+      .bg-glow.a {
+        background: #1f6feb55;
+        left: -180px;
+        top: -200px;
+      }
+      .bg-glow.b {
+        background: #2ea04355;
+        right: -200px;
+        bottom: -260px;
+      }
+      .editor {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 1380px;
+        height: 800px;
+        background: #0b0f17;
+        border: 1px solid #1d2733;
+        border-radius: 16px;
+        box-shadow:
+          0 40px 120px rgba(0, 0, 0, 0.6),
+          0 2px 0 rgba(255, 255, 255, 0.03) inset;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+      }
+      .titlebar {
+        height: 56px;
+        flex: 0 0 56px;
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        padding: 0 22px;
+        background: linear-gradient(#11161f, #0c111a);
+        border-bottom: 1px solid #1b2430;
+      }
+      .dots {
+        display: flex;
+        gap: 10px;
+      }
+      .dot {
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+      }
+      .dot.r {
+        background: #ff5f57;
+      }
+      .dot.y {
+        background: #febc2e;
+      }
+      .dot.g {
+        background: #28c840;
+      }
+      .filename {
+        font-size: 19px;
+        color: #8b98a9;
+        letter-spacing: 0.2px;
+      }
+      .filename .accent {
+        color: #d6e2f0;
+      }
+      .code-surface {
+        position: relative;
+        flex: 1 1 auto;
+        overflow: hidden;
+      }
+      .scene {
+        position: absolute;
+        inset: 0;
+        opacity: 0;
+        will-change: opacity;
+      }
+      .code {
+        position: absolute;
+        top: 38px;
+        left: 0;
+        right: 0;
+        padding: 0 44px 0 104px;
+        font-size: 30px;
+        line-height: 46px;
+        font-variant-ligatures: none;
+        tab-size: 2;
+      }
+      .gutter {
+        position: absolute;
+        top: 38px;
+        left: 0;
+        width: 84px;
+        padding-right: 18px;
+        font-size: 30px;
+        line-height: 46px;
+        text-align: right;
+        color: #828c9b;
+        user-select: none;
+      }
+      .ln {
+        display: block;
+        height: 46px;
+      }
+      .line {
+        display: block;
+        min-height: 46px;
+        white-space: pre;
+        position: relative;
+        z-index: 1;
+      }
+      .tok {
+        display: inline-block;
+        white-space: pre;
+        will-change: transform, opacity;
+      }
+      .caret {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 3px;
+        height: 32px;
+        margin-top: 6px;
+        background: #58a6ff;
+        border-radius: 1px;
+        z-index: 3;
+      }
+      .hl-box {
+        position: absolute;
+        background: rgba(88, 166, 255, 0.16);
+        border-left: 3px solid #58a6ff;
+        border-radius: 6px;
+        z-index: 0;
+        overflow: hidden;
+      }
+      .diff-line {
+        display: block;
+        min-height: 0;
+        line-height: 46px;
+        white-space: pre;
+        position: relative;
+        overflow: hidden;
+        padding-left: 14px;
+      }
+      .diff-sign {
+        display: inline-block;
+        width: 22px;
+        color: #41506220;
+      }
+      .diff-del {
+        background: rgba(248, 81, 73, 0.12);
+        box-shadow: inset 3px 0 #f85149;
+      }
+      .diff-add {
+        background: rgba(63, 185, 80, 0.12);
+        box-shadow: inset 3px 0 #3fb950;
+      }
+      .diff-del .diff-sign {
+        color: #f85149;
+      }
+      .diff-add .diff-sign {
+        color: #3fb950;
+      }
+      .flight-block {
+        position: absolute;
+        white-space: pre;
+        font-size: 27px;
+        line-height: 40px;
+        padding: 11px 22px;
+        border-radius: 11px;
+        background: #0f1722;
+        border: 1px solid #233044;
+        box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
+        will-change: transform, opacity;
+      }
+      .flight-target {
+        position: absolute;
+        border: 1.5px dashed #2a3a4f;
+        border-radius: 14px;
+        opacity: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="code-diff"
+      data-start="0"
+      data-duration="6"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="bg-field" data-layout-ignore></div>
+      <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>
+          <span class="filename"><span class="accent">greet.js</span> — Code Diff</span>
+        </div>
+        <div class="code-surface" id="surface"></div>
+      </div>
+    </div>
+    <script>
+      window.__TOKENS = {
+        diff: {
+          lang: "js",
+          theme: "github-dark",
+          bg: "#24292e",
+          fg: "#e1e4e8",
+          states: [
+            {
+              code: 'function greet(name) {\n  console.log("hi " + name)\n}',
+              tokens: [
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-0",
+                  content: "function",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-1",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-2",
+                  content: "greet",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-3",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-4",
+                  content: "name",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-5",
+                  content: ") {",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-6",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-7",
+                  content: "  ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-8",
+                  content: "console.",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-9",
+                  content: "log",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-10",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-11",
+                  content: '"hi "',
+                  color: "#9ECBFF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-12",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-13",
+                  content: "+",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-14",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-15",
+                  content: "name)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-16",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-17",
+                  content: "}",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-18",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+              ],
+            },
+            {
+              code: 'function greet(name, lang) {\n  const msg = translate("hi", lang)\n  console.log(`${msg} ${name}`)\n}',
+              tokens: [
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-0",
+                  content: "function",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-1",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-2",
+                  content: "greet",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-3",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-4",
+                  content: "name",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-5",
+                  content: ",",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-6",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-7",
+                  content: "lang",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-5",
+                  content: ") {",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-6",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-7",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-11",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-12",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-13",
+                  content: "msg",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-14",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-15",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-16",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-17",
+                  content: "translate",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-10",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-19",
+                  content: '"hi"',
+                  color: "#9ECBFF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-20",
+                  content: ", lang)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-21",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-22",
+                  content: "  ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-23",
+                  content: "console.",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-9",
+                  content: "log",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-25",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-26",
+                  content: "`${",
+                  color: "#9ECBFF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-27",
+                  content: "msg",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-28",
+                  content: "} ${",
+                  color: "#9ECBFF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-29",
+                  content: "name",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-30",
+                  content: "}`",
+                  color: "#9ECBFF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-31",
+                  content: ")",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-16",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-17",
+                  content: "}",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-34",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+              ],
+            },
+          ],
+        },
+      };
+      window.__BLOCK = { id: "code-diff", effect: "diff", seq: "diff", duration: 6 };
+    </script>
+    <script>
+      // 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
+      // 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].
+      (function () {
+        "use strict";
+        var T = window.__TOKENS || {};
+
+        function lineDiv() {
+          var d = document.createElement("div");
+          d.className = "line";
+          return d;
+        }
+
+        // Render a code state's keyed tokens into codeEl as lines of inline-block .tok spans.
+        function renderState(codeEl, state) {
+          codeEl.textContent = "";
+          var keyToEl = new Map();
+          var line = lineDiv();
+          codeEl.appendChild(line);
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              line = lineDiv();
+              codeEl.appendChild(line);
+              continue;
+            }
+            var span = document.createElement("span");
+            span.className = "tok";
+            span.textContent = t.content;
+            span.style.color = t.color;
+            if (t.fontStyle & 1) span.style.fontStyle = "italic";
+            if (t.fontStyle & 2) span.style.fontWeight = "700";
+            line.appendChild(span);
+            keyToEl.set(t.key, span);
+          }
+          var last = codeEl.lastChild;
+          if (last && last.className === "line" && last.children.length === 0)
+            codeEl.removeChild(last);
+          return keyToEl;
+        }
+
+        function rectsOf(keyToEl) {
+          var m = new Map();
+          keyToEl.forEach(function (el, k) {
+            var r = el.getBoundingClientRect();
+            m.set(k, { left: r.left, top: r.top });
+          });
+          return m;
+        }
+
+        function makeScene(surface, withGutter) {
+          var scene = document.createElement("div");
+          scene.className = "scene";
+          if (withGutter) {
+            var g = document.createElement("div");
+            g.className = "gutter";
+            scene.appendChild(g);
+          }
+          var code = document.createElement("div");
+          code.className = "code";
+          scene.appendChild(code);
+          surface.appendChild(scene);
+          return { scene: scene, code: code, gutter: scene.querySelector(".gutter") };
+        }
+
+        function fillGutter(g, n) {
+          var html = "";
+          for (var i = 1; i <= n; i++) html += '<span class="ln">' + i + "</span>";
+          g.innerHTML = html;
+        }
+
+        function splitLines(state) {
+          var lines = [{ text: "", tokens: [] }];
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              lines.push({ text: "", tokens: [] });
+              continue;
+            }
+            var cur = lines[lines.length - 1];
+            cur.tokens.push(t);
+            cur.text += t.content;
+          }
+          if (lines.length && lines[lines.length - 1].tokens.length === 0) lines.pop();
+          return lines;
+        }
+
+        function lineDiff(a, b) {
+          var n = a.length;
+          var m = b.length;
+          var dp = [];
+          for (var i = 0; i <= n; i++) dp.push(new Array(m + 1).fill(0));
+          for (var i = n - 1; i >= 0; i--) {
+            for (var j = m - 1; j >= 0; j--) {
+              dp[i][j] =
+                a[i].text === b[j].text
+                  ? dp[i + 1][j + 1] + 1
+                  : Math.max(dp[i + 1][j], dp[i][j + 1]);
+            }
+          }
+          var ops = [];
+          var i = 0;
+          var j = 0;
+          while (i < n && j < m) {
+            if (a[i].text === b[j].text) {
+              ops.push({ type: "same", line: b[j] });
+              i++;
+              j++;
+            } else if (dp[i + 1][j] >= dp[i][j + 1]) {
+              ops.push({ type: "del", line: a[i] });
+              i++;
+            } else {
+              ops.push({ type: "add", line: b[j] });
+              j++;
+            }
+          }
+          while (i < n) ops.push({ type: "del", line: a[i++] });
+          while (j < m) ops.push({ type: "add", line: b[j++] });
+          return ops;
+        }
+
+        // ---- single-scene effect builders (fade in, play, hold to end) -------------
+        var FADE = 0.45;
+
+        function morph(tl, surface, states, start) {
+          var STEP = 1.2;
+          var HOLD = 1.0;
+          var t = start;
+          for (var s = 0; s < states.length - 1; s++) {
+            var parts = makeScene(surface, false);
+            var code = parts.code;
+            var fromEls = renderState(code, states[s]);
+            var fromR = rectsOf(fromEls);
+            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;
+            toEls.forEach(function (el, k) {
+              var fr = fromR.get(k);
+              var tr = toR.get(k);
+              if (fr) {
+                seg.fromTo(
+                  el,
+                  { x: fr.left - tr.left, y: fr.top - tr.top },
+                  { x: 0, y: 0, duration: STEP, ease: "power2.inOut" },
+                  0,
+                );
+              } else {
+                seg.fromTo(
+                  el,
+                  { opacity: 0 },
+                  { opacity: 1, duration: FD, ease: "power1.out" },
+                  ENTER_AT,
+                );
+              }
+            });
+            var toKeys = new Set(toEls.keys());
+            var fromState = states[s];
+            for (var i = 0; i < fromState.tokens.length; i++) {
+              var tok = fromState.tokens[i];
+              if (tok.content === "\n" || toKeys.has(tok.key) || !fromR.has(tok.key)) continue;
+              var r = fromR.get(tok.key);
+              var span = document.createElement("span");
+              span.className = "tok";
+              span.textContent = tok.content;
+              span.style.position = "absolute";
+              span.style.left = r.left - base.left + "px";
+              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);
+            }
+            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);
+            if (!isLast)
+              tl.to(parts.scene, { opacity: 0, duration: FADE, ease: "power1.in" }, segEnd - FADE);
+            tl.add(seg, segStart);
+            t = segEnd - FADE;
+          }
+        }
+
+        function flight(tl, surface, states, start) {
+          var FLY = 1.0;
+          var STAGGER = 0.3;
+          var parts = makeScene(surface, false);
+          parts.code.remove();
+          var scene = parts.scene;
+          var target = document.createElement("div");
+          target.className = "flight-target";
+          scene.appendChild(target);
+          var W = surface.clientWidth;
+          var H = surface.clientHeight;
+          var leftCx = W * 0.27;
+          var rightCx = W * 0.71;
+          var midY = H * 0.46;
+          var gap = 70;
+          var blocks = states.map(function (st) {
+            var blk = document.createElement("div");
+            blk.className = "flight-block";
+            renderState(blk, st);
+            scene.appendChild(blk);
+            return blk;
+          });
+          var n = blocks.length;
+          var maxW = 0;
+          var firstDestY = 0;
+          blocks.forEach(function (blk, i) {
+            var bw = blk.getBoundingClientRect().width;
+            if (bw > maxW) maxW = bw;
+            var destX = rightCx - bw / 2;
+            var destY = midY + (i - (n - 1) / 2) * gap;
+            if (i === 0) firstDestY = destY;
+            var srcX = leftCx - bw / 2;
+            var srcY = midY + (i - (n - 1) / 2) * (gap + 16);
+            blk.style.left = destX + "px";
+            blk.style.top = destY + "px";
+            tl.fromTo(
+              blk,
+              { x: srcX - destX, y: srcY - destY, opacity: 0, rotation: -5, scale: 0.9 },
+              {
+                x: 0,
+                y: 0,
+                opacity: 1,
+                rotation: 0,
+                scale: 1,
+                duration: FLY,
+                ease: "power3.inOut",
+              },
+              start + FADE + i * STAGGER,
+            );
+          });
+          target.style.left = rightCx - maxW / 2 - 26 + "px";
+          target.style.top = firstDestY - 18 + "px";
+          target.style.width = maxW + 52 + "px";
+          target.style.height = (n - 1) * gap + 62 + "px";
+          var landAt = start + FADE + (n - 1) * STAGGER + FLY;
+          tl.set(scene, { opacity: 1 }, 0);
+          tl.to(target, { opacity: 1, duration: 0.5, ease: "power1.out" }, landAt - 0.5);
+        }
+
+        function typing(tl, surface, state, start) {
+          var PER = 0.05;
+          var parts = makeScene(surface, true);
+          var code = parts.code;
+          var keyToEl = renderState(code, state);
+          fillGutter(parts.gutter, code.querySelectorAll(".line").length);
+          var base = code.getBoundingClientRect();
+          var caret = document.createElement("div");
+          caret.className = "caret";
+          code.appendChild(caret);
+          var toks = [];
+          keyToEl.forEach(function (el) {
+            toks.push(el);
+          });
+          tl.set(parts.scene, { opacity: 0 }, 0);
+          tl.to(parts.scene, { opacity: 1, duration: FADE, ease: "power1.out" }, start);
+          var t0 = start + FADE;
+          if (toks.length) {
+            var r0 = toks[0].getBoundingClientRect();
+            tl.set(caret, { x: r0.left - base.left, y: r0.top - base.top, opacity: 1 }, 0);
+          }
+          toks.forEach(function (el, i) {
+            tl.set(el, { opacity: 0 }, 0);
+            tl.to(el, { opacity: 1, duration: 0.08, ease: "none" }, t0 + i * PER);
+            var r = el.getBoundingClientRect();
+            tl.set(caret, { x: r.right - base.left, y: r.top - base.top }, t0 + i * PER);
+          });
+        }
+
+        function diff(tl, surface, states, start) {
+          var DEL = 0.55;
+          var ADD = 0.6;
+          var ops = lineDiff(splitLines(states[0]), splitLines(states[1]));
+          var parts = makeScene(surface, false);
+          var code = parts.code;
+          var delEls = [];
+          var addEls = [];
+          ops.forEach(function (op) {
+            var ln = document.createElement("div");
+            ln.className =
+              "diff-line" +
+              (op.type === "del" ? " diff-del" : op.type === "add" ? " diff-add" : "");
+            var sign = document.createElement("span");
+            sign.className = "diff-sign";
+            sign.textContent = op.type === "del" ? "- " : op.type === "add" ? "+ " : "  ";
+            ln.appendChild(sign);
+            op.line.tokens.forEach(function (t) {
+              var s = document.createElement("span");
+              s.className = "tok";
+              s.textContent = t.content;
+              s.style.color = t.color;
+              ln.appendChild(s);
+            });
+            code.appendChild(ln);
+            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);
+          var atDel = start + FADE + 0.3;
+          delEls.forEach(function (el, k) {
+            tl.fromTo(
+              el,
+              { height: 46, opacity: 1 },
+              { height: 0, opacity: 0, duration: DEL, ease: "power2.inOut" },
+              atDel + k * 0.08,
+            );
+          });
+          var atAdd = atDel + DEL + 0.15;
+          addEls.forEach(function (el, k) {
+            tl.set(el, { height: 0, opacity: 0 }, 0);
+            tl.fromTo(
+              el,
+              { height: 0, opacity: 0 },
+              { height: 46, opacity: 1, duration: ADD, ease: "power2.out" },
+              atAdd + k * 0.12,
+            );
+          });
+        }
+
+        function highlight(tl, surface, state, start, targetIdx) {
+          var SWEEP = 0.9;
+          var parts = makeScene(surface, true);
+          var code = parts.code;
+          renderState(code, state);
+          var lines = code.querySelectorAll(".line");
+          fillGutter(parts.gutter, lines.length);
+          var base = code.getBoundingClientRect();
+          var idx = Math.max(0, Math.min(lines.length - 1, targetIdx));
+          var lr = lines[idx].getBoundingClientRect();
+          var box = document.createElement("div");
+          box.className = "hl-box";
+          box.style.left = lr.left - base.left - 8 + "px";
+          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);
+          var at = start + FADE + 0.2;
+          tl.fromTo(
+            box,
+            { width: 0, opacity: 0 },
+            { width: lr.width + 18, opacity: 1, duration: SWEEP, ease: "power2.inOut" },
+            at,
+          );
+          for (var i = 0; i < lines.length; i++) {
+            if (i === idx) continue;
+            tl.fromTo(
+              lines[i],
+              { opacity: 1 },
+              { opacity: 0.45, duration: SWEEP, ease: "power2.inOut" },
+              at,
+            );
+          }
+        }
+
+        function scroll(tl, surface, state, start, targetLine) {
+          var SCROLL = 1.7;
+          var parts = makeScene(surface, true);
+          var code = parts.code;
+          renderState(code, state);
+          var lines = code.querySelectorAll(".line");
+          fillGutter(parts.gutter, lines.length);
+          var surfRect = surface.getBoundingClientRect();
+          var idx = Math.max(0, Math.min(lines.length - 1, targetLine - 1));
+          var lr = lines[idx].getBoundingClientRect();
+          var lineCenter = lr.top + lr.height / 2 - surfRect.top;
+          var dy = surfRect.height * 0.5 - lineCenter;
+          var box = document.createElement("div");
+          box.className = "hl-box";
+          box.style.left = lines[idx].offsetLeft - 8 + "px";
+          box.style.top = lines[idx].offsetTop - 1 + "px";
+          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);
+          var at = start + FADE + 0.35;
+          tl.fromTo(
+            [code, parts.gutter],
+            { y: 0 },
+            { y: dy, duration: SCROLL, ease: "power2.inOut" },
+            at,
+          );
+          var arrAt = at + SCROLL;
+          for (var i = 0; i < lines.length; i++) {
+            if (i === idx) continue;
+            tl.fromTo(
+              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);
+        }
+
+        function buildEffect(tl, surface, spec) {
+          var start = 0.45;
+          var seq = T[spec.seq];
+          if (spec.effect === "morph") morph(tl, surface, seq.states, start);
+          else if (spec.effect === "flight") flight(tl, surface, seq.states, start);
+          else if (spec.effect === "typing") typing(tl, surface, seq.states[0], start);
+          else if (spec.effect === "diff") diff(tl, surface, seq.states, start);
+          else if (spec.effect === "highlight")
+            highlight(tl, surface, seq.states[0], start, spec.line || 0);
+          else if (spec.effect === "scroll")
+            scroll(tl, surface, seq.states[0], start, spec.line || 1);
+        }
+
+        function go() {
+          var spec = window.__BLOCK;
+          var surface = document.getElementById("surface");
+          var root = document.getElementById("root");
+          window.__timelines = window.__timelines || {};
+          var tl = gsap.timeline({ paused: true });
+          window.__timelines["code-diff"] = tl; // register synchronously
+          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
+          });
+        }
+
+        if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
+        else go();
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/code-diff/registry-item.json b/registry/blocks/code-diff/registry-item.json
new file mode 100644
index 0000000000..00c456be9a
--- /dev/null
+++ b/registry/blocks/code-diff/registry-item.json
@@ -0,0 +1,24 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "code-diff",
+  "type": "hyperframes:block",
+  "title": "Code Diff",
+  "description": "An edit shown as a colored diff — removed lines collapse in red, added lines expand in green.",
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 6,
+  "tags": ["code", "code-animation", "diff", "developer"],
+  "files": [
+    {
+      "path": "code-diff.html",
+      "target": "compositions/code-diff.html",
+      "type": "hyperframes:composition"
+    }
+  ],
+  "preview": {
+    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-diff.mp4",
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-diff.png"
+  }
+}
diff --git a/registry/blocks/code-highlight/code-highlight.html b/registry/blocks/code-highlight/code-highlight.html
new file mode 100644
index 0000000000..42bdf43d5d
--- /dev/null
+++ b/registry/blocks/code-highlight/code-highlight.html
@@ -0,0 +1,985 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <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>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #05070b;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        font-family: "JetBrains Mono", monospace;
+        color: #e6edf3;
+      }
+      .bg-field {
+        position: absolute;
+        inset: 0;
+        background: radial-gradient(1200px 700px at 50% 18%, #0e1726 0%, #070b12 55%, #05070b 100%);
+      }
+      .bg-grid {
+        position: absolute;
+        inset: 0;
+        background-image:
+          linear-gradient(rgba(88, 166, 255, 0.05) 1px, transparent 1px),
+          linear-gradient(90deg, rgba(88, 166, 255, 0.05) 1px, transparent 1px);
+        background-size: 64px 64px;
+        mask-image: radial-gradient(1100px 620px at 50% 42%, #000 0%, transparent 78%);
+      }
+      .bg-glow {
+        position: absolute;
+        width: 900px;
+        height: 900px;
+        border-radius: 50%;
+        filter: blur(120px);
+        opacity: 0.5;
+      }
+      .bg-glow.a {
+        background: #1f6feb55;
+        left: -180px;
+        top: -200px;
+      }
+      .bg-glow.b {
+        background: #2ea04355;
+        right: -200px;
+        bottom: -260px;
+      }
+      .editor {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 1380px;
+        height: 800px;
+        background: #0b0f17;
+        border: 1px solid #1d2733;
+        border-radius: 16px;
+        box-shadow:
+          0 40px 120px rgba(0, 0, 0, 0.6),
+          0 2px 0 rgba(255, 255, 255, 0.03) inset;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+      }
+      .titlebar {
+        height: 56px;
+        flex: 0 0 56px;
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        padding: 0 22px;
+        background: linear-gradient(#11161f, #0c111a);
+        border-bottom: 1px solid #1b2430;
+      }
+      .dots {
+        display: flex;
+        gap: 10px;
+      }
+      .dot {
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+      }
+      .dot.r {
+        background: #ff5f57;
+      }
+      .dot.y {
+        background: #febc2e;
+      }
+      .dot.g {
+        background: #28c840;
+      }
+      .filename {
+        font-size: 19px;
+        color: #8b98a9;
+        letter-spacing: 0.2px;
+      }
+      .filename .accent {
+        color: #d6e2f0;
+      }
+      .code-surface {
+        position: relative;
+        flex: 1 1 auto;
+        overflow: hidden;
+      }
+      .scene {
+        position: absolute;
+        inset: 0;
+        opacity: 0;
+        will-change: opacity;
+      }
+      .code {
+        position: absolute;
+        top: 38px;
+        left: 0;
+        right: 0;
+        padding: 0 44px 0 104px;
+        font-size: 30px;
+        line-height: 46px;
+        font-variant-ligatures: none;
+        tab-size: 2;
+      }
+      .gutter {
+        position: absolute;
+        top: 38px;
+        left: 0;
+        width: 84px;
+        padding-right: 18px;
+        font-size: 30px;
+        line-height: 46px;
+        text-align: right;
+        color: #828c9b;
+        user-select: none;
+      }
+      .ln {
+        display: block;
+        height: 46px;
+      }
+      .line {
+        display: block;
+        min-height: 46px;
+        white-space: pre;
+        position: relative;
+        z-index: 1;
+      }
+      .tok {
+        display: inline-block;
+        white-space: pre;
+        will-change: transform, opacity;
+      }
+      .caret {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 3px;
+        height: 32px;
+        margin-top: 6px;
+        background: #58a6ff;
+        border-radius: 1px;
+        z-index: 3;
+      }
+      .hl-box {
+        position: absolute;
+        background: rgba(88, 166, 255, 0.16);
+        border-left: 3px solid #58a6ff;
+        border-radius: 6px;
+        z-index: 0;
+        overflow: hidden;
+      }
+      .diff-line {
+        display: block;
+        min-height: 0;
+        line-height: 46px;
+        white-space: pre;
+        position: relative;
+        overflow: hidden;
+        padding-left: 14px;
+      }
+      .diff-sign {
+        display: inline-block;
+        width: 22px;
+        color: #41506220;
+      }
+      .diff-del {
+        background: rgba(248, 81, 73, 0.12);
+        box-shadow: inset 3px 0 #f85149;
+      }
+      .diff-add {
+        background: rgba(63, 185, 80, 0.12);
+        box-shadow: inset 3px 0 #3fb950;
+      }
+      .diff-del .diff-sign {
+        color: #f85149;
+      }
+      .diff-add .diff-sign {
+        color: #3fb950;
+      }
+      .flight-block {
+        position: absolute;
+        white-space: pre;
+        font-size: 27px;
+        line-height: 40px;
+        padding: 11px 22px;
+        border-radius: 11px;
+        background: #0f1722;
+        border: 1px solid #233044;
+        box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
+        will-change: transform, opacity;
+      }
+      .flight-target {
+        position: absolute;
+        border: 1.5px dashed #2a3a4f;
+        border-radius: 14px;
+        opacity: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="code-highlight"
+      data-start="0"
+      data-duration="5"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="bg-field" data-layout-ignore></div>
+      <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>
+          <span class="filename"
+            ><span class="accent">loadConfig.js</span> — Code Highlight Sweep</span
+          >
+        </div>
+        <div class="code-surface" id="surface"></div>
+      </div>
+    </div>
+    <script>
+      window.__TOKENS = {
+        feature: {
+          lang: "js",
+          theme: "github-dark",
+          bg: "#24292e",
+          fg: "#e1e4e8",
+          states: [
+            {
+              code: 'async function loadConfig(path) {\n  const raw = await readFile(path, "utf8")\n  const config = JSON.parse(raw)\n  return validate(config)\n}',
+              tokens: [
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-0",
+                  content: "async",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-1",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-2",
+                  content: "function",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-3",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-4",
+                  content: "loadConfig",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-5",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-6",
+                  content: "path",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-7",
+                  content: ") {",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-8",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-9",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-10",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-11",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-12",
+                  content: "raw",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-13",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-14",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-15",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-16",
+                  content: "await",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-17",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-18",
+                  content: "readFile",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-19",
+                  content: "(path,",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-20",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-21",
+                  content: '"utf8"',
+                  color: "#9ECBFF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-22",
+                  content: ")",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-23",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-24",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-25",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-26",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-27",
+                  content: "config",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-28",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-29",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-30",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-31",
+                  content: "JSON",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-32",
+                  content: ".",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-33",
+                  content: "parse",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-34",
+                  content: "(raw)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-35",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-36",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-37",
+                  content: "return",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-38",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-39",
+                  content: "validate",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-40",
+                  content: "(config)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-41",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-42",
+                  content: "}",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-43",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+              ],
+            },
+          ],
+        },
+      };
+      window.__BLOCK = {
+        id: "code-highlight",
+        effect: "highlight",
+        seq: "feature",
+        line: 1,
+        duration: 5,
+      };
+    </script>
+    <script>
+      // 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
+      // 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].
+      (function () {
+        "use strict";
+        var T = window.__TOKENS || {};
+
+        function lineDiv() {
+          var d = document.createElement("div");
+          d.className = "line";
+          return d;
+        }
+
+        // Render a code state's keyed tokens into codeEl as lines of inline-block .tok spans.
+        function renderState(codeEl, state) {
+          codeEl.textContent = "";
+          var keyToEl = new Map();
+          var line = lineDiv();
+          codeEl.appendChild(line);
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              line = lineDiv();
+              codeEl.appendChild(line);
+              continue;
+            }
+            var span = document.createElement("span");
+            span.className = "tok";
+            span.textContent = t.content;
+            span.style.color = t.color;
+            if (t.fontStyle & 1) span.style.fontStyle = "italic";
+            if (t.fontStyle & 2) span.style.fontWeight = "700";
+            line.appendChild(span);
+            keyToEl.set(t.key, span);
+          }
+          var last = codeEl.lastChild;
+          if (last && last.className === "line" && last.children.length === 0)
+            codeEl.removeChild(last);
+          return keyToEl;
+        }
+
+        function rectsOf(keyToEl) {
+          var m = new Map();
+          keyToEl.forEach(function (el, k) {
+            var r = el.getBoundingClientRect();
+            m.set(k, { left: r.left, top: r.top });
+          });
+          return m;
+        }
+
+        function makeScene(surface, withGutter) {
+          var scene = document.createElement("div");
+          scene.className = "scene";
+          if (withGutter) {
+            var g = document.createElement("div");
+            g.className = "gutter";
+            scene.appendChild(g);
+          }
+          var code = document.createElement("div");
+          code.className = "code";
+          scene.appendChild(code);
+          surface.appendChild(scene);
+          return { scene: scene, code: code, gutter: scene.querySelector(".gutter") };
+        }
+
+        function fillGutter(g, n) {
+          var html = "";
+          for (var i = 1; i <= n; i++) html += '<span class="ln">' + i + "</span>";
+          g.innerHTML = html;
+        }
+
+        function splitLines(state) {
+          var lines = [{ text: "", tokens: [] }];
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              lines.push({ text: "", tokens: [] });
+              continue;
+            }
+            var cur = lines[lines.length - 1];
+            cur.tokens.push(t);
+            cur.text += t.content;
+          }
+          if (lines.length && lines[lines.length - 1].tokens.length === 0) lines.pop();
+          return lines;
+        }
+
+        function lineDiff(a, b) {
+          var n = a.length;
+          var m = b.length;
+          var dp = [];
+          for (var i = 0; i <= n; i++) dp.push(new Array(m + 1).fill(0));
+          for (var i = n - 1; i >= 0; i--) {
+            for (var j = m - 1; j >= 0; j--) {
+              dp[i][j] =
+                a[i].text === b[j].text
+                  ? dp[i + 1][j + 1] + 1
+                  : Math.max(dp[i + 1][j], dp[i][j + 1]);
+            }
+          }
+          var ops = [];
+          var i = 0;
+          var j = 0;
+          while (i < n && j < m) {
+            if (a[i].text === b[j].text) {
+              ops.push({ type: "same", line: b[j] });
+              i++;
+              j++;
+            } else if (dp[i + 1][j] >= dp[i][j + 1]) {
+              ops.push({ type: "del", line: a[i] });
+              i++;
+            } else {
+              ops.push({ type: "add", line: b[j] });
+              j++;
+            }
+          }
+          while (i < n) ops.push({ type: "del", line: a[i++] });
+          while (j < m) ops.push({ type: "add", line: b[j++] });
+          return ops;
+        }
+
+        // ---- single-scene effect builders (fade in, play, hold to end) -------------
+        var FADE = 0.45;
+
+        function morph(tl, surface, states, start) {
+          var STEP = 1.2;
+          var HOLD = 1.0;
+          var t = start;
+          for (var s = 0; s < states.length - 1; s++) {
+            var parts = makeScene(surface, false);
+            var code = parts.code;
+            var fromEls = renderState(code, states[s]);
+            var fromR = rectsOf(fromEls);
+            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;
+            toEls.forEach(function (el, k) {
+              var fr = fromR.get(k);
+              var tr = toR.get(k);
+              if (fr) {
+                seg.fromTo(
+                  el,
+                  { x: fr.left - tr.left, y: fr.top - tr.top },
+                  { x: 0, y: 0, duration: STEP, ease: "power2.inOut" },
+                  0,
+                );
+              } else {
+                seg.fromTo(
+                  el,
+                  { opacity: 0 },
+                  { opacity: 1, duration: FD, ease: "power1.out" },
+                  ENTER_AT,
+                );
+              }
+            });
+            var toKeys = new Set(toEls.keys());
+            var fromState = states[s];
+            for (var i = 0; i < fromState.tokens.length; i++) {
+              var tok = fromState.tokens[i];
+              if (tok.content === "\n" || toKeys.has(tok.key) || !fromR.has(tok.key)) continue;
+              var r = fromR.get(tok.key);
+              var span = document.createElement("span");
+              span.className = "tok";
+              span.textContent = tok.content;
+              span.style.position = "absolute";
+              span.style.left = r.left - base.left + "px";
+              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);
+            }
+            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);
+            if (!isLast)
+              tl.to(parts.scene, { opacity: 0, duration: FADE, ease: "power1.in" }, segEnd - FADE);
+            tl.add(seg, segStart);
+            t = segEnd - FADE;
+          }
+        }
+
+        function flight(tl, surface, states, start) {
+          var FLY = 1.0;
+          var STAGGER = 0.3;
+          var parts = makeScene(surface, false);
+          parts.code.remove();
+          var scene = parts.scene;
+          var target = document.createElement("div");
+          target.className = "flight-target";
+          scene.appendChild(target);
+          var W = surface.clientWidth;
+          var H = surface.clientHeight;
+          var leftCx = W * 0.27;
+          var rightCx = W * 0.71;
+          var midY = H * 0.46;
+          var gap = 70;
+          var blocks = states.map(function (st) {
+            var blk = document.createElement("div");
+            blk.className = "flight-block";
+            renderState(blk, st);
+            scene.appendChild(blk);
+            return blk;
+          });
+          var n = blocks.length;
+          var maxW = 0;
+          var firstDestY = 0;
+          blocks.forEach(function (blk, i) {
+            var bw = blk.getBoundingClientRect().width;
+            if (bw > maxW) maxW = bw;
+            var destX = rightCx - bw / 2;
+            var destY = midY + (i - (n - 1) / 2) * gap;
+            if (i === 0) firstDestY = destY;
+            var srcX = leftCx - bw / 2;
+            var srcY = midY + (i - (n - 1) / 2) * (gap + 16);
+            blk.style.left = destX + "px";
+            blk.style.top = destY + "px";
+            tl.fromTo(
+              blk,
+              { x: srcX - destX, y: srcY - destY, opacity: 0, rotation: -5, scale: 0.9 },
+              {
+                x: 0,
+                y: 0,
+                opacity: 1,
+                rotation: 0,
+                scale: 1,
+                duration: FLY,
+                ease: "power3.inOut",
+              },
+              start + FADE + i * STAGGER,
+            );
+          });
+          target.style.left = rightCx - maxW / 2 - 26 + "px";
+          target.style.top = firstDestY - 18 + "px";
+          target.style.width = maxW + 52 + "px";
+          target.style.height = (n - 1) * gap + 62 + "px";
+          var landAt = start + FADE + (n - 1) * STAGGER + FLY;
+          tl.set(scene, { opacity: 1 }, 0);
+          tl.to(target, { opacity: 1, duration: 0.5, ease: "power1.out" }, landAt - 0.5);
+        }
+
+        function typing(tl, surface, state, start) {
+          var PER = 0.05;
+          var parts = makeScene(surface, true);
+          var code = parts.code;
+          var keyToEl = renderState(code, state);
+          fillGutter(parts.gutter, code.querySelectorAll(".line").length);
+          var base = code.getBoundingClientRect();
+          var caret = document.createElement("div");
+          caret.className = "caret";
+          code.appendChild(caret);
+          var toks = [];
+          keyToEl.forEach(function (el) {
+            toks.push(el);
+          });
+          tl.set(parts.scene, { opacity: 0 }, 0);
+          tl.to(parts.scene, { opacity: 1, duration: FADE, ease: "power1.out" }, start);
+          var t0 = start + FADE;
+          if (toks.length) {
+            var r0 = toks[0].getBoundingClientRect();
+            tl.set(caret, { x: r0.left - base.left, y: r0.top - base.top, opacity: 1 }, 0);
+          }
+          toks.forEach(function (el, i) {
+            tl.set(el, { opacity: 0 }, 0);
+            tl.to(el, { opacity: 1, duration: 0.08, ease: "none" }, t0 + i * PER);
+            var r = el.getBoundingClientRect();
+            tl.set(caret, { x: r.right - base.left, y: r.top - base.top }, t0 + i * PER);
+          });
+        }
+
+        function diff(tl, surface, states, start) {
+          var DEL = 0.55;
+          var ADD = 0.6;
+          var ops = lineDiff(splitLines(states[0]), splitLines(states[1]));
+          var parts = makeScene(surface, false);
+          var code = parts.code;
+          var delEls = [];
+          var addEls = [];
+          ops.forEach(function (op) {
+            var ln = document.createElement("div");
+            ln.className =
+              "diff-line" +
+              (op.type === "del" ? " diff-del" : op.type === "add" ? " diff-add" : "");
+            var sign = document.createElement("span");
+            sign.className = "diff-sign";
+            sign.textContent = op.type === "del" ? "- " : op.type === "add" ? "+ " : "  ";
+            ln.appendChild(sign);
+            op.line.tokens.forEach(function (t) {
+              var s = document.createElement("span");
+              s.className = "tok";
+              s.textContent = t.content;
+              s.style.color = t.color;
+              ln.appendChild(s);
+            });
+            code.appendChild(ln);
+            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);
+          var atDel = start + FADE + 0.3;
+          delEls.forEach(function (el, k) {
+            tl.fromTo(
+              el,
+              { height: 46, opacity: 1 },
+              { height: 0, opacity: 0, duration: DEL, ease: "power2.inOut" },
+              atDel + k * 0.08,
+            );
+          });
+          var atAdd = atDel + DEL + 0.15;
+          addEls.forEach(function (el, k) {
+            tl.set(el, { height: 0, opacity: 0 }, 0);
+            tl.fromTo(
+              el,
+              { height: 0, opacity: 0 },
+              { height: 46, opacity: 1, duration: ADD, ease: "power2.out" },
+              atAdd + k * 0.12,
+            );
+          });
+        }
+
+        function highlight(tl, surface, state, start, targetIdx) {
+          var SWEEP = 0.9;
+          var parts = makeScene(surface, true);
+          var code = parts.code;
+          renderState(code, state);
+          var lines = code.querySelectorAll(".line");
+          fillGutter(parts.gutter, lines.length);
+          var base = code.getBoundingClientRect();
+          var idx = Math.max(0, Math.min(lines.length - 1, targetIdx));
+          var lr = lines[idx].getBoundingClientRect();
+          var box = document.createElement("div");
+          box.className = "hl-box";
+          box.style.left = lr.left - base.left - 8 + "px";
+          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);
+          var at = start + FADE + 0.2;
+          tl.fromTo(
+            box,
+            { width: 0, opacity: 0 },
+            { width: lr.width + 18, opacity: 1, duration: SWEEP, ease: "power2.inOut" },
+            at,
+          );
+          for (var i = 0; i < lines.length; i++) {
+            if (i === idx) continue;
+            tl.fromTo(
+              lines[i],
+              { opacity: 1 },
+              { opacity: 0.45, duration: SWEEP, ease: "power2.inOut" },
+              at,
+            );
+          }
+        }
+
+        function scroll(tl, surface, state, start, targetLine) {
+          var SCROLL = 1.7;
+          var parts = makeScene(surface, true);
+          var code = parts.code;
+          renderState(code, state);
+          var lines = code.querySelectorAll(".line");
+          fillGutter(parts.gutter, lines.length);
+          var surfRect = surface.getBoundingClientRect();
+          var idx = Math.max(0, Math.min(lines.length - 1, targetLine - 1));
+          var lr = lines[idx].getBoundingClientRect();
+          var lineCenter = lr.top + lr.height / 2 - surfRect.top;
+          var dy = surfRect.height * 0.5 - lineCenter;
+          var box = document.createElement("div");
+          box.className = "hl-box";
+          box.style.left = lines[idx].offsetLeft - 8 + "px";
+          box.style.top = lines[idx].offsetTop - 1 + "px";
+          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);
+          var at = start + FADE + 0.35;
+          tl.fromTo(
+            [code, parts.gutter],
+            { y: 0 },
+            { y: dy, duration: SCROLL, ease: "power2.inOut" },
+            at,
+          );
+          var arrAt = at + SCROLL;
+          for (var i = 0; i < lines.length; i++) {
+            if (i === idx) continue;
+            tl.fromTo(
+              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);
+        }
+
+        function buildEffect(tl, surface, spec) {
+          var start = 0.45;
+          var seq = T[spec.seq];
+          if (spec.effect === "morph") morph(tl, surface, seq.states, start);
+          else if (spec.effect === "flight") flight(tl, surface, seq.states, start);
+          else if (spec.effect === "typing") typing(tl, surface, seq.states[0], start);
+          else if (spec.effect === "diff") diff(tl, surface, seq.states, start);
+          else if (spec.effect === "highlight")
+            highlight(tl, surface, seq.states[0], start, spec.line || 0);
+          else if (spec.effect === "scroll")
+            scroll(tl, surface, seq.states[0], start, spec.line || 1);
+        }
+
+        function go() {
+          var spec = window.__BLOCK;
+          var surface = document.getElementById("surface");
+          var root = document.getElementById("root");
+          window.__timelines = window.__timelines || {};
+          var tl = gsap.timeline({ paused: true });
+          window.__timelines["code-highlight"] = tl; // register synchronously
+          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
+          });
+        }
+
+        if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
+        else go();
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/code-highlight/registry-item.json b/registry/blocks/code-highlight/registry-item.json
new file mode 100644
index 0000000000..2c37e03407
--- /dev/null
+++ b/registry/blocks/code-highlight/registry-item.json
@@ -0,0 +1,24 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "code-highlight",
+  "type": "hyperframes:block",
+  "title": "Code Highlight Sweep",
+  "description": "A highlight band sweeps across a target line while the surrounding context dims — draws the eye to one line.",
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 5,
+  "tags": ["code", "code-animation", "highlight", "developer"],
+  "files": [
+    {
+      "path": "code-highlight.html",
+      "target": "compositions/code-highlight.html",
+      "type": "hyperframes:composition"
+    }
+  ],
+  "preview": {
+    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-highlight.mp4",
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-highlight.png"
+  }
+}
diff --git a/registry/blocks/code-morph/code-morph.html b/registry/blocks/code-morph/code-morph.html
new file mode 100644
index 0000000000..25ca145468
--- /dev/null
+++ b/registry/blocks/code-morph/code-morph.html
@@ -0,0 +1,1431 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <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>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #05070b;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        font-family: "JetBrains Mono", monospace;
+        color: #e6edf3;
+      }
+      .bg-field {
+        position: absolute;
+        inset: 0;
+        background: radial-gradient(1200px 700px at 50% 18%, #0e1726 0%, #070b12 55%, #05070b 100%);
+      }
+      .bg-grid {
+        position: absolute;
+        inset: 0;
+        background-image:
+          linear-gradient(rgba(88, 166, 255, 0.05) 1px, transparent 1px),
+          linear-gradient(90deg, rgba(88, 166, 255, 0.05) 1px, transparent 1px);
+        background-size: 64px 64px;
+        mask-image: radial-gradient(1100px 620px at 50% 42%, #000 0%, transparent 78%);
+      }
+      .bg-glow {
+        position: absolute;
+        width: 900px;
+        height: 900px;
+        border-radius: 50%;
+        filter: blur(120px);
+        opacity: 0.5;
+      }
+      .bg-glow.a {
+        background: #1f6feb55;
+        left: -180px;
+        top: -200px;
+      }
+      .bg-glow.b {
+        background: #2ea04355;
+        right: -200px;
+        bottom: -260px;
+      }
+      .editor {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 1380px;
+        height: 800px;
+        background: #0b0f17;
+        border: 1px solid #1d2733;
+        border-radius: 16px;
+        box-shadow:
+          0 40px 120px rgba(0, 0, 0, 0.6),
+          0 2px 0 rgba(255, 255, 255, 0.03) inset;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+      }
+      .titlebar {
+        height: 56px;
+        flex: 0 0 56px;
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        padding: 0 22px;
+        background: linear-gradient(#11161f, #0c111a);
+        border-bottom: 1px solid #1b2430;
+      }
+      .dots {
+        display: flex;
+        gap: 10px;
+      }
+      .dot {
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+      }
+      .dot.r {
+        background: #ff5f57;
+      }
+      .dot.y {
+        background: #febc2e;
+      }
+      .dot.g {
+        background: #28c840;
+      }
+      .filename {
+        font-size: 19px;
+        color: #8b98a9;
+        letter-spacing: 0.2px;
+      }
+      .filename .accent {
+        color: #d6e2f0;
+      }
+      .code-surface {
+        position: relative;
+        flex: 1 1 auto;
+        overflow: hidden;
+      }
+      .scene {
+        position: absolute;
+        inset: 0;
+        opacity: 0;
+        will-change: opacity;
+      }
+      .code {
+        position: absolute;
+        top: 38px;
+        left: 0;
+        right: 0;
+        padding: 0 44px 0 104px;
+        font-size: 30px;
+        line-height: 46px;
+        font-variant-ligatures: none;
+        tab-size: 2;
+      }
+      .gutter {
+        position: absolute;
+        top: 38px;
+        left: 0;
+        width: 84px;
+        padding-right: 18px;
+        font-size: 30px;
+        line-height: 46px;
+        text-align: right;
+        color: #828c9b;
+        user-select: none;
+      }
+      .ln {
+        display: block;
+        height: 46px;
+      }
+      .line {
+        display: block;
+        min-height: 46px;
+        white-space: pre;
+        position: relative;
+        z-index: 1;
+      }
+      .tok {
+        display: inline-block;
+        white-space: pre;
+        will-change: transform, opacity;
+      }
+      .caret {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 3px;
+        height: 32px;
+        margin-top: 6px;
+        background: #58a6ff;
+        border-radius: 1px;
+        z-index: 3;
+      }
+      .hl-box {
+        position: absolute;
+        background: rgba(88, 166, 255, 0.16);
+        border-left: 3px solid #58a6ff;
+        border-radius: 6px;
+        z-index: 0;
+        overflow: hidden;
+      }
+      .diff-line {
+        display: block;
+        min-height: 0;
+        line-height: 46px;
+        white-space: pre;
+        position: relative;
+        overflow: hidden;
+        padding-left: 14px;
+      }
+      .diff-sign {
+        display: inline-block;
+        width: 22px;
+        color: #41506220;
+      }
+      .diff-del {
+        background: rgba(248, 81, 73, 0.12);
+        box-shadow: inset 3px 0 #f85149;
+      }
+      .diff-add {
+        background: rgba(63, 185, 80, 0.12);
+        box-shadow: inset 3px 0 #3fb950;
+      }
+      .diff-del .diff-sign {
+        color: #f85149;
+      }
+      .diff-add .diff-sign {
+        color: #3fb950;
+      }
+      .flight-block {
+        position: absolute;
+        white-space: pre;
+        font-size: 27px;
+        line-height: 40px;
+        padding: 11px 22px;
+        border-radius: 11px;
+        background: #0f1722;
+        border: 1px solid #233044;
+        box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
+        will-change: transform, opacity;
+      }
+      .flight-target {
+        position: absolute;
+        border: 1.5px dashed #2a3a4f;
+        border-radius: 14px;
+        opacity: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="code-morph"
+      data-start="0"
+      data-duration="7"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="bg-field" data-layout-ignore></div>
+      <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>
+          <span class="filename"><span class="accent">refactor.js</span> — Code Morph</span>
+        </div>
+        <div class="code-surface" id="surface"></div>
+      </div>
+    </div>
+    <script>
+      window.__TOKENS = {
+        morph: {
+          lang: "js",
+          theme: "github-dark",
+          bg: "#24292e",
+          fg: "#e1e4e8",
+          states: [
+            {
+              code: "function activeNames(users) {\n  const out = []\n  for (const u of users) {\n    if (u.active) {\n      out.push(u.name)\n    }\n  }\n  return out\n}",
+              tokens: [
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-0",
+                  content: "function",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-1",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-2",
+                  content: "activeNames",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-3",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-4",
+                  content: "users",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-5",
+                  content: ") {",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-6",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-7",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-8",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-9",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-10",
+                  content: "out",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-11",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-12",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-13",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-14",
+                  content: "[]",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-15",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-16",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-17",
+                  content: "for",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-18",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-19",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-20",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-21",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-22",
+                  content: "u",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-23",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-24",
+                  content: "of",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-25",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-26",
+                  content: "users) {",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-27",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-28",
+                  content: "    ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-29",
+                  content: "if",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-30",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-31",
+                  content: "(u.active) {",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-32",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-33",
+                  content: "      ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-34",
+                  content: "out.",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-35",
+                  content: "push",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-36",
+                  content: "(u.name)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-37",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-38",
+                  content: "    ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-39",
+                  content: "}",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-40",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-41",
+                  content: "  ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-42",
+                  content: "}",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-43",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-44",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-45",
+                  content: "return",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-46",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-47",
+                  content: "out",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-48",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-49",
+                  content: "}",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-50",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+              ],
+            },
+            {
+              code: "function activeNames(users) {\n  return users\n    .filter((u) => u.active)\n    .map((u) => u.name)\n}",
+              tokens: [
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-0",
+                  content: "function",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-1",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-2",
+                  content: "activeNames",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-3",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-4",
+                  content: "users",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-5",
+                  content: ") {",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-6",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-7",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-45",
+                  content: "return",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-25",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-10",
+                  content: "users",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-27",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-28",
+                  content: "    ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-13",
+                  content: ".",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-14",
+                  content: "filter",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-15",
+                  content: "((",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-16",
+                  content: "u",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-17",
+                  content: ")",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-18",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-19",
+                  content: "=>",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-20",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-21",
+                  content: "u.active)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-32",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-23",
+                  content: "    ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-24",
+                  content: ".",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-25",
+                  content: "map",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-26",
+                  content: "((",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-27",
+                  content: "u",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-28",
+                  content: ")",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-29",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-30",
+                  content: "=>",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-31",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-32",
+                  content: "u.name)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-48",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-49",
+                  content: "}",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-35",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+              ],
+            },
+            {
+              code: "const activeNames = (users) =>\n  users.filter((u) => u.active).map((u) => u.name)",
+              tokens: [
+                {
+                  key: "VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-0",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-1",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-2",
+                  content: "activeNames",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-3",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-4",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-5",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-3",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-4",
+                  content: "users",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-8",
+                  content: ")",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-9",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-10",
+                  content: "=>",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-6",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-7",
+                  content: "  ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-13",
+                  content: "users.",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-14",
+                  content: "filter",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-15",
+                  content: "((",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-16",
+                  content: "u",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-17",
+                  content: ")",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-18",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-19",
+                  content: "=>",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-20",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-21",
+                  content: "u.active).",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-25",
+                  content: "map",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-26",
+                  content: "((",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-27",
+                  content: "u",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-28",
+                  content: ")",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-29",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-30",
+                  content: "=>",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-31",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-32",
+                  content: "u.name)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-30",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+              ],
+            },
+          ],
+        },
+      };
+      window.__BLOCK = { id: "code-morph", effect: "morph", seq: "morph", duration: 7 };
+    </script>
+    <script>
+      // 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
+      // 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].
+      (function () {
+        "use strict";
+        var T = window.__TOKENS || {};
+
+        function lineDiv() {
+          var d = document.createElement("div");
+          d.className = "line";
+          return d;
+        }
+
+        // Render a code state's keyed tokens into codeEl as lines of inline-block .tok spans.
+        function renderState(codeEl, state) {
+          codeEl.textContent = "";
+          var keyToEl = new Map();
+          var line = lineDiv();
+          codeEl.appendChild(line);
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              line = lineDiv();
+              codeEl.appendChild(line);
+              continue;
+            }
+            var span = document.createElement("span");
+            span.className = "tok";
+            span.textContent = t.content;
+            span.style.color = t.color;
+            if (t.fontStyle & 1) span.style.fontStyle = "italic";
+            if (t.fontStyle & 2) span.style.fontWeight = "700";
+            line.appendChild(span);
+            keyToEl.set(t.key, span);
+          }
+          var last = codeEl.lastChild;
+          if (last && last.className === "line" && last.children.length === 0)
+            codeEl.removeChild(last);
+          return keyToEl;
+        }
+
+        function rectsOf(keyToEl) {
+          var m = new Map();
+          keyToEl.forEach(function (el, k) {
+            var r = el.getBoundingClientRect();
+            m.set(k, { left: r.left, top: r.top });
+          });
+          return m;
+        }
+
+        function makeScene(surface, withGutter) {
+          var scene = document.createElement("div");
+          scene.className = "scene";
+          if (withGutter) {
+            var g = document.createElement("div");
+            g.className = "gutter";
+            scene.appendChild(g);
+          }
+          var code = document.createElement("div");
+          code.className = "code";
+          scene.appendChild(code);
+          surface.appendChild(scene);
+          return { scene: scene, code: code, gutter: scene.querySelector(".gutter") };
+        }
+
+        function fillGutter(g, n) {
+          var html = "";
+          for (var i = 1; i <= n; i++) html += '<span class="ln">' + i + "</span>";
+          g.innerHTML = html;
+        }
+
+        function splitLines(state) {
+          var lines = [{ text: "", tokens: [] }];
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              lines.push({ text: "", tokens: [] });
+              continue;
+            }
+            var cur = lines[lines.length - 1];
+            cur.tokens.push(t);
+            cur.text += t.content;
+          }
+          if (lines.length && lines[lines.length - 1].tokens.length === 0) lines.pop();
+          return lines;
+        }
+
+        function lineDiff(a, b) {
+          var n = a.length;
+          var m = b.length;
+          var dp = [];
+          for (var i = 0; i <= n; i++) dp.push(new Array(m + 1).fill(0));
+          for (var i = n - 1; i >= 0; i--) {
+            for (var j = m - 1; j >= 0; j--) {
+              dp[i][j] =
+                a[i].text === b[j].text
+                  ? dp[i + 1][j + 1] + 1
+                  : Math.max(dp[i + 1][j], dp[i][j + 1]);
+            }
+          }
+          var ops = [];
+          var i = 0;
+          var j = 0;
+          while (i < n && j < m) {
+            if (a[i].text === b[j].text) {
+              ops.push({ type: "same", line: b[j] });
+              i++;
+              j++;
+            } else if (dp[i + 1][j] >= dp[i][j + 1]) {
+              ops.push({ type: "del", line: a[i] });
+              i++;
+            } else {
+              ops.push({ type: "add", line: b[j] });
+              j++;
+            }
+          }
+          while (i < n) ops.push({ type: "del", line: a[i++] });
+          while (j < m) ops.push({ type: "add", line: b[j++] });
+          return ops;
+        }
+
+        // ---- single-scene effect builders (fade in, play, hold to end) -------------
+        var FADE = 0.45;
+
+        function morph(tl, surface, states, start) {
+          var STEP = 1.2;
+          var HOLD = 1.0;
+          var t = start;
+          for (var s = 0; s < states.length - 1; s++) {
+            var parts = makeScene(surface, false);
+            var code = parts.code;
+            var fromEls = renderState(code, states[s]);
+            var fromR = rectsOf(fromEls);
+            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;
+            toEls.forEach(function (el, k) {
+              var fr = fromR.get(k);
+              var tr = toR.get(k);
+              if (fr) {
+                seg.fromTo(
+                  el,
+                  { x: fr.left - tr.left, y: fr.top - tr.top },
+                  { x: 0, y: 0, duration: STEP, ease: "power2.inOut" },
+                  0,
+                );
+              } else {
+                seg.fromTo(
+                  el,
+                  { opacity: 0 },
+                  { opacity: 1, duration: FD, ease: "power1.out" },
+                  ENTER_AT,
+                );
+              }
+            });
+            var toKeys = new Set(toEls.keys());
+            var fromState = states[s];
+            for (var i = 0; i < fromState.tokens.length; i++) {
+              var tok = fromState.tokens[i];
+              if (tok.content === "\n" || toKeys.has(tok.key) || !fromR.has(tok.key)) continue;
+              var r = fromR.get(tok.key);
+              var span = document.createElement("span");
+              span.className = "tok";
+              span.textContent = tok.content;
+              span.style.position = "absolute";
+              span.style.left = r.left - base.left + "px";
+              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);
+            }
+            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);
+            if (!isLast)
+              tl.to(parts.scene, { opacity: 0, duration: FADE, ease: "power1.in" }, segEnd - FADE);
+            tl.add(seg, segStart);
+            t = segEnd - FADE;
+          }
+        }
+
+        function flight(tl, surface, states, start) {
+          var FLY = 1.0;
+          var STAGGER = 0.3;
+          var parts = makeScene(surface, false);
+          parts.code.remove();
+          var scene = parts.scene;
+          var target = document.createElement("div");
+          target.className = "flight-target";
+          scene.appendChild(target);
+          var W = surface.clientWidth;
+          var H = surface.clientHeight;
+          var leftCx = W * 0.27;
+          var rightCx = W * 0.71;
+          var midY = H * 0.46;
+          var gap = 70;
+          var blocks = states.map(function (st) {
+            var blk = document.createElement("div");
+            blk.className = "flight-block";
+            renderState(blk, st);
+            scene.appendChild(blk);
+            return blk;
+          });
+          var n = blocks.length;
+          var maxW = 0;
+          var firstDestY = 0;
+          blocks.forEach(function (blk, i) {
+            var bw = blk.getBoundingClientRect().width;
+            if (bw > maxW) maxW = bw;
+            var destX = rightCx - bw / 2;
+            var destY = midY + (i - (n - 1) / 2) * gap;
+            if (i === 0) firstDestY = destY;
+            var srcX = leftCx - bw / 2;
+            var srcY = midY + (i - (n - 1) / 2) * (gap + 16);
+            blk.style.left = destX + "px";
+            blk.style.top = destY + "px";
+            tl.fromTo(
+              blk,
+              { x: srcX - destX, y: srcY - destY, opacity: 0, rotation: -5, scale: 0.9 },
+              {
+                x: 0,
+                y: 0,
+                opacity: 1,
+                rotation: 0,
+                scale: 1,
+                duration: FLY,
+                ease: "power3.inOut",
+              },
+              start + FADE + i * STAGGER,
+            );
+          });
+          target.style.left = rightCx - maxW / 2 - 26 + "px";
+          target.style.top = firstDestY - 18 + "px";
+          target.style.width = maxW + 52 + "px";
+          target.style.height = (n - 1) * gap + 62 + "px";
+          var landAt = start + FADE + (n - 1) * STAGGER + FLY;
+          tl.set(scene, { opacity: 1 }, 0);
+          tl.to(target, { opacity: 1, duration: 0.5, ease: "power1.out" }, landAt - 0.5);
+        }
+
+        function typing(tl, surface, state, start) {
+          var PER = 0.05;
+          var parts = makeScene(surface, true);
+          var code = parts.code;
+          var keyToEl = renderState(code, state);
+          fillGutter(parts.gutter, code.querySelectorAll(".line").length);
+          var base = code.getBoundingClientRect();
+          var caret = document.createElement("div");
+          caret.className = "caret";
+          code.appendChild(caret);
+          var toks = [];
+          keyToEl.forEach(function (el) {
+            toks.push(el);
+          });
+          tl.set(parts.scene, { opacity: 0 }, 0);
+          tl.to(parts.scene, { opacity: 1, duration: FADE, ease: "power1.out" }, start);
+          var t0 = start + FADE;
+          if (toks.length) {
+            var r0 = toks[0].getBoundingClientRect();
+            tl.set(caret, { x: r0.left - base.left, y: r0.top - base.top, opacity: 1 }, 0);
+          }
+          toks.forEach(function (el, i) {
+            tl.set(el, { opacity: 0 }, 0);
+            tl.to(el, { opacity: 1, duration: 0.08, ease: "none" }, t0 + i * PER);
+            var r = el.getBoundingClientRect();
+            tl.set(caret, { x: r.right - base.left, y: r.top - base.top }, t0 + i * PER);
+          });
+        }
+
+        function diff(tl, surface, states, start) {
+          var DEL = 0.55;
+          var ADD = 0.6;
+          var ops = lineDiff(splitLines(states[0]), splitLines(states[1]));
+          var parts = makeScene(surface, false);
+          var code = parts.code;
+          var delEls = [];
+          var addEls = [];
+          ops.forEach(function (op) {
+            var ln = document.createElement("div");
+            ln.className =
+              "diff-line" +
+              (op.type === "del" ? " diff-del" : op.type === "add" ? " diff-add" : "");
+            var sign = document.createElement("span");
+            sign.className = "diff-sign";
+            sign.textContent = op.type === "del" ? "- " : op.type === "add" ? "+ " : "  ";
+            ln.appendChild(sign);
+            op.line.tokens.forEach(function (t) {
+              var s = document.createElement("span");
+              s.className = "tok";
+              s.textContent = t.content;
+              s.style.color = t.color;
+              ln.appendChild(s);
+            });
+            code.appendChild(ln);
+            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);
+          var atDel = start + FADE + 0.3;
+          delEls.forEach(function (el, k) {
+            tl.fromTo(
+              el,
+              { height: 46, opacity: 1 },
+              { height: 0, opacity: 0, duration: DEL, ease: "power2.inOut" },
+              atDel + k * 0.08,
+            );
+          });
+          var atAdd = atDel + DEL + 0.15;
+          addEls.forEach(function (el, k) {
+            tl.set(el, { height: 0, opacity: 0 }, 0);
+            tl.fromTo(
+              el,
+              { height: 0, opacity: 0 },
+              { height: 46, opacity: 1, duration: ADD, ease: "power2.out" },
+              atAdd + k * 0.12,
+            );
+          });
+        }
+
+        function highlight(tl, surface, state, start, targetIdx) {
+          var SWEEP = 0.9;
+          var parts = makeScene(surface, true);
+          var code = parts.code;
+          renderState(code, state);
+          var lines = code.querySelectorAll(".line");
+          fillGutter(parts.gutter, lines.length);
+          var base = code.getBoundingClientRect();
+          var idx = Math.max(0, Math.min(lines.length - 1, targetIdx));
+          var lr = lines[idx].getBoundingClientRect();
+          var box = document.createElement("div");
+          box.className = "hl-box";
+          box.style.left = lr.left - base.left - 8 + "px";
+          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);
+          var at = start + FADE + 0.2;
+          tl.fromTo(
+            box,
+            { width: 0, opacity: 0 },
+            { width: lr.width + 18, opacity: 1, duration: SWEEP, ease: "power2.inOut" },
+            at,
+          );
+          for (var i = 0; i < lines.length; i++) {
+            if (i === idx) continue;
+            tl.fromTo(
+              lines[i],
+              { opacity: 1 },
+              { opacity: 0.45, duration: SWEEP, ease: "power2.inOut" },
+              at,
+            );
+          }
+        }
+
+        function scroll(tl, surface, state, start, targetLine) {
+          var SCROLL = 1.7;
+          var parts = makeScene(surface, true);
+          var code = parts.code;
+          renderState(code, state);
+          var lines = code.querySelectorAll(".line");
+          fillGutter(parts.gutter, lines.length);
+          var surfRect = surface.getBoundingClientRect();
+          var idx = Math.max(0, Math.min(lines.length - 1, targetLine - 1));
+          var lr = lines[idx].getBoundingClientRect();
+          var lineCenter = lr.top + lr.height / 2 - surfRect.top;
+          var dy = surfRect.height * 0.5 - lineCenter;
+          var box = document.createElement("div");
+          box.className = "hl-box";
+          box.style.left = lines[idx].offsetLeft - 8 + "px";
+          box.style.top = lines[idx].offsetTop - 1 + "px";
+          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);
+          var at = start + FADE + 0.35;
+          tl.fromTo(
+            [code, parts.gutter],
+            { y: 0 },
+            { y: dy, duration: SCROLL, ease: "power2.inOut" },
+            at,
+          );
+          var arrAt = at + SCROLL;
+          for (var i = 0; i < lines.length; i++) {
+            if (i === idx) continue;
+            tl.fromTo(
+              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);
+        }
+
+        function buildEffect(tl, surface, spec) {
+          var start = 0.45;
+          var seq = T[spec.seq];
+          if (spec.effect === "morph") morph(tl, surface, seq.states, start);
+          else if (spec.effect === "flight") flight(tl, surface, seq.states, start);
+          else if (spec.effect === "typing") typing(tl, surface, seq.states[0], start);
+          else if (spec.effect === "diff") diff(tl, surface, seq.states, start);
+          else if (spec.effect === "highlight")
+            highlight(tl, surface, seq.states[0], start, spec.line || 0);
+          else if (spec.effect === "scroll")
+            scroll(tl, surface, seq.states[0], start, spec.line || 1);
+        }
+
+        function go() {
+          var spec = window.__BLOCK;
+          var surface = document.getElementById("surface");
+          var root = document.getElementById("root");
+          window.__timelines = window.__timelines || {};
+          var tl = gsap.timeline({ paused: true });
+          window.__timelines["code-morph"] = tl; // register synchronously
+          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
+          });
+        }
+
+        if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
+        else go();
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/code-morph/registry-item.json b/registry/blocks/code-morph/registry-item.json
new file mode 100644
index 0000000000..9807525d63
--- /dev/null
+++ b/registry/blocks/code-morph/registry-item.json
@@ -0,0 +1,24 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "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.",
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 7,
+  "tags": ["code", "code-animation", "morph", "refactor", "developer"],
+  "files": [
+    {
+      "path": "code-morph.html",
+      "target": "compositions/code-morph.html",
+      "type": "hyperframes:composition"
+    }
+  ],
+  "preview": {
+    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-morph.mp4",
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-morph.png"
+  }
+}
diff --git a/registry/blocks/code-scroll/code-scroll.html b/registry/blocks/code-scroll/code-scroll.html
new file mode 100644
index 0000000000..7332440b65
--- /dev/null
+++ b/registry/blocks/code-scroll/code-scroll.html
@@ -0,0 +1,1795 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <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>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #05070b;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        font-family: "JetBrains Mono", monospace;
+        color: #e6edf3;
+      }
+      .bg-field {
+        position: absolute;
+        inset: 0;
+        background: radial-gradient(1200px 700px at 50% 18%, #0e1726 0%, #070b12 55%, #05070b 100%);
+      }
+      .bg-grid {
+        position: absolute;
+        inset: 0;
+        background-image:
+          linear-gradient(rgba(88, 166, 255, 0.05) 1px, transparent 1px),
+          linear-gradient(90deg, rgba(88, 166, 255, 0.05) 1px, transparent 1px);
+        background-size: 64px 64px;
+        mask-image: radial-gradient(1100px 620px at 50% 42%, #000 0%, transparent 78%);
+      }
+      .bg-glow {
+        position: absolute;
+        width: 900px;
+        height: 900px;
+        border-radius: 50%;
+        filter: blur(120px);
+        opacity: 0.5;
+      }
+      .bg-glow.a {
+        background: #1f6feb55;
+        left: -180px;
+        top: -200px;
+      }
+      .bg-glow.b {
+        background: #2ea04355;
+        right: -200px;
+        bottom: -260px;
+      }
+      .editor {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 1380px;
+        height: 800px;
+        background: #0b0f17;
+        border: 1px solid #1d2733;
+        border-radius: 16px;
+        box-shadow:
+          0 40px 120px rgba(0, 0, 0, 0.6),
+          0 2px 0 rgba(255, 255, 255, 0.03) inset;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+      }
+      .titlebar {
+        height: 56px;
+        flex: 0 0 56px;
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        padding: 0 22px;
+        background: linear-gradient(#11161f, #0c111a);
+        border-bottom: 1px solid #1b2430;
+      }
+      .dots {
+        display: flex;
+        gap: 10px;
+      }
+      .dot {
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+      }
+      .dot.r {
+        background: #ff5f57;
+      }
+      .dot.y {
+        background: #febc2e;
+      }
+      .dot.g {
+        background: #28c840;
+      }
+      .filename {
+        font-size: 19px;
+        color: #8b98a9;
+        letter-spacing: 0.2px;
+      }
+      .filename .accent {
+        color: #d6e2f0;
+      }
+      .code-surface {
+        position: relative;
+        flex: 1 1 auto;
+        overflow: hidden;
+      }
+      .scene {
+        position: absolute;
+        inset: 0;
+        opacity: 0;
+        will-change: opacity;
+      }
+      .code {
+        position: absolute;
+        top: 38px;
+        left: 0;
+        right: 0;
+        padding: 0 44px 0 104px;
+        font-size: 30px;
+        line-height: 46px;
+        font-variant-ligatures: none;
+        tab-size: 2;
+      }
+      .gutter {
+        position: absolute;
+        top: 38px;
+        left: 0;
+        width: 84px;
+        padding-right: 18px;
+        font-size: 30px;
+        line-height: 46px;
+        text-align: right;
+        color: #828c9b;
+        user-select: none;
+      }
+      .ln {
+        display: block;
+        height: 46px;
+      }
+      .line {
+        display: block;
+        min-height: 46px;
+        white-space: pre;
+        position: relative;
+        z-index: 1;
+      }
+      .tok {
+        display: inline-block;
+        white-space: pre;
+        will-change: transform, opacity;
+      }
+      .caret {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 3px;
+        height: 32px;
+        margin-top: 6px;
+        background: #58a6ff;
+        border-radius: 1px;
+        z-index: 3;
+      }
+      .hl-box {
+        position: absolute;
+        background: rgba(88, 166, 255, 0.16);
+        border-left: 3px solid #58a6ff;
+        border-radius: 6px;
+        z-index: 0;
+        overflow: hidden;
+      }
+      .diff-line {
+        display: block;
+        min-height: 0;
+        line-height: 46px;
+        white-space: pre;
+        position: relative;
+        overflow: hidden;
+        padding-left: 14px;
+      }
+      .diff-sign {
+        display: inline-block;
+        width: 22px;
+        color: #41506220;
+      }
+      .diff-del {
+        background: rgba(248, 81, 73, 0.12);
+        box-shadow: inset 3px 0 #f85149;
+      }
+      .diff-add {
+        background: rgba(63, 185, 80, 0.12);
+        box-shadow: inset 3px 0 #3fb950;
+      }
+      .diff-del .diff-sign {
+        color: #f85149;
+      }
+      .diff-add .diff-sign {
+        color: #3fb950;
+      }
+      .flight-block {
+        position: absolute;
+        white-space: pre;
+        font-size: 27px;
+        line-height: 40px;
+        padding: 11px 22px;
+        border-radius: 11px;
+        background: #0f1722;
+        border: 1px solid #233044;
+        box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
+        will-change: transform, opacity;
+      }
+      .flight-target {
+        position: absolute;
+        border: 1.5px dashed #2a3a4f;
+        border-radius: 14px;
+        opacity: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="code-scroll"
+      data-start="0"
+      data-duration="6"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="bg-field" data-layout-ignore></div>
+      <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>
+          <span class="filename"
+            ><span class="accent">fetchWithRetry.js</span> — Code Scroll To Line</span
+          >
+        </div>
+        <div class="code-surface" id="surface"></div>
+      </div>
+    </div>
+    <script>
+      window.__TOKENS = {
+        scroll: {
+          lang: "js",
+          theme: "github-dark",
+          bg: "#24292e",
+          fg: "#e1e4e8",
+          states: [
+            {
+              code: 'import { createClient } from "./client"\nimport { logger } from "./logger"\n\nconst RETRIES = 3\n\nexport async function fetchWithRetry(url, opts = {}) {\n  const client = createClient(opts)\n  let lastError = null\n\n  for (let attempt = 1; attempt <= RETRIES; attempt++) {\n    try {\n      const res = await client.get(url)\n      if (res.ok) return res.body\n      lastError = new Error("bad status " + res.status)\n    } catch (err) {\n      lastError = err\n      logger.warn("attempt " + attempt + " failed")\n    }\n    await sleep(attempt * 250)\n  }\n\n  throw lastError\n}',
+              tokens: [
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-0",
+                  content: "import",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-1",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-2",
+                  content: "{ createClient }",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-3",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-4",
+                  content: "from",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-5",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-6",
+                  content: '"./client"',
+                  color: "#9ECBFF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-7",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-8",
+                  content: "import",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-9",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-10",
+                  content: "{ logger }",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-11",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-12",
+                  content: "from",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-13",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-14",
+                  content: '"./logger"',
+                  color: "#9ECBFF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-15",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-16",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-17",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-18",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-19",
+                  content: "RETRIES",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-20",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-21",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-22",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-23",
+                  content: "3",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-24",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-25",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-26",
+                  content: "export",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-27",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-28",
+                  content: "async",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-29",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-30",
+                  content: "function",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-31",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-32",
+                  content: "fetchWithRetry",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-33",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-34",
+                  content: "url",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-35",
+                  content: ",",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-36",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-37",
+                  content: "opts",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-38",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-39",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-40",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-41",
+                  content: "{}) {",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-42",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-43",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-44",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-45",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-46",
+                  content: "client",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-47",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-48",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-49",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-50",
+                  content: "createClient",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-51",
+                  content: "(opts)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-52",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-53",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-54",
+                  content: "let",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-55",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-56",
+                  content: "lastError",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-57",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-58",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-59",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-60",
+                  content: "null",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-61",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-62",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-63",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-64",
+                  content: "for",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-65",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-66",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-67",
+                  content: "let",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-68",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-69",
+                  content: "attempt",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-70",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-71",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-72",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-73",
+                  content: "1",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-74",
+                  content: "; attempt",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-75",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-76",
+                  content: "<=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-77",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-78",
+                  content: "RETRIES",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-79",
+                  content: "; attempt",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-80",
+                  content: "++",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-81",
+                  content: ") {",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-82",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-83",
+                  content: "    ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-84",
+                  content: "try",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-85",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-86",
+                  content: "{",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-87",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-88",
+                  content: "      ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-89",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-90",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-91",
+                  content: "res",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-92",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-93",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-94",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-95",
+                  content: "await",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-96",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-97",
+                  content: "client.",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-98",
+                  content: "get",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-99",
+                  content: "(url)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-100",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-101",
+                  content: "      ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-102",
+                  content: "if",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-103",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-104",
+                  content: "(res.ok)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-105",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-106",
+                  content: "return",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-107",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-108",
+                  content: "res.body",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-109",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-110",
+                  content: "      ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-111",
+                  content: "lastError",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-112",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-113",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-114",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-115",
+                  content: "new",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-116",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-117",
+                  content: "Error",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-118",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-119",
+                  content: '"bad status "',
+                  color: "#9ECBFF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-120",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-121",
+                  content: "+",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-122",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-123",
+                  content: "res.status)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-124",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-125",
+                  content: "    ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-126",
+                  content: "}",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-127",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-128",
+                  content: "catch",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-129",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-130",
+                  content: "(err) {",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-131",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-132",
+                  content: "      ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-133",
+                  content: "lastError",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-134",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-135",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-136",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-137",
+                  content: "err",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-138",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-139",
+                  content: "      ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-140",
+                  content: "logger.",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-141",
+                  content: "warn",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-142",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-143",
+                  content: '"attempt "',
+                  color: "#9ECBFF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-144",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-145",
+                  content: "+",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-146",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-147",
+                  content: "attempt",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-148",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-149",
+                  content: "+",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-150",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-151",
+                  content: '" failed"',
+                  color: "#9ECBFF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-152",
+                  content: ")",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-153",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-154",
+                  content: "    ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-155",
+                  content: "}",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-156",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-157",
+                  content: "    ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-158",
+                  content: "await",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-159",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-160",
+                  content: "sleep",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-161",
+                  content: "(attempt",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-162",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-163",
+                  content: "*",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-164",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-165",
+                  content: "250",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-166",
+                  content: ")",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-167",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-168",
+                  content: "  ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-169",
+                  content: "}",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-170",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-171",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-172",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-173",
+                  content: "throw",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-174",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-175",
+                  content: "lastError",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-176",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-177",
+                  content: "}",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-178",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+              ],
+            },
+          ],
+        },
+      };
+      window.__BLOCK = {
+        id: "code-scroll",
+        effect: "scroll",
+        seq: "scroll",
+        line: 12,
+        duration: 6,
+      };
+    </script>
+    <script>
+      // 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
+      // 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].
+      (function () {
+        "use strict";
+        var T = window.__TOKENS || {};
+
+        function lineDiv() {
+          var d = document.createElement("div");
+          d.className = "line";
+          return d;
+        }
+
+        // Render a code state's keyed tokens into codeEl as lines of inline-block .tok spans.
+        function renderState(codeEl, state) {
+          codeEl.textContent = "";
+          var keyToEl = new Map();
+          var line = lineDiv();
+          codeEl.appendChild(line);
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              line = lineDiv();
+              codeEl.appendChild(line);
+              continue;
+            }
+            var span = document.createElement("span");
+            span.className = "tok";
+            span.textContent = t.content;
+            span.style.color = t.color;
+            if (t.fontStyle & 1) span.style.fontStyle = "italic";
+            if (t.fontStyle & 2) span.style.fontWeight = "700";
+            line.appendChild(span);
+            keyToEl.set(t.key, span);
+          }
+          var last = codeEl.lastChild;
+          if (last && last.className === "line" && last.children.length === 0)
+            codeEl.removeChild(last);
+          return keyToEl;
+        }
+
+        function rectsOf(keyToEl) {
+          var m = new Map();
+          keyToEl.forEach(function (el, k) {
+            var r = el.getBoundingClientRect();
+            m.set(k, { left: r.left, top: r.top });
+          });
+          return m;
+        }
+
+        function makeScene(surface, withGutter) {
+          var scene = document.createElement("div");
+          scene.className = "scene";
+          if (withGutter) {
+            var g = document.createElement("div");
+            g.className = "gutter";
+            scene.appendChild(g);
+          }
+          var code = document.createElement("div");
+          code.className = "code";
+          scene.appendChild(code);
+          surface.appendChild(scene);
+          return { scene: scene, code: code, gutter: scene.querySelector(".gutter") };
+        }
+
+        function fillGutter(g, n) {
+          var html = "";
+          for (var i = 1; i <= n; i++) html += '<span class="ln">' + i + "</span>";
+          g.innerHTML = html;
+        }
+
+        function splitLines(state) {
+          var lines = [{ text: "", tokens: [] }];
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              lines.push({ text: "", tokens: [] });
+              continue;
+            }
+            var cur = lines[lines.length - 1];
+            cur.tokens.push(t);
+            cur.text += t.content;
+          }
+          if (lines.length && lines[lines.length - 1].tokens.length === 0) lines.pop();
+          return lines;
+        }
+
+        function lineDiff(a, b) {
+          var n = a.length;
+          var m = b.length;
+          var dp = [];
+          for (var i = 0; i <= n; i++) dp.push(new Array(m + 1).fill(0));
+          for (var i = n - 1; i >= 0; i--) {
+            for (var j = m - 1; j >= 0; j--) {
+              dp[i][j] =
+                a[i].text === b[j].text
+                  ? dp[i + 1][j + 1] + 1
+                  : Math.max(dp[i + 1][j], dp[i][j + 1]);
+            }
+          }
+          var ops = [];
+          var i = 0;
+          var j = 0;
+          while (i < n && j < m) {
+            if (a[i].text === b[j].text) {
+              ops.push({ type: "same", line: b[j] });
+              i++;
+              j++;
+            } else if (dp[i + 1][j] >= dp[i][j + 1]) {
+              ops.push({ type: "del", line: a[i] });
+              i++;
+            } else {
+              ops.push({ type: "add", line: b[j] });
+              j++;
+            }
+          }
+          while (i < n) ops.push({ type: "del", line: a[i++] });
+          while (j < m) ops.push({ type: "add", line: b[j++] });
+          return ops;
+        }
+
+        // ---- single-scene effect builders (fade in, play, hold to end) -------------
+        var FADE = 0.45;
+
+        function morph(tl, surface, states, start) {
+          var STEP = 1.2;
+          var HOLD = 1.0;
+          var t = start;
+          for (var s = 0; s < states.length - 1; s++) {
+            var parts = makeScene(surface, false);
+            var code = parts.code;
+            var fromEls = renderState(code, states[s]);
+            var fromR = rectsOf(fromEls);
+            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;
+            toEls.forEach(function (el, k) {
+              var fr = fromR.get(k);
+              var tr = toR.get(k);
+              if (fr) {
+                seg.fromTo(
+                  el,
+                  { x: fr.left - tr.left, y: fr.top - tr.top },
+                  { x: 0, y: 0, duration: STEP, ease: "power2.inOut" },
+                  0,
+                );
+              } else {
+                seg.fromTo(
+                  el,
+                  { opacity: 0 },
+                  { opacity: 1, duration: FD, ease: "power1.out" },
+                  ENTER_AT,
+                );
+              }
+            });
+            var toKeys = new Set(toEls.keys());
+            var fromState = states[s];
+            for (var i = 0; i < fromState.tokens.length; i++) {
+              var tok = fromState.tokens[i];
+              if (tok.content === "\n" || toKeys.has(tok.key) || !fromR.has(tok.key)) continue;
+              var r = fromR.get(tok.key);
+              var span = document.createElement("span");
+              span.className = "tok";
+              span.textContent = tok.content;
+              span.style.position = "absolute";
+              span.style.left = r.left - base.left + "px";
+              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);
+            }
+            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);
+            if (!isLast)
+              tl.to(parts.scene, { opacity: 0, duration: FADE, ease: "power1.in" }, segEnd - FADE);
+            tl.add(seg, segStart);
+            t = segEnd - FADE;
+          }
+        }
+
+        function flight(tl, surface, states, start) {
+          var FLY = 1.0;
+          var STAGGER = 0.3;
+          var parts = makeScene(surface, false);
+          parts.code.remove();
+          var scene = parts.scene;
+          var target = document.createElement("div");
+          target.className = "flight-target";
+          scene.appendChild(target);
+          var W = surface.clientWidth;
+          var H = surface.clientHeight;
+          var leftCx = W * 0.27;
+          var rightCx = W * 0.71;
+          var midY = H * 0.46;
+          var gap = 70;
+          var blocks = states.map(function (st) {
+            var blk = document.createElement("div");
+            blk.className = "flight-block";
+            renderState(blk, st);
+            scene.appendChild(blk);
+            return blk;
+          });
+          var n = blocks.length;
+          var maxW = 0;
+          var firstDestY = 0;
+          blocks.forEach(function (blk, i) {
+            var bw = blk.getBoundingClientRect().width;
+            if (bw > maxW) maxW = bw;
+            var destX = rightCx - bw / 2;
+            var destY = midY + (i - (n - 1) / 2) * gap;
+            if (i === 0) firstDestY = destY;
+            var srcX = leftCx - bw / 2;
+            var srcY = midY + (i - (n - 1) / 2) * (gap + 16);
+            blk.style.left = destX + "px";
+            blk.style.top = destY + "px";
+            tl.fromTo(
+              blk,
+              { x: srcX - destX, y: srcY - destY, opacity: 0, rotation: -5, scale: 0.9 },
+              {
+                x: 0,
+                y: 0,
+                opacity: 1,
+                rotation: 0,
+                scale: 1,
+                duration: FLY,
+                ease: "power3.inOut",
+              },
+              start + FADE + i * STAGGER,
+            );
+          });
+          target.style.left = rightCx - maxW / 2 - 26 + "px";
+          target.style.top = firstDestY - 18 + "px";
+          target.style.width = maxW + 52 + "px";
+          target.style.height = (n - 1) * gap + 62 + "px";
+          var landAt = start + FADE + (n - 1) * STAGGER + FLY;
+          tl.set(scene, { opacity: 1 }, 0);
+          tl.to(target, { opacity: 1, duration: 0.5, ease: "power1.out" }, landAt - 0.5);
+        }
+
+        function typing(tl, surface, state, start) {
+          var PER = 0.05;
+          var parts = makeScene(surface, true);
+          var code = parts.code;
+          var keyToEl = renderState(code, state);
+          fillGutter(parts.gutter, code.querySelectorAll(".line").length);
+          var base = code.getBoundingClientRect();
+          var caret = document.createElement("div");
+          caret.className = "caret";
+          code.appendChild(caret);
+          var toks = [];
+          keyToEl.forEach(function (el) {
+            toks.push(el);
+          });
+          tl.set(parts.scene, { opacity: 0 }, 0);
+          tl.to(parts.scene, { opacity: 1, duration: FADE, ease: "power1.out" }, start);
+          var t0 = start + FADE;
+          if (toks.length) {
+            var r0 = toks[0].getBoundingClientRect();
+            tl.set(caret, { x: r0.left - base.left, y: r0.top - base.top, opacity: 1 }, 0);
+          }
+          toks.forEach(function (el, i) {
+            tl.set(el, { opacity: 0 }, 0);
+            tl.to(el, { opacity: 1, duration: 0.08, ease: "none" }, t0 + i * PER);
+            var r = el.getBoundingClientRect();
+            tl.set(caret, { x: r.right - base.left, y: r.top - base.top }, t0 + i * PER);
+          });
+        }
+
+        function diff(tl, surface, states, start) {
+          var DEL = 0.55;
+          var ADD = 0.6;
+          var ops = lineDiff(splitLines(states[0]), splitLines(states[1]));
+          var parts = makeScene(surface, false);
+          var code = parts.code;
+          var delEls = [];
+          var addEls = [];
+          ops.forEach(function (op) {
+            var ln = document.createElement("div");
+            ln.className =
+              "diff-line" +
+              (op.type === "del" ? " diff-del" : op.type === "add" ? " diff-add" : "");
+            var sign = document.createElement("span");
+            sign.className = "diff-sign";
+            sign.textContent = op.type === "del" ? "- " : op.type === "add" ? "+ " : "  ";
+            ln.appendChild(sign);
+            op.line.tokens.forEach(function (t) {
+              var s = document.createElement("span");
+              s.className = "tok";
+              s.textContent = t.content;
+              s.style.color = t.color;
+              ln.appendChild(s);
+            });
+            code.appendChild(ln);
+            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);
+          var atDel = start + FADE + 0.3;
+          delEls.forEach(function (el, k) {
+            tl.fromTo(
+              el,
+              { height: 46, opacity: 1 },
+              { height: 0, opacity: 0, duration: DEL, ease: "power2.inOut" },
+              atDel + k * 0.08,
+            );
+          });
+          var atAdd = atDel + DEL + 0.15;
+          addEls.forEach(function (el, k) {
+            tl.set(el, { height: 0, opacity: 0 }, 0);
+            tl.fromTo(
+              el,
+              { height: 0, opacity: 0 },
+              { height: 46, opacity: 1, duration: ADD, ease: "power2.out" },
+              atAdd + k * 0.12,
+            );
+          });
+        }
+
+        function highlight(tl, surface, state, start, targetIdx) {
+          var SWEEP = 0.9;
+          var parts = makeScene(surface, true);
+          var code = parts.code;
+          renderState(code, state);
+          var lines = code.querySelectorAll(".line");
+          fillGutter(parts.gutter, lines.length);
+          var base = code.getBoundingClientRect();
+          var idx = Math.max(0, Math.min(lines.length - 1, targetIdx));
+          var lr = lines[idx].getBoundingClientRect();
+          var box = document.createElement("div");
+          box.className = "hl-box";
+          box.style.left = lr.left - base.left - 8 + "px";
+          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);
+          var at = start + FADE + 0.2;
+          tl.fromTo(
+            box,
+            { width: 0, opacity: 0 },
+            { width: lr.width + 18, opacity: 1, duration: SWEEP, ease: "power2.inOut" },
+            at,
+          );
+          for (var i = 0; i < lines.length; i++) {
+            if (i === idx) continue;
+            tl.fromTo(
+              lines[i],
+              { opacity: 1 },
+              { opacity: 0.45, duration: SWEEP, ease: "power2.inOut" },
+              at,
+            );
+          }
+        }
+
+        function scroll(tl, surface, state, start, targetLine) {
+          var SCROLL = 1.7;
+          var parts = makeScene(surface, true);
+          var code = parts.code;
+          renderState(code, state);
+          var lines = code.querySelectorAll(".line");
+          fillGutter(parts.gutter, lines.length);
+          var surfRect = surface.getBoundingClientRect();
+          var idx = Math.max(0, Math.min(lines.length - 1, targetLine - 1));
+          var lr = lines[idx].getBoundingClientRect();
+          var lineCenter = lr.top + lr.height / 2 - surfRect.top;
+          var dy = surfRect.height * 0.5 - lineCenter;
+          var box = document.createElement("div");
+          box.className = "hl-box";
+          box.style.left = lines[idx].offsetLeft - 8 + "px";
+          box.style.top = lines[idx].offsetTop - 1 + "px";
+          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);
+          var at = start + FADE + 0.35;
+          tl.fromTo(
+            [code, parts.gutter],
+            { y: 0 },
+            { y: dy, duration: SCROLL, ease: "power2.inOut" },
+            at,
+          );
+          var arrAt = at + SCROLL;
+          for (var i = 0; i < lines.length; i++) {
+            if (i === idx) continue;
+            tl.fromTo(
+              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);
+        }
+
+        function buildEffect(tl, surface, spec) {
+          var start = 0.45;
+          var seq = T[spec.seq];
+          if (spec.effect === "morph") morph(tl, surface, seq.states, start);
+          else if (spec.effect === "flight") flight(tl, surface, seq.states, start);
+          else if (spec.effect === "typing") typing(tl, surface, seq.states[0], start);
+          else if (spec.effect === "diff") diff(tl, surface, seq.states, start);
+          else if (spec.effect === "highlight")
+            highlight(tl, surface, seq.states[0], start, spec.line || 0);
+          else if (spec.effect === "scroll")
+            scroll(tl, surface, seq.states[0], start, spec.line || 1);
+        }
+
+        function go() {
+          var spec = window.__BLOCK;
+          var surface = document.getElementById("surface");
+          var root = document.getElementById("root");
+          window.__timelines = window.__timelines || {};
+          var tl = gsap.timeline({ paused: true });
+          window.__timelines["code-scroll"] = tl; // register synchronously
+          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
+          });
+        }
+
+        if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
+        else go();
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/code-scroll/registry-item.json b/registry/blocks/code-scroll/registry-item.json
new file mode 100644
index 0000000000..de7557544f
--- /dev/null
+++ b/registry/blocks/code-scroll/registry-item.json
@@ -0,0 +1,24 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "code-scroll",
+  "type": "hyperframes:block",
+  "title": "Code Scroll To Line",
+  "description": "The camera scrolls a long file to bring a target line to center and spotlights it — for walking through real modules.",
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 6,
+  "tags": ["code", "code-animation", "scroll", "developer"],
+  "files": [
+    {
+      "path": "code-scroll.html",
+      "target": "compositions/code-scroll.html",
+      "type": "hyperframes:composition"
+    }
+  ],
+  "preview": {
+    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-scroll.mp4",
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-scroll.png"
+  }
+}
diff --git a/registry/blocks/code-snippet-flight/code-snippet-flight.html b/registry/blocks/code-snippet-flight/code-snippet-flight.html
new file mode 100644
index 0000000000..70e34cf299
--- /dev/null
+++ b/registry/blocks/code-snippet-flight/code-snippet-flight.html
@@ -0,0 +1,887 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Code Snippet Flight</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #05070b;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        font-family: "JetBrains Mono", monospace;
+        color: #e6edf3;
+      }
+      .bg-field {
+        position: absolute;
+        inset: 0;
+        background: radial-gradient(1200px 700px at 50% 18%, #0e1726 0%, #070b12 55%, #05070b 100%);
+      }
+      .bg-grid {
+        position: absolute;
+        inset: 0;
+        background-image:
+          linear-gradient(rgba(88, 166, 255, 0.05) 1px, transparent 1px),
+          linear-gradient(90deg, rgba(88, 166, 255, 0.05) 1px, transparent 1px);
+        background-size: 64px 64px;
+        mask-image: radial-gradient(1100px 620px at 50% 42%, #000 0%, transparent 78%);
+      }
+      .bg-glow {
+        position: absolute;
+        width: 900px;
+        height: 900px;
+        border-radius: 50%;
+        filter: blur(120px);
+        opacity: 0.5;
+      }
+      .bg-glow.a {
+        background: #1f6feb55;
+        left: -180px;
+        top: -200px;
+      }
+      .bg-glow.b {
+        background: #2ea04355;
+        right: -200px;
+        bottom: -260px;
+      }
+      .editor {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 1380px;
+        height: 800px;
+        background: #0b0f17;
+        border: 1px solid #1d2733;
+        border-radius: 16px;
+        box-shadow:
+          0 40px 120px rgba(0, 0, 0, 0.6),
+          0 2px 0 rgba(255, 255, 255, 0.03) inset;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+      }
+      .titlebar {
+        height: 56px;
+        flex: 0 0 56px;
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        padding: 0 22px;
+        background: linear-gradient(#11161f, #0c111a);
+        border-bottom: 1px solid #1b2430;
+      }
+      .dots {
+        display: flex;
+        gap: 10px;
+      }
+      .dot {
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+      }
+      .dot.r {
+        background: #ff5f57;
+      }
+      .dot.y {
+        background: #febc2e;
+      }
+      .dot.g {
+        background: #28c840;
+      }
+      .filename {
+        font-size: 19px;
+        color: #8b98a9;
+        letter-spacing: 0.2px;
+      }
+      .filename .accent {
+        color: #d6e2f0;
+      }
+      .code-surface {
+        position: relative;
+        flex: 1 1 auto;
+        overflow: hidden;
+      }
+      .scene {
+        position: absolute;
+        inset: 0;
+        opacity: 0;
+        will-change: opacity;
+      }
+      .code {
+        position: absolute;
+        top: 38px;
+        left: 0;
+        right: 0;
+        padding: 0 44px 0 104px;
+        font-size: 30px;
+        line-height: 46px;
+        font-variant-ligatures: none;
+        tab-size: 2;
+      }
+      .gutter {
+        position: absolute;
+        top: 38px;
+        left: 0;
+        width: 84px;
+        padding-right: 18px;
+        font-size: 30px;
+        line-height: 46px;
+        text-align: right;
+        color: #828c9b;
+        user-select: none;
+      }
+      .ln {
+        display: block;
+        height: 46px;
+      }
+      .line {
+        display: block;
+        min-height: 46px;
+        white-space: pre;
+        position: relative;
+        z-index: 1;
+      }
+      .tok {
+        display: inline-block;
+        white-space: pre;
+        will-change: transform, opacity;
+      }
+      .caret {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 3px;
+        height: 32px;
+        margin-top: 6px;
+        background: #58a6ff;
+        border-radius: 1px;
+        z-index: 3;
+      }
+      .hl-box {
+        position: absolute;
+        background: rgba(88, 166, 255, 0.16);
+        border-left: 3px solid #58a6ff;
+        border-radius: 6px;
+        z-index: 0;
+        overflow: hidden;
+      }
+      .diff-line {
+        display: block;
+        min-height: 0;
+        line-height: 46px;
+        white-space: pre;
+        position: relative;
+        overflow: hidden;
+        padding-left: 14px;
+      }
+      .diff-sign {
+        display: inline-block;
+        width: 22px;
+        color: #41506220;
+      }
+      .diff-del {
+        background: rgba(248, 81, 73, 0.12);
+        box-shadow: inset 3px 0 #f85149;
+      }
+      .diff-add {
+        background: rgba(63, 185, 80, 0.12);
+        box-shadow: inset 3px 0 #3fb950;
+      }
+      .diff-del .diff-sign {
+        color: #f85149;
+      }
+      .diff-add .diff-sign {
+        color: #3fb950;
+      }
+      .flight-block {
+        position: absolute;
+        white-space: pre;
+        font-size: 27px;
+        line-height: 40px;
+        padding: 11px 22px;
+        border-radius: 11px;
+        background: #0f1722;
+        border: 1px solid #233044;
+        box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
+        will-change: transform, opacity;
+      }
+      .flight-target {
+        position: absolute;
+        border: 1.5px dashed #2a3a4f;
+        border-radius: 14px;
+        opacity: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="code-snippet-flight"
+      data-start="0"
+      data-duration="6"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="bg-field" data-layout-ignore></div>
+      <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>
+          <span class="filename"
+            ><span class="accent">pipeline.js</span> — Code Snippet Flight</span
+          >
+        </div>
+        <div class="code-surface" id="surface"></div>
+      </div>
+    </div>
+    <script>
+      window.__TOKENS = {
+        flight: {
+          lang: "js",
+          theme: "github-dark",
+          bg: "#24292e",
+          fg: "#e1e4e8",
+          states: [
+            {
+              code: "const x = parse(input)",
+              tokens: [
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-0",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-1",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-2",
+                  content: "x",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-3",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-4",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-5",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-6",
+                  content: "parse",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-7",
+                  content: "(input)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-8",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+              ],
+            },
+            {
+              code: "const y = transform(x)",
+              tokens: [
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-0",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-1",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "ulDeJnFQa2Vy-61y5zTTA7sNfq7d4aUawNMAxQ6sVgg-2",
+                  content: "y",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-3",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-4",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-5",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "ulDeJnFQa2Vy-61y5zTTA7sNfq7d4aUawNMAxQ6sVgg-6",
+                  content: "transform",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "ulDeJnFQa2Vy-61y5zTTA7sNfq7d4aUawNMAxQ6sVgg-7",
+                  content: "(x)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "ulDeJnFQa2Vy-61y5zTTA7sNfq7d4aUawNMAxQ6sVgg-8",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+              ],
+            },
+            {
+              code: "const z = render(y)",
+              tokens: [
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-0",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-1",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "wFuhzZNydG-3inU2s1h1gU8Kivya8CAP9gl9S4MBQj4-2",
+                  content: "z",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-3",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-4",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-5",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "wFuhzZNydG-3inU2s1h1gU8Kivya8CAP9gl9S4MBQj4-6",
+                  content: "render",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "wFuhzZNydG-3inU2s1h1gU8Kivya8CAP9gl9S4MBQj4-7",
+                  content: "(y)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "wFuhzZNydG-3inU2s1h1gU8Kivya8CAP9gl9S4MBQj4-8",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+              ],
+            },
+          ],
+        },
+      };
+      window.__BLOCK = { id: "code-snippet-flight", effect: "flight", seq: "flight", duration: 6 };
+    </script>
+    <script>
+      // 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
+      // 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].
+      (function () {
+        "use strict";
+        var T = window.__TOKENS || {};
+
+        function lineDiv() {
+          var d = document.createElement("div");
+          d.className = "line";
+          return d;
+        }
+
+        // Render a code state's keyed tokens into codeEl as lines of inline-block .tok spans.
+        function renderState(codeEl, state) {
+          codeEl.textContent = "";
+          var keyToEl = new Map();
+          var line = lineDiv();
+          codeEl.appendChild(line);
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              line = lineDiv();
+              codeEl.appendChild(line);
+              continue;
+            }
+            var span = document.createElement("span");
+            span.className = "tok";
+            span.textContent = t.content;
+            span.style.color = t.color;
+            if (t.fontStyle & 1) span.style.fontStyle = "italic";
+            if (t.fontStyle & 2) span.style.fontWeight = "700";
+            line.appendChild(span);
+            keyToEl.set(t.key, span);
+          }
+          var last = codeEl.lastChild;
+          if (last && last.className === "line" && last.children.length === 0)
+            codeEl.removeChild(last);
+          return keyToEl;
+        }
+
+        function rectsOf(keyToEl) {
+          var m = new Map();
+          keyToEl.forEach(function (el, k) {
+            var r = el.getBoundingClientRect();
+            m.set(k, { left: r.left, top: r.top });
+          });
+          return m;
+        }
+
+        function makeScene(surface, withGutter) {
+          var scene = document.createElement("div");
+          scene.className = "scene";
+          if (withGutter) {
+            var g = document.createElement("div");
+            g.className = "gutter";
+            scene.appendChild(g);
+          }
+          var code = document.createElement("div");
+          code.className = "code";
+          scene.appendChild(code);
+          surface.appendChild(scene);
+          return { scene: scene, code: code, gutter: scene.querySelector(".gutter") };
+        }
+
+        function fillGutter(g, n) {
+          var html = "";
+          for (var i = 1; i <= n; i++) html += '<span class="ln">' + i + "</span>";
+          g.innerHTML = html;
+        }
+
+        function splitLines(state) {
+          var lines = [{ text: "", tokens: [] }];
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              lines.push({ text: "", tokens: [] });
+              continue;
+            }
+            var cur = lines[lines.length - 1];
+            cur.tokens.push(t);
+            cur.text += t.content;
+          }
+          if (lines.length && lines[lines.length - 1].tokens.length === 0) lines.pop();
+          return lines;
+        }
+
+        function lineDiff(a, b) {
+          var n = a.length;
+          var m = b.length;
+          var dp = [];
+          for (var i = 0; i <= n; i++) dp.push(new Array(m + 1).fill(0));
+          for (var i = n - 1; i >= 0; i--) {
+            for (var j = m - 1; j >= 0; j--) {
+              dp[i][j] =
+                a[i].text === b[j].text
+                  ? dp[i + 1][j + 1] + 1
+                  : Math.max(dp[i + 1][j], dp[i][j + 1]);
+            }
+          }
+          var ops = [];
+          var i = 0;
+          var j = 0;
+          while (i < n && j < m) {
+            if (a[i].text === b[j].text) {
+              ops.push({ type: "same", line: b[j] });
+              i++;
+              j++;
+            } else if (dp[i + 1][j] >= dp[i][j + 1]) {
+              ops.push({ type: "del", line: a[i] });
+              i++;
+            } else {
+              ops.push({ type: "add", line: b[j] });
+              j++;
+            }
+          }
+          while (i < n) ops.push({ type: "del", line: a[i++] });
+          while (j < m) ops.push({ type: "add", line: b[j++] });
+          return ops;
+        }
+
+        // ---- single-scene effect builders (fade in, play, hold to end) -------------
+        var FADE = 0.45;
+
+        function morph(tl, surface, states, start) {
+          var STEP = 1.2;
+          var HOLD = 1.0;
+          var t = start;
+          for (var s = 0; s < states.length - 1; s++) {
+            var parts = makeScene(surface, false);
+            var code = parts.code;
+            var fromEls = renderState(code, states[s]);
+            var fromR = rectsOf(fromEls);
+            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;
+            toEls.forEach(function (el, k) {
+              var fr = fromR.get(k);
+              var tr = toR.get(k);
+              if (fr) {
+                seg.fromTo(
+                  el,
+                  { x: fr.left - tr.left, y: fr.top - tr.top },
+                  { x: 0, y: 0, duration: STEP, ease: "power2.inOut" },
+                  0,
+                );
+              } else {
+                seg.fromTo(
+                  el,
+                  { opacity: 0 },
+                  { opacity: 1, duration: FD, ease: "power1.out" },
+                  ENTER_AT,
+                );
+              }
+            });
+            var toKeys = new Set(toEls.keys());
+            var fromState = states[s];
+            for (var i = 0; i < fromState.tokens.length; i++) {
+              var tok = fromState.tokens[i];
+              if (tok.content === "\n" || toKeys.has(tok.key) || !fromR.has(tok.key)) continue;
+              var r = fromR.get(tok.key);
+              var span = document.createElement("span");
+              span.className = "tok";
+              span.textContent = tok.content;
+              span.style.position = "absolute";
+              span.style.left = r.left - base.left + "px";
+              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);
+            }
+            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);
+            if (!isLast)
+              tl.to(parts.scene, { opacity: 0, duration: FADE, ease: "power1.in" }, segEnd - FADE);
+            tl.add(seg, segStart);
+            t = segEnd - FADE;
+          }
+        }
+
+        function flight(tl, surface, states, start) {
+          var FLY = 1.0;
+          var STAGGER = 0.3;
+          var parts = makeScene(surface, false);
+          parts.code.remove();
+          var scene = parts.scene;
+          var target = document.createElement("div");
+          target.className = "flight-target";
+          scene.appendChild(target);
+          var W = surface.clientWidth;
+          var H = surface.clientHeight;
+          var leftCx = W * 0.27;
+          var rightCx = W * 0.71;
+          var midY = H * 0.46;
+          var gap = 70;
+          var blocks = states.map(function (st) {
+            var blk = document.createElement("div");
+            blk.className = "flight-block";
+            renderState(blk, st);
+            scene.appendChild(blk);
+            return blk;
+          });
+          var n = blocks.length;
+          var maxW = 0;
+          var firstDestY = 0;
+          blocks.forEach(function (blk, i) {
+            var bw = blk.getBoundingClientRect().width;
+            if (bw > maxW) maxW = bw;
+            var destX = rightCx - bw / 2;
+            var destY = midY + (i - (n - 1) / 2) * gap;
+            if (i === 0) firstDestY = destY;
+            var srcX = leftCx - bw / 2;
+            var srcY = midY + (i - (n - 1) / 2) * (gap + 16);
+            blk.style.left = destX + "px";
+            blk.style.top = destY + "px";
+            tl.fromTo(
+              blk,
+              { x: srcX - destX, y: srcY - destY, opacity: 0, rotation: -5, scale: 0.9 },
+              {
+                x: 0,
+                y: 0,
+                opacity: 1,
+                rotation: 0,
+                scale: 1,
+                duration: FLY,
+                ease: "power3.inOut",
+              },
+              start + FADE + i * STAGGER,
+            );
+          });
+          target.style.left = rightCx - maxW / 2 - 26 + "px";
+          target.style.top = firstDestY - 18 + "px";
+          target.style.width = maxW + 52 + "px";
+          target.style.height = (n - 1) * gap + 62 + "px";
+          var landAt = start + FADE + (n - 1) * STAGGER + FLY;
+          tl.set(scene, { opacity: 1 }, 0);
+          tl.to(target, { opacity: 1, duration: 0.5, ease: "power1.out" }, landAt - 0.5);
+        }
+
+        function typing(tl, surface, state, start) {
+          var PER = 0.05;
+          var parts = makeScene(surface, true);
+          var code = parts.code;
+          var keyToEl = renderState(code, state);
+          fillGutter(parts.gutter, code.querySelectorAll(".line").length);
+          var base = code.getBoundingClientRect();
+          var caret = document.createElement("div");
+          caret.className = "caret";
+          code.appendChild(caret);
+          var toks = [];
+          keyToEl.forEach(function (el) {
+            toks.push(el);
+          });
+          tl.set(parts.scene, { opacity: 0 }, 0);
+          tl.to(parts.scene, { opacity: 1, duration: FADE, ease: "power1.out" }, start);
+          var t0 = start + FADE;
+          if (toks.length) {
+            var r0 = toks[0].getBoundingClientRect();
+            tl.set(caret, { x: r0.left - base.left, y: r0.top - base.top, opacity: 1 }, 0);
+          }
+          toks.forEach(function (el, i) {
+            tl.set(el, { opacity: 0 }, 0);
+            tl.to(el, { opacity: 1, duration: 0.08, ease: "none" }, t0 + i * PER);
+            var r = el.getBoundingClientRect();
+            tl.set(caret, { x: r.right - base.left, y: r.top - base.top }, t0 + i * PER);
+          });
+        }
+
+        function diff(tl, surface, states, start) {
+          var DEL = 0.55;
+          var ADD = 0.6;
+          var ops = lineDiff(splitLines(states[0]), splitLines(states[1]));
+          var parts = makeScene(surface, false);
+          var code = parts.code;
+          var delEls = [];
+          var addEls = [];
+          ops.forEach(function (op) {
+            var ln = document.createElement("div");
+            ln.className =
+              "diff-line" +
+              (op.type === "del" ? " diff-del" : op.type === "add" ? " diff-add" : "");
+            var sign = document.createElement("span");
+            sign.className = "diff-sign";
+            sign.textContent = op.type === "del" ? "- " : op.type === "add" ? "+ " : "  ";
+            ln.appendChild(sign);
+            op.line.tokens.forEach(function (t) {
+              var s = document.createElement("span");
+              s.className = "tok";
+              s.textContent = t.content;
+              s.style.color = t.color;
+              ln.appendChild(s);
+            });
+            code.appendChild(ln);
+            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);
+          var atDel = start + FADE + 0.3;
+          delEls.forEach(function (el, k) {
+            tl.fromTo(
+              el,
+              { height: 46, opacity: 1 },
+              { height: 0, opacity: 0, duration: DEL, ease: "power2.inOut" },
+              atDel + k * 0.08,
+            );
+          });
+          var atAdd = atDel + DEL + 0.15;
+          addEls.forEach(function (el, k) {
+            tl.set(el, { height: 0, opacity: 0 }, 0);
+            tl.fromTo(
+              el,
+              { height: 0, opacity: 0 },
+              { height: 46, opacity: 1, duration: ADD, ease: "power2.out" },
+              atAdd + k * 0.12,
+            );
+          });
+        }
+
+        function highlight(tl, surface, state, start, targetIdx) {
+          var SWEEP = 0.9;
+          var parts = makeScene(surface, true);
+          var code = parts.code;
+          renderState(code, state);
+          var lines = code.querySelectorAll(".line");
+          fillGutter(parts.gutter, lines.length);
+          var base = code.getBoundingClientRect();
+          var idx = Math.max(0, Math.min(lines.length - 1, targetIdx));
+          var lr = lines[idx].getBoundingClientRect();
+          var box = document.createElement("div");
+          box.className = "hl-box";
+          box.style.left = lr.left - base.left - 8 + "px";
+          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);
+          var at = start + FADE + 0.2;
+          tl.fromTo(
+            box,
+            { width: 0, opacity: 0 },
+            { width: lr.width + 18, opacity: 1, duration: SWEEP, ease: "power2.inOut" },
+            at,
+          );
+          for (var i = 0; i < lines.length; i++) {
+            if (i === idx) continue;
+            tl.fromTo(
+              lines[i],
+              { opacity: 1 },
+              { opacity: 0.45, duration: SWEEP, ease: "power2.inOut" },
+              at,
+            );
+          }
+        }
+
+        function scroll(tl, surface, state, start, targetLine) {
+          var SCROLL = 1.7;
+          var parts = makeScene(surface, true);
+          var code = parts.code;
+          renderState(code, state);
+          var lines = code.querySelectorAll(".line");
+          fillGutter(parts.gutter, lines.length);
+          var surfRect = surface.getBoundingClientRect();
+          var idx = Math.max(0, Math.min(lines.length - 1, targetLine - 1));
+          var lr = lines[idx].getBoundingClientRect();
+          var lineCenter = lr.top + lr.height / 2 - surfRect.top;
+          var dy = surfRect.height * 0.5 - lineCenter;
+          var box = document.createElement("div");
+          box.className = "hl-box";
+          box.style.left = lines[idx].offsetLeft - 8 + "px";
+          box.style.top = lines[idx].offsetTop - 1 + "px";
+          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);
+          var at = start + FADE + 0.35;
+          tl.fromTo(
+            [code, parts.gutter],
+            { y: 0 },
+            { y: dy, duration: SCROLL, ease: "power2.inOut" },
+            at,
+          );
+          var arrAt = at + SCROLL;
+          for (var i = 0; i < lines.length; i++) {
+            if (i === idx) continue;
+            tl.fromTo(
+              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);
+        }
+
+        function buildEffect(tl, surface, spec) {
+          var start = 0.45;
+          var seq = T[spec.seq];
+          if (spec.effect === "morph") morph(tl, surface, seq.states, start);
+          else if (spec.effect === "flight") flight(tl, surface, seq.states, start);
+          else if (spec.effect === "typing") typing(tl, surface, seq.states[0], start);
+          else if (spec.effect === "diff") diff(tl, surface, seq.states, start);
+          else if (spec.effect === "highlight")
+            highlight(tl, surface, seq.states[0], start, spec.line || 0);
+          else if (spec.effect === "scroll")
+            scroll(tl, surface, seq.states[0], start, spec.line || 1);
+        }
+
+        function go() {
+          var spec = window.__BLOCK;
+          var surface = document.getElementById("surface");
+          var root = document.getElementById("root");
+          window.__timelines = window.__timelines || {};
+          var tl = gsap.timeline({ paused: true });
+          window.__timelines["code-snippet-flight"] = tl; // register synchronously
+          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
+          });
+        }
+
+        if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
+        else go();
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/code-snippet-flight/registry-item.json b/registry/blocks/code-snippet-flight/registry-item.json
new file mode 100644
index 0000000000..bea133568f
--- /dev/null
+++ b/registry/blocks/code-snippet-flight/registry-item.json
@@ -0,0 +1,24 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "code-snippet-flight",
+  "type": "hyperframes:block",
+  "title": "Code Snippet Flight",
+  "description": "Discrete code snippets fly in from the side and assemble into a stacked program, staggered. Block-level FLIP.",
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 6,
+  "tags": ["code", "code-animation", "flight", "developer"],
+  "files": [
+    {
+      "path": "code-snippet-flight.html",
+      "target": "compositions/code-snippet-flight.html",
+      "type": "hyperframes:composition"
+    }
+  ],
+  "preview": {
+    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-flight.mp4",
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-flight.png"
+  }
+}
diff --git a/registry/blocks/code-typing/code-typing.html b/registry/blocks/code-typing/code-typing.html
new file mode 100644
index 0000000000..446f5a6d3c
--- /dev/null
+++ b/registry/blocks/code-typing/code-typing.html
@@ -0,0 +1,977 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <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>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #05070b;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        font-family: "JetBrains Mono", monospace;
+        color: #e6edf3;
+      }
+      .bg-field {
+        position: absolute;
+        inset: 0;
+        background: radial-gradient(1200px 700px at 50% 18%, #0e1726 0%, #070b12 55%, #05070b 100%);
+      }
+      .bg-grid {
+        position: absolute;
+        inset: 0;
+        background-image:
+          linear-gradient(rgba(88, 166, 255, 0.05) 1px, transparent 1px),
+          linear-gradient(90deg, rgba(88, 166, 255, 0.05) 1px, transparent 1px);
+        background-size: 64px 64px;
+        mask-image: radial-gradient(1100px 620px at 50% 42%, #000 0%, transparent 78%);
+      }
+      .bg-glow {
+        position: absolute;
+        width: 900px;
+        height: 900px;
+        border-radius: 50%;
+        filter: blur(120px);
+        opacity: 0.5;
+      }
+      .bg-glow.a {
+        background: #1f6feb55;
+        left: -180px;
+        top: -200px;
+      }
+      .bg-glow.b {
+        background: #2ea04355;
+        right: -200px;
+        bottom: -260px;
+      }
+      .editor {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 1380px;
+        height: 800px;
+        background: #0b0f17;
+        border: 1px solid #1d2733;
+        border-radius: 16px;
+        box-shadow:
+          0 40px 120px rgba(0, 0, 0, 0.6),
+          0 2px 0 rgba(255, 255, 255, 0.03) inset;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+      }
+      .titlebar {
+        height: 56px;
+        flex: 0 0 56px;
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        padding: 0 22px;
+        background: linear-gradient(#11161f, #0c111a);
+        border-bottom: 1px solid #1b2430;
+      }
+      .dots {
+        display: flex;
+        gap: 10px;
+      }
+      .dot {
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+      }
+      .dot.r {
+        background: #ff5f57;
+      }
+      .dot.y {
+        background: #febc2e;
+      }
+      .dot.g {
+        background: #28c840;
+      }
+      .filename {
+        font-size: 19px;
+        color: #8b98a9;
+        letter-spacing: 0.2px;
+      }
+      .filename .accent {
+        color: #d6e2f0;
+      }
+      .code-surface {
+        position: relative;
+        flex: 1 1 auto;
+        overflow: hidden;
+      }
+      .scene {
+        position: absolute;
+        inset: 0;
+        opacity: 0;
+        will-change: opacity;
+      }
+      .code {
+        position: absolute;
+        top: 38px;
+        left: 0;
+        right: 0;
+        padding: 0 44px 0 104px;
+        font-size: 30px;
+        line-height: 46px;
+        font-variant-ligatures: none;
+        tab-size: 2;
+      }
+      .gutter {
+        position: absolute;
+        top: 38px;
+        left: 0;
+        width: 84px;
+        padding-right: 18px;
+        font-size: 30px;
+        line-height: 46px;
+        text-align: right;
+        color: #828c9b;
+        user-select: none;
+      }
+      .ln {
+        display: block;
+        height: 46px;
+      }
+      .line {
+        display: block;
+        min-height: 46px;
+        white-space: pre;
+        position: relative;
+        z-index: 1;
+      }
+      .tok {
+        display: inline-block;
+        white-space: pre;
+        will-change: transform, opacity;
+      }
+      .caret {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 3px;
+        height: 32px;
+        margin-top: 6px;
+        background: #58a6ff;
+        border-radius: 1px;
+        z-index: 3;
+      }
+      .hl-box {
+        position: absolute;
+        background: rgba(88, 166, 255, 0.16);
+        border-left: 3px solid #58a6ff;
+        border-radius: 6px;
+        z-index: 0;
+        overflow: hidden;
+      }
+      .diff-line {
+        display: block;
+        min-height: 0;
+        line-height: 46px;
+        white-space: pre;
+        position: relative;
+        overflow: hidden;
+        padding-left: 14px;
+      }
+      .diff-sign {
+        display: inline-block;
+        width: 22px;
+        color: #41506220;
+      }
+      .diff-del {
+        background: rgba(248, 81, 73, 0.12);
+        box-shadow: inset 3px 0 #f85149;
+      }
+      .diff-add {
+        background: rgba(63, 185, 80, 0.12);
+        box-shadow: inset 3px 0 #3fb950;
+      }
+      .diff-del .diff-sign {
+        color: #f85149;
+      }
+      .diff-add .diff-sign {
+        color: #3fb950;
+      }
+      .flight-block {
+        position: absolute;
+        white-space: pre;
+        font-size: 27px;
+        line-height: 40px;
+        padding: 11px 22px;
+        border-radius: 11px;
+        background: #0f1722;
+        border: 1px solid #233044;
+        box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
+        will-change: transform, opacity;
+      }
+      .flight-target {
+        position: absolute;
+        border: 1.5px dashed #2a3a4f;
+        border-radius: 14px;
+        opacity: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="code-typing"
+      data-start="0"
+      data-duration="5"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="bg-field" data-layout-ignore></div>
+      <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>
+          <span class="filename"><span class="accent">loadConfig.js</span> — Code Typing</span>
+        </div>
+        <div class="code-surface" id="surface"></div>
+      </div>
+    </div>
+    <script>
+      window.__TOKENS = {
+        feature: {
+          lang: "js",
+          theme: "github-dark",
+          bg: "#24292e",
+          fg: "#e1e4e8",
+          states: [
+            {
+              code: 'async function loadConfig(path) {\n  const raw = await readFile(path, "utf8")\n  const config = JSON.parse(raw)\n  return validate(config)\n}',
+              tokens: [
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-0",
+                  content: "async",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-1",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-2",
+                  content: "function",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-3",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-4",
+                  content: "loadConfig",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-5",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-6",
+                  content: "path",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-7",
+                  content: ") {",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-8",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-9",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-10",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-11",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-12",
+                  content: "raw",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-13",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-14",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-15",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-16",
+                  content: "await",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-17",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-18",
+                  content: "readFile",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-19",
+                  content: "(path,",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-20",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-21",
+                  content: '"utf8"',
+                  color: "#9ECBFF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-22",
+                  content: ")",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-23",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-24",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-25",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-26",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-27",
+                  content: "config",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-28",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-29",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-30",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-31",
+                  content: "JSON",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-32",
+                  content: ".",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-33",
+                  content: "parse",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-34",
+                  content: "(raw)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-35",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-36",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-37",
+                  content: "return",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-38",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-39",
+                  content: "validate",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-40",
+                  content: "(config)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-41",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-42",
+                  content: "}",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-43",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+              ],
+            },
+          ],
+        },
+      };
+      window.__BLOCK = { id: "code-typing", effect: "typing", seq: "feature", duration: 5 };
+    </script>
+    <script>
+      // 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
+      // 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].
+      (function () {
+        "use strict";
+        var T = window.__TOKENS || {};
+
+        function lineDiv() {
+          var d = document.createElement("div");
+          d.className = "line";
+          return d;
+        }
+
+        // Render a code state's keyed tokens into codeEl as lines of inline-block .tok spans.
+        function renderState(codeEl, state) {
+          codeEl.textContent = "";
+          var keyToEl = new Map();
+          var line = lineDiv();
+          codeEl.appendChild(line);
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              line = lineDiv();
+              codeEl.appendChild(line);
+              continue;
+            }
+            var span = document.createElement("span");
+            span.className = "tok";
+            span.textContent = t.content;
+            span.style.color = t.color;
+            if (t.fontStyle & 1) span.style.fontStyle = "italic";
+            if (t.fontStyle & 2) span.style.fontWeight = "700";
+            line.appendChild(span);
+            keyToEl.set(t.key, span);
+          }
+          var last = codeEl.lastChild;
+          if (last && last.className === "line" && last.children.length === 0)
+            codeEl.removeChild(last);
+          return keyToEl;
+        }
+
+        function rectsOf(keyToEl) {
+          var m = new Map();
+          keyToEl.forEach(function (el, k) {
+            var r = el.getBoundingClientRect();
+            m.set(k, { left: r.left, top: r.top });
+          });
+          return m;
+        }
+
+        function makeScene(surface, withGutter) {
+          var scene = document.createElement("div");
+          scene.className = "scene";
+          if (withGutter) {
+            var g = document.createElement("div");
+            g.className = "gutter";
+            scene.appendChild(g);
+          }
+          var code = document.createElement("div");
+          code.className = "code";
+          scene.appendChild(code);
+          surface.appendChild(scene);
+          return { scene: scene, code: code, gutter: scene.querySelector(".gutter") };
+        }
+
+        function fillGutter(g, n) {
+          var html = "";
+          for (var i = 1; i <= n; i++) html += '<span class="ln">' + i + "</span>";
+          g.innerHTML = html;
+        }
+
+        function splitLines(state) {
+          var lines = [{ text: "", tokens: [] }];
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              lines.push({ text: "", tokens: [] });
+              continue;
+            }
+            var cur = lines[lines.length - 1];
+            cur.tokens.push(t);
+            cur.text += t.content;
+          }
+          if (lines.length && lines[lines.length - 1].tokens.length === 0) lines.pop();
+          return lines;
+        }
+
+        function lineDiff(a, b) {
+          var n = a.length;
+          var m = b.length;
+          var dp = [];
+          for (var i = 0; i <= n; i++) dp.push(new Array(m + 1).fill(0));
+          for (var i = n - 1; i >= 0; i--) {
+            for (var j = m - 1; j >= 0; j--) {
+              dp[i][j] =
+                a[i].text === b[j].text
+                  ? dp[i + 1][j + 1] + 1
+                  : Math.max(dp[i + 1][j], dp[i][j + 1]);
+            }
+          }
+          var ops = [];
+          var i = 0;
+          var j = 0;
+          while (i < n && j < m) {
+            if (a[i].text === b[j].text) {
+              ops.push({ type: "same", line: b[j] });
+              i++;
+              j++;
+            } else if (dp[i + 1][j] >= dp[i][j + 1]) {
+              ops.push({ type: "del", line: a[i] });
+              i++;
+            } else {
+              ops.push({ type: "add", line: b[j] });
+              j++;
+            }
+          }
+          while (i < n) ops.push({ type: "del", line: a[i++] });
+          while (j < m) ops.push({ type: "add", line: b[j++] });
+          return ops;
+        }
+
+        // ---- single-scene effect builders (fade in, play, hold to end) -------------
+        var FADE = 0.45;
+
+        function morph(tl, surface, states, start) {
+          var STEP = 1.2;
+          var HOLD = 1.0;
+          var t = start;
+          for (var s = 0; s < states.length - 1; s++) {
+            var parts = makeScene(surface, false);
+            var code = parts.code;
+            var fromEls = renderState(code, states[s]);
+            var fromR = rectsOf(fromEls);
+            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;
+            toEls.forEach(function (el, k) {
+              var fr = fromR.get(k);
+              var tr = toR.get(k);
+              if (fr) {
+                seg.fromTo(
+                  el,
+                  { x: fr.left - tr.left, y: fr.top - tr.top },
+                  { x: 0, y: 0, duration: STEP, ease: "power2.inOut" },
+                  0,
+                );
+              } else {
+                seg.fromTo(
+                  el,
+                  { opacity: 0 },
+                  { opacity: 1, duration: FD, ease: "power1.out" },
+                  ENTER_AT,
+                );
+              }
+            });
+            var toKeys = new Set(toEls.keys());
+            var fromState = states[s];
+            for (var i = 0; i < fromState.tokens.length; i++) {
+              var tok = fromState.tokens[i];
+              if (tok.content === "\n" || toKeys.has(tok.key) || !fromR.has(tok.key)) continue;
+              var r = fromR.get(tok.key);
+              var span = document.createElement("span");
+              span.className = "tok";
+              span.textContent = tok.content;
+              span.style.position = "absolute";
+              span.style.left = r.left - base.left + "px";
+              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);
+            }
+            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);
+            if (!isLast)
+              tl.to(parts.scene, { opacity: 0, duration: FADE, ease: "power1.in" }, segEnd - FADE);
+            tl.add(seg, segStart);
+            t = segEnd - FADE;
+          }
+        }
+
+        function flight(tl, surface, states, start) {
+          var FLY = 1.0;
+          var STAGGER = 0.3;
+          var parts = makeScene(surface, false);
+          parts.code.remove();
+          var scene = parts.scene;
+          var target = document.createElement("div");
+          target.className = "flight-target";
+          scene.appendChild(target);
+          var W = surface.clientWidth;
+          var H = surface.clientHeight;
+          var leftCx = W * 0.27;
+          var rightCx = W * 0.71;
+          var midY = H * 0.46;
+          var gap = 70;
+          var blocks = states.map(function (st) {
+            var blk = document.createElement("div");
+            blk.className = "flight-block";
+            renderState(blk, st);
+            scene.appendChild(blk);
+            return blk;
+          });
+          var n = blocks.length;
+          var maxW = 0;
+          var firstDestY = 0;
+          blocks.forEach(function (blk, i) {
+            var bw = blk.getBoundingClientRect().width;
+            if (bw > maxW) maxW = bw;
+            var destX = rightCx - bw / 2;
+            var destY = midY + (i - (n - 1) / 2) * gap;
+            if (i === 0) firstDestY = destY;
+            var srcX = leftCx - bw / 2;
+            var srcY = midY + (i - (n - 1) / 2) * (gap + 16);
+            blk.style.left = destX + "px";
+            blk.style.top = destY + "px";
+            tl.fromTo(
+              blk,
+              { x: srcX - destX, y: srcY - destY, opacity: 0, rotation: -5, scale: 0.9 },
+              {
+                x: 0,
+                y: 0,
+                opacity: 1,
+                rotation: 0,
+                scale: 1,
+                duration: FLY,
+                ease: "power3.inOut",
+              },
+              start + FADE + i * STAGGER,
+            );
+          });
+          target.style.left = rightCx - maxW / 2 - 26 + "px";
+          target.style.top = firstDestY - 18 + "px";
+          target.style.width = maxW + 52 + "px";
+          target.style.height = (n - 1) * gap + 62 + "px";
+          var landAt = start + FADE + (n - 1) * STAGGER + FLY;
+          tl.set(scene, { opacity: 1 }, 0);
+          tl.to(target, { opacity: 1, duration: 0.5, ease: "power1.out" }, landAt - 0.5);
+        }
+
+        function typing(tl, surface, state, start) {
+          var PER = 0.05;
+          var parts = makeScene(surface, true);
+          var code = parts.code;
+          var keyToEl = renderState(code, state);
+          fillGutter(parts.gutter, code.querySelectorAll(".line").length);
+          var base = code.getBoundingClientRect();
+          var caret = document.createElement("div");
+          caret.className = "caret";
+          code.appendChild(caret);
+          var toks = [];
+          keyToEl.forEach(function (el) {
+            toks.push(el);
+          });
+          tl.set(parts.scene, { opacity: 0 }, 0);
+          tl.to(parts.scene, { opacity: 1, duration: FADE, ease: "power1.out" }, start);
+          var t0 = start + FADE;
+          if (toks.length) {
+            var r0 = toks[0].getBoundingClientRect();
+            tl.set(caret, { x: r0.left - base.left, y: r0.top - base.top, opacity: 1 }, 0);
+          }
+          toks.forEach(function (el, i) {
+            tl.set(el, { opacity: 0 }, 0);
+            tl.to(el, { opacity: 1, duration: 0.08, ease: "none" }, t0 + i * PER);
+            var r = el.getBoundingClientRect();
+            tl.set(caret, { x: r.right - base.left, y: r.top - base.top }, t0 + i * PER);
+          });
+        }
+
+        function diff(tl, surface, states, start) {
+          var DEL = 0.55;
+          var ADD = 0.6;
+          var ops = lineDiff(splitLines(states[0]), splitLines(states[1]));
+          var parts = makeScene(surface, false);
+          var code = parts.code;
+          var delEls = [];
+          var addEls = [];
+          ops.forEach(function (op) {
+            var ln = document.createElement("div");
+            ln.className =
+              "diff-line" +
+              (op.type === "del" ? " diff-del" : op.type === "add" ? " diff-add" : "");
+            var sign = document.createElement("span");
+            sign.className = "diff-sign";
+            sign.textContent = op.type === "del" ? "- " : op.type === "add" ? "+ " : "  ";
+            ln.appendChild(sign);
+            op.line.tokens.forEach(function (t) {
+              var s = document.createElement("span");
+              s.className = "tok";
+              s.textContent = t.content;
+              s.style.color = t.color;
+              ln.appendChild(s);
+            });
+            code.appendChild(ln);
+            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);
+          var atDel = start + FADE + 0.3;
+          delEls.forEach(function (el, k) {
+            tl.fromTo(
+              el,
+              { height: 46, opacity: 1 },
+              { height: 0, opacity: 0, duration: DEL, ease: "power2.inOut" },
+              atDel + k * 0.08,
+            );
+          });
+          var atAdd = atDel + DEL + 0.15;
+          addEls.forEach(function (el, k) {
+            tl.set(el, { height: 0, opacity: 0 }, 0);
+            tl.fromTo(
+              el,
+              { height: 0, opacity: 0 },
+              { height: 46, opacity: 1, duration: ADD, ease: "power2.out" },
+              atAdd + k * 0.12,
+            );
+          });
+        }
+
+        function highlight(tl, surface, state, start, targetIdx) {
+          var SWEEP = 0.9;
+          var parts = makeScene(surface, true);
+          var code = parts.code;
+          renderState(code, state);
+          var lines = code.querySelectorAll(".line");
+          fillGutter(parts.gutter, lines.length);
+          var base = code.getBoundingClientRect();
+          var idx = Math.max(0, Math.min(lines.length - 1, targetIdx));
+          var lr = lines[idx].getBoundingClientRect();
+          var box = document.createElement("div");
+          box.className = "hl-box";
+          box.style.left = lr.left - base.left - 8 + "px";
+          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);
+          var at = start + FADE + 0.2;
+          tl.fromTo(
+            box,
+            { width: 0, opacity: 0 },
+            { width: lr.width + 18, opacity: 1, duration: SWEEP, ease: "power2.inOut" },
+            at,
+          );
+          for (var i = 0; i < lines.length; i++) {
+            if (i === idx) continue;
+            tl.fromTo(
+              lines[i],
+              { opacity: 1 },
+              { opacity: 0.45, duration: SWEEP, ease: "power2.inOut" },
+              at,
+            );
+          }
+        }
+
+        function scroll(tl, surface, state, start, targetLine) {
+          var SCROLL = 1.7;
+          var parts = makeScene(surface, true);
+          var code = parts.code;
+          renderState(code, state);
+          var lines = code.querySelectorAll(".line");
+          fillGutter(parts.gutter, lines.length);
+          var surfRect = surface.getBoundingClientRect();
+          var idx = Math.max(0, Math.min(lines.length - 1, targetLine - 1));
+          var lr = lines[idx].getBoundingClientRect();
+          var lineCenter = lr.top + lr.height / 2 - surfRect.top;
+          var dy = surfRect.height * 0.5 - lineCenter;
+          var box = document.createElement("div");
+          box.className = "hl-box";
+          box.style.left = lines[idx].offsetLeft - 8 + "px";
+          box.style.top = lines[idx].offsetTop - 1 + "px";
+          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);
+          var at = start + FADE + 0.35;
+          tl.fromTo(
+            [code, parts.gutter],
+            { y: 0 },
+            { y: dy, duration: SCROLL, ease: "power2.inOut" },
+            at,
+          );
+          var arrAt = at + SCROLL;
+          for (var i = 0; i < lines.length; i++) {
+            if (i === idx) continue;
+            tl.fromTo(
+              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);
+        }
+
+        function buildEffect(tl, surface, spec) {
+          var start = 0.45;
+          var seq = T[spec.seq];
+          if (spec.effect === "morph") morph(tl, surface, seq.states, start);
+          else if (spec.effect === "flight") flight(tl, surface, seq.states, start);
+          else if (spec.effect === "typing") typing(tl, surface, seq.states[0], start);
+          else if (spec.effect === "diff") diff(tl, surface, seq.states, start);
+          else if (spec.effect === "highlight")
+            highlight(tl, surface, seq.states[0], start, spec.line || 0);
+          else if (spec.effect === "scroll")
+            scroll(tl, surface, seq.states[0], start, spec.line || 1);
+        }
+
+        function go() {
+          var spec = window.__BLOCK;
+          var surface = document.getElementById("surface");
+          var root = document.getElementById("root");
+          window.__timelines = window.__timelines || {};
+          var tl = gsap.timeline({ paused: true });
+          window.__timelines["code-typing"] = tl; // register synchronously
+          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
+          });
+        }
+
+        if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
+        else go();
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/code-typing/registry-item.json b/registry/blocks/code-typing/registry-item.json
new file mode 100644
index 0000000000..f48938a4a8
--- /dev/null
+++ b/registry/blocks/code-typing/registry-item.json
@@ -0,0 +1,24 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "code-typing",
+  "type": "hyperframes:block",
+  "title": "Code Typing",
+  "description": "Token-streamed typing reveal with a caret that tracks the frontier — deterministic, no CSS animation.",
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 5,
+  "tags": ["code", "code-animation", "typing", "developer"],
+  "files": [
+    {
+      "path": "code-typing.html",
+      "target": "compositions/code-typing.html",
+      "type": "hyperframes:composition"
+    }
+  ],
+  "preview": {
+    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-typing.mp4",
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-typing.png"
+  }
+}
diff --git a/registry/registry.json b/registry/registry.json
index 2a7d5c1e50..1e7fe15426 100644
--- a/registry/registry.json
+++ b/registry/registry.json
@@ -471,6 +471,30 @@
       "name": "code-snippet-visual-studio-light",
       "type": "hyperframes:block"
     },
+    {
+      "name": "code-morph",
+      "type": "hyperframes:block"
+    },
+    {
+      "name": "code-snippet-flight",
+      "type": "hyperframes:block"
+    },
+    {
+      "name": "code-typing",
+      "type": "hyperframes:block"
+    },
+    {
+      "name": "code-diff",
+      "type": "hyperframes:block"
+    },
+    {
+      "name": "code-highlight",
+      "type": "hyperframes:block"
+    },
+    {
+      "name": "code-scroll",
+      "type": "hyperframes:block"
+    },
     {
       "name": "flowchart-vertical",
       "type": "hyperframes:block"
diff --git a/scripts/generate-catalog-pages.ts b/scripts/generate-catalog-pages.ts
index 56d634a884..44b70b1ccb 100644
--- a/scripts/generate-catalog-pages.ts
+++ b/scripts/generate-catalog-pages.ts
@@ -520,16 +520,18 @@ function main(): void {
   // go into an "Other" group. Groups are sorted with a priority order.
   const GROUP_ORDER: Record<string, number> = {
     Captions: 0,
-    "HTML-in-Canvas": 1,
-    "Social Overlays": 2,
-    "Shader Transitions": 3,
-    "CSS Transitions": 4,
-    Showcases: 5,
-    Data: 6,
-    Effects: 7,
-    Blocks: 8,
+    "Code Animations": 1,
+    "HTML-in-Canvas": 2,
+    "Social Overlays": 3,
+    "Shader Transitions": 4,
+    "CSS Transitions": 5,
+    Showcases: 6,
+    Data: 7,
+    Effects: 8,
+    Blocks: 9,
   };
 
+  // fallow-ignore-next-line complexity
   function groupForItem(entry: CatalogEntry): string {
     const tags = entry.tags;
     // Two-tag combos for specific grouping
@@ -537,6 +539,9 @@ function main(): void {
     if (tags.includes("transition") && tags.includes("showcase")) return "CSS Transitions";
     if (tags.includes("captions")) return "Captions";
     if (tags.includes("html-in-canvas")) return "HTML-in-Canvas";
+    // Code animations (morph, flight, diff, …) — keyed on the code-animation tag so
+    // they group separately from the static code-snippet themes.
+    if (tags.includes("code-animation")) return "Code Animations";
     // Single-tag mapping
     if (tags.includes("social")) return "Social Overlays";
     if (tags.includes("transition"))

From ed1ade385a8676b4a9fa22592bf0e4e17f90c5fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Mon, 15 Jun 2026 17:37:20 -0400
Subject: [PATCH 2/7] feat(registry): add 3 GPU code-animation blocks + section
 polish
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Three WebGL "Code Animations" blocks driven by the GPU — effects Remotion's
2D code plugins (Shiki Magic Move / CodeHike) can't easily match:

- code-3d-extrude: syntax-highlighted code on a lit, beveled 3D slab
  (Three.js) that rotates through space and settles to a readable rest
- code-shader-dissolve: the code "compiles" out of seeded GPU noise via a
  fragment shader (chromatic dissolve front + edge glow), then holds crisp
- code-particle-assemble: thousands of GPU points scatter and fly to the
  exact glyph pixels, resolving into readable syntax-highlighted code

Each is a self-contained single-HTML block (Three.js + GSAP from CDN, Shiki
tokens baked at author time) and fully deterministic: rendered via
tl.eventCallback("onUpdate") — never requestAnimationFrame — with a seeded
mulberry32 and no render-time network. Verified byte-identical across renders.

Also polishes the existing section:
- Code Animations is now the first catalog group
- code-snippet-flight chips are uniform-width, left-aligned, evenly stacked
- code-typing reveals per-character with a gliding caret (smooth)
---
 docs/catalog/blocks/code-3d-extrude.mdx       |  44 +
 .../catalog/blocks/code-particle-assemble.mdx |  44 +
 docs/catalog/blocks/code-shader-dissolve.mdx  |  44 +
 docs/docs.json                                |  25 +-
 .../code-3d-extrude/code-3d-extrude.html      | 804 ++++++++++++++++++
 .../blocks/code-3d-extrude/registry-item.json |  24 +
 .../code-particle-assemble.html               | 660 ++++++++++++++
 .../code-particle-assemble/registry-item.json |  24 +
 .../code-shader-dissolve.html                 | 750 ++++++++++++++++
 .../code-shader-dissolve/registry-item.json   |  24 +
 .../code-snippet-flight.html                  | 123 ++-
 registry/blocks/code-typing/code-typing.html  | 123 ++-
 registry/registry.json                        |  12 +
 scripts/generate-catalog-pages.ts             |   4 +-
 14 files changed, 2608 insertions(+), 97 deletions(-)
 create mode 100644 docs/catalog/blocks/code-3d-extrude.mdx
 create mode 100644 docs/catalog/blocks/code-particle-assemble.mdx
 create mode 100644 docs/catalog/blocks/code-shader-dissolve.mdx
 create mode 100644 registry/blocks/code-3d-extrude/code-3d-extrude.html
 create mode 100644 registry/blocks/code-3d-extrude/registry-item.json
 create mode 100644 registry/blocks/code-particle-assemble/code-particle-assemble.html
 create mode 100644 registry/blocks/code-particle-assemble/registry-item.json
 create mode 100644 registry/blocks/code-shader-dissolve/code-shader-dissolve.html
 create mode 100644 registry/blocks/code-shader-dissolve/registry-item.json

diff --git a/docs/catalog/blocks/code-3d-extrude.mdx b/docs/catalog/blocks/code-3d-extrude.mdx
new file mode 100644
index 0000000000..f36694b88d
--- /dev/null
+++ b/docs/catalog/blocks/code-3d-extrude.mdx
@@ -0,0 +1,44 @@
+---
+title: "Code 3D Extrude"
+description: "Syntax-highlighted code on a lit, beveled 3D slab that rotates through real space and settles to a readable rest — true WebGL depth and lighting, not a 2D transform."
+---
+
+# Code 3D Extrude
+
+Syntax-highlighted code on a lit, beveled 3D slab that rotates through real space and settles to a readable rest — true WebGL depth and lighting, not a 2D transform.
+
+`code` `code-animation` `3d` `webgl` `developer`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-3d-extrude.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-3d-extrude.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add code-3d-extrude
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 8s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `code-3d-extrude.html` | `compositions/code-3d-extrude.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="code-3d-extrude" data-composition-src="compositions/code-3d-extrude.html" data-start="0" data-duration="8" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
diff --git a/docs/catalog/blocks/code-particle-assemble.mdx b/docs/catalog/blocks/code-particle-assemble.mdx
new file mode 100644
index 0000000000..da29dde0c8
--- /dev/null
+++ b/docs/catalog/blocks/code-particle-assemble.mdx
@@ -0,0 +1,44 @@
+---
+title: "Code Particle Assemble"
+description: "Thousands of GPU points scatter through space and fly to the exact glyph pixels of the code, resolving into readable syntax-highlighted text — a particle system, not a token tween."
+---
+
+# Code Particle Assemble
+
+Thousands of GPU points scatter through space and fly to the exact glyph pixels of the code, resolving into readable syntax-highlighted text — a particle system, not a token tween.
+
+`code` `code-animation` `particles` `gpu` `webgl` `developer`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-particle-assemble.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-particle-assemble.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add code-particle-assemble
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 8s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `code-particle-assemble.html` | `compositions/code-particle-assemble.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="code-particle-assemble" data-composition-src="compositions/code-particle-assemble.html" data-start="0" data-duration="8" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
diff --git a/docs/catalog/blocks/code-shader-dissolve.mdx b/docs/catalog/blocks/code-shader-dissolve.mdx
new file mode 100644
index 0000000000..2d327221fb
--- /dev/null
+++ b/docs/catalog/blocks/code-shader-dissolve.mdx
@@ -0,0 +1,44 @@
+---
+title: "Code Shader Dissolve"
+description: "The code compiles into existence: a GPU fragment shader resolves it out of seeded noise with a chromatic dissolve front and edge glow, then holds crisp."
+---
+
+# Code Shader Dissolve
+
+The code compiles into existence: a GPU fragment shader resolves it out of seeded noise with a chromatic dissolve front and edge glow, then holds crisp.
+
+`code` `code-animation` `shader` `webgl` `developer`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-shader-dissolve.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-shader-dissolve.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add code-shader-dissolve
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 7s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `code-shader-dissolve.html` | `compositions/code-shader-dissolve.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="code-shader-dissolve" data-composition-src="compositions/code-shader-dissolve.html" data-start="0" data-duration="7" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
diff --git a/docs/docs.json b/docs/docs.json
index 6c15a4d5c8..624861506f 100644
--- a/docs/docs.json
+++ b/docs/docs.json
@@ -112,6 +112,20 @@
       {
         "tab": "Catalog",
         "groups": [
+          {
+            "group": "Code Animations",
+            "pages": [
+              "catalog/blocks/code-3d-extrude",
+              "catalog/blocks/code-shader-dissolve",
+              "catalog/blocks/code-particle-assemble",
+              "catalog/blocks/code-morph",
+              "catalog/blocks/code-snippet-flight",
+              "catalog/blocks/code-typing",
+              "catalog/blocks/code-diff",
+              "catalog/blocks/code-highlight",
+              "catalog/blocks/code-scroll"
+            ]
+          },
           {
             "group": "Captions",
             "pages": [
@@ -276,17 +290,6 @@
               "catalog/blocks/code-snippet-visual-studio-dark",
               "catalog/blocks/code-snippet-visual-studio-light"
             ]
-          },
-          {
-            "group": "Code Animations",
-            "pages": [
-              "catalog/blocks/code-morph",
-              "catalog/blocks/code-snippet-flight",
-              "catalog/blocks/code-typing",
-              "catalog/blocks/code-diff",
-              "catalog/blocks/code-highlight",
-              "catalog/blocks/code-scroll"
-            ]
           }
         ]
       },
diff --git a/registry/blocks/code-3d-extrude/code-3d-extrude.html b/registry/blocks/code-3d-extrude/code-3d-extrude.html
new file mode 100644
index 0000000000..5b572b0ce3
--- /dev/null
+++ b/registry/blocks/code-3d-extrude/code-3d-extrude.html
@@ -0,0 +1,804 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <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/three@0.147.0/build/three.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #05070b;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+      }
+      #gl {
+        position: absolute;
+        inset: 0;
+        width: 1920px;
+        height: 1080px;
+        display: block;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="code-3d-extrude"
+      data-start="0"
+      data-duration="8"
+      data-width="1920"
+      data-height="1080"
+    >
+      <canvas id="gl" width="1920" height="1080"></canvas>
+    </div>
+    <script>
+      window.__TOKENS = {
+        feature: {
+          lang: "js",
+          theme: "github-dark",
+          bg: "#24292e",
+          fg: "#e1e4e8",
+          states: [
+            {
+              code: 'async function loadConfig(path) {\n  const raw = await readFile(path, "utf8")\n  const config = JSON.parse(raw)\n  return validate(config)\n}',
+              tokens: [
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-0",
+                  content: "async",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-1",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-2",
+                  content: "function",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-3",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-4",
+                  content: "loadConfig",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-5",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-6",
+                  content: "path",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-7",
+                  content: ") {",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-8",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-9",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-10",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-11",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-12",
+                  content: "raw",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-13",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-14",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-15",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-16",
+                  content: "await",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-17",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-18",
+                  content: "readFile",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-19",
+                  content: "(path,",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-20",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-21",
+                  content: '"utf8"',
+                  color: "#9ECBFF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-22",
+                  content: ")",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-23",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-24",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-25",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-26",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-27",
+                  content: "config",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-28",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-29",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-30",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-31",
+                  content: "JSON",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-32",
+                  content: ".",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-33",
+                  content: "parse",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-34",
+                  content: "(raw)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-35",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-36",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-37",
+                  content: "return",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-38",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-39",
+                  content: "validate",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-40",
+                  content: "(config)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-41",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-42",
+                  content: "}",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-43",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+              ],
+            },
+          ],
+        },
+      };
+      window.__BLOCK = {
+        id: "code-3d-extrude",
+        effect: "extrude",
+        seq: "feature",
+        duration: 8,
+        seed: 7,
+      };
+    </script>
+    <script>
+      // hf-code-anim-gl.js — WebGL code-animation engine for the "crazy" Code Animations blocks.
+      //
+      // 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
+      //   - 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
+      //
+      // Each block sets window.__BLOCK = { id, effect, seq, duration, seed } and includes this engine.
+      (function () {
+        "use strict";
+        var T = window.__TOKENS || {};
+
+        // ---- seeded PRNG (no Math.random) -----------------------------------------
+        function mulberry32(a) {
+          return function () {
+            a |= 0;
+            a = (a + 0x6d2b79f5) | 0;
+            var t = Math.imul(a ^ (a >>> 15), 1 | a);
+            t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+            return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+          };
+        }
+
+        // ---- split a token state into lines of {content,color} --------------------
+        function splitLines(state) {
+          var lines = [[]];
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              lines.push([]);
+              continue;
+            }
+            lines[lines.length - 1].push(t);
+          }
+          while (lines.length && lines[lines.length - 1].length === 0) lines.pop();
+          return lines;
+        }
+
+        // ---- THE BRIDGE: draw baked tokens to an offscreen 2D canvas ---------------
+        // Returns { canvas, W, H, lines, lineH, padY, fontPx } so effects can sample it.
+        function drawCodeToCanvas(state, opts) {
+          opts = opts || {};
+          var fontPx = opts.fontPx || 36;
+          var lineH = opts.lineH || 54;
+          var padX = opts.padX || 70;
+          var padY = opts.padY || 60;
+          var weight = opts.weight || 500;
+          var font = weight + " " + fontPx + 'px "JetBrains Mono", monospace';
+
+          var lines = splitLines(state);
+          var measure = document.createElement("canvas").getContext("2d");
+          measure.font = font;
+          var maxW = 0;
+          for (var i = 0; i < lines.length; i++) {
+            var w = 0;
+            for (var j = 0; j < lines[i].length; j++)
+              w += measure.measureText(lines[i][j].content).width;
+            if (w > maxW) maxW = w;
+          }
+          var W = Math.max(2, Math.ceil(maxW + padX * 2));
+          var H = Math.max(2, Math.ceil(lines.length * lineH + padY * 2));
+
+          var canvas = document.createElement("canvas");
+          canvas.width = W;
+          canvas.height = H;
+          var ctx = canvas.getContext("2d");
+          if (opts.transparent) {
+            ctx.clearRect(0, 0, W, H);
+          } else {
+            ctx.fillStyle = opts.bg || "#0b0f17";
+            ctx.fillRect(0, 0, W, H);
+          }
+          ctx.textBaseline = "top";
+          ctx.font = font;
+          for (var li = 0; li < lines.length; li++) {
+            var x = padX;
+            var y = padY + li * lineH;
+            for (var k = 0; k < lines[li].length; k++) {
+              var tok = lines[li][k];
+              ctx.fillStyle = tok.color;
+              ctx.fillText(tok.content, x, y);
+              x += ctx.measureText(tok.content).width;
+            }
+          }
+          return {
+            canvas: canvas,
+            W: W,
+            H: H,
+            lines: lines.length,
+            lineH: lineH,
+            padY: padY,
+            fontPx: fontPx,
+          };
+        }
+
+        // ===========================================================================
+        // Effect 1 — code-3d-extrude: code on a lit, beveled slab that rotates to rest
+        // ===========================================================================
+        function fxExtrude(THREE, scene, camera, renderer, state, st, tl, dur) {
+          scene.background = new THREE.Color(0x05070b);
+          var code = drawCodeToCanvas(state, {
+            fontPx: 38,
+            lineH: 56,
+            padX: 80,
+            padY: 70,
+            weight: 600,
+          });
+          var tex = new THREE.CanvasTexture(code.canvas);
+          tex.minFilter = THREE.LinearFilter;
+          tex.magFilter = THREE.LinearFilter;
+          tex.generateMipmaps = false;
+
+          var aspect = code.W / code.H;
+          var slabH = 6.2;
+          var slabW = slabH * aspect;
+          var depth = 0.5;
+
+          // beveled slab: rounded extruded rectangle
+          var hw = slabW / 2;
+          var hh = slabH / 2;
+          var r = 0.18;
+          var shape = new THREE.Shape();
+          shape.moveTo(-hw + r, -hh);
+          shape.lineTo(hw - r, -hh);
+          shape.quadraticCurveTo(hw, -hh, hw, -hh + r);
+          shape.lineTo(hw, hh - r);
+          shape.quadraticCurveTo(hw, hh, hw - r, hh);
+          shape.lineTo(-hw + r, hh);
+          shape.quadraticCurveTo(-hw, hh, -hw, hh - r);
+          shape.lineTo(-hw, -hh + r);
+          shape.quadraticCurveTo(-hw, -hh, -hw + r, -hh);
+          var geo = new THREE.ExtrudeGeometry(shape, {
+            depth: depth,
+            bevelEnabled: true,
+            bevelThickness: 0.12,
+            bevelSize: 0.1,
+            bevelSegments: 3,
+            steps: 1,
+          });
+          geo.center();
+          // UVs from ExtrudeGeometry don't map the texture nicely to the face; remap front-face UVs from XY bounds.
+          geo.computeBoundingBox();
+          var bb = geo.boundingBox;
+          var sizeX = bb.max.x - bb.min.x;
+          var sizeY = bb.max.y - bb.min.y;
+          var pos = geo.attributes.position;
+          var uv = geo.attributes.uv;
+          for (var vi = 0; vi < pos.count; vi++) {
+            uv.setXY(vi, (pos.getX(vi) - bb.min.x) / sizeX, (pos.getY(vi) - bb.min.y) / sizeY);
+          }
+          uv.needsUpdate = true;
+
+          var faceMat = new THREE.MeshStandardMaterial({
+            map: tex,
+            roughness: 0.42,
+            metalness: 0.0,
+            emissive: 0xffffff,
+            emissiveMap: tex,
+            emissiveIntensity: 0.5,
+          });
+          var edgeMat = new THREE.MeshStandardMaterial({
+            color: 0x121a26,
+            roughness: 0.35,
+            metalness: 0.3,
+          });
+          // ExtrudeGeometry groups: 0 = front+back faces, 1 = sides. Front shows the code.
+          var slab = new THREE.Mesh(geo, [faceMat, edgeMat]);
+          scene.add(slab);
+
+          scene.add(new THREE.AmbientLight(0xffffff, 0.5));
+          var key = new THREE.DirectionalLight(0xbcd4ff, 1.25);
+          key.position.set(5, 7, 9);
+          scene.add(key);
+          var rim = new THREE.DirectionalLight(0x4fffa0, 0.45);
+          rim.position.set(-7, -3, 5);
+          scene.add(rim);
+
+          camera.position.set(0, 0, 10);
+
+          // fit camera distance so the WHOLE slab fits (width-limited for wide code), ~78% fill
+          var vfov = (camera.fov * Math.PI) / 180;
+          var screenAspect = 1920 / 1080;
+          var fitH = slabH / 2 / Math.tan(vfov / 2) / 0.78;
+          var fitW = slabW / 2 / (Math.tan(vfov / 2) * screenAspect) / 0.78;
+          var fitZ = Math.max(fitH, fitW);
+
+          st.rotY = -1.0;
+          st.rotX = 0.4;
+          st.camZ = fitZ + 6;
+          st.glow = 0.0;
+          tl.to(
+            st,
+            { rotY: 0, rotX: 0, camZ: fitZ, glow: 0.6, duration: dur * 0.6, ease: "power3.out" },
+            0,
+          );
+          // gentle breathing drift at rest (subtle — stays readable)
+          tl.to(
+            st,
+            { rotY: 0.06, rotX: -0.02, duration: dur * 0.4, ease: "sine.inOut" },
+            dur * 0.6,
+          );
+
+          return function () {
+            slab.rotation.y = st.rotY;
+            slab.rotation.x = st.rotX;
+            faceMat.emissiveIntensity = st.glow;
+            camera.position.z = st.camZ;
+            camera.lookAt(0, 0, 0);
+            renderer.render(scene, camera);
+          };
+        }
+
+        // ===========================================================================
+        // Effect 2 — code-shader-dissolve: code "compiles" out of GPU noise, holds crisp
+        // ===========================================================================
+        function fxDissolve(THREE, scene, camera, renderer, state, st, tl, dur, seed) {
+          scene.background = new THREE.Color(0x05070b);
+          var code = drawCodeToCanvas(state, {
+            fontPx: 40,
+            lineH: 60,
+            padX: 90,
+            padY: 80,
+            weight: 600,
+          });
+          var tex = new THREE.CanvasTexture(code.canvas);
+          tex.minFilter = THREE.LinearFilter;
+          tex.magFilter = THREE.LinearFilter;
+          tex.generateMipmaps = false;
+
+          var aspect = code.W / code.H;
+          var planeH = 6.6;
+          var planeW = planeH * aspect;
+
+          var uniforms = {
+            uTex: { value: tex },
+            uProgress: { value: 0 },
+            uSeed: { value: (seed || 1) * 13.37 },
+          };
+          var mat = new THREE.ShaderMaterial({
+            uniforms: uniforms,
+            transparent: true,
+            vertexShader: [
+              "varying vec2 vUv;",
+              "void main(){ vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0); }",
+            ].join("\n"),
+            fragmentShader: [
+              "precision highp float;",
+              "uniform sampler2D uTex;",
+              "uniform float uProgress;",
+              "uniform float uSeed;",
+              "varying vec2 vUv;",
+              "float hash(vec2 p){ p=fract(p*vec2(123.34,456.21)); p+=dot(p,p+45.32); return fract(p.x*p.y); }",
+              "float noise(vec2 p){ vec2 i=floor(p),f=fract(p); float a=hash(i),b=hash(i+vec2(1.,0.)),c=hash(i+vec2(0.,1.)),d=hash(i+vec2(1.,1.)); vec2 u=f*f*(3.-2.*f); return mix(mix(a,b,u.x),mix(c,d,u.x),u.y); }",
+              "void main(){",
+              "  vec2 uv = vUv;",
+              // multi-octave seeded noise field
+              "  float n = noise(uv*16.0+uSeed)*0.6 + noise(uv*48.0+uSeed*1.7)*0.3 + noise(uv*120.0+uSeed*2.3)*0.1;",
+              "  float edge = 0.12;",
+              "  float reveal = smoothstep(n-edge, n+edge, uProgress);", // 0 hidden -> 1 shown
+              // chromatic fringe strongest at the dissolving edge
+              "  float band = reveal*(1.0-reveal)*4.0;",
+              "  float off = band*0.010;",
+              "  float r = texture2D(uTex, uv+vec2(off,0.0)).r;",
+              "  float g = texture2D(uTex, uv).g;",
+              "  float b = texture2D(uTex, uv-vec2(off,0.0)).b;",
+              "  vec3 codeCol = vec3(r,g,b);",
+              // additive cyan edge glow along the dissolve front
+              "  vec3 glow = vec3(0.30,0.72,1.0) * band * 0.9;",
+              "  vec3 outc = codeCol*reveal + glow;",
+              "  float a = max(reveal, band*0.8);",
+              "  gl_FragColor = vec4(outc, a);",
+              "}",
+            ].join("\n"),
+          });
+
+          var plane = new THREE.Mesh(new THREE.PlaneGeometry(planeW, planeH), mat);
+          scene.add(plane);
+
+          camera.position.set(0, 0, 10);
+          var vfov = (camera.fov * Math.PI) / 180;
+          var screenAspect = 1920 / 1080;
+          var fitH = planeH / 2 / Math.tan(vfov / 2) / 0.82;
+          var fitW = planeW / 2 / (Math.tan(vfov / 2) * screenAspect) / 0.82;
+          camera.position.z = Math.max(fitH, fitW);
+          camera.lookAt(0, 0, 0);
+
+          // compile in, then hold crisp. Overshoot to 1.15 so even max-noise pixels
+          // (n up to ~1.0, edge 0.12) fully resolve — no leftover specks at rest.
+          tl.to(uniforms.uProgress, { value: 1.15, duration: dur * 0.62, ease: "power1.inOut" }, 0);
+
+          return function () {
+            renderer.render(scene, camera);
+          };
+        }
+
+        // ===========================================================================
+        // Effect 3 — code-particle-assemble: GPU points scatter then fly to glyph pixels
+        // ===========================================================================
+        function fxParticles(THREE, scene, camera, renderer, state, st, tl, dur, seed) {
+          scene.background = new THREE.Color(0x05070b);
+          var code = drawCodeToCanvas(state, {
+            fontPx: 46,
+            lineH: 70,
+            padX: 70,
+            padY: 64,
+            weight: 700,
+          });
+          var cw = code.W;
+          var ch = code.H;
+          var data = code.canvas.getContext("2d").getImageData(0, 0, cw, ch).data;
+          var rng = mulberry32(((seed || 1) * 2654435761) >>> 0);
+
+          var worldW = 13.0;
+          var worldH = worldW * (ch / cw);
+
+          // sample glyph pixels (brighter than the dark bg) on a fixed grid
+          var step = 2;
+          var tx = [];
+          var col = [];
+          for (var y = 0; y < ch; y += step) {
+            for (var x = 0; x < cw; x += step) {
+              var idx = (y * cw + x) * 4;
+              var r = data[idx];
+              var g = data[idx + 1];
+              var b = data[idx + 2];
+              if (r + g + b < 120) continue; // skip background
+              tx.push((x / cw - 0.5) * worldW, -(y / ch - 0.5) * worldH, 0);
+              col.push(r / 255, g / 255, b / 255);
+            }
+          }
+          var n = tx.length / 3;
+
+          var positions = new Float32Array(n * 3);
+          var aOrigin = new Float32Array(n * 3);
+          var aTarget = new Float32Array(tx);
+          var aColor = new Float32Array(col);
+          var aDelay = new Float32Array(n);
+          for (var i = 0; i < n; i++) {
+            var sx = (rng() * 2 - 1) * worldW * 1.15;
+            var sy = (rng() * 2 - 1) * worldH * 1.7;
+            var sz = (rng() * 2 - 1) * 9.0 - 2.0;
+            aOrigin[i * 3] = sx;
+            aOrigin[i * 3 + 1] = sy;
+            aOrigin[i * 3 + 2] = sz;
+            positions[i * 3] = sx;
+            positions[i * 3 + 1] = sy;
+            positions[i * 3 + 2] = sz;
+            aDelay[i] = rng();
+          }
+
+          var geo = new THREE.BufferGeometry();
+          geo.setAttribute("position", new THREE.BufferAttribute(positions, 3));
+          geo.setAttribute("aOrigin", new THREE.BufferAttribute(aOrigin, 3));
+          geo.setAttribute("aTarget", new THREE.BufferAttribute(aTarget, 3));
+          geo.setAttribute("aColor", new THREE.BufferAttribute(aColor, 3));
+          geo.setAttribute("aDelay", new THREE.BufferAttribute(aDelay, 1));
+
+          var uniforms = { uProgress: { value: 0 }, uSize: { value: 3.4 } };
+          var mat = new THREE.ShaderMaterial({
+            uniforms: uniforms,
+            transparent: true,
+            depthTest: false,
+            blending: THREE.AdditiveBlending,
+            vertexShader: [
+              "attribute vec3 aOrigin; attribute vec3 aTarget; attribute vec3 aColor; attribute float aDelay;",
+              "uniform float uProgress; uniform float uSize;",
+              "varying vec3 vColor; varying float vP;",
+              "void main(){",
+              "  float span = 0.62;",
+              "  float p = clamp((uProgress - aDelay*(1.0-span)) / span, 0.0, 1.0);",
+              "  p = p*p*(3.0-2.0*p);",
+              "  vec3 pos = mix(aOrigin, aTarget, p);",
+              "  vec4 mv = modelViewMatrix * vec4(pos, 1.0);",
+              "  gl_Position = projectionMatrix * mv;",
+              "  gl_PointSize = uSize * (60.0 / -mv.z) * (0.45 + 0.55*p);",
+              "  vColor = aColor; vP = p;",
+              "}",
+            ].join("\n"),
+            fragmentShader: [
+              "precision highp float;",
+              "varying vec3 vColor; varying float vP;",
+              "void main(){",
+              "  vec2 d = gl_PointCoord - 0.5;",
+              "  float r2 = dot(d, d);",
+              "  if (r2 > 0.25) discard;",
+              "  float a = smoothstep(0.25, 0.02, r2);",
+              // brighter & whiter in flight, resolves to true color as it lands
+              "  vec3 c = mix(vColor + vec3(0.5)*(1.0-vP), vColor, vP);",
+              "  gl_FragColor = vec4(c, a * (0.55 + 0.45*vP));",
+              "}",
+            ].join("\n"),
+          });
+
+          var pts = new THREE.Points(geo, mat);
+          scene.add(pts);
+
+          camera.position.set(0, 0, 10);
+          var vfov = (camera.fov * Math.PI) / 180;
+          var sa = 1920 / 1080;
+          var fitH = worldH / 2 / Math.tan(vfov / 2) / 0.78;
+          var fitW = worldW / 2 / (Math.tan(vfov / 2) * sa) / 0.78;
+          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);
+
+          return function () {
+            renderer.render(scene, camera);
+          };
+        }
+
+        // ---- dispatch + boot ------------------------------------------------------
+        function buildEffect(THREE, scene, camera, renderer, spec, st, tl) {
+          var state = T[spec.seq].states[0];
+          var dur = spec.duration;
+          if (spec.effect === "extrude")
+            return fxExtrude(THREE, scene, camera, renderer, state, st, tl, dur);
+          if (spec.effect === "dissolve")
+            return fxDissolve(THREE, scene, camera, renderer, state, st, tl, dur, spec.seed);
+          if (spec.effect === "particles")
+            return fxParticles(THREE, scene, camera, renderer, state, st, tl, dur, spec.seed);
+          return function () {};
+        }
+
+        function go() {
+          var spec = window.__BLOCK;
+          var root = document.getElementById("root");
+          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({
+            canvas: glcanvas,
+            antialias: true,
+            alpha: false,
+            preserveDrawingBuffer: true,
+          });
+          renderer.setPixelRatio(1);
+          renderer.setSize(W, H, false);
+          var scene = new THREE.Scene();
+          var camera = new THREE.PerspectiveCamera(45, W / H, 0.1, 200);
+          var st = {};
+
+          document.fonts.ready.then(function () {
+            var renderFn = buildEffect(THREE, scene, camera, renderer, spec, st, tl);
+            function render() {
+              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
+            render(); // paint frame 0
+          });
+        }
+
+        if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
+        else go();
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/code-3d-extrude/registry-item.json b/registry/blocks/code-3d-extrude/registry-item.json
new file mode 100644
index 0000000000..69ddbb0a89
--- /dev/null
+++ b/registry/blocks/code-3d-extrude/registry-item.json
@@ -0,0 +1,24 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "code-3d-extrude",
+  "type": "hyperframes:block",
+  "title": "Code 3D Extrude",
+  "description": "Syntax-highlighted code on a lit, beveled 3D slab that rotates through real space and settles to a readable rest — true WebGL depth and lighting, not a 2D transform.",
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 8,
+  "tags": ["code", "code-animation", "3d", "webgl", "developer"],
+  "files": [
+    {
+      "path": "code-3d-extrude.html",
+      "target": "compositions/code-3d-extrude.html",
+      "type": "hyperframes:composition"
+    }
+  ],
+  "preview": {
+    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-3d-extrude.mp4",
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-3d-extrude.png"
+  }
+}
diff --git a/registry/blocks/code-particle-assemble/code-particle-assemble.html b/registry/blocks/code-particle-assemble/code-particle-assemble.html
new file mode 100644
index 0000000000..9a5acaf62a
--- /dev/null
+++ b/registry/blocks/code-particle-assemble/code-particle-assemble.html
@@ -0,0 +1,660 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <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/three@0.147.0/build/three.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #05070b;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+      }
+      #gl {
+        position: absolute;
+        inset: 0;
+        width: 1920px;
+        height: 1080px;
+        display: block;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="code-particle-assemble"
+      data-start="0"
+      data-duration="8"
+      data-width="1920"
+      data-height="1080"
+    >
+      <canvas id="gl" width="1920" height="1080"></canvas>
+    </div>
+    <script>
+      window.__TOKENS = {
+        assemble: {
+          lang: "js",
+          theme: "github-dark",
+          bg: "#24292e",
+          fg: "#e1e4e8",
+          states: [
+            {
+              code: "const app = pipe(\n  parse,\n  optimize,\n  emit,\n)",
+              tokens: [
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-0",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-1",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-2",
+                  content: "app",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-3",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-4",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-5",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-6",
+                  content: "pipe",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-7",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-8",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-9",
+                  content: "  ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-10",
+                  content: "parse,",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-11",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-12",
+                  content: "  ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-13",
+                  content: "optimize,",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-14",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-15",
+                  content: "  ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-16",
+                  content: "emit,",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-17",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-18",
+                  content: ")",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-19",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+              ],
+            },
+          ],
+        },
+      };
+      window.__BLOCK = {
+        id: "code-particle-assemble",
+        effect: "particles",
+        seq: "assemble",
+        duration: 8,
+        seed: 23,
+      };
+    </script>
+    <script>
+      // hf-code-anim-gl.js — WebGL code-animation engine for the "crazy" Code Animations blocks.
+      //
+      // 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
+      //   - 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
+      //
+      // Each block sets window.__BLOCK = { id, effect, seq, duration, seed } and includes this engine.
+      (function () {
+        "use strict";
+        var T = window.__TOKENS || {};
+
+        // ---- seeded PRNG (no Math.random) -----------------------------------------
+        function mulberry32(a) {
+          return function () {
+            a |= 0;
+            a = (a + 0x6d2b79f5) | 0;
+            var t = Math.imul(a ^ (a >>> 15), 1 | a);
+            t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+            return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+          };
+        }
+
+        // ---- split a token state into lines of {content,color} --------------------
+        function splitLines(state) {
+          var lines = [[]];
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              lines.push([]);
+              continue;
+            }
+            lines[lines.length - 1].push(t);
+          }
+          while (lines.length && lines[lines.length - 1].length === 0) lines.pop();
+          return lines;
+        }
+
+        // ---- THE BRIDGE: draw baked tokens to an offscreen 2D canvas ---------------
+        // Returns { canvas, W, H, lines, lineH, padY, fontPx } so effects can sample it.
+        function drawCodeToCanvas(state, opts) {
+          opts = opts || {};
+          var fontPx = opts.fontPx || 36;
+          var lineH = opts.lineH || 54;
+          var padX = opts.padX || 70;
+          var padY = opts.padY || 60;
+          var weight = opts.weight || 500;
+          var font = weight + " " + fontPx + 'px "JetBrains Mono", monospace';
+
+          var lines = splitLines(state);
+          var measure = document.createElement("canvas").getContext("2d");
+          measure.font = font;
+          var maxW = 0;
+          for (var i = 0; i < lines.length; i++) {
+            var w = 0;
+            for (var j = 0; j < lines[i].length; j++)
+              w += measure.measureText(lines[i][j].content).width;
+            if (w > maxW) maxW = w;
+          }
+          var W = Math.max(2, Math.ceil(maxW + padX * 2));
+          var H = Math.max(2, Math.ceil(lines.length * lineH + padY * 2));
+
+          var canvas = document.createElement("canvas");
+          canvas.width = W;
+          canvas.height = H;
+          var ctx = canvas.getContext("2d");
+          if (opts.transparent) {
+            ctx.clearRect(0, 0, W, H);
+          } else {
+            ctx.fillStyle = opts.bg || "#0b0f17";
+            ctx.fillRect(0, 0, W, H);
+          }
+          ctx.textBaseline = "top";
+          ctx.font = font;
+          for (var li = 0; li < lines.length; li++) {
+            var x = padX;
+            var y = padY + li * lineH;
+            for (var k = 0; k < lines[li].length; k++) {
+              var tok = lines[li][k];
+              ctx.fillStyle = tok.color;
+              ctx.fillText(tok.content, x, y);
+              x += ctx.measureText(tok.content).width;
+            }
+          }
+          return {
+            canvas: canvas,
+            W: W,
+            H: H,
+            lines: lines.length,
+            lineH: lineH,
+            padY: padY,
+            fontPx: fontPx,
+          };
+        }
+
+        // ===========================================================================
+        // Effect 1 — code-3d-extrude: code on a lit, beveled slab that rotates to rest
+        // ===========================================================================
+        function fxExtrude(THREE, scene, camera, renderer, state, st, tl, dur) {
+          scene.background = new THREE.Color(0x05070b);
+          var code = drawCodeToCanvas(state, {
+            fontPx: 38,
+            lineH: 56,
+            padX: 80,
+            padY: 70,
+            weight: 600,
+          });
+          var tex = new THREE.CanvasTexture(code.canvas);
+          tex.minFilter = THREE.LinearFilter;
+          tex.magFilter = THREE.LinearFilter;
+          tex.generateMipmaps = false;
+
+          var aspect = code.W / code.H;
+          var slabH = 6.2;
+          var slabW = slabH * aspect;
+          var depth = 0.5;
+
+          // beveled slab: rounded extruded rectangle
+          var hw = slabW / 2;
+          var hh = slabH / 2;
+          var r = 0.18;
+          var shape = new THREE.Shape();
+          shape.moveTo(-hw + r, -hh);
+          shape.lineTo(hw - r, -hh);
+          shape.quadraticCurveTo(hw, -hh, hw, -hh + r);
+          shape.lineTo(hw, hh - r);
+          shape.quadraticCurveTo(hw, hh, hw - r, hh);
+          shape.lineTo(-hw + r, hh);
+          shape.quadraticCurveTo(-hw, hh, -hw, hh - r);
+          shape.lineTo(-hw, -hh + r);
+          shape.quadraticCurveTo(-hw, -hh, -hw + r, -hh);
+          var geo = new THREE.ExtrudeGeometry(shape, {
+            depth: depth,
+            bevelEnabled: true,
+            bevelThickness: 0.12,
+            bevelSize: 0.1,
+            bevelSegments: 3,
+            steps: 1,
+          });
+          geo.center();
+          // UVs from ExtrudeGeometry don't map the texture nicely to the face; remap front-face UVs from XY bounds.
+          geo.computeBoundingBox();
+          var bb = geo.boundingBox;
+          var sizeX = bb.max.x - bb.min.x;
+          var sizeY = bb.max.y - bb.min.y;
+          var pos = geo.attributes.position;
+          var uv = geo.attributes.uv;
+          for (var vi = 0; vi < pos.count; vi++) {
+            uv.setXY(vi, (pos.getX(vi) - bb.min.x) / sizeX, (pos.getY(vi) - bb.min.y) / sizeY);
+          }
+          uv.needsUpdate = true;
+
+          var faceMat = new THREE.MeshStandardMaterial({
+            map: tex,
+            roughness: 0.42,
+            metalness: 0.0,
+            emissive: 0xffffff,
+            emissiveMap: tex,
+            emissiveIntensity: 0.5,
+          });
+          var edgeMat = new THREE.MeshStandardMaterial({
+            color: 0x121a26,
+            roughness: 0.35,
+            metalness: 0.3,
+          });
+          // ExtrudeGeometry groups: 0 = front+back faces, 1 = sides. Front shows the code.
+          var slab = new THREE.Mesh(geo, [faceMat, edgeMat]);
+          scene.add(slab);
+
+          scene.add(new THREE.AmbientLight(0xffffff, 0.5));
+          var key = new THREE.DirectionalLight(0xbcd4ff, 1.25);
+          key.position.set(5, 7, 9);
+          scene.add(key);
+          var rim = new THREE.DirectionalLight(0x4fffa0, 0.45);
+          rim.position.set(-7, -3, 5);
+          scene.add(rim);
+
+          camera.position.set(0, 0, 10);
+
+          // fit camera distance so the WHOLE slab fits (width-limited for wide code), ~78% fill
+          var vfov = (camera.fov * Math.PI) / 180;
+          var screenAspect = 1920 / 1080;
+          var fitH = slabH / 2 / Math.tan(vfov / 2) / 0.78;
+          var fitW = slabW / 2 / (Math.tan(vfov / 2) * screenAspect) / 0.78;
+          var fitZ = Math.max(fitH, fitW);
+
+          st.rotY = -1.0;
+          st.rotX = 0.4;
+          st.camZ = fitZ + 6;
+          st.glow = 0.0;
+          tl.to(
+            st,
+            { rotY: 0, rotX: 0, camZ: fitZ, glow: 0.6, duration: dur * 0.6, ease: "power3.out" },
+            0,
+          );
+          // gentle breathing drift at rest (subtle — stays readable)
+          tl.to(
+            st,
+            { rotY: 0.06, rotX: -0.02, duration: dur * 0.4, ease: "sine.inOut" },
+            dur * 0.6,
+          );
+
+          return function () {
+            slab.rotation.y = st.rotY;
+            slab.rotation.x = st.rotX;
+            faceMat.emissiveIntensity = st.glow;
+            camera.position.z = st.camZ;
+            camera.lookAt(0, 0, 0);
+            renderer.render(scene, camera);
+          };
+        }
+
+        // ===========================================================================
+        // Effect 2 — code-shader-dissolve: code "compiles" out of GPU noise, holds crisp
+        // ===========================================================================
+        function fxDissolve(THREE, scene, camera, renderer, state, st, tl, dur, seed) {
+          scene.background = new THREE.Color(0x05070b);
+          var code = drawCodeToCanvas(state, {
+            fontPx: 40,
+            lineH: 60,
+            padX: 90,
+            padY: 80,
+            weight: 600,
+          });
+          var tex = new THREE.CanvasTexture(code.canvas);
+          tex.minFilter = THREE.LinearFilter;
+          tex.magFilter = THREE.LinearFilter;
+          tex.generateMipmaps = false;
+
+          var aspect = code.W / code.H;
+          var planeH = 6.6;
+          var planeW = planeH * aspect;
+
+          var uniforms = {
+            uTex: { value: tex },
+            uProgress: { value: 0 },
+            uSeed: { value: (seed || 1) * 13.37 },
+          };
+          var mat = new THREE.ShaderMaterial({
+            uniforms: uniforms,
+            transparent: true,
+            vertexShader: [
+              "varying vec2 vUv;",
+              "void main(){ vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0); }",
+            ].join("\n"),
+            fragmentShader: [
+              "precision highp float;",
+              "uniform sampler2D uTex;",
+              "uniform float uProgress;",
+              "uniform float uSeed;",
+              "varying vec2 vUv;",
+              "float hash(vec2 p){ p=fract(p*vec2(123.34,456.21)); p+=dot(p,p+45.32); return fract(p.x*p.y); }",
+              "float noise(vec2 p){ vec2 i=floor(p),f=fract(p); float a=hash(i),b=hash(i+vec2(1.,0.)),c=hash(i+vec2(0.,1.)),d=hash(i+vec2(1.,1.)); vec2 u=f*f*(3.-2.*f); return mix(mix(a,b,u.x),mix(c,d,u.x),u.y); }",
+              "void main(){",
+              "  vec2 uv = vUv;",
+              // multi-octave seeded noise field
+              "  float n = noise(uv*16.0+uSeed)*0.6 + noise(uv*48.0+uSeed*1.7)*0.3 + noise(uv*120.0+uSeed*2.3)*0.1;",
+              "  float edge = 0.12;",
+              "  float reveal = smoothstep(n-edge, n+edge, uProgress);", // 0 hidden -> 1 shown
+              // chromatic fringe strongest at the dissolving edge
+              "  float band = reveal*(1.0-reveal)*4.0;",
+              "  float off = band*0.010;",
+              "  float r = texture2D(uTex, uv+vec2(off,0.0)).r;",
+              "  float g = texture2D(uTex, uv).g;",
+              "  float b = texture2D(uTex, uv-vec2(off,0.0)).b;",
+              "  vec3 codeCol = vec3(r,g,b);",
+              // additive cyan edge glow along the dissolve front
+              "  vec3 glow = vec3(0.30,0.72,1.0) * band * 0.9;",
+              "  vec3 outc = codeCol*reveal + glow;",
+              "  float a = max(reveal, band*0.8);",
+              "  gl_FragColor = vec4(outc, a);",
+              "}",
+            ].join("\n"),
+          });
+
+          var plane = new THREE.Mesh(new THREE.PlaneGeometry(planeW, planeH), mat);
+          scene.add(plane);
+
+          camera.position.set(0, 0, 10);
+          var vfov = (camera.fov * Math.PI) / 180;
+          var screenAspect = 1920 / 1080;
+          var fitH = planeH / 2 / Math.tan(vfov / 2) / 0.82;
+          var fitW = planeW / 2 / (Math.tan(vfov / 2) * screenAspect) / 0.82;
+          camera.position.z = Math.max(fitH, fitW);
+          camera.lookAt(0, 0, 0);
+
+          // compile in, then hold crisp. Overshoot to 1.15 so even max-noise pixels
+          // (n up to ~1.0, edge 0.12) fully resolve — no leftover specks at rest.
+          tl.to(uniforms.uProgress, { value: 1.15, duration: dur * 0.62, ease: "power1.inOut" }, 0);
+
+          return function () {
+            renderer.render(scene, camera);
+          };
+        }
+
+        // ===========================================================================
+        // Effect 3 — code-particle-assemble: GPU points scatter then fly to glyph pixels
+        // ===========================================================================
+        function fxParticles(THREE, scene, camera, renderer, state, st, tl, dur, seed) {
+          scene.background = new THREE.Color(0x05070b);
+          var code = drawCodeToCanvas(state, {
+            fontPx: 46,
+            lineH: 70,
+            padX: 70,
+            padY: 64,
+            weight: 700,
+          });
+          var cw = code.W;
+          var ch = code.H;
+          var data = code.canvas.getContext("2d").getImageData(0, 0, cw, ch).data;
+          var rng = mulberry32(((seed || 1) * 2654435761) >>> 0);
+
+          var worldW = 13.0;
+          var worldH = worldW * (ch / cw);
+
+          // sample glyph pixels (brighter than the dark bg) on a fixed grid
+          var step = 2;
+          var tx = [];
+          var col = [];
+          for (var y = 0; y < ch; y += step) {
+            for (var x = 0; x < cw; x += step) {
+              var idx = (y * cw + x) * 4;
+              var r = data[idx];
+              var g = data[idx + 1];
+              var b = data[idx + 2];
+              if (r + g + b < 120) continue; // skip background
+              tx.push((x / cw - 0.5) * worldW, -(y / ch - 0.5) * worldH, 0);
+              col.push(r / 255, g / 255, b / 255);
+            }
+          }
+          var n = tx.length / 3;
+
+          var positions = new Float32Array(n * 3);
+          var aOrigin = new Float32Array(n * 3);
+          var aTarget = new Float32Array(tx);
+          var aColor = new Float32Array(col);
+          var aDelay = new Float32Array(n);
+          for (var i = 0; i < n; i++) {
+            var sx = (rng() * 2 - 1) * worldW * 1.15;
+            var sy = (rng() * 2 - 1) * worldH * 1.7;
+            var sz = (rng() * 2 - 1) * 9.0 - 2.0;
+            aOrigin[i * 3] = sx;
+            aOrigin[i * 3 + 1] = sy;
+            aOrigin[i * 3 + 2] = sz;
+            positions[i * 3] = sx;
+            positions[i * 3 + 1] = sy;
+            positions[i * 3 + 2] = sz;
+            aDelay[i] = rng();
+          }
+
+          var geo = new THREE.BufferGeometry();
+          geo.setAttribute("position", new THREE.BufferAttribute(positions, 3));
+          geo.setAttribute("aOrigin", new THREE.BufferAttribute(aOrigin, 3));
+          geo.setAttribute("aTarget", new THREE.BufferAttribute(aTarget, 3));
+          geo.setAttribute("aColor", new THREE.BufferAttribute(aColor, 3));
+          geo.setAttribute("aDelay", new THREE.BufferAttribute(aDelay, 1));
+
+          var uniforms = { uProgress: { value: 0 }, uSize: { value: 3.4 } };
+          var mat = new THREE.ShaderMaterial({
+            uniforms: uniforms,
+            transparent: true,
+            depthTest: false,
+            blending: THREE.AdditiveBlending,
+            vertexShader: [
+              "attribute vec3 aOrigin; attribute vec3 aTarget; attribute vec3 aColor; attribute float aDelay;",
+              "uniform float uProgress; uniform float uSize;",
+              "varying vec3 vColor; varying float vP;",
+              "void main(){",
+              "  float span = 0.62;",
+              "  float p = clamp((uProgress - aDelay*(1.0-span)) / span, 0.0, 1.0);",
+              "  p = p*p*(3.0-2.0*p);",
+              "  vec3 pos = mix(aOrigin, aTarget, p);",
+              "  vec4 mv = modelViewMatrix * vec4(pos, 1.0);",
+              "  gl_Position = projectionMatrix * mv;",
+              "  gl_PointSize = uSize * (60.0 / -mv.z) * (0.45 + 0.55*p);",
+              "  vColor = aColor; vP = p;",
+              "}",
+            ].join("\n"),
+            fragmentShader: [
+              "precision highp float;",
+              "varying vec3 vColor; varying float vP;",
+              "void main(){",
+              "  vec2 d = gl_PointCoord - 0.5;",
+              "  float r2 = dot(d, d);",
+              "  if (r2 > 0.25) discard;",
+              "  float a = smoothstep(0.25, 0.02, r2);",
+              // brighter & whiter in flight, resolves to true color as it lands
+              "  vec3 c = mix(vColor + vec3(0.5)*(1.0-vP), vColor, vP);",
+              "  gl_FragColor = vec4(c, a * (0.55 + 0.45*vP));",
+              "}",
+            ].join("\n"),
+          });
+
+          var pts = new THREE.Points(geo, mat);
+          scene.add(pts);
+
+          camera.position.set(0, 0, 10);
+          var vfov = (camera.fov * Math.PI) / 180;
+          var sa = 1920 / 1080;
+          var fitH = worldH / 2 / Math.tan(vfov / 2) / 0.78;
+          var fitW = worldW / 2 / (Math.tan(vfov / 2) * sa) / 0.78;
+          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);
+
+          return function () {
+            renderer.render(scene, camera);
+          };
+        }
+
+        // ---- dispatch + boot ------------------------------------------------------
+        function buildEffect(THREE, scene, camera, renderer, spec, st, tl) {
+          var state = T[spec.seq].states[0];
+          var dur = spec.duration;
+          if (spec.effect === "extrude")
+            return fxExtrude(THREE, scene, camera, renderer, state, st, tl, dur);
+          if (spec.effect === "dissolve")
+            return fxDissolve(THREE, scene, camera, renderer, state, st, tl, dur, spec.seed);
+          if (spec.effect === "particles")
+            return fxParticles(THREE, scene, camera, renderer, state, st, tl, dur, spec.seed);
+          return function () {};
+        }
+
+        function go() {
+          var spec = window.__BLOCK;
+          var root = document.getElementById("root");
+          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({
+            canvas: glcanvas,
+            antialias: true,
+            alpha: false,
+            preserveDrawingBuffer: true,
+          });
+          renderer.setPixelRatio(1);
+          renderer.setSize(W, H, false);
+          var scene = new THREE.Scene();
+          var camera = new THREE.PerspectiveCamera(45, W / H, 0.1, 200);
+          var st = {};
+
+          document.fonts.ready.then(function () {
+            var renderFn = buildEffect(THREE, scene, camera, renderer, spec, st, tl);
+            function render() {
+              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
+            render(); // paint frame 0
+          });
+        }
+
+        if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
+        else go();
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/code-particle-assemble/registry-item.json b/registry/blocks/code-particle-assemble/registry-item.json
new file mode 100644
index 0000000000..b6f75c9c55
--- /dev/null
+++ b/registry/blocks/code-particle-assemble/registry-item.json
@@ -0,0 +1,24 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "code-particle-assemble",
+  "type": "hyperframes:block",
+  "title": "Code Particle Assemble",
+  "description": "Thousands of GPU points scatter through space and fly to the exact glyph pixels of the code, resolving into readable syntax-highlighted text — a particle system, not a token tween.",
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 8,
+  "tags": ["code", "code-animation", "particles", "gpu", "webgl", "developer"],
+  "files": [
+    {
+      "path": "code-particle-assemble.html",
+      "target": "compositions/code-particle-assemble.html",
+      "type": "hyperframes:composition"
+    }
+  ],
+  "preview": {
+    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-particle-assemble.mp4",
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-particle-assemble.png"
+  }
+}
diff --git a/registry/blocks/code-shader-dissolve/code-shader-dissolve.html b/registry/blocks/code-shader-dissolve/code-shader-dissolve.html
new file mode 100644
index 0000000000..c2e687a0d4
--- /dev/null
+++ b/registry/blocks/code-shader-dissolve/code-shader-dissolve.html
@@ -0,0 +1,750 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Code Shader Dissolve</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #05070b;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+      }
+      #gl {
+        position: absolute;
+        inset: 0;
+        width: 1920px;
+        height: 1080px;
+        display: block;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="code-shader-dissolve"
+      data-start="0"
+      data-duration="7"
+      data-width="1920"
+      data-height="1080"
+    >
+      <canvas id="gl" width="1920" height="1080"></canvas>
+    </div>
+    <script>
+      window.__TOKENS = {
+        compile: {
+          lang: "js",
+          theme: "github-dark",
+          bg: "#24292e",
+          fg: "#e1e4e8",
+          states: [
+            {
+              code: "function compile(src) {\n  const ast = parse(src)\n  const ir = optimize(ast)\n  return emit(ir)\n}",
+              tokens: [
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-0",
+                  content: "function",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-1",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-2",
+                  content: "compile",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-3",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-4",
+                  content: "src",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-5",
+                  content: ") {",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-6",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-7",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-8",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-9",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-10",
+                  content: "ast",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-11",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-12",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-13",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-14",
+                  content: "parse",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-15",
+                  content: "(src)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-16",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-17",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-18",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-19",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-20",
+                  content: "ir",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-21",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-22",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-23",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-24",
+                  content: "optimize",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-25",
+                  content: "(ast)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-26",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-27",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-28",
+                  content: "return",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-29",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-30",
+                  content: "emit",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-31",
+                  content: "(ir)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-32",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-33",
+                  content: "}",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-34",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+              ],
+            },
+          ],
+        },
+      };
+      window.__BLOCK = {
+        id: "code-shader-dissolve",
+        effect: "dissolve",
+        seq: "compile",
+        duration: 7,
+        seed: 11,
+      };
+    </script>
+    <script>
+      // hf-code-anim-gl.js — WebGL code-animation engine for the "crazy" Code Animations blocks.
+      //
+      // 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
+      //   - 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
+      //
+      // Each block sets window.__BLOCK = { id, effect, seq, duration, seed } and includes this engine.
+      (function () {
+        "use strict";
+        var T = window.__TOKENS || {};
+
+        // ---- seeded PRNG (no Math.random) -----------------------------------------
+        function mulberry32(a) {
+          return function () {
+            a |= 0;
+            a = (a + 0x6d2b79f5) | 0;
+            var t = Math.imul(a ^ (a >>> 15), 1 | a);
+            t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+            return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+          };
+        }
+
+        // ---- split a token state into lines of {content,color} --------------------
+        function splitLines(state) {
+          var lines = [[]];
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              lines.push([]);
+              continue;
+            }
+            lines[lines.length - 1].push(t);
+          }
+          while (lines.length && lines[lines.length - 1].length === 0) lines.pop();
+          return lines;
+        }
+
+        // ---- THE BRIDGE: draw baked tokens to an offscreen 2D canvas ---------------
+        // Returns { canvas, W, H, lines, lineH, padY, fontPx } so effects can sample it.
+        function drawCodeToCanvas(state, opts) {
+          opts = opts || {};
+          var fontPx = opts.fontPx || 36;
+          var lineH = opts.lineH || 54;
+          var padX = opts.padX || 70;
+          var padY = opts.padY || 60;
+          var weight = opts.weight || 500;
+          var font = weight + " " + fontPx + 'px "JetBrains Mono", monospace';
+
+          var lines = splitLines(state);
+          var measure = document.createElement("canvas").getContext("2d");
+          measure.font = font;
+          var maxW = 0;
+          for (var i = 0; i < lines.length; i++) {
+            var w = 0;
+            for (var j = 0; j < lines[i].length; j++)
+              w += measure.measureText(lines[i][j].content).width;
+            if (w > maxW) maxW = w;
+          }
+          var W = Math.max(2, Math.ceil(maxW + padX * 2));
+          var H = Math.max(2, Math.ceil(lines.length * lineH + padY * 2));
+
+          var canvas = document.createElement("canvas");
+          canvas.width = W;
+          canvas.height = H;
+          var ctx = canvas.getContext("2d");
+          if (opts.transparent) {
+            ctx.clearRect(0, 0, W, H);
+          } else {
+            ctx.fillStyle = opts.bg || "#0b0f17";
+            ctx.fillRect(0, 0, W, H);
+          }
+          ctx.textBaseline = "top";
+          ctx.font = font;
+          for (var li = 0; li < lines.length; li++) {
+            var x = padX;
+            var y = padY + li * lineH;
+            for (var k = 0; k < lines[li].length; k++) {
+              var tok = lines[li][k];
+              ctx.fillStyle = tok.color;
+              ctx.fillText(tok.content, x, y);
+              x += ctx.measureText(tok.content).width;
+            }
+          }
+          return {
+            canvas: canvas,
+            W: W,
+            H: H,
+            lines: lines.length,
+            lineH: lineH,
+            padY: padY,
+            fontPx: fontPx,
+          };
+        }
+
+        // ===========================================================================
+        // Effect 1 — code-3d-extrude: code on a lit, beveled slab that rotates to rest
+        // ===========================================================================
+        function fxExtrude(THREE, scene, camera, renderer, state, st, tl, dur) {
+          scene.background = new THREE.Color(0x05070b);
+          var code = drawCodeToCanvas(state, {
+            fontPx: 38,
+            lineH: 56,
+            padX: 80,
+            padY: 70,
+            weight: 600,
+          });
+          var tex = new THREE.CanvasTexture(code.canvas);
+          tex.minFilter = THREE.LinearFilter;
+          tex.magFilter = THREE.LinearFilter;
+          tex.generateMipmaps = false;
+
+          var aspect = code.W / code.H;
+          var slabH = 6.2;
+          var slabW = slabH * aspect;
+          var depth = 0.5;
+
+          // beveled slab: rounded extruded rectangle
+          var hw = slabW / 2;
+          var hh = slabH / 2;
+          var r = 0.18;
+          var shape = new THREE.Shape();
+          shape.moveTo(-hw + r, -hh);
+          shape.lineTo(hw - r, -hh);
+          shape.quadraticCurveTo(hw, -hh, hw, -hh + r);
+          shape.lineTo(hw, hh - r);
+          shape.quadraticCurveTo(hw, hh, hw - r, hh);
+          shape.lineTo(-hw + r, hh);
+          shape.quadraticCurveTo(-hw, hh, -hw, hh - r);
+          shape.lineTo(-hw, -hh + r);
+          shape.quadraticCurveTo(-hw, -hh, -hw + r, -hh);
+          var geo = new THREE.ExtrudeGeometry(shape, {
+            depth: depth,
+            bevelEnabled: true,
+            bevelThickness: 0.12,
+            bevelSize: 0.1,
+            bevelSegments: 3,
+            steps: 1,
+          });
+          geo.center();
+          // UVs from ExtrudeGeometry don't map the texture nicely to the face; remap front-face UVs from XY bounds.
+          geo.computeBoundingBox();
+          var bb = geo.boundingBox;
+          var sizeX = bb.max.x - bb.min.x;
+          var sizeY = bb.max.y - bb.min.y;
+          var pos = geo.attributes.position;
+          var uv = geo.attributes.uv;
+          for (var vi = 0; vi < pos.count; vi++) {
+            uv.setXY(vi, (pos.getX(vi) - bb.min.x) / sizeX, (pos.getY(vi) - bb.min.y) / sizeY);
+          }
+          uv.needsUpdate = true;
+
+          var faceMat = new THREE.MeshStandardMaterial({
+            map: tex,
+            roughness: 0.42,
+            metalness: 0.0,
+            emissive: 0xffffff,
+            emissiveMap: tex,
+            emissiveIntensity: 0.5,
+          });
+          var edgeMat = new THREE.MeshStandardMaterial({
+            color: 0x121a26,
+            roughness: 0.35,
+            metalness: 0.3,
+          });
+          // ExtrudeGeometry groups: 0 = front+back faces, 1 = sides. Front shows the code.
+          var slab = new THREE.Mesh(geo, [faceMat, edgeMat]);
+          scene.add(slab);
+
+          scene.add(new THREE.AmbientLight(0xffffff, 0.5));
+          var key = new THREE.DirectionalLight(0xbcd4ff, 1.25);
+          key.position.set(5, 7, 9);
+          scene.add(key);
+          var rim = new THREE.DirectionalLight(0x4fffa0, 0.45);
+          rim.position.set(-7, -3, 5);
+          scene.add(rim);
+
+          camera.position.set(0, 0, 10);
+
+          // fit camera distance so the WHOLE slab fits (width-limited for wide code), ~78% fill
+          var vfov = (camera.fov * Math.PI) / 180;
+          var screenAspect = 1920 / 1080;
+          var fitH = slabH / 2 / Math.tan(vfov / 2) / 0.78;
+          var fitW = slabW / 2 / (Math.tan(vfov / 2) * screenAspect) / 0.78;
+          var fitZ = Math.max(fitH, fitW);
+
+          st.rotY = -1.0;
+          st.rotX = 0.4;
+          st.camZ = fitZ + 6;
+          st.glow = 0.0;
+          tl.to(
+            st,
+            { rotY: 0, rotX: 0, camZ: fitZ, glow: 0.6, duration: dur * 0.6, ease: "power3.out" },
+            0,
+          );
+          // gentle breathing drift at rest (subtle — stays readable)
+          tl.to(
+            st,
+            { rotY: 0.06, rotX: -0.02, duration: dur * 0.4, ease: "sine.inOut" },
+            dur * 0.6,
+          );
+
+          return function () {
+            slab.rotation.y = st.rotY;
+            slab.rotation.x = st.rotX;
+            faceMat.emissiveIntensity = st.glow;
+            camera.position.z = st.camZ;
+            camera.lookAt(0, 0, 0);
+            renderer.render(scene, camera);
+          };
+        }
+
+        // ===========================================================================
+        // Effect 2 — code-shader-dissolve: code "compiles" out of GPU noise, holds crisp
+        // ===========================================================================
+        function fxDissolve(THREE, scene, camera, renderer, state, st, tl, dur, seed) {
+          scene.background = new THREE.Color(0x05070b);
+          var code = drawCodeToCanvas(state, {
+            fontPx: 40,
+            lineH: 60,
+            padX: 90,
+            padY: 80,
+            weight: 600,
+          });
+          var tex = new THREE.CanvasTexture(code.canvas);
+          tex.minFilter = THREE.LinearFilter;
+          tex.magFilter = THREE.LinearFilter;
+          tex.generateMipmaps = false;
+
+          var aspect = code.W / code.H;
+          var planeH = 6.6;
+          var planeW = planeH * aspect;
+
+          var uniforms = {
+            uTex: { value: tex },
+            uProgress: { value: 0 },
+            uSeed: { value: (seed || 1) * 13.37 },
+          };
+          var mat = new THREE.ShaderMaterial({
+            uniforms: uniforms,
+            transparent: true,
+            vertexShader: [
+              "varying vec2 vUv;",
+              "void main(){ vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0); }",
+            ].join("\n"),
+            fragmentShader: [
+              "precision highp float;",
+              "uniform sampler2D uTex;",
+              "uniform float uProgress;",
+              "uniform float uSeed;",
+              "varying vec2 vUv;",
+              "float hash(vec2 p){ p=fract(p*vec2(123.34,456.21)); p+=dot(p,p+45.32); return fract(p.x*p.y); }",
+              "float noise(vec2 p){ vec2 i=floor(p),f=fract(p); float a=hash(i),b=hash(i+vec2(1.,0.)),c=hash(i+vec2(0.,1.)),d=hash(i+vec2(1.,1.)); vec2 u=f*f*(3.-2.*f); return mix(mix(a,b,u.x),mix(c,d,u.x),u.y); }",
+              "void main(){",
+              "  vec2 uv = vUv;",
+              // multi-octave seeded noise field
+              "  float n = noise(uv*16.0+uSeed)*0.6 + noise(uv*48.0+uSeed*1.7)*0.3 + noise(uv*120.0+uSeed*2.3)*0.1;",
+              "  float edge = 0.12;",
+              "  float reveal = smoothstep(n-edge, n+edge, uProgress);", // 0 hidden -> 1 shown
+              // chromatic fringe strongest at the dissolving edge
+              "  float band = reveal*(1.0-reveal)*4.0;",
+              "  float off = band*0.010;",
+              "  float r = texture2D(uTex, uv+vec2(off,0.0)).r;",
+              "  float g = texture2D(uTex, uv).g;",
+              "  float b = texture2D(uTex, uv-vec2(off,0.0)).b;",
+              "  vec3 codeCol = vec3(r,g,b);",
+              // additive cyan edge glow along the dissolve front
+              "  vec3 glow = vec3(0.30,0.72,1.0) * band * 0.9;",
+              "  vec3 outc = codeCol*reveal + glow;",
+              "  float a = max(reveal, band*0.8);",
+              "  gl_FragColor = vec4(outc, a);",
+              "}",
+            ].join("\n"),
+          });
+
+          var plane = new THREE.Mesh(new THREE.PlaneGeometry(planeW, planeH), mat);
+          scene.add(plane);
+
+          camera.position.set(0, 0, 10);
+          var vfov = (camera.fov * Math.PI) / 180;
+          var screenAspect = 1920 / 1080;
+          var fitH = planeH / 2 / Math.tan(vfov / 2) / 0.82;
+          var fitW = planeW / 2 / (Math.tan(vfov / 2) * screenAspect) / 0.82;
+          camera.position.z = Math.max(fitH, fitW);
+          camera.lookAt(0, 0, 0);
+
+          // compile in, then hold crisp. Overshoot to 1.15 so even max-noise pixels
+          // (n up to ~1.0, edge 0.12) fully resolve — no leftover specks at rest.
+          tl.to(uniforms.uProgress, { value: 1.15, duration: dur * 0.62, ease: "power1.inOut" }, 0);
+
+          return function () {
+            renderer.render(scene, camera);
+          };
+        }
+
+        // ===========================================================================
+        // Effect 3 — code-particle-assemble: GPU points scatter then fly to glyph pixels
+        // ===========================================================================
+        function fxParticles(THREE, scene, camera, renderer, state, st, tl, dur, seed) {
+          scene.background = new THREE.Color(0x05070b);
+          var code = drawCodeToCanvas(state, {
+            fontPx: 46,
+            lineH: 70,
+            padX: 70,
+            padY: 64,
+            weight: 700,
+          });
+          var cw = code.W;
+          var ch = code.H;
+          var data = code.canvas.getContext("2d").getImageData(0, 0, cw, ch).data;
+          var rng = mulberry32(((seed || 1) * 2654435761) >>> 0);
+
+          var worldW = 13.0;
+          var worldH = worldW * (ch / cw);
+
+          // sample glyph pixels (brighter than the dark bg) on a fixed grid
+          var step = 2;
+          var tx = [];
+          var col = [];
+          for (var y = 0; y < ch; y += step) {
+            for (var x = 0; x < cw; x += step) {
+              var idx = (y * cw + x) * 4;
+              var r = data[idx];
+              var g = data[idx + 1];
+              var b = data[idx + 2];
+              if (r + g + b < 120) continue; // skip background
+              tx.push((x / cw - 0.5) * worldW, -(y / ch - 0.5) * worldH, 0);
+              col.push(r / 255, g / 255, b / 255);
+            }
+          }
+          var n = tx.length / 3;
+
+          var positions = new Float32Array(n * 3);
+          var aOrigin = new Float32Array(n * 3);
+          var aTarget = new Float32Array(tx);
+          var aColor = new Float32Array(col);
+          var aDelay = new Float32Array(n);
+          for (var i = 0; i < n; i++) {
+            var sx = (rng() * 2 - 1) * worldW * 1.15;
+            var sy = (rng() * 2 - 1) * worldH * 1.7;
+            var sz = (rng() * 2 - 1) * 9.0 - 2.0;
+            aOrigin[i * 3] = sx;
+            aOrigin[i * 3 + 1] = sy;
+            aOrigin[i * 3 + 2] = sz;
+            positions[i * 3] = sx;
+            positions[i * 3 + 1] = sy;
+            positions[i * 3 + 2] = sz;
+            aDelay[i] = rng();
+          }
+
+          var geo = new THREE.BufferGeometry();
+          geo.setAttribute("position", new THREE.BufferAttribute(positions, 3));
+          geo.setAttribute("aOrigin", new THREE.BufferAttribute(aOrigin, 3));
+          geo.setAttribute("aTarget", new THREE.BufferAttribute(aTarget, 3));
+          geo.setAttribute("aColor", new THREE.BufferAttribute(aColor, 3));
+          geo.setAttribute("aDelay", new THREE.BufferAttribute(aDelay, 1));
+
+          var uniforms = { uProgress: { value: 0 }, uSize: { value: 3.4 } };
+          var mat = new THREE.ShaderMaterial({
+            uniforms: uniforms,
+            transparent: true,
+            depthTest: false,
+            blending: THREE.AdditiveBlending,
+            vertexShader: [
+              "attribute vec3 aOrigin; attribute vec3 aTarget; attribute vec3 aColor; attribute float aDelay;",
+              "uniform float uProgress; uniform float uSize;",
+              "varying vec3 vColor; varying float vP;",
+              "void main(){",
+              "  float span = 0.62;",
+              "  float p = clamp((uProgress - aDelay*(1.0-span)) / span, 0.0, 1.0);",
+              "  p = p*p*(3.0-2.0*p);",
+              "  vec3 pos = mix(aOrigin, aTarget, p);",
+              "  vec4 mv = modelViewMatrix * vec4(pos, 1.0);",
+              "  gl_Position = projectionMatrix * mv;",
+              "  gl_PointSize = uSize * (60.0 / -mv.z) * (0.45 + 0.55*p);",
+              "  vColor = aColor; vP = p;",
+              "}",
+            ].join("\n"),
+            fragmentShader: [
+              "precision highp float;",
+              "varying vec3 vColor; varying float vP;",
+              "void main(){",
+              "  vec2 d = gl_PointCoord - 0.5;",
+              "  float r2 = dot(d, d);",
+              "  if (r2 > 0.25) discard;",
+              "  float a = smoothstep(0.25, 0.02, r2);",
+              // brighter & whiter in flight, resolves to true color as it lands
+              "  vec3 c = mix(vColor + vec3(0.5)*(1.0-vP), vColor, vP);",
+              "  gl_FragColor = vec4(c, a * (0.55 + 0.45*vP));",
+              "}",
+            ].join("\n"),
+          });
+
+          var pts = new THREE.Points(geo, mat);
+          scene.add(pts);
+
+          camera.position.set(0, 0, 10);
+          var vfov = (camera.fov * Math.PI) / 180;
+          var sa = 1920 / 1080;
+          var fitH = worldH / 2 / Math.tan(vfov / 2) / 0.78;
+          var fitW = worldW / 2 / (Math.tan(vfov / 2) * sa) / 0.78;
+          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);
+
+          return function () {
+            renderer.render(scene, camera);
+          };
+        }
+
+        // ---- dispatch + boot ------------------------------------------------------
+        function buildEffect(THREE, scene, camera, renderer, spec, st, tl) {
+          var state = T[spec.seq].states[0];
+          var dur = spec.duration;
+          if (spec.effect === "extrude")
+            return fxExtrude(THREE, scene, camera, renderer, state, st, tl, dur);
+          if (spec.effect === "dissolve")
+            return fxDissolve(THREE, scene, camera, renderer, state, st, tl, dur, spec.seed);
+          if (spec.effect === "particles")
+            return fxParticles(THREE, scene, camera, renderer, state, st, tl, dur, spec.seed);
+          return function () {};
+        }
+
+        function go() {
+          var spec = window.__BLOCK;
+          var root = document.getElementById("root");
+          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({
+            canvas: glcanvas,
+            antialias: true,
+            alpha: false,
+            preserveDrawingBuffer: true,
+          });
+          renderer.setPixelRatio(1);
+          renderer.setSize(W, H, false);
+          var scene = new THREE.Scene();
+          var camera = new THREE.PerspectiveCamera(45, W / H, 0.1, 200);
+          var st = {};
+
+          document.fonts.ready.then(function () {
+            var renderFn = buildEffect(THREE, scene, camera, renderer, spec, st, tl);
+            function render() {
+              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
+            render(); // paint frame 0
+          });
+        }
+
+        if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
+        else go();
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/code-shader-dissolve/registry-item.json b/registry/blocks/code-shader-dissolve/registry-item.json
new file mode 100644
index 0000000000..86eaffaf42
--- /dev/null
+++ b/registry/blocks/code-shader-dissolve/registry-item.json
@@ -0,0 +1,24 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "code-shader-dissolve",
+  "type": "hyperframes:block",
+  "title": "Code Shader Dissolve",
+  "description": "The code compiles into existence: a GPU fragment shader resolves it out of seeded noise with a chromatic dissolve front and edge glow, then holds crisp.",
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 7,
+  "tags": ["code", "code-animation", "shader", "webgl", "developer"],
+  "files": [
+    {
+      "path": "code-shader-dissolve.html",
+      "target": "compositions/code-shader-dissolve.html",
+      "type": "hyperframes:composition"
+    }
+  ],
+  "preview": {
+    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-shader-dissolve.mp4",
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-shader-dissolve.png"
+  }
+}
diff --git a/registry/blocks/code-snippet-flight/code-snippet-flight.html b/registry/blocks/code-snippet-flight/code-snippet-flight.html
index 70e34cf299..6516ec324c 100644
--- a/registry/blocks/code-snippet-flight/code-snippet-flight.html
+++ b/registry/blocks/code-snippet-flight/code-snippet-flight.html
@@ -635,8 +635,9 @@
         }
 
         function flight(tl, surface, states, start) {
-          var FLY = 1.0;
-          var STAGGER = 0.3;
+          var FLY = 0.95;
+          var STAGGER = 0.26;
+          var GAP = 20;
           var parts = makeScene(surface, false);
           parts.code.remove();
           var scene = parts.scene;
@@ -645,10 +646,7 @@
           scene.appendChild(target);
           var W = surface.clientWidth;
           var H = surface.clientHeight;
-          var leftCx = W * 0.27;
-          var rightCx = W * 0.71;
-          var midY = H * 0.46;
-          var gap = 70;
+
           var blocks = states.map(function (st) {
             var blk = document.createElement("div");
             blk.className = "flight-block";
@@ -657,68 +655,109 @@
             return blk;
           });
           var n = blocks.length;
+
+          // Pass 1: measure natural size, then make every chip the SAME width (symmetry).
           var maxW = 0;
-          var firstDestY = 0;
+          var chipH = 0;
+          blocks.forEach(function (blk) {
+            var r = blk.getBoundingClientRect();
+            if (r.width > maxW) maxW = r.width;
+            if (r.height > chipH) chipH = r.height;
+          });
+          blocks.forEach(function (blk) {
+            blk.style.width = maxW + "px";
+          });
+
+          // Pass 2: evenly-stacked, left-aligned, group centered in the surface.
+          var stackH = n * chipH + (n - 1) * GAP;
+          var destLeft = Math.round((W - maxW) / 2);
+          var topY = Math.round((H - stackH) / 2);
           blocks.forEach(function (blk, i) {
-            var bw = blk.getBoundingClientRect().width;
-            if (bw > maxW) maxW = bw;
-            var destX = rightCx - bw / 2;
-            var destY = midY + (i - (n - 1) / 2) * gap;
-            if (i === 0) firstDestY = destY;
-            var srcX = leftCx - bw / 2;
-            var srcY = midY + (i - (n - 1) / 2) * (gap + 16);
-            blk.style.left = destX + "px";
+            var destY = topY + i * (chipH + GAP);
+            blk.style.left = destLeft + "px";
             blk.style.top = destY + "px";
+            // fly straight in from the left to the shared left edge — clean, no skew
+            var srcX = destLeft - W * 0.32;
             tl.fromTo(
               blk,
-              { x: srcX - destX, y: srcY - destY, opacity: 0, rotation: -5, scale: 0.9 },
-              {
-                x: 0,
-                y: 0,
-                opacity: 1,
-                rotation: 0,
-                scale: 1,
-                duration: FLY,
-                ease: "power3.inOut",
-              },
+              { x: srcX - destLeft, opacity: 0, scale: 0.96 },
+              { x: 0, opacity: 1, scale: 1, duration: FLY, ease: "power3.out" },
               start + FADE + i * STAGGER,
             );
           });
-          target.style.left = rightCx - maxW / 2 - 26 + "px";
-          target.style.top = firstDestY - 18 + "px";
-          target.style.width = maxW + 52 + "px";
-          target.style.height = (n - 1) * gap + 62 + "px";
+
+          // Even-padded panel tightly wrapping the uniform stack.
+          var padX = 30;
+          var padY = 24;
+          target.style.left = destLeft - padX + "px";
+          target.style.top = topY - padY + "px";
+          target.style.width = maxW + padX * 2 + "px";
+          target.style.height = stackH + padY * 2 + "px";
           var landAt = start + FADE + (n - 1) * STAGGER + FLY;
           tl.set(scene, { opacity: 1 }, 0);
           tl.to(target, { opacity: 1, duration: 0.5, ease: "power1.out" }, landAt - 0.5);
         }
 
         function typing(tl, surface, state, start) {
-          var PER = 0.05;
+          var PER = 0.028; // seconds per character — smooth, fast typewriter
           var parts = makeScene(surface, true);
           var code = parts.code;
-          var keyToEl = renderState(code, state);
+
+          // Per-CHARACTER render (granular reveal reads smoother than per-token pops).
+          code.textContent = "";
+          var line = document.createElement("div");
+          line.className = "line";
+          code.appendChild(line);
+          var chars = [];
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              line = document.createElement("div");
+              line.className = "line";
+              code.appendChild(line);
+              continue;
+            }
+            for (var c = 0; c < t.content.length; c++) {
+              var span = document.createElement("span");
+              span.className = "tok";
+              span.textContent = t.content[c];
+              span.style.color = t.color;
+              if (t.fontStyle & 1) span.style.fontStyle = "italic";
+              if (t.fontStyle & 2) span.style.fontWeight = "700";
+              line.appendChild(span);
+              chars.push({ el: span, ws: t.content[c] === " " });
+            }
+          }
+          var last = code.lastChild;
+          if (last && last.className === "line" && last.children.length === 0)
+            code.removeChild(last);
+
           fillGutter(parts.gutter, code.querySelectorAll(".line").length);
           var base = code.getBoundingClientRect();
           var caret = document.createElement("div");
           caret.className = "caret";
           code.appendChild(caret);
-          var toks = [];
-          keyToEl.forEach(function (el) {
-            toks.push(el);
-          });
+
           tl.set(parts.scene, { opacity: 0 }, 0);
           tl.to(parts.scene, { opacity: 1, duration: FADE, ease: "power1.out" }, start);
+
           var t0 = start + FADE;
-          if (toks.length) {
-            var r0 = toks[0].getBoundingClientRect();
+          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);
           }
-          toks.forEach(function (el, i) {
-            tl.set(el, { opacity: 0 }, 0);
-            tl.to(el, { opacity: 1, duration: 0.08, ease: "none" }, t0 + i * PER);
-            var r = el.getBoundingClientRect();
-            tl.set(caret, { x: r.right - base.left, y: r.top - base.top }, t0 + i * PER);
+          chars.forEach(function (c, i) {
+            var at = t0 + i * PER;
+            tl.set(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);
+            // caret glides at constant speed to each char's right edge (linear = no stop-start jitter)
+            var r = c.el.getBoundingClientRect();
+            tl.to(
+              caret,
+              { x: r.right - base.left, y: r.top - base.top, duration: PER, ease: "none" },
+              at,
+            );
           });
         }
 
diff --git a/registry/blocks/code-typing/code-typing.html b/registry/blocks/code-typing/code-typing.html
index 446f5a6d3c..432557449d 100644
--- a/registry/blocks/code-typing/code-typing.html
+++ b/registry/blocks/code-typing/code-typing.html
@@ -725,8 +725,9 @@
         }
 
         function flight(tl, surface, states, start) {
-          var FLY = 1.0;
-          var STAGGER = 0.3;
+          var FLY = 0.95;
+          var STAGGER = 0.26;
+          var GAP = 20;
           var parts = makeScene(surface, false);
           parts.code.remove();
           var scene = parts.scene;
@@ -735,10 +736,7 @@
           scene.appendChild(target);
           var W = surface.clientWidth;
           var H = surface.clientHeight;
-          var leftCx = W * 0.27;
-          var rightCx = W * 0.71;
-          var midY = H * 0.46;
-          var gap = 70;
+
           var blocks = states.map(function (st) {
             var blk = document.createElement("div");
             blk.className = "flight-block";
@@ -747,68 +745,109 @@
             return blk;
           });
           var n = blocks.length;
+
+          // Pass 1: measure natural size, then make every chip the SAME width (symmetry).
           var maxW = 0;
-          var firstDestY = 0;
+          var chipH = 0;
+          blocks.forEach(function (blk) {
+            var r = blk.getBoundingClientRect();
+            if (r.width > maxW) maxW = r.width;
+            if (r.height > chipH) chipH = r.height;
+          });
+          blocks.forEach(function (blk) {
+            blk.style.width = maxW + "px";
+          });
+
+          // Pass 2: evenly-stacked, left-aligned, group centered in the surface.
+          var stackH = n * chipH + (n - 1) * GAP;
+          var destLeft = Math.round((W - maxW) / 2);
+          var topY = Math.round((H - stackH) / 2);
           blocks.forEach(function (blk, i) {
-            var bw = blk.getBoundingClientRect().width;
-            if (bw > maxW) maxW = bw;
-            var destX = rightCx - bw / 2;
-            var destY = midY + (i - (n - 1) / 2) * gap;
-            if (i === 0) firstDestY = destY;
-            var srcX = leftCx - bw / 2;
-            var srcY = midY + (i - (n - 1) / 2) * (gap + 16);
-            blk.style.left = destX + "px";
+            var destY = topY + i * (chipH + GAP);
+            blk.style.left = destLeft + "px";
             blk.style.top = destY + "px";
+            // fly straight in from the left to the shared left edge — clean, no skew
+            var srcX = destLeft - W * 0.32;
             tl.fromTo(
               blk,
-              { x: srcX - destX, y: srcY - destY, opacity: 0, rotation: -5, scale: 0.9 },
-              {
-                x: 0,
-                y: 0,
-                opacity: 1,
-                rotation: 0,
-                scale: 1,
-                duration: FLY,
-                ease: "power3.inOut",
-              },
+              { x: srcX - destLeft, opacity: 0, scale: 0.96 },
+              { x: 0, opacity: 1, scale: 1, duration: FLY, ease: "power3.out" },
               start + FADE + i * STAGGER,
             );
           });
-          target.style.left = rightCx - maxW / 2 - 26 + "px";
-          target.style.top = firstDestY - 18 + "px";
-          target.style.width = maxW + 52 + "px";
-          target.style.height = (n - 1) * gap + 62 + "px";
+
+          // Even-padded panel tightly wrapping the uniform stack.
+          var padX = 30;
+          var padY = 24;
+          target.style.left = destLeft - padX + "px";
+          target.style.top = topY - padY + "px";
+          target.style.width = maxW + padX * 2 + "px";
+          target.style.height = stackH + padY * 2 + "px";
           var landAt = start + FADE + (n - 1) * STAGGER + FLY;
           tl.set(scene, { opacity: 1 }, 0);
           tl.to(target, { opacity: 1, duration: 0.5, ease: "power1.out" }, landAt - 0.5);
         }
 
         function typing(tl, surface, state, start) {
-          var PER = 0.05;
+          var PER = 0.028; // seconds per character — smooth, fast typewriter
           var parts = makeScene(surface, true);
           var code = parts.code;
-          var keyToEl = renderState(code, state);
+
+          // Per-CHARACTER render (granular reveal reads smoother than per-token pops).
+          code.textContent = "";
+          var line = document.createElement("div");
+          line.className = "line";
+          code.appendChild(line);
+          var chars = [];
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              line = document.createElement("div");
+              line.className = "line";
+              code.appendChild(line);
+              continue;
+            }
+            for (var c = 0; c < t.content.length; c++) {
+              var span = document.createElement("span");
+              span.className = "tok";
+              span.textContent = t.content[c];
+              span.style.color = t.color;
+              if (t.fontStyle & 1) span.style.fontStyle = "italic";
+              if (t.fontStyle & 2) span.style.fontWeight = "700";
+              line.appendChild(span);
+              chars.push({ el: span, ws: t.content[c] === " " });
+            }
+          }
+          var last = code.lastChild;
+          if (last && last.className === "line" && last.children.length === 0)
+            code.removeChild(last);
+
           fillGutter(parts.gutter, code.querySelectorAll(".line").length);
           var base = code.getBoundingClientRect();
           var caret = document.createElement("div");
           caret.className = "caret";
           code.appendChild(caret);
-          var toks = [];
-          keyToEl.forEach(function (el) {
-            toks.push(el);
-          });
+
           tl.set(parts.scene, { opacity: 0 }, 0);
           tl.to(parts.scene, { opacity: 1, duration: FADE, ease: "power1.out" }, start);
+
           var t0 = start + FADE;
-          if (toks.length) {
-            var r0 = toks[0].getBoundingClientRect();
+          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);
           }
-          toks.forEach(function (el, i) {
-            tl.set(el, { opacity: 0 }, 0);
-            tl.to(el, { opacity: 1, duration: 0.08, ease: "none" }, t0 + i * PER);
-            var r = el.getBoundingClientRect();
-            tl.set(caret, { x: r.right - base.left, y: r.top - base.top }, t0 + i * PER);
+          chars.forEach(function (c, i) {
+            var at = t0 + i * PER;
+            tl.set(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);
+            // caret glides at constant speed to each char's right edge (linear = no stop-start jitter)
+            var r = c.el.getBoundingClientRect();
+            tl.to(
+              caret,
+              { x: r.right - base.left, y: r.top - base.top, duration: PER, ease: "none" },
+              at,
+            );
           });
         }
 
diff --git a/registry/registry.json b/registry/registry.json
index 1e7fe15426..32babd0aad 100644
--- a/registry/registry.json
+++ b/registry/registry.json
@@ -495,6 +495,18 @@
       "name": "code-scroll",
       "type": "hyperframes:block"
     },
+    {
+      "name": "code-3d-extrude",
+      "type": "hyperframes:block"
+    },
+    {
+      "name": "code-shader-dissolve",
+      "type": "hyperframes:block"
+    },
+    {
+      "name": "code-particle-assemble",
+      "type": "hyperframes:block"
+    },
     {
       "name": "flowchart-vertical",
       "type": "hyperframes:block"
diff --git a/scripts/generate-catalog-pages.ts b/scripts/generate-catalog-pages.ts
index 44b70b1ccb..5b1db86f11 100644
--- a/scripts/generate-catalog-pages.ts
+++ b/scripts/generate-catalog-pages.ts
@@ -519,8 +519,8 @@ function main(): void {
   // Items with the same first tag are grouped together. Items without tags
   // go into an "Other" group. Groups are sorted with a priority order.
   const GROUP_ORDER: Record<string, number> = {
-    Captions: 0,
-    "Code Animations": 1,
+    "Code Animations": 0,
+    Captions: 1,
     "HTML-in-Canvas": 2,
     "Social Overlays": 3,
     "Shader Transitions": 4,

From 9d3c9563700afc5de37768affcba9ceef2ee7dc8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Mon, 15 Jun 2026 17:53:56 -0400
Subject: [PATCH 3/7] fix(registry): vivid syntax colors for 3d-extrude +
 particle-assemble
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- code-3d-extrude: render the code face unlit (screen-style) instead of a
  PBR material with an emissiveMap of the same texture, which double-counted
  the color and washed it pale under the lights. 3D depth now comes from the
  lit beveled edges + perspective; the face shows the exact Shiki colors.
- code-particle-assemble: switch points from additive to normal alpha
  blending so overlapping particles no longer accumulate to white — the
  assembled code shows its true syntax colors.

Both remain deterministic (verified byte-identical across renders).
---
 .../code-3d-extrude/code-3d-extrude.html      | 32 +++++++------------
 .../code-particle-assemble.html               | 32 +++++++------------
 2 files changed, 22 insertions(+), 42 deletions(-)

diff --git a/registry/blocks/code-3d-extrude/code-3d-extrude.html b/registry/blocks/code-3d-extrude/code-3d-extrude.html
index 5b572b0ce3..3a8b6f4709 100644
--- a/registry/blocks/code-3d-extrude/code-3d-extrude.html
+++ b/registry/blocks/code-3d-extrude/code-3d-extrude.html
@@ -488,18 +488,13 @@
           }
           uv.needsUpdate = true;
 
-          var faceMat = new THREE.MeshStandardMaterial({
-            map: tex,
-            roughness: 0.42,
-            metalness: 0.0,
-            emissive: 0xffffff,
-            emissiveMap: tex,
-            emissiveIntensity: 0.5,
-          });
+          // Face is an unlit "screen" — shows the exact vivid Shiki colors (no PBR/emissive wash).
+          // The 3D read comes from the lit, beveled EDGES + perspective, like a glowing monitor.
+          var faceMat = new THREE.MeshBasicMaterial({ map: tex });
           var edgeMat = new THREE.MeshStandardMaterial({
-            color: 0x121a26,
-            roughness: 0.35,
-            metalness: 0.3,
+            color: 0x141d2b,
+            roughness: 0.3,
+            metalness: 0.4,
           });
           // ExtrudeGeometry groups: 0 = front+back faces, 1 = sides. Front shows the code.
           var slab = new THREE.Mesh(geo, [faceMat, edgeMat]);
@@ -525,12 +520,7 @@
           st.rotY = -1.0;
           st.rotX = 0.4;
           st.camZ = fitZ + 6;
-          st.glow = 0.0;
-          tl.to(
-            st,
-            { rotY: 0, rotX: 0, camZ: fitZ, glow: 0.6, duration: dur * 0.6, ease: "power3.out" },
-            0,
-          );
+          tl.to(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(
             st,
@@ -541,7 +531,6 @@
           return function () {
             slab.rotation.y = st.rotY;
             slab.rotation.x = st.rotX;
-            faceMat.emissiveIntensity = st.glow;
             camera.position.z = st.camZ;
             camera.lookAt(0, 0, 0);
             renderer.render(scene, camera);
@@ -698,7 +687,8 @@
             uniforms: uniforms,
             transparent: true,
             depthTest: false,
-            blending: THREE.AdditiveBlending,
+            depthWrite: false,
+            blending: THREE.NormalBlending,
             vertexShader: [
               "attribute vec3 aOrigin; attribute vec3 aTarget; attribute vec3 aColor; attribute float aDelay;",
               "uniform float uProgress; uniform float uSize;",
@@ -723,8 +713,8 @@
               "  if (r2 > 0.25) discard;",
               "  float a = smoothstep(0.25, 0.02, r2);",
               // brighter & whiter in flight, resolves to true color as it lands
-              "  vec3 c = mix(vColor + vec3(0.5)*(1.0-vP), vColor, vP);",
-              "  gl_FragColor = vec4(c, a * (0.55 + 0.45*vP));",
+              "  vec3 c = mix(vColor + vec3(0.32)*(1.0-vP), vColor, vP);",
+              "  gl_FragColor = vec4(c, a * (0.7 + 0.3*vP));",
               "}",
             ].join("\n"),
           });
diff --git a/registry/blocks/code-particle-assemble/code-particle-assemble.html b/registry/blocks/code-particle-assemble/code-particle-assemble.html
index 9a5acaf62a..c6c4431819 100644
--- a/registry/blocks/code-particle-assemble/code-particle-assemble.html
+++ b/registry/blocks/code-particle-assemble/code-particle-assemble.html
@@ -344,18 +344,13 @@
           }
           uv.needsUpdate = true;
 
-          var faceMat = new THREE.MeshStandardMaterial({
-            map: tex,
-            roughness: 0.42,
-            metalness: 0.0,
-            emissive: 0xffffff,
-            emissiveMap: tex,
-            emissiveIntensity: 0.5,
-          });
+          // Face is an unlit "screen" — shows the exact vivid Shiki colors (no PBR/emissive wash).
+          // The 3D read comes from the lit, beveled EDGES + perspective, like a glowing monitor.
+          var faceMat = new THREE.MeshBasicMaterial({ map: tex });
           var edgeMat = new THREE.MeshStandardMaterial({
-            color: 0x121a26,
-            roughness: 0.35,
-            metalness: 0.3,
+            color: 0x141d2b,
+            roughness: 0.3,
+            metalness: 0.4,
           });
           // ExtrudeGeometry groups: 0 = front+back faces, 1 = sides. Front shows the code.
           var slab = new THREE.Mesh(geo, [faceMat, edgeMat]);
@@ -381,12 +376,7 @@
           st.rotY = -1.0;
           st.rotX = 0.4;
           st.camZ = fitZ + 6;
-          st.glow = 0.0;
-          tl.to(
-            st,
-            { rotY: 0, rotX: 0, camZ: fitZ, glow: 0.6, duration: dur * 0.6, ease: "power3.out" },
-            0,
-          );
+          tl.to(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(
             st,
@@ -397,7 +387,6 @@
           return function () {
             slab.rotation.y = st.rotY;
             slab.rotation.x = st.rotX;
-            faceMat.emissiveIntensity = st.glow;
             camera.position.z = st.camZ;
             camera.lookAt(0, 0, 0);
             renderer.render(scene, camera);
@@ -554,7 +543,8 @@
             uniforms: uniforms,
             transparent: true,
             depthTest: false,
-            blending: THREE.AdditiveBlending,
+            depthWrite: false,
+            blending: THREE.NormalBlending,
             vertexShader: [
               "attribute vec3 aOrigin; attribute vec3 aTarget; attribute vec3 aColor; attribute float aDelay;",
               "uniform float uProgress; uniform float uSize;",
@@ -579,8 +569,8 @@
               "  if (r2 > 0.25) discard;",
               "  float a = smoothstep(0.25, 0.02, r2);",
               // brighter & whiter in flight, resolves to true color as it lands
-              "  vec3 c = mix(vColor + vec3(0.5)*(1.0-vP), vColor, vP);",
-              "  gl_FragColor = vec4(c, a * (0.55 + 0.45*vP));",
+              "  vec3 c = mix(vColor + vec3(0.32)*(1.0-vP), vColor, vP);",
+              "  gl_FragColor = vec4(c, a * (0.7 + 0.3*vP));",
               "}",
             ].join("\n"),
           });

From 40be261ce8710d971689e1e173bd3fecefc9a316 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Mon, 15 Jun 2026 19:32:10 -0400
Subject: [PATCH 4/7] fix(registry): dedupe inlined-engine drift + drop double
 GPU render
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Regenerate all 9 Code Animation blocks from the canonical engine so the
inlined effect code is consistent across blocks. Two dead copies had drifted:
the GPU blocks shipped a stale fxExtrude using MeshStandardMaterial (vs the
live MeshBasicMaterial), and morph/diff/highlight/scroll carried the
pre-symmetry flight(). Live effects were already current — this aligns the
dead copies so they can't mislead a maintainer.

Also remove a redundant per-frame renderer.render() in the three WebGL
blocks: the effect closure and the boot loop's render() each issued one,
doubling GPU work at 1920x1080 for identical pixels. Closures now only mutate
state; the boot loop does the single render. Byte-identical across two
renders (determinism preserved).
---
 .../code-3d-extrude/code-3d-extrude.html      | 1177 ++++-----
 registry/blocks/code-diff/code-diff.html      | 1429 ++++-------
 .../blocks/code-highlight/code-highlight.html | 1374 ++++-------
 registry/blocks/code-morph/code-morph.html    | 1818 ++++----------
 .../code-particle-assemble.html               | 1033 ++++----
 registry/blocks/code-scroll/code-scroll.html  | 2184 ++++-------------
 .../code-shader-dissolve.html                 | 1133 ++++-----
 .../code-snippet-flight.html                  | 1299 ++++------
 registry/blocks/code-typing/code-typing.html  | 1387 ++++-------
 9 files changed, 3866 insertions(+), 8968 deletions(-)

diff --git a/registry/blocks/code-3d-extrude/code-3d-extrude.html b/registry/blocks/code-3d-extrude/code-3d-extrude.html
index 3a8b6f4709..371794df8e 100644
--- a/registry/blocks/code-3d-extrude/code-3d-extrude.html
+++ b/registry/blocks/code-3d-extrude/code-3d-extrude.html
@@ -7,30 +7,10 @@
     <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js"></script>
     <style>
-      * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-      }
-      html,
-      body {
-        width: 1920px;
-        height: 1080px;
-        overflow: hidden;
-        background: #05070b;
-      }
-      #root {
-        position: relative;
-        width: 1920px;
-        height: 1080px;
-      }
-      #gl {
-        position: absolute;
-        inset: 0;
-        width: 1920px;
-        height: 1080px;
-        display: block;
-      }
+      * { margin: 0; padding: 0; box-sizing: border-box; }
+      html, body { width: 1920px; height: 1080px; overflow: hidden; background: #05070b; }
+      #root { position: relative; width: 1920px; height: 1080px; }
+      #gl { position: absolute; inset: 0; width: 1920px; height: 1080px; display: block; }
     </style>
   </head>
   <body>
@@ -45,750 +25,415 @@
       <canvas id="gl" width="1920" height="1080"></canvas>
     </div>
     <script>
-      window.__TOKENS = {
-        feature: {
-          lang: "js",
-          theme: "github-dark",
-          bg: "#24292e",
-          fg: "#e1e4e8",
-          states: [
-            {
-              code: 'async function loadConfig(path) {\n  const raw = await readFile(path, "utf8")\n  const config = JSON.parse(raw)\n  return validate(config)\n}',
-              tokens: [
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-0",
-                  content: "async",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-1",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-2",
-                  content: "function",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-3",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-4",
-                  content: "loadConfig",
-                  color: "#B392F0",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-5",
-                  content: "(",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-6",
-                  content: "path",
-                  color: "#FFAB70",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-7",
-                  content: ") {",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-8",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-9",
-                  content: "  ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-10",
-                  content: "const",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-11",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-12",
-                  content: "raw",
-                  color: "#79B8FF",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-13",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-14",
-                  content: "=",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-15",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-16",
-                  content: "await",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-17",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-18",
-                  content: "readFile",
-                  color: "#B392F0",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-19",
-                  content: "(path,",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-20",
-                  content: " ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-21",
-                  content: '"utf8"',
-                  color: "#9ECBFF",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-22",
-                  content: ")",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-23",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-24",
-                  content: "  ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-25",
-                  content: "const",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-26",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-27",
-                  content: "config",
-                  color: "#79B8FF",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-28",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-29",
-                  content: "=",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-30",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-31",
-                  content: "JSON",
-                  color: "#79B8FF",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-32",
-                  content: ".",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-33",
-                  content: "parse",
-                  color: "#B392F0",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-34",
-                  content: "(raw)",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-35",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-36",
-                  content: "  ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-37",
-                  content: "return",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-38",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-39",
-                  content: "validate",
-                  color: "#B392F0",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-40",
-                  content: "(config)",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-41",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-42",
-                  content: "}",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-43",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-              ],
-            },
-          ],
-        },
-      };
-      window.__BLOCK = {
-        id: "code-3d-extrude",
-        effect: "extrude",
-        seq: "feature",
-        duration: 8,
-        seed: 7,
-      };
+      window.__TOKENS = {"feature":{"lang":"js","theme":"github-dark","bg":"#24292e","fg":"#e1e4e8","states":[{"code":"async function loadConfig(path) {\n  const raw = await readFile(path, \"utf8\")\n  const config = JSON.parse(raw)\n  return validate(config)\n}","tokens":[{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-0","content":"async","color":"#F97583","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-1","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-2","content":"function","color":"#F97583","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-3","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-4","content":"loadConfig","color":"#B392F0","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-5","content":"(","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-6","content":"path","color":"#FFAB70","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-7","content":") {","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-8","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-9","content":"  ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-10","content":"const","color":"#F97583","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-11","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-12","content":"raw","color":"#79B8FF","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-13","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-14","content":"=","color":"#F97583","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-15","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-16","content":"await","color":"#F97583","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-17","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-18","content":"readFile","color":"#B392F0","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-19","content":"(path,","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-20","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-21","content":"\"utf8\"","color":"#9ECBFF","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-22","content":")","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-23","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-24","content":"  ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-25","content":"const","color":"#F97583","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-26","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-27","content":"config","color":"#79B8FF","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-28","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-29","content":"=","color":"#F97583","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-30","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-31","content":"JSON","color":"#79B8FF","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-32","content":".","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-33","content":"parse","color":"#B392F0","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-34","content":"(raw)","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-35","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-36","content":"  ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-37","content":"return","color":"#F97583","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-38","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-39","content":"validate","color":"#B392F0","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-40","content":"(config)","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-41","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-42","content":"}","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-43","content":"\n","color":"#e1e4e8","fontStyle":0}]}]}};
+      window.__BLOCK = {"id":"code-3d-extrude","effect":"extrude","seq":"feature","duration":8,"seed":7};
     </script>
     <script>
-      // hf-code-anim-gl.js — WebGL code-animation engine for the "crazy" Code Animations blocks.
-      //
-      // 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
-      //   - 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
-      //
-      // Each block sets window.__BLOCK = { id, effect, seq, duration, seed } and includes this engine.
-      (function () {
-        "use strict";
-        var T = window.__TOKENS || {};
-
-        // ---- seeded PRNG (no Math.random) -----------------------------------------
-        function mulberry32(a) {
-          return function () {
-            a |= 0;
-            a = (a + 0x6d2b79f5) | 0;
-            var t = Math.imul(a ^ (a >>> 15), 1 | a);
-            t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
-            return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
-          };
-        }
-
-        // ---- split a token state into lines of {content,color} --------------------
-        function splitLines(state) {
-          var lines = [[]];
-          for (var i = 0; i < state.tokens.length; i++) {
-            var t = state.tokens[i];
-            if (t.content === "\n") {
-              lines.push([]);
-              continue;
-            }
-            lines[lines.length - 1].push(t);
-          }
-          while (lines.length && lines[lines.length - 1].length === 0) lines.pop();
-          return lines;
-        }
-
-        // ---- THE BRIDGE: draw baked tokens to an offscreen 2D canvas ---------------
-        // Returns { canvas, W, H, lines, lineH, padY, fontPx } so effects can sample it.
-        function drawCodeToCanvas(state, opts) {
-          opts = opts || {};
-          var fontPx = opts.fontPx || 36;
-          var lineH = opts.lineH || 54;
-          var padX = opts.padX || 70;
-          var padY = opts.padY || 60;
-          var weight = opts.weight || 500;
-          var font = weight + " " + fontPx + 'px "JetBrains Mono", monospace';
-
-          var lines = splitLines(state);
-          var measure = document.createElement("canvas").getContext("2d");
-          measure.font = font;
-          var maxW = 0;
-          for (var i = 0; i < lines.length; i++) {
-            var w = 0;
-            for (var j = 0; j < lines[i].length; j++)
-              w += measure.measureText(lines[i][j].content).width;
-            if (w > maxW) maxW = w;
-          }
-          var W = Math.max(2, Math.ceil(maxW + padX * 2));
-          var H = Math.max(2, Math.ceil(lines.length * lineH + padY * 2));
-
-          var canvas = document.createElement("canvas");
-          canvas.width = W;
-          canvas.height = H;
-          var ctx = canvas.getContext("2d");
-          if (opts.transparent) {
-            ctx.clearRect(0, 0, W, H);
-          } else {
-            ctx.fillStyle = opts.bg || "#0b0f17";
-            ctx.fillRect(0, 0, W, H);
-          }
-          ctx.textBaseline = "top";
-          ctx.font = font;
-          for (var li = 0; li < lines.length; li++) {
-            var x = padX;
-            var y = padY + li * lineH;
-            for (var k = 0; k < lines[li].length; k++) {
-              var tok = lines[li][k];
-              ctx.fillStyle = tok.color;
-              ctx.fillText(tok.content, x, y);
-              x += ctx.measureText(tok.content).width;
-            }
-          }
-          return {
-            canvas: canvas,
-            W: W,
-            H: H,
-            lines: lines.length,
-            lineH: lineH,
-            padY: padY,
-            fontPx: fontPx,
-          };
-        }
-
-        // ===========================================================================
-        // Effect 1 — code-3d-extrude: code on a lit, beveled slab that rotates to rest
-        // ===========================================================================
-        function fxExtrude(THREE, scene, camera, renderer, state, st, tl, dur) {
-          scene.background = new THREE.Color(0x05070b);
-          var code = drawCodeToCanvas(state, {
-            fontPx: 38,
-            lineH: 56,
-            padX: 80,
-            padY: 70,
-            weight: 600,
-          });
-          var tex = new THREE.CanvasTexture(code.canvas);
-          tex.minFilter = THREE.LinearFilter;
-          tex.magFilter = THREE.LinearFilter;
-          tex.generateMipmaps = false;
-
-          var aspect = code.W / code.H;
-          var slabH = 6.2;
-          var slabW = slabH * aspect;
-          var depth = 0.5;
-
-          // beveled slab: rounded extruded rectangle
-          var hw = slabW / 2;
-          var hh = slabH / 2;
-          var r = 0.18;
-          var shape = new THREE.Shape();
-          shape.moveTo(-hw + r, -hh);
-          shape.lineTo(hw - r, -hh);
-          shape.quadraticCurveTo(hw, -hh, hw, -hh + r);
-          shape.lineTo(hw, hh - r);
-          shape.quadraticCurveTo(hw, hh, hw - r, hh);
-          shape.lineTo(-hw + r, hh);
-          shape.quadraticCurveTo(-hw, hh, -hw, hh - r);
-          shape.lineTo(-hw, -hh + r);
-          shape.quadraticCurveTo(-hw, -hh, -hw + r, -hh);
-          var geo = new THREE.ExtrudeGeometry(shape, {
-            depth: depth,
-            bevelEnabled: true,
-            bevelThickness: 0.12,
-            bevelSize: 0.1,
-            bevelSegments: 3,
-            steps: 1,
-          });
-          geo.center();
-          // UVs from ExtrudeGeometry don't map the texture nicely to the face; remap front-face UVs from XY bounds.
-          geo.computeBoundingBox();
-          var bb = geo.boundingBox;
-          var sizeX = bb.max.x - bb.min.x;
-          var sizeY = bb.max.y - bb.min.y;
-          var pos = geo.attributes.position;
-          var uv = geo.attributes.uv;
-          for (var vi = 0; vi < pos.count; vi++) {
-            uv.setXY(vi, (pos.getX(vi) - bb.min.x) / sizeX, (pos.getY(vi) - bb.min.y) / sizeY);
-          }
-          uv.needsUpdate = true;
-
-          // Face is an unlit "screen" — shows the exact vivid Shiki colors (no PBR/emissive wash).
-          // The 3D read comes from the lit, beveled EDGES + perspective, like a glowing monitor.
-          var faceMat = new THREE.MeshBasicMaterial({ map: tex });
-          var edgeMat = new THREE.MeshStandardMaterial({
-            color: 0x141d2b,
-            roughness: 0.3,
-            metalness: 0.4,
-          });
-          // ExtrudeGeometry groups: 0 = front+back faces, 1 = sides. Front shows the code.
-          var slab = new THREE.Mesh(geo, [faceMat, edgeMat]);
-          scene.add(slab);
-
-          scene.add(new THREE.AmbientLight(0xffffff, 0.5));
-          var key = new THREE.DirectionalLight(0xbcd4ff, 1.25);
-          key.position.set(5, 7, 9);
-          scene.add(key);
-          var rim = new THREE.DirectionalLight(0x4fffa0, 0.45);
-          rim.position.set(-7, -3, 5);
-          scene.add(rim);
-
-          camera.position.set(0, 0, 10);
-
-          // fit camera distance so the WHOLE slab fits (width-limited for wide code), ~78% fill
-          var vfov = (camera.fov * Math.PI) / 180;
-          var screenAspect = 1920 / 1080;
-          var fitH = slabH / 2 / Math.tan(vfov / 2) / 0.78;
-          var fitW = slabW / 2 / (Math.tan(vfov / 2) * screenAspect) / 0.78;
-          var fitZ = Math.max(fitH, fitW);
-
-          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);
-          // gentle breathing drift at rest (subtle — stays readable)
-          tl.to(
-            st,
-            { rotY: 0.06, rotX: -0.02, duration: dur * 0.4, ease: "sine.inOut" },
-            dur * 0.6,
-          );
-
-          return function () {
-            slab.rotation.y = st.rotY;
-            slab.rotation.x = st.rotX;
-            camera.position.z = st.camZ;
-            camera.lookAt(0, 0, 0);
-            renderer.render(scene, camera);
-          };
-        }
-
-        // ===========================================================================
-        // Effect 2 — code-shader-dissolve: code "compiles" out of GPU noise, holds crisp
-        // ===========================================================================
-        function fxDissolve(THREE, scene, camera, renderer, state, st, tl, dur, seed) {
-          scene.background = new THREE.Color(0x05070b);
-          var code = drawCodeToCanvas(state, {
-            fontPx: 40,
-            lineH: 60,
-            padX: 90,
-            padY: 80,
-            weight: 600,
-          });
-          var tex = new THREE.CanvasTexture(code.canvas);
-          tex.minFilter = THREE.LinearFilter;
-          tex.magFilter = THREE.LinearFilter;
-          tex.generateMipmaps = false;
-
-          var aspect = code.W / code.H;
-          var planeH = 6.6;
-          var planeW = planeH * aspect;
-
-          var uniforms = {
-            uTex: { value: tex },
-            uProgress: { value: 0 },
-            uSeed: { value: (seed || 1) * 13.37 },
-          };
-          var mat = new THREE.ShaderMaterial({
-            uniforms: uniforms,
-            transparent: true,
-            vertexShader: [
-              "varying vec2 vUv;",
-              "void main(){ vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0); }",
-            ].join("\n"),
-            fragmentShader: [
-              "precision highp float;",
-              "uniform sampler2D uTex;",
-              "uniform float uProgress;",
-              "uniform float uSeed;",
-              "varying vec2 vUv;",
-              "float hash(vec2 p){ p=fract(p*vec2(123.34,456.21)); p+=dot(p,p+45.32); return fract(p.x*p.y); }",
-              "float noise(vec2 p){ vec2 i=floor(p),f=fract(p); float a=hash(i),b=hash(i+vec2(1.,0.)),c=hash(i+vec2(0.,1.)),d=hash(i+vec2(1.,1.)); vec2 u=f*f*(3.-2.*f); return mix(mix(a,b,u.x),mix(c,d,u.x),u.y); }",
-              "void main(){",
-              "  vec2 uv = vUv;",
-              // multi-octave seeded noise field
-              "  float n = noise(uv*16.0+uSeed)*0.6 + noise(uv*48.0+uSeed*1.7)*0.3 + noise(uv*120.0+uSeed*2.3)*0.1;",
-              "  float edge = 0.12;",
-              "  float reveal = smoothstep(n-edge, n+edge, uProgress);", // 0 hidden -> 1 shown
-              // chromatic fringe strongest at the dissolving edge
-              "  float band = reveal*(1.0-reveal)*4.0;",
-              "  float off = band*0.010;",
-              "  float r = texture2D(uTex, uv+vec2(off,0.0)).r;",
-              "  float g = texture2D(uTex, uv).g;",
-              "  float b = texture2D(uTex, uv-vec2(off,0.0)).b;",
-              "  vec3 codeCol = vec3(r,g,b);",
-              // additive cyan edge glow along the dissolve front
-              "  vec3 glow = vec3(0.30,0.72,1.0) * band * 0.9;",
-              "  vec3 outc = codeCol*reveal + glow;",
-              "  float a = max(reveal, band*0.8);",
-              "  gl_FragColor = vec4(outc, a);",
-              "}",
-            ].join("\n"),
-          });
-
-          var plane = new THREE.Mesh(new THREE.PlaneGeometry(planeW, planeH), mat);
-          scene.add(plane);
-
-          camera.position.set(0, 0, 10);
-          var vfov = (camera.fov * Math.PI) / 180;
-          var screenAspect = 1920 / 1080;
-          var fitH = planeH / 2 / Math.tan(vfov / 2) / 0.82;
-          var fitW = planeW / 2 / (Math.tan(vfov / 2) * screenAspect) / 0.82;
-          camera.position.z = Math.max(fitH, fitW);
-          camera.lookAt(0, 0, 0);
-
-          // compile in, then hold crisp. Overshoot to 1.15 so even max-noise pixels
-          // (n up to ~1.0, edge 0.12) fully resolve — no leftover specks at rest.
-          tl.to(uniforms.uProgress, { value: 1.15, duration: dur * 0.62, ease: "power1.inOut" }, 0);
-
-          return function () {
-            renderer.render(scene, camera);
-          };
-        }
-
-        // ===========================================================================
-        // Effect 3 — code-particle-assemble: GPU points scatter then fly to glyph pixels
-        // ===========================================================================
-        function fxParticles(THREE, scene, camera, renderer, state, st, tl, dur, seed) {
-          scene.background = new THREE.Color(0x05070b);
-          var code = drawCodeToCanvas(state, {
-            fontPx: 46,
-            lineH: 70,
-            padX: 70,
-            padY: 64,
-            weight: 700,
-          });
-          var cw = code.W;
-          var ch = code.H;
-          var data = code.canvas.getContext("2d").getImageData(0, 0, cw, ch).data;
-          var rng = mulberry32(((seed || 1) * 2654435761) >>> 0);
-
-          var worldW = 13.0;
-          var worldH = worldW * (ch / cw);
-
-          // sample glyph pixels (brighter than the dark bg) on a fixed grid
-          var step = 2;
-          var tx = [];
-          var col = [];
-          for (var y = 0; y < ch; y += step) {
-            for (var x = 0; x < cw; x += step) {
-              var idx = (y * cw + x) * 4;
-              var r = data[idx];
-              var g = data[idx + 1];
-              var b = data[idx + 2];
-              if (r + g + b < 120) continue; // skip background
-              tx.push((x / cw - 0.5) * worldW, -(y / ch - 0.5) * worldH, 0);
-              col.push(r / 255, g / 255, b / 255);
-            }
-          }
-          var n = tx.length / 3;
-
-          var positions = new Float32Array(n * 3);
-          var aOrigin = new Float32Array(n * 3);
-          var aTarget = new Float32Array(tx);
-          var aColor = new Float32Array(col);
-          var aDelay = new Float32Array(n);
-          for (var i = 0; i < n; i++) {
-            var sx = (rng() * 2 - 1) * worldW * 1.15;
-            var sy = (rng() * 2 - 1) * worldH * 1.7;
-            var sz = (rng() * 2 - 1) * 9.0 - 2.0;
-            aOrigin[i * 3] = sx;
-            aOrigin[i * 3 + 1] = sy;
-            aOrigin[i * 3 + 2] = sz;
-            positions[i * 3] = sx;
-            positions[i * 3 + 1] = sy;
-            positions[i * 3 + 2] = sz;
-            aDelay[i] = rng();
-          }
-
-          var geo = new THREE.BufferGeometry();
-          geo.setAttribute("position", new THREE.BufferAttribute(positions, 3));
-          geo.setAttribute("aOrigin", new THREE.BufferAttribute(aOrigin, 3));
-          geo.setAttribute("aTarget", new THREE.BufferAttribute(aTarget, 3));
-          geo.setAttribute("aColor", new THREE.BufferAttribute(aColor, 3));
-          geo.setAttribute("aDelay", new THREE.BufferAttribute(aDelay, 1));
-
-          var uniforms = { uProgress: { value: 0 }, uSize: { value: 3.4 } };
-          var mat = new THREE.ShaderMaterial({
-            uniforms: uniforms,
-            transparent: true,
-            depthTest: false,
-            depthWrite: false,
-            blending: THREE.NormalBlending,
-            vertexShader: [
-              "attribute vec3 aOrigin; attribute vec3 aTarget; attribute vec3 aColor; attribute float aDelay;",
-              "uniform float uProgress; uniform float uSize;",
-              "varying vec3 vColor; varying float vP;",
-              "void main(){",
-              "  float span = 0.62;",
-              "  float p = clamp((uProgress - aDelay*(1.0-span)) / span, 0.0, 1.0);",
-              "  p = p*p*(3.0-2.0*p);",
-              "  vec3 pos = mix(aOrigin, aTarget, p);",
-              "  vec4 mv = modelViewMatrix * vec4(pos, 1.0);",
-              "  gl_Position = projectionMatrix * mv;",
-              "  gl_PointSize = uSize * (60.0 / -mv.z) * (0.45 + 0.55*p);",
-              "  vColor = aColor; vP = p;",
-              "}",
-            ].join("\n"),
-            fragmentShader: [
-              "precision highp float;",
-              "varying vec3 vColor; varying float vP;",
-              "void main(){",
-              "  vec2 d = gl_PointCoord - 0.5;",
-              "  float r2 = dot(d, d);",
-              "  if (r2 > 0.25) discard;",
-              "  float a = smoothstep(0.25, 0.02, r2);",
-              // brighter & whiter in flight, resolves to true color as it lands
-              "  vec3 c = mix(vColor + vec3(0.32)*(1.0-vP), vColor, vP);",
-              "  gl_FragColor = vec4(c, a * (0.7 + 0.3*vP));",
-              "}",
-            ].join("\n"),
-          });
-
-          var pts = new THREE.Points(geo, mat);
-          scene.add(pts);
-
-          camera.position.set(0, 0, 10);
-          var vfov = (camera.fov * Math.PI) / 180;
-          var sa = 1920 / 1080;
-          var fitH = worldH / 2 / Math.tan(vfov / 2) / 0.78;
-          var fitW = worldW / 2 / (Math.tan(vfov / 2) * sa) / 0.78;
-          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);
-
-          return function () {
-            renderer.render(scene, camera);
-          };
-        }
-
-        // ---- dispatch + boot ------------------------------------------------------
-        function buildEffect(THREE, scene, camera, renderer, spec, st, tl) {
-          var state = T[spec.seq].states[0];
-          var dur = spec.duration;
-          if (spec.effect === "extrude")
-            return fxExtrude(THREE, scene, camera, renderer, state, st, tl, dur);
-          if (spec.effect === "dissolve")
-            return fxDissolve(THREE, scene, camera, renderer, state, st, tl, dur, spec.seed);
-          if (spec.effect === "particles")
-            return fxParticles(THREE, scene, camera, renderer, state, st, tl, dur, spec.seed);
-          return function () {};
-        }
-
-        function go() {
-          var spec = window.__BLOCK;
-          var root = document.getElementById("root");
-          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({
-            canvas: glcanvas,
-            antialias: true,
-            alpha: false,
-            preserveDrawingBuffer: true,
-          });
-          renderer.setPixelRatio(1);
-          renderer.setSize(W, H, false);
-          var scene = new THREE.Scene();
-          var camera = new THREE.PerspectiveCamera(45, W / H, 0.1, 200);
-          var st = {};
-
-          document.fonts.ready.then(function () {
-            var renderFn = buildEffect(THREE, scene, camera, renderer, spec, st, tl);
-            function render() {
-              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
-            render(); // paint frame 0
-          });
-        }
-
-        if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
-        else go();
-      })();
+// hf-code-anim-gl.js — WebGL code-animation engine for the "crazy" Code Animations blocks.
+//
+// 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
+//   - 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
+//
+// Each block sets window.__BLOCK = { id, effect, seq, duration, seed } and includes this engine.
+(function () {
+  "use strict";
+  var T = window.__TOKENS || {};
+
+  // ---- seeded PRNG (no Math.random) -----------------------------------------
+  function mulberry32(a) {
+    return function () {
+      a |= 0;
+      a = (a + 0x6d2b79f5) | 0;
+      var t = Math.imul(a ^ (a >>> 15), 1 | a);
+      t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+      return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+    };
+  }
+
+  // ---- split a token state into lines of {content,color} --------------------
+  function splitLines(state) {
+    var lines = [[]];
+    for (var i = 0; i < state.tokens.length; i++) {
+      var t = state.tokens[i];
+      if (t.content === "\n") {
+        lines.push([]);
+        continue;
+      }
+      lines[lines.length - 1].push(t);
+    }
+    while (lines.length && lines[lines.length - 1].length === 0) lines.pop();
+    return lines;
+  }
+
+  // ---- THE BRIDGE: draw baked tokens to an offscreen 2D canvas ---------------
+  // Returns { canvas, W, H, lines, lineH, padY, fontPx } so effects can sample it.
+  function drawCodeToCanvas(state, opts) {
+    opts = opts || {};
+    var fontPx = opts.fontPx || 36;
+    var lineH = opts.lineH || 54;
+    var padX = opts.padX || 70;
+    var padY = opts.padY || 60;
+    var weight = opts.weight || 500;
+    var font = weight + " " + fontPx + 'px "JetBrains Mono", monospace';
+
+    var lines = splitLines(state);
+    var measure = document.createElement("canvas").getContext("2d");
+    measure.font = font;
+    var maxW = 0;
+    for (var i = 0; i < lines.length; i++) {
+      var w = 0;
+      for (var j = 0; j < lines[i].length; j++) w += measure.measureText(lines[i][j].content).width;
+      if (w > maxW) maxW = w;
+    }
+    var W = Math.max(2, Math.ceil(maxW + padX * 2));
+    var H = Math.max(2, Math.ceil(lines.length * lineH + padY * 2));
+
+    var canvas = document.createElement("canvas");
+    canvas.width = W;
+    canvas.height = H;
+    var ctx = canvas.getContext("2d");
+    if (opts.transparent) {
+      ctx.clearRect(0, 0, W, H);
+    } else {
+      ctx.fillStyle = opts.bg || "#0b0f17";
+      ctx.fillRect(0, 0, W, H);
+    }
+    ctx.textBaseline = "top";
+    ctx.font = font;
+    for (var li = 0; li < lines.length; li++) {
+      var x = padX;
+      var y = padY + li * lineH;
+      for (var k = 0; k < lines[li].length; k++) {
+        var tok = lines[li][k];
+        ctx.fillStyle = tok.color;
+        ctx.fillText(tok.content, x, y);
+        x += ctx.measureText(tok.content).width;
+      }
+    }
+    return { canvas: canvas, W: W, H: H, lines: lines.length, lineH: lineH, padY: padY, fontPx: fontPx };
+  }
+
+  // ===========================================================================
+  // Effect 1 — code-3d-extrude: code on a lit, beveled slab that rotates to rest
+  // ===========================================================================
+  function fxExtrude(THREE, scene, camera, renderer, state, st, tl, dur) {
+    scene.background = new THREE.Color(0x05070b);
+    var code = drawCodeToCanvas(state, { fontPx: 38, lineH: 56, padX: 80, padY: 70, weight: 600 });
+    var tex = new THREE.CanvasTexture(code.canvas);
+    tex.minFilter = THREE.LinearFilter;
+    tex.magFilter = THREE.LinearFilter;
+    tex.generateMipmaps = false;
+
+    var aspect = code.W / code.H;
+    var slabH = 6.2;
+    var slabW = slabH * aspect;
+    var depth = 0.5;
+
+    // beveled slab: rounded extruded rectangle
+    var hw = slabW / 2;
+    var hh = slabH / 2;
+    var r = 0.18;
+    var shape = new THREE.Shape();
+    shape.moveTo(-hw + r, -hh);
+    shape.lineTo(hw - r, -hh);
+    shape.quadraticCurveTo(hw, -hh, hw, -hh + r);
+    shape.lineTo(hw, hh - r);
+    shape.quadraticCurveTo(hw, hh, hw - r, hh);
+    shape.lineTo(-hw + r, hh);
+    shape.quadraticCurveTo(-hw, hh, -hw, hh - r);
+    shape.lineTo(-hw, -hh + r);
+    shape.quadraticCurveTo(-hw, -hh, -hw + r, -hh);
+    var geo = new THREE.ExtrudeGeometry(shape, { depth: depth, bevelEnabled: true, bevelThickness: 0.12, bevelSize: 0.1, bevelSegments: 3, steps: 1 });
+    geo.center();
+    // UVs from ExtrudeGeometry don't map the texture nicely to the face; remap front-face UVs from XY bounds.
+    geo.computeBoundingBox();
+    var bb = geo.boundingBox;
+    var sizeX = bb.max.x - bb.min.x;
+    var sizeY = bb.max.y - bb.min.y;
+    var pos = geo.attributes.position;
+    var uv = geo.attributes.uv;
+    for (var vi = 0; vi < pos.count; vi++) {
+      uv.setXY(vi, (pos.getX(vi) - bb.min.x) / sizeX, (pos.getY(vi) - bb.min.y) / sizeY);
+    }
+    uv.needsUpdate = true;
+
+    // Face is an unlit "screen" — shows the exact vivid Shiki colors (no PBR/emissive wash).
+    // The 3D read comes from the lit, beveled EDGES + perspective, like a glowing monitor.
+    var faceMat = new THREE.MeshBasicMaterial({ map: tex });
+    var edgeMat = new THREE.MeshStandardMaterial({ color: 0x141d2b, roughness: 0.3, metalness: 0.4 });
+    // ExtrudeGeometry groups: 0 = front+back faces, 1 = sides. Front shows the code.
+    var slab = new THREE.Mesh(geo, [faceMat, edgeMat]);
+    scene.add(slab);
+
+    scene.add(new THREE.AmbientLight(0xffffff, 0.5));
+    var key = new THREE.DirectionalLight(0xbcd4ff, 1.25);
+    key.position.set(5, 7, 9);
+    scene.add(key);
+    var rim = new THREE.DirectionalLight(0x4fffa0, 0.45);
+    rim.position.set(-7, -3, 5);
+    scene.add(rim);
+
+    camera.position.set(0, 0, 10);
+
+    // fit camera distance so the WHOLE slab fits (width-limited for wide code), ~78% fill
+    var vfov = (camera.fov * Math.PI) / 180;
+    var screenAspect = 1920 / 1080;
+    var fitH = slabH / 2 / Math.tan(vfov / 2) / 0.78;
+    var fitW = slabW / 2 / (Math.tan(vfov / 2) * screenAspect) / 0.78;
+    var fitZ = Math.max(fitH, fitW);
+
+    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);
+    // gentle breathing drift at rest (subtle — stays readable)
+    tl.to(st, { rotY: 0.06, rotX: -0.02, duration: dur * 0.4, ease: "sine.inOut" }, dur * 0.6);
+
+    return function () {
+      slab.rotation.y = st.rotY;
+      slab.rotation.x = st.rotX;
+      camera.position.z = st.camZ;
+      camera.lookAt(0, 0, 0);
+      // boot loop's render() issues the single renderer.render() — don't double-render here
+    };
+  }
+
+  // ===========================================================================
+  // Effect 2 — code-shader-dissolve: code "compiles" out of GPU noise, holds crisp
+  // ===========================================================================
+  function fxDissolve(THREE, scene, camera, renderer, state, st, tl, dur, seed) {
+    scene.background = new THREE.Color(0x05070b);
+    var code = drawCodeToCanvas(state, { fontPx: 40, lineH: 60, padX: 90, padY: 80, weight: 600 });
+    var tex = new THREE.CanvasTexture(code.canvas);
+    tex.minFilter = THREE.LinearFilter;
+    tex.magFilter = THREE.LinearFilter;
+    tex.generateMipmaps = false;
+
+    var aspect = code.W / code.H;
+    var planeH = 6.6;
+    var planeW = planeH * aspect;
+
+    var uniforms = {
+      uTex: { value: tex },
+      uProgress: { value: 0 },
+      uSeed: { value: (seed || 1) * 13.37 },
+    };
+    var mat = new THREE.ShaderMaterial({
+      uniforms: uniforms,
+      transparent: true,
+      vertexShader: [
+        "varying vec2 vUv;",
+        "void main(){ vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0); }",
+      ].join("\n"),
+      fragmentShader: [
+        "precision highp float;",
+        "uniform sampler2D uTex;",
+        "uniform float uProgress;",
+        "uniform float uSeed;",
+        "varying vec2 vUv;",
+        "float hash(vec2 p){ p=fract(p*vec2(123.34,456.21)); p+=dot(p,p+45.32); return fract(p.x*p.y); }",
+        "float noise(vec2 p){ vec2 i=floor(p),f=fract(p); float a=hash(i),b=hash(i+vec2(1.,0.)),c=hash(i+vec2(0.,1.)),d=hash(i+vec2(1.,1.)); vec2 u=f*f*(3.-2.*f); return mix(mix(a,b,u.x),mix(c,d,u.x),u.y); }",
+        "void main(){",
+        "  vec2 uv = vUv;",
+        // multi-octave seeded noise field
+        "  float n = noise(uv*16.0+uSeed)*0.6 + noise(uv*48.0+uSeed*1.7)*0.3 + noise(uv*120.0+uSeed*2.3)*0.1;",
+        "  float edge = 0.12;",
+        "  float reveal = smoothstep(n-edge, n+edge, uProgress);", // 0 hidden -> 1 shown
+        // chromatic fringe strongest at the dissolving edge
+        "  float band = reveal*(1.0-reveal)*4.0;",
+        "  float off = band*0.010;",
+        "  float r = texture2D(uTex, uv+vec2(off,0.0)).r;",
+        "  float g = texture2D(uTex, uv).g;",
+        "  float b = texture2D(uTex, uv-vec2(off,0.0)).b;",
+        "  vec3 codeCol = vec3(r,g,b);",
+        // additive cyan edge glow along the dissolve front
+        "  vec3 glow = vec3(0.30,0.72,1.0) * band * 0.9;",
+        "  vec3 outc = codeCol*reveal + glow;",
+        "  float a = max(reveal, band*0.8);",
+        "  gl_FragColor = vec4(outc, a);",
+        "}",
+      ].join("\n"),
+    });
+
+    var plane = new THREE.Mesh(new THREE.PlaneGeometry(planeW, planeH), mat);
+    scene.add(plane);
+
+    camera.position.set(0, 0, 10);
+    var vfov = (camera.fov * Math.PI) / 180;
+    var screenAspect = 1920 / 1080;
+    var fitH = planeH / 2 / Math.tan(vfov / 2) / 0.82;
+    var fitW = planeW / 2 / (Math.tan(vfov / 2) * screenAspect) / 0.82;
+    camera.position.z = Math.max(fitH, fitW);
+    camera.lookAt(0, 0, 0);
+
+    // compile in, then hold crisp. Overshoot to 1.15 so even max-noise pixels
+    // (n up to ~1.0, edge 0.12) fully resolve — no leftover specks at rest.
+    tl.to(uniforms.uProgress, { value: 1.15, duration: dur * 0.62, ease: "power1.inOut" }, 0);
+
+    // uProgress is tweened by GSAP; the boot loop's render() draws once per frame.
+    return function () {};
+  }
+
+  // ===========================================================================
+  // Effect 3 — code-particle-assemble: GPU points scatter then fly to glyph pixels
+  // ===========================================================================
+  function fxParticles(THREE, scene, camera, renderer, state, st, tl, dur, seed) {
+    scene.background = new THREE.Color(0x05070b);
+    var code = drawCodeToCanvas(state, { fontPx: 46, lineH: 70, padX: 70, padY: 64, weight: 700 });
+    var cw = code.W;
+    var ch = code.H;
+    var data = code.canvas.getContext("2d").getImageData(0, 0, cw, ch).data;
+    var rng = mulberry32(((seed || 1) * 2654435761) >>> 0);
+
+    var worldW = 13.0;
+    var worldH = worldW * (ch / cw);
+
+    // sample glyph pixels (brighter than the dark bg) on a fixed grid
+    var step = 2;
+    var tx = [];
+    var col = [];
+    for (var y = 0; y < ch; y += step) {
+      for (var x = 0; x < cw; x += step) {
+        var idx = (y * cw + x) * 4;
+        var r = data[idx];
+        var g = data[idx + 1];
+        var b = data[idx + 2];
+        if (r + g + b < 120) continue; // skip background
+        tx.push((x / cw - 0.5) * worldW, -(y / ch - 0.5) * worldH, 0);
+        col.push(r / 255, g / 255, b / 255);
+      }
+    }
+    var n = tx.length / 3;
+
+    var positions = new Float32Array(n * 3);
+    var aOrigin = new Float32Array(n * 3);
+    var aTarget = new Float32Array(tx);
+    var aColor = new Float32Array(col);
+    var aDelay = new Float32Array(n);
+    for (var i = 0; i < n; i++) {
+      var sx = (rng() * 2 - 1) * worldW * 1.15;
+      var sy = (rng() * 2 - 1) * worldH * 1.7;
+      var sz = (rng() * 2 - 1) * 9.0 - 2.0;
+      aOrigin[i * 3] = sx;
+      aOrigin[i * 3 + 1] = sy;
+      aOrigin[i * 3 + 2] = sz;
+      positions[i * 3] = sx;
+      positions[i * 3 + 1] = sy;
+      positions[i * 3 + 2] = sz;
+      aDelay[i] = rng();
+    }
+
+    var geo = new THREE.BufferGeometry();
+    geo.setAttribute("position", new THREE.BufferAttribute(positions, 3));
+    geo.setAttribute("aOrigin", new THREE.BufferAttribute(aOrigin, 3));
+    geo.setAttribute("aTarget", new THREE.BufferAttribute(aTarget, 3));
+    geo.setAttribute("aColor", new THREE.BufferAttribute(aColor, 3));
+    geo.setAttribute("aDelay", new THREE.BufferAttribute(aDelay, 1));
+
+    var uniforms = { uProgress: { value: 0 }, uSize: { value: 3.4 } };
+    var mat = new THREE.ShaderMaterial({
+      uniforms: uniforms,
+      transparent: true,
+      depthTest: false,
+      depthWrite: false,
+      blending: THREE.NormalBlending,
+      vertexShader: [
+        "attribute vec3 aOrigin; attribute vec3 aTarget; attribute vec3 aColor; attribute float aDelay;",
+        "uniform float uProgress; uniform float uSize;",
+        "varying vec3 vColor; varying float vP;",
+        "void main(){",
+        "  float span = 0.62;",
+        "  float p = clamp((uProgress - aDelay*(1.0-span)) / span, 0.0, 1.0);",
+        "  p = p*p*(3.0-2.0*p);",
+        "  vec3 pos = mix(aOrigin, aTarget, p);",
+        "  vec4 mv = modelViewMatrix * vec4(pos, 1.0);",
+        "  gl_Position = projectionMatrix * mv;",
+        "  gl_PointSize = uSize * (60.0 / -mv.z) * (0.45 + 0.55*p);",
+        "  vColor = aColor; vP = p;",
+        "}",
+      ].join("\n"),
+      fragmentShader: [
+        "precision highp float;",
+        "varying vec3 vColor; varying float vP;",
+        "void main(){",
+        "  vec2 d = gl_PointCoord - 0.5;",
+        "  float r2 = dot(d, d);",
+        "  if (r2 > 0.25) discard;",
+        "  float a = smoothstep(0.25, 0.02, r2);",
+        // brighter & whiter in flight, resolves to true color as it lands
+        "  vec3 c = mix(vColor + vec3(0.32)*(1.0-vP), vColor, vP);",
+        "  gl_FragColor = vec4(c, a * (0.7 + 0.3*vP));",
+        "}",
+      ].join("\n"),
+    });
+
+    var pts = new THREE.Points(geo, mat);
+    scene.add(pts);
+
+    camera.position.set(0, 0, 10);
+    var vfov = (camera.fov * Math.PI) / 180;
+    var sa = 1920 / 1080;
+    var fitH = worldH / 2 / Math.tan(vfov / 2) / 0.78;
+    var fitW = worldW / 2 / (Math.tan(vfov / 2) * sa) / 0.78;
+    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);
+
+    // uProgress is tweened by GSAP; the boot loop's render() draws once per frame.
+    return function () {};
+  }
+
+  // ---- dispatch + boot ------------------------------------------------------
+  function buildEffect(THREE, scene, camera, renderer, spec, st, tl) {
+    var state = T[spec.seq].states[0];
+    var dur = spec.duration;
+    if (spec.effect === "extrude") return fxExtrude(THREE, scene, camera, renderer, state, st, tl, dur);
+    if (spec.effect === "dissolve") return fxDissolve(THREE, scene, camera, renderer, state, st, tl, dur, spec.seed);
+    if (spec.effect === "particles") return fxParticles(THREE, scene, camera, renderer, state, st, tl, dur, spec.seed);
+    return function () {};
+  }
+
+  function go() {
+    var spec = window.__BLOCK;
+    var root = document.getElementById("root");
+    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({ canvas: glcanvas, antialias: true, alpha: false, preserveDrawingBuffer: true });
+    renderer.setPixelRatio(1);
+    renderer.setSize(W, H, false);
+    var scene = new THREE.Scene();
+    var camera = new THREE.PerspectiveCamera(45, W / H, 0.1, 200);
+    var st = {};
+
+    document.fonts.ready.then(function () {
+      var renderFn = buildEffect(THREE, scene, camera, renderer, spec, st, tl);
+      function render() {
+        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
+      render(); // paint frame 0
+    });
+  }
+
+  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
+  else go();
+})();
+
     </script>
   </body>
 </html>
diff --git a/registry/blocks/code-diff/code-diff.html b/registry/blocks/code-diff/code-diff.html
index 7fa59b6456..3dad6c1ced 100644
--- a/registry/blocks/code-diff/code-diff.html
+++ b/registry/blocks/code-diff/code-diff.html
@@ -6,225 +6,37 @@
     <title>Code Diff</title>
     <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
     <style>
-      * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-      }
-      html,
-      body {
-        width: 1920px;
-        height: 1080px;
-        overflow: hidden;
-        background: #05070b;
-      }
-      #root {
-        position: relative;
-        width: 1920px;
-        height: 1080px;
-        font-family: "JetBrains Mono", monospace;
-        color: #e6edf3;
-      }
-      .bg-field {
-        position: absolute;
-        inset: 0;
-        background: radial-gradient(1200px 700px at 50% 18%, #0e1726 0%, #070b12 55%, #05070b 100%);
-      }
-      .bg-grid {
-        position: absolute;
-        inset: 0;
-        background-image:
-          linear-gradient(rgba(88, 166, 255, 0.05) 1px, transparent 1px),
-          linear-gradient(90deg, rgba(88, 166, 255, 0.05) 1px, transparent 1px);
-        background-size: 64px 64px;
-        mask-image: radial-gradient(1100px 620px at 50% 42%, #000 0%, transparent 78%);
-      }
-      .bg-glow {
-        position: absolute;
-        width: 900px;
-        height: 900px;
-        border-radius: 50%;
-        filter: blur(120px);
-        opacity: 0.5;
-      }
-      .bg-glow.a {
-        background: #1f6feb55;
-        left: -180px;
-        top: -200px;
-      }
-      .bg-glow.b {
-        background: #2ea04355;
-        right: -200px;
-        bottom: -260px;
-      }
-      .editor {
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-        width: 1380px;
-        height: 800px;
-        background: #0b0f17;
-        border: 1px solid #1d2733;
-        border-radius: 16px;
-        box-shadow:
-          0 40px 120px rgba(0, 0, 0, 0.6),
-          0 2px 0 rgba(255, 255, 255, 0.03) inset;
-        overflow: hidden;
-        display: flex;
-        flex-direction: column;
-      }
-      .titlebar {
-        height: 56px;
-        flex: 0 0 56px;
-        display: flex;
-        align-items: center;
-        gap: 16px;
-        padding: 0 22px;
-        background: linear-gradient(#11161f, #0c111a);
-        border-bottom: 1px solid #1b2430;
-      }
-      .dots {
-        display: flex;
-        gap: 10px;
-      }
-      .dot {
-        width: 14px;
-        height: 14px;
-        border-radius: 50%;
-      }
-      .dot.r {
-        background: #ff5f57;
-      }
-      .dot.y {
-        background: #febc2e;
-      }
-      .dot.g {
-        background: #28c840;
-      }
-      .filename {
-        font-size: 19px;
-        color: #8b98a9;
-        letter-spacing: 0.2px;
-      }
-      .filename .accent {
-        color: #d6e2f0;
-      }
-      .code-surface {
-        position: relative;
-        flex: 1 1 auto;
-        overflow: hidden;
-      }
-      .scene {
-        position: absolute;
-        inset: 0;
-        opacity: 0;
-        will-change: opacity;
-      }
-      .code {
-        position: absolute;
-        top: 38px;
-        left: 0;
-        right: 0;
-        padding: 0 44px 0 104px;
-        font-size: 30px;
-        line-height: 46px;
-        font-variant-ligatures: none;
-        tab-size: 2;
-      }
-      .gutter {
-        position: absolute;
-        top: 38px;
-        left: 0;
-        width: 84px;
-        padding-right: 18px;
-        font-size: 30px;
-        line-height: 46px;
-        text-align: right;
-        color: #828c9b;
-        user-select: none;
-      }
-      .ln {
-        display: block;
-        height: 46px;
-      }
-      .line {
-        display: block;
-        min-height: 46px;
-        white-space: pre;
-        position: relative;
-        z-index: 1;
-      }
-      .tok {
-        display: inline-block;
-        white-space: pre;
-        will-change: transform, opacity;
-      }
-      .caret {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 3px;
-        height: 32px;
-        margin-top: 6px;
-        background: #58a6ff;
-        border-radius: 1px;
-        z-index: 3;
-      }
-      .hl-box {
-        position: absolute;
-        background: rgba(88, 166, 255, 0.16);
-        border-left: 3px solid #58a6ff;
-        border-radius: 6px;
-        z-index: 0;
-        overflow: hidden;
-      }
-      .diff-line {
-        display: block;
-        min-height: 0;
-        line-height: 46px;
-        white-space: pre;
-        position: relative;
-        overflow: hidden;
-        padding-left: 14px;
-      }
-      .diff-sign {
-        display: inline-block;
-        width: 22px;
-        color: #41506220;
-      }
-      .diff-del {
-        background: rgba(248, 81, 73, 0.12);
-        box-shadow: inset 3px 0 #f85149;
-      }
-      .diff-add {
-        background: rgba(63, 185, 80, 0.12);
-        box-shadow: inset 3px 0 #3fb950;
-      }
-      .diff-del .diff-sign {
-        color: #f85149;
-      }
-      .diff-add .diff-sign {
-        color: #3fb950;
-      }
-      .flight-block {
-        position: absolute;
-        white-space: pre;
-        font-size: 27px;
-        line-height: 40px;
-        padding: 11px 22px;
-        border-radius: 11px;
-        background: #0f1722;
-        border: 1px solid #233044;
-        box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
-        will-change: transform, opacity;
-      }
-      .flight-target {
-        position: absolute;
-        border: 1.5px dashed #2a3a4f;
-        border-radius: 14px;
-        opacity: 0;
-      }
+      * { margin: 0; padding: 0; box-sizing: border-box; }
+      html, body { width: 1920px; height: 1080px; overflow: hidden; background: #05070b; }
+      #root { position: relative; width: 1920px; height: 1080px; font-family: "JetBrains Mono", monospace; color: #e6edf3; }
+      .bg-field { position: absolute; inset: 0; background: radial-gradient(1200px 700px at 50% 18%, #0e1726 0%, #070b12 55%, #05070b 100%); }
+      .bg-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(88,166,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(88,166,255,0.05) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(1100px 620px at 50% 42%, #000 0%, transparent 78%); }
+      .bg-glow { position: absolute; width: 900px; height: 900px; border-radius: 50%; filter: blur(120px); opacity: 0.5; }
+      .bg-glow.a { background: #1f6feb55; left: -180px; top: -200px; }
+      .bg-glow.b { background: #2ea04355; right: -200px; bottom: -260px; }
+      .editor { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 1380px; height: 800px; background: #0b0f17; border: 1px solid #1d2733; border-radius: 16px; box-shadow: 0 40px 120px rgba(0,0,0,0.6), 0 2px 0 rgba(255,255,255,0.03) inset; overflow: hidden; display: flex; flex-direction: column; }
+      .titlebar { height: 56px; flex: 0 0 56px; display: flex; align-items: center; gap: 16px; padding: 0 22px; background: linear-gradient(#11161f, #0c111a); border-bottom: 1px solid #1b2430; }
+      .dots { display: flex; gap: 10px; }
+      .dot { width: 14px; height: 14px; border-radius: 50%; }
+      .dot.r { background: #ff5f57; } .dot.y { background: #febc2e; } .dot.g { background: #28c840; }
+      .filename { font-size: 19px; color: #8b98a9; letter-spacing: 0.2px; }
+      .filename .accent { color: #d6e2f0; }
+      .code-surface { position: relative; flex: 1 1 auto; overflow: hidden; }
+      .scene { position: absolute; inset: 0; opacity: 0; will-change: opacity; }
+      .code { position: absolute; top: 38px; left: 0; right: 0; padding: 0 44px 0 104px; font-size: 30px; line-height: 46px; font-variant-ligatures: none; tab-size: 2; }
+      .gutter { position: absolute; top: 38px; left: 0; width: 84px; padding-right: 18px; font-size: 30px; line-height: 46px; text-align: right; color: #828c9b; user-select: none; }
+      .ln { display: block; height: 46px; }
+      .line { display: block; min-height: 46px; white-space: pre; position: relative; z-index: 1; }
+      .tok { display: inline-block; white-space: pre; will-change: transform, opacity; }
+      .caret { position: absolute; top: 0; left: 0; width: 3px; height: 32px; margin-top: 6px; background: #58a6ff; border-radius: 1px; z-index: 3; }
+      .hl-box { position: absolute; background: rgba(88,166,255,0.16); border-left: 3px solid #58a6ff; border-radius: 6px; z-index: 0; overflow: hidden; }
+      .diff-line { display: block; min-height: 0; line-height: 46px; white-space: pre; position: relative; overflow: hidden; padding-left: 14px; }
+      .diff-sign { display: inline-block; width: 22px; color: #41506220; }
+      .diff-del { background: rgba(248,81,73,0.12); box-shadow: inset 3px 0 #f85149; }
+      .diff-add { background: rgba(63,185,80,0.12); box-shadow: inset 3px 0 #3fb950; }
+      .diff-del .diff-sign { color: #f85149; } .diff-add .diff-sign { color: #3fb950; }
+      .flight-block { position: absolute; white-space: pre; font-size: 27px; line-height: 40px; padding: 11px 22px; border-radius: 11px; background: #0f1722; border: 1px solid #233044; box-shadow: 0 16px 44px rgba(0,0,0,0.5); will-change: transform, opacity; }
+      .flight-target { position: absolute; border: 1.5px dashed #2a3a4f; border-radius: 14px; opacity: 0; }
     </style>
   </head>
   <body>
@@ -242,801 +54,442 @@
       <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>
+          <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>
         <div class="code-surface" id="surface"></div>
       </div>
     </div>
     <script>
-      window.__TOKENS = {
-        diff: {
-          lang: "js",
-          theme: "github-dark",
-          bg: "#24292e",
-          fg: "#e1e4e8",
-          states: [
-            {
-              code: 'function greet(name) {\n  console.log("hi " + name)\n}',
-              tokens: [
-                {
-                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-0",
-                  content: "function",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-1",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-2",
-                  content: "greet",
-                  color: "#B392F0",
-                  fontStyle: 0,
-                },
-                {
-                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-3",
-                  content: "(",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-4",
-                  content: "name",
-                  color: "#FFAB70",
-                  fontStyle: 0,
-                },
-                {
-                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-5",
-                  content: ") {",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-6",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-7",
-                  content: "  ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-8",
-                  content: "console.",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-9",
-                  content: "log",
-                  color: "#B392F0",
-                  fontStyle: 0,
-                },
-                {
-                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-10",
-                  content: "(",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-11",
-                  content: '"hi "',
-                  color: "#9ECBFF",
-                  fontStyle: 0,
-                },
-                {
-                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-12",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-13",
-                  content: "+",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-14",
-                  content: " ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-15",
-                  content: "name)",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-16",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-17",
-                  content: "}",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-18",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-              ],
-            },
-            {
-              code: 'function greet(name, lang) {\n  const msg = translate("hi", lang)\n  console.log(`${msg} ${name}`)\n}',
-              tokens: [
-                {
-                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-0",
-                  content: "function",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-1",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-2",
-                  content: "greet",
-                  color: "#B392F0",
-                  fontStyle: 0,
-                },
-                {
-                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-3",
-                  content: "(",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-4",
-                  content: "name",
-                  color: "#FFAB70",
-                  fontStyle: 0,
-                },
-                {
-                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-5",
-                  content: ",",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-6",
-                  content: " ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-7",
-                  content: "lang",
-                  color: "#FFAB70",
-                  fontStyle: 0,
-                },
-                {
-                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-5",
-                  content: ") {",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-6",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-7",
-                  content: "  ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-11",
-                  content: "const",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-12",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-13",
-                  content: "msg",
-                  color: "#79B8FF",
-                  fontStyle: 0,
-                },
-                {
-                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-14",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-15",
-                  content: "=",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-16",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-17",
-                  content: "translate",
-                  color: "#B392F0",
-                  fontStyle: 0,
-                },
-                {
-                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-10",
-                  content: "(",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-19",
-                  content: '"hi"',
-                  color: "#9ECBFF",
-                  fontStyle: 0,
-                },
-                {
-                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-20",
-                  content: ", lang)",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-21",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-22",
-                  content: "  ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-23",
-                  content: "console.",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-9",
-                  content: "log",
-                  color: "#B392F0",
-                  fontStyle: 0,
-                },
-                {
-                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-25",
-                  content: "(",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-26",
-                  content: "`${",
-                  color: "#9ECBFF",
-                  fontStyle: 0,
-                },
-                {
-                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-27",
-                  content: "msg",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-28",
-                  content: "} ${",
-                  color: "#9ECBFF",
-                  fontStyle: 0,
-                },
-                {
-                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-29",
-                  content: "name",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-30",
-                  content: "}`",
-                  color: "#9ECBFF",
-                  fontStyle: 0,
-                },
-                {
-                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-31",
-                  content: ")",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-16",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-17",
-                  content: "}",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-34",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-              ],
-            },
-          ],
-        },
-      };
-      window.__BLOCK = { id: "code-diff", effect: "diff", seq: "diff", duration: 6 };
+      window.__TOKENS = {"diff":{"lang":"js","theme":"github-dark","bg":"#24292e","fg":"#e1e4e8","states":[{"code":"function greet(name) {\n  console.log(\"hi \" + name)\n}","tokens":[{"key":"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-0","content":"function","color":"#F97583","fontStyle":0},{"key":"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-1","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-2","content":"greet","color":"#B392F0","fontStyle":0},{"key":"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-3","content":"(","color":"#E1E4E8","fontStyle":0},{"key":"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-4","content":"name","color":"#FFAB70","fontStyle":0},{"key":"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-5","content":") {","color":"#E1E4E8","fontStyle":0},{"key":"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-6","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-7","content":"  ","color":"#e1e4e8","fontStyle":0},{"key":"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-8","content":"console.","color":"#E1E4E8","fontStyle":0},{"key":"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-9","content":"log","color":"#B392F0","fontStyle":0},{"key":"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-10","content":"(","color":"#E1E4E8","fontStyle":0},{"key":"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-11","content":"\"hi \"","color":"#9ECBFF","fontStyle":0},{"key":"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-12","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-13","content":"+","color":"#F97583","fontStyle":0},{"key":"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-14","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-15","content":"name)","color":"#E1E4E8","fontStyle":0},{"key":"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-16","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-17","content":"}","color":"#E1E4E8","fontStyle":0},{"key":"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-18","content":"\n","color":"#e1e4e8","fontStyle":0}]},{"code":"function greet(name, lang) {\n  const msg = translate(\"hi\", lang)\n  console.log(`${msg} ${name}`)\n}","tokens":[{"key":"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-0","content":"function","color":"#F97583","fontStyle":0},{"key":"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-1","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-2","content":"greet","color":"#B392F0","fontStyle":0},{"key":"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-3","content":"(","color":"#E1E4E8","fontStyle":0},{"key":"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-4","content":"name","color":"#FFAB70","fontStyle":0},{"key":"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-5","content":",","color":"#E1E4E8","fontStyle":0},{"key":"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-6","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-7","content":"lang","color":"#FFAB70","fontStyle":0},{"key":"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-5","content":") {","color":"#E1E4E8","fontStyle":0},{"key":"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-6","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-7","content":"  ","color":"#E1E4E8","fontStyle":0},{"key":"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-11","content":"const","color":"#F97583","fontStyle":0},{"key":"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-12","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-13","content":"msg","color":"#79B8FF","fontStyle":0},{"key":"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-14","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-15","content":"=","color":"#F97583","fontStyle":0},{"key":"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-16","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-17","content":"translate","color":"#B392F0","fontStyle":0},{"key":"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-10","content":"(","color":"#E1E4E8","fontStyle":0},{"key":"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-19","content":"\"hi\"","color":"#9ECBFF","fontStyle":0},{"key":"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-20","content":", lang)","color":"#E1E4E8","fontStyle":0},{"key":"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-21","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-22","content":"  ","color":"#e1e4e8","fontStyle":0},{"key":"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-23","content":"console.","color":"#E1E4E8","fontStyle":0},{"key":"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-9","content":"log","color":"#B392F0","fontStyle":0},{"key":"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-25","content":"(","color":"#E1E4E8","fontStyle":0},{"key":"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-26","content":"`${","color":"#9ECBFF","fontStyle":0},{"key":"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-27","content":"msg","color":"#E1E4E8","fontStyle":0},{"key":"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-28","content":"} ${","color":"#9ECBFF","fontStyle":0},{"key":"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-29","content":"name","color":"#E1E4E8","fontStyle":0},{"key":"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-30","content":"}`","color":"#9ECBFF","fontStyle":0},{"key":"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-31","content":")","color":"#E1E4E8","fontStyle":0},{"key":"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-16","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-17","content":"}","color":"#E1E4E8","fontStyle":0},{"key":"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-34","content":"\n","color":"#e1e4e8","fontStyle":0}]}]}};
+      window.__BLOCK = {"id":"code-diff","effect":"diff","seq":"diff","duration":6};
     </script>
     <script>
-      // 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
-      // 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].
-      (function () {
-        "use strict";
-        var T = window.__TOKENS || {};
+// 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
+// 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].
+(function () {
+  "use strict";
+  var T = window.__TOKENS || {};
 
-        function lineDiv() {
-          var d = document.createElement("div");
-          d.className = "line";
-          return d;
-        }
+  function lineDiv() {
+    var d = document.createElement("div");
+    d.className = "line";
+    return d;
+  }
 
-        // Render a code state's keyed tokens into codeEl as lines of inline-block .tok spans.
-        function renderState(codeEl, state) {
-          codeEl.textContent = "";
-          var keyToEl = new Map();
-          var line = lineDiv();
-          codeEl.appendChild(line);
-          for (var i = 0; i < state.tokens.length; i++) {
-            var t = state.tokens[i];
-            if (t.content === "\n") {
-              line = lineDiv();
-              codeEl.appendChild(line);
-              continue;
-            }
-            var span = document.createElement("span");
-            span.className = "tok";
-            span.textContent = t.content;
-            span.style.color = t.color;
-            if (t.fontStyle & 1) span.style.fontStyle = "italic";
-            if (t.fontStyle & 2) span.style.fontWeight = "700";
-            line.appendChild(span);
-            keyToEl.set(t.key, span);
-          }
-          var last = codeEl.lastChild;
-          if (last && last.className === "line" && last.children.length === 0)
-            codeEl.removeChild(last);
-          return keyToEl;
-        }
+  // Render a code state's keyed tokens into codeEl as lines of inline-block .tok spans.
+  function renderState(codeEl, state) {
+    codeEl.textContent = "";
+    var keyToEl = new Map();
+    var line = lineDiv();
+    codeEl.appendChild(line);
+    for (var i = 0; i < state.tokens.length; i++) {
+      var t = state.tokens[i];
+      if (t.content === "\n") {
+        line = lineDiv();
+        codeEl.appendChild(line);
+        continue;
+      }
+      var span = document.createElement("span");
+      span.className = "tok";
+      span.textContent = t.content;
+      span.style.color = t.color;
+      if (t.fontStyle & 1) span.style.fontStyle = "italic";
+      if (t.fontStyle & 2) span.style.fontWeight = "700";
+      line.appendChild(span);
+      keyToEl.set(t.key, span);
+    }
+    var last = codeEl.lastChild;
+    if (last && last.className === "line" && last.children.length === 0) codeEl.removeChild(last);
+    return keyToEl;
+  }
 
-        function rectsOf(keyToEl) {
-          var m = new Map();
-          keyToEl.forEach(function (el, k) {
-            var r = el.getBoundingClientRect();
-            m.set(k, { left: r.left, top: r.top });
-          });
-          return m;
-        }
+  function rectsOf(keyToEl) {
+    var m = new Map();
+    keyToEl.forEach(function (el, k) {
+      var r = el.getBoundingClientRect();
+      m.set(k, { left: r.left, top: r.top });
+    });
+    return m;
+  }
 
-        function makeScene(surface, withGutter) {
-          var scene = document.createElement("div");
-          scene.className = "scene";
-          if (withGutter) {
-            var g = document.createElement("div");
-            g.className = "gutter";
-            scene.appendChild(g);
-          }
-          var code = document.createElement("div");
-          code.className = "code";
-          scene.appendChild(code);
-          surface.appendChild(scene);
-          return { scene: scene, code: code, gutter: scene.querySelector(".gutter") };
-        }
+  function makeScene(surface, withGutter) {
+    var scene = document.createElement("div");
+    scene.className = "scene";
+    if (withGutter) {
+      var g = document.createElement("div");
+      g.className = "gutter";
+      scene.appendChild(g);
+    }
+    var code = document.createElement("div");
+    code.className = "code";
+    scene.appendChild(code);
+    surface.appendChild(scene);
+    return { scene: scene, code: code, gutter: scene.querySelector(".gutter") };
+  }
 
-        function fillGutter(g, n) {
-          var html = "";
-          for (var i = 1; i <= n; i++) html += '<span class="ln">' + i + "</span>";
-          g.innerHTML = html;
-        }
+  function fillGutter(g, n) {
+    var html = "";
+    for (var i = 1; i <= n; i++) html += '<span class="ln">' + i + "</span>";
+    g.innerHTML = html;
+  }
 
-        function splitLines(state) {
-          var lines = [{ text: "", tokens: [] }];
-          for (var i = 0; i < state.tokens.length; i++) {
-            var t = state.tokens[i];
-            if (t.content === "\n") {
-              lines.push({ text: "", tokens: [] });
-              continue;
-            }
-            var cur = lines[lines.length - 1];
-            cur.tokens.push(t);
-            cur.text += t.content;
-          }
-          if (lines.length && lines[lines.length - 1].tokens.length === 0) lines.pop();
-          return lines;
-        }
+  function splitLines(state) {
+    var lines = [{ text: "", tokens: [] }];
+    for (var i = 0; i < state.tokens.length; i++) {
+      var t = state.tokens[i];
+      if (t.content === "\n") {
+        lines.push({ text: "", tokens: [] });
+        continue;
+      }
+      var cur = lines[lines.length - 1];
+      cur.tokens.push(t);
+      cur.text += t.content;
+    }
+    if (lines.length && lines[lines.length - 1].tokens.length === 0) lines.pop();
+    return lines;
+  }
 
-        function lineDiff(a, b) {
-          var n = a.length;
-          var m = b.length;
-          var dp = [];
-          for (var i = 0; i <= n; i++) dp.push(new Array(m + 1).fill(0));
-          for (var i = n - 1; i >= 0; i--) {
-            for (var j = m - 1; j >= 0; j--) {
-              dp[i][j] =
-                a[i].text === b[j].text
-                  ? dp[i + 1][j + 1] + 1
-                  : Math.max(dp[i + 1][j], dp[i][j + 1]);
-            }
-          }
-          var ops = [];
-          var i = 0;
-          var j = 0;
-          while (i < n && j < m) {
-            if (a[i].text === b[j].text) {
-              ops.push({ type: "same", line: b[j] });
-              i++;
-              j++;
-            } else if (dp[i + 1][j] >= dp[i][j + 1]) {
-              ops.push({ type: "del", line: a[i] });
-              i++;
-            } else {
-              ops.push({ type: "add", line: b[j] });
-              j++;
-            }
-          }
-          while (i < n) ops.push({ type: "del", line: a[i++] });
-          while (j < m) ops.push({ type: "add", line: b[j++] });
-          return ops;
-        }
+  function lineDiff(a, b) {
+    var n = a.length;
+    var m = b.length;
+    var dp = [];
+    for (var i = 0; i <= n; i++) dp.push(new Array(m + 1).fill(0));
+    for (var i = n - 1; i >= 0; i--) {
+      for (var j = m - 1; j >= 0; j--) {
+        dp[i][j] = a[i].text === b[j].text ? dp[i + 1][j + 1] + 1 : Math.max(dp[i + 1][j], dp[i][j + 1]);
+      }
+    }
+    var ops = [];
+    var i = 0;
+    var j = 0;
+    while (i < n && j < m) {
+      if (a[i].text === b[j].text) {
+        ops.push({ type: "same", line: b[j] });
+        i++;
+        j++;
+      } else if (dp[i + 1][j] >= dp[i][j + 1]) {
+        ops.push({ type: "del", line: a[i] });
+        i++;
+      } else {
+        ops.push({ type: "add", line: b[j] });
+        j++;
+      }
+    }
+    while (i < n) ops.push({ type: "del", line: a[i++] });
+    while (j < m) ops.push({ type: "add", line: b[j++] });
+    return ops;
+  }
 
-        // ---- single-scene effect builders (fade in, play, hold to end) -------------
-        var FADE = 0.45;
+  // ---- single-scene effect builders (fade in, play, hold to end) -------------
+  var FADE = 0.45;
 
-        function morph(tl, surface, states, start) {
-          var STEP = 1.2;
-          var HOLD = 1.0;
-          var t = start;
-          for (var s = 0; s < states.length - 1; s++) {
-            var parts = makeScene(surface, false);
-            var code = parts.code;
-            var fromEls = renderState(code, states[s]);
-            var fromR = rectsOf(fromEls);
-            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;
-            toEls.forEach(function (el, k) {
-              var fr = fromR.get(k);
-              var tr = toR.get(k);
-              if (fr) {
-                seg.fromTo(
-                  el,
-                  { x: fr.left - tr.left, y: fr.top - tr.top },
-                  { x: 0, y: 0, duration: STEP, ease: "power2.inOut" },
-                  0,
-                );
-              } else {
-                seg.fromTo(
-                  el,
-                  { opacity: 0 },
-                  { opacity: 1, duration: FD, ease: "power1.out" },
-                  ENTER_AT,
-                );
-              }
-            });
-            var toKeys = new Set(toEls.keys());
-            var fromState = states[s];
-            for (var i = 0; i < fromState.tokens.length; i++) {
-              var tok = fromState.tokens[i];
-              if (tok.content === "\n" || toKeys.has(tok.key) || !fromR.has(tok.key)) continue;
-              var r = fromR.get(tok.key);
-              var span = document.createElement("span");
-              span.className = "tok";
-              span.textContent = tok.content;
-              span.style.position = "absolute";
-              span.style.left = r.left - base.left + "px";
-              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);
-            }
-            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);
-            if (!isLast)
-              tl.to(parts.scene, { opacity: 0, duration: FADE, ease: "power1.in" }, segEnd - FADE);
-            tl.add(seg, segStart);
-            t = segEnd - FADE;
-          }
+  function morph(tl, surface, states, start) {
+    var STEP = 1.2;
+    var HOLD = 1.0;
+    var t = start;
+    for (var s = 0; s < states.length - 1; s++) {
+      var parts = makeScene(surface, false);
+      var code = parts.code;
+      var fromEls = renderState(code, states[s]);
+      var fromR = rectsOf(fromEls);
+      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;
+      toEls.forEach(function (el, k) {
+        var fr = fromR.get(k);
+        var tr = toR.get(k);
+        if (fr) {
+          seg.fromTo(el, { x: fr.left - tr.left, y: fr.top - tr.top }, { x: 0, y: 0, duration: STEP, ease: "power2.inOut" }, 0);
+        } else {
+          seg.fromTo(el, { opacity: 0 }, { opacity: 1, duration: FD, ease: "power1.out" }, ENTER_AT);
         }
+      });
+      var toKeys = new Set(toEls.keys());
+      var fromState = states[s];
+      for (var i = 0; i < fromState.tokens.length; i++) {
+        var tok = fromState.tokens[i];
+        if (tok.content === "\n" || toKeys.has(tok.key) || !fromR.has(tok.key)) continue;
+        var r = fromR.get(tok.key);
+        var span = document.createElement("span");
+        span.className = "tok";
+        span.textContent = tok.content;
+        span.style.position = "absolute";
+        span.style.left = r.left - base.left + "px";
+        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);
+      }
+      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);
+      if (!isLast) tl.to(parts.scene, { opacity: 0, duration: FADE, ease: "power1.in" }, segEnd - FADE);
+      tl.add(seg, segStart);
+      t = segEnd - FADE;
+    }
+  }
 
-        function flight(tl, surface, states, start) {
-          var FLY = 1.0;
-          var STAGGER = 0.3;
-          var parts = makeScene(surface, false);
-          parts.code.remove();
-          var scene = parts.scene;
-          var target = document.createElement("div");
-          target.className = "flight-target";
-          scene.appendChild(target);
-          var W = surface.clientWidth;
-          var H = surface.clientHeight;
-          var leftCx = W * 0.27;
-          var rightCx = W * 0.71;
-          var midY = H * 0.46;
-          var gap = 70;
-          var blocks = states.map(function (st) {
-            var blk = document.createElement("div");
-            blk.className = "flight-block";
-            renderState(blk, st);
-            scene.appendChild(blk);
-            return blk;
-          });
-          var n = blocks.length;
-          var maxW = 0;
-          var firstDestY = 0;
-          blocks.forEach(function (blk, i) {
-            var bw = blk.getBoundingClientRect().width;
-            if (bw > maxW) maxW = bw;
-            var destX = rightCx - bw / 2;
-            var destY = midY + (i - (n - 1) / 2) * gap;
-            if (i === 0) firstDestY = destY;
-            var srcX = leftCx - bw / 2;
-            var srcY = midY + (i - (n - 1) / 2) * (gap + 16);
-            blk.style.left = destX + "px";
-            blk.style.top = destY + "px";
-            tl.fromTo(
-              blk,
-              { x: srcX - destX, y: srcY - destY, opacity: 0, rotation: -5, scale: 0.9 },
-              {
-                x: 0,
-                y: 0,
-                opacity: 1,
-                rotation: 0,
-                scale: 1,
-                duration: FLY,
-                ease: "power3.inOut",
-              },
-              start + FADE + i * STAGGER,
-            );
-          });
-          target.style.left = rightCx - maxW / 2 - 26 + "px";
-          target.style.top = firstDestY - 18 + "px";
-          target.style.width = maxW + 52 + "px";
-          target.style.height = (n - 1) * gap + 62 + "px";
-          var landAt = start + FADE + (n - 1) * STAGGER + FLY;
-          tl.set(scene, { opacity: 1 }, 0);
-          tl.to(target, { opacity: 1, duration: 0.5, ease: "power1.out" }, landAt - 0.5);
-        }
+  function flight(tl, surface, states, start) {
+    var FLY = 0.95;
+    var STAGGER = 0.26;
+    var GAP = 20;
+    var parts = makeScene(surface, false);
+    parts.code.remove();
+    var scene = parts.scene;
+    var target = document.createElement("div");
+    target.className = "flight-target";
+    scene.appendChild(target);
+    var W = surface.clientWidth;
+    var H = surface.clientHeight;
 
-        function typing(tl, surface, state, start) {
-          var PER = 0.05;
-          var parts = makeScene(surface, true);
-          var code = parts.code;
-          var keyToEl = renderState(code, state);
-          fillGutter(parts.gutter, code.querySelectorAll(".line").length);
-          var base = code.getBoundingClientRect();
-          var caret = document.createElement("div");
-          caret.className = "caret";
-          code.appendChild(caret);
-          var toks = [];
-          keyToEl.forEach(function (el) {
-            toks.push(el);
-          });
-          tl.set(parts.scene, { opacity: 0 }, 0);
-          tl.to(parts.scene, { opacity: 1, duration: FADE, ease: "power1.out" }, start);
-          var t0 = start + FADE;
-          if (toks.length) {
-            var r0 = toks[0].getBoundingClientRect();
-            tl.set(caret, { x: r0.left - base.left, y: r0.top - base.top, opacity: 1 }, 0);
-          }
-          toks.forEach(function (el, i) {
-            tl.set(el, { opacity: 0 }, 0);
-            tl.to(el, { opacity: 1, duration: 0.08, ease: "none" }, t0 + i * PER);
-            var r = el.getBoundingClientRect();
-            tl.set(caret, { x: r.right - base.left, y: r.top - base.top }, t0 + i * PER);
-          });
-        }
+    var blocks = states.map(function (st) {
+      var blk = document.createElement("div");
+      blk.className = "flight-block";
+      renderState(blk, st);
+      scene.appendChild(blk);
+      return blk;
+    });
+    var n = blocks.length;
 
-        function diff(tl, surface, states, start) {
-          var DEL = 0.55;
-          var ADD = 0.6;
-          var ops = lineDiff(splitLines(states[0]), splitLines(states[1]));
-          var parts = makeScene(surface, false);
-          var code = parts.code;
-          var delEls = [];
-          var addEls = [];
-          ops.forEach(function (op) {
-            var ln = document.createElement("div");
-            ln.className =
-              "diff-line" +
-              (op.type === "del" ? " diff-del" : op.type === "add" ? " diff-add" : "");
-            var sign = document.createElement("span");
-            sign.className = "diff-sign";
-            sign.textContent = op.type === "del" ? "- " : op.type === "add" ? "+ " : "  ";
-            ln.appendChild(sign);
-            op.line.tokens.forEach(function (t) {
-              var s = document.createElement("span");
-              s.className = "tok";
-              s.textContent = t.content;
-              s.style.color = t.color;
-              ln.appendChild(s);
-            });
-            code.appendChild(ln);
-            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);
-          var atDel = start + FADE + 0.3;
-          delEls.forEach(function (el, k) {
-            tl.fromTo(
-              el,
-              { height: 46, opacity: 1 },
-              { height: 0, opacity: 0, duration: DEL, ease: "power2.inOut" },
-              atDel + k * 0.08,
-            );
-          });
-          var atAdd = atDel + DEL + 0.15;
-          addEls.forEach(function (el, k) {
-            tl.set(el, { height: 0, opacity: 0 }, 0);
-            tl.fromTo(
-              el,
-              { height: 0, opacity: 0 },
-              { height: 46, opacity: 1, duration: ADD, ease: "power2.out" },
-              atAdd + k * 0.12,
-            );
-          });
-        }
+    // Pass 1: measure natural size, then make every chip the SAME width (symmetry).
+    var maxW = 0;
+    var chipH = 0;
+    blocks.forEach(function (blk) {
+      var r = blk.getBoundingClientRect();
+      if (r.width > maxW) maxW = r.width;
+      if (r.height > chipH) chipH = r.height;
+    });
+    blocks.forEach(function (blk) {
+      blk.style.width = maxW + "px";
+    });
 
-        function highlight(tl, surface, state, start, targetIdx) {
-          var SWEEP = 0.9;
-          var parts = makeScene(surface, true);
-          var code = parts.code;
-          renderState(code, state);
-          var lines = code.querySelectorAll(".line");
-          fillGutter(parts.gutter, lines.length);
-          var base = code.getBoundingClientRect();
-          var idx = Math.max(0, Math.min(lines.length - 1, targetIdx));
-          var lr = lines[idx].getBoundingClientRect();
-          var box = document.createElement("div");
-          box.className = "hl-box";
-          box.style.left = lr.left - base.left - 8 + "px";
-          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);
-          var at = start + FADE + 0.2;
-          tl.fromTo(
-            box,
-            { width: 0, opacity: 0 },
-            { width: lr.width + 18, opacity: 1, duration: SWEEP, ease: "power2.inOut" },
-            at,
-          );
-          for (var i = 0; i < lines.length; i++) {
-            if (i === idx) continue;
-            tl.fromTo(
-              lines[i],
-              { opacity: 1 },
-              { opacity: 0.45, duration: SWEEP, ease: "power2.inOut" },
-              at,
-            );
-          }
-        }
+    // Pass 2: evenly-stacked, left-aligned, group centered in the surface.
+    var stackH = n * chipH + (n - 1) * GAP;
+    var destLeft = Math.round((W - maxW) / 2);
+    var topY = Math.round((H - stackH) / 2);
+    blocks.forEach(function (blk, i) {
+      var destY = topY + i * (chipH + GAP);
+      blk.style.left = destLeft + "px";
+      blk.style.top = destY + "px";
+      // fly straight in from the left to the shared left edge — clean, no skew
+      var srcX = destLeft - W * 0.32;
+      tl.fromTo(
+        blk,
+        { x: srcX - destLeft, opacity: 0, scale: 0.96 },
+        { x: 0, opacity: 1, scale: 1, duration: FLY, ease: "power3.out" },
+        start + FADE + i * STAGGER,
+      );
+    });
 
-        function scroll(tl, surface, state, start, targetLine) {
-          var SCROLL = 1.7;
-          var parts = makeScene(surface, true);
-          var code = parts.code;
-          renderState(code, state);
-          var lines = code.querySelectorAll(".line");
-          fillGutter(parts.gutter, lines.length);
-          var surfRect = surface.getBoundingClientRect();
-          var idx = Math.max(0, Math.min(lines.length - 1, targetLine - 1));
-          var lr = lines[idx].getBoundingClientRect();
-          var lineCenter = lr.top + lr.height / 2 - surfRect.top;
-          var dy = surfRect.height * 0.5 - lineCenter;
-          var box = document.createElement("div");
-          box.className = "hl-box";
-          box.style.left = lines[idx].offsetLeft - 8 + "px";
-          box.style.top = lines[idx].offsetTop - 1 + "px";
-          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);
-          var at = start + FADE + 0.35;
-          tl.fromTo(
-            [code, parts.gutter],
-            { y: 0 },
-            { y: dy, duration: SCROLL, ease: "power2.inOut" },
-            at,
-          );
-          var arrAt = at + SCROLL;
-          for (var i = 0; i < lines.length; i++) {
-            if (i === idx) continue;
-            tl.fromTo(
-              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);
-        }
+    // Even-padded panel tightly wrapping the uniform stack.
+    var padX = 30;
+    var padY = 24;
+    target.style.left = destLeft - padX + "px";
+    target.style.top = topY - padY + "px";
+    target.style.width = maxW + padX * 2 + "px";
+    target.style.height = stackH + padY * 2 + "px";
+    var landAt = start + FADE + (n - 1) * STAGGER + FLY;
+    tl.set(scene, { opacity: 1 }, 0);
+    tl.to(target, { opacity: 1, duration: 0.5, ease: "power1.out" }, landAt - 0.5);
+  }
 
-        function buildEffect(tl, surface, spec) {
-          var start = 0.45;
-          var seq = T[spec.seq];
-          if (spec.effect === "morph") morph(tl, surface, seq.states, start);
-          else if (spec.effect === "flight") flight(tl, surface, seq.states, start);
-          else if (spec.effect === "typing") typing(tl, surface, seq.states[0], start);
-          else if (spec.effect === "diff") diff(tl, surface, seq.states, start);
-          else if (spec.effect === "highlight")
-            highlight(tl, surface, seq.states[0], start, spec.line || 0);
-          else if (spec.effect === "scroll")
-            scroll(tl, surface, seq.states[0], start, spec.line || 1);
-        }
+  function typing(tl, surface, state, start) {
+    var PER = 0.028; // seconds per character — smooth, fast typewriter
+    var parts = makeScene(surface, true);
+    var code = parts.code;
 
-        function go() {
-          var spec = window.__BLOCK;
-          var surface = document.getElementById("surface");
-          var root = document.getElementById("root");
-          window.__timelines = window.__timelines || {};
-          var tl = gsap.timeline({ paused: true });
-          window.__timelines["code-diff"] = tl; // register synchronously
-          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
-          });
-        }
+    // Per-CHARACTER render (granular reveal reads smoother than per-token pops).
+    code.textContent = "";
+    var line = document.createElement("div");
+    line.className = "line";
+    code.appendChild(line);
+    var chars = [];
+    for (var i = 0; i < state.tokens.length; i++) {
+      var t = state.tokens[i];
+      if (t.content === "\n") {
+        line = document.createElement("div");
+        line.className = "line";
+        code.appendChild(line);
+        continue;
+      }
+      for (var c = 0; c < t.content.length; c++) {
+        var span = document.createElement("span");
+        span.className = "tok";
+        span.textContent = t.content[c];
+        span.style.color = t.color;
+        if (t.fontStyle & 1) span.style.fontStyle = "italic";
+        if (t.fontStyle & 2) span.style.fontWeight = "700";
+        line.appendChild(span);
+        chars.push({ el: span, ws: t.content[c] === " " });
+      }
+    }
+    var last = code.lastChild;
+    if (last && last.className === "line" && last.children.length === 0) code.removeChild(last);
+
+    fillGutter(parts.gutter, code.querySelectorAll(".line").length);
+    var base = code.getBoundingClientRect();
+    var caret = document.createElement("div");
+    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);
+
+    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);
+    }
+    chars.forEach(function (c, i) {
+      var at = t0 + i * PER;
+      tl.set(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);
+      // caret glides at constant speed to each char's right edge (linear = no stop-start jitter)
+      var r = c.el.getBoundingClientRect();
+      tl.to(caret, { x: r.right - base.left, y: r.top - base.top, duration: PER, ease: "none" }, at);
+    });
+  }
+
+  function diff(tl, surface, states, start) {
+    var DEL = 0.55;
+    var ADD = 0.6;
+    var ops = lineDiff(splitLines(states[0]), splitLines(states[1]));
+    var parts = makeScene(surface, false);
+    var code = parts.code;
+    var delEls = [];
+    var addEls = [];
+    ops.forEach(function (op) {
+      var ln = document.createElement("div");
+      ln.className = "diff-line" + (op.type === "del" ? " diff-del" : op.type === "add" ? " diff-add" : "");
+      var sign = document.createElement("span");
+      sign.className = "diff-sign";
+      sign.textContent = op.type === "del" ? "- " : op.type === "add" ? "+ " : "  ";
+      ln.appendChild(sign);
+      op.line.tokens.forEach(function (t) {
+        var s = document.createElement("span");
+        s.className = "tok";
+        s.textContent = t.content;
+        s.style.color = t.color;
+        ln.appendChild(s);
+      });
+      code.appendChild(ln);
+      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);
+    var atDel = start + FADE + 0.3;
+    delEls.forEach(function (el, k) {
+      tl.fromTo(el, { height: 46, opacity: 1 }, { height: 0, opacity: 0, duration: DEL, ease: "power2.inOut" }, atDel + k * 0.08);
+    });
+    var atAdd = atDel + DEL + 0.15;
+    addEls.forEach(function (el, k) {
+      tl.set(el, { height: 0, opacity: 0 }, 0);
+      tl.fromTo(el, { height: 0, opacity: 0 }, { height: 46, opacity: 1, duration: ADD, ease: "power2.out" }, atAdd + k * 0.12);
+    });
+  }
+
+  function highlight(tl, surface, state, start, targetIdx) {
+    var SWEEP = 0.9;
+    var parts = makeScene(surface, true);
+    var code = parts.code;
+    renderState(code, state);
+    var lines = code.querySelectorAll(".line");
+    fillGutter(parts.gutter, lines.length);
+    var base = code.getBoundingClientRect();
+    var idx = Math.max(0, Math.min(lines.length - 1, targetIdx));
+    var lr = lines[idx].getBoundingClientRect();
+    var box = document.createElement("div");
+    box.className = "hl-box";
+    box.style.left = lr.left - base.left - 8 + "px";
+    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);
+    var at = start + FADE + 0.2;
+    tl.fromTo(box, { width: 0, opacity: 0 }, { width: lr.width + 18, opacity: 1, duration: SWEEP, ease: "power2.inOut" }, at);
+    for (var i = 0; i < lines.length; i++) {
+      if (i === idx) continue;
+      tl.fromTo(lines[i], { opacity: 1 }, { opacity: 0.45, duration: SWEEP, ease: "power2.inOut" }, at);
+    }
+  }
+
+  function scroll(tl, surface, state, start, targetLine) {
+    var SCROLL = 1.7;
+    var parts = makeScene(surface, true);
+    var code = parts.code;
+    renderState(code, state);
+    var lines = code.querySelectorAll(".line");
+    fillGutter(parts.gutter, lines.length);
+    var surfRect = surface.getBoundingClientRect();
+    var idx = Math.max(0, Math.min(lines.length - 1, targetLine - 1));
+    var lr = lines[idx].getBoundingClientRect();
+    var lineCenter = lr.top + lr.height / 2 - surfRect.top;
+    var dy = surfRect.height * 0.5 - lineCenter;
+    var box = document.createElement("div");
+    box.className = "hl-box";
+    box.style.left = lines[idx].offsetLeft - 8 + "px";
+    box.style.top = lines[idx].offsetTop - 1 + "px";
+    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);
+    var at = start + FADE + 0.35;
+    tl.fromTo([code, parts.gutter], { y: 0 }, { y: dy, duration: SCROLL, ease: "power2.inOut" }, at);
+    var arrAt = at + SCROLL;
+    for (var i = 0; i < lines.length; i++) {
+      if (i === idx) continue;
+      tl.fromTo(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);
+  }
+
+  function buildEffect(tl, surface, spec) {
+    var start = 0.45;
+    var seq = T[spec.seq];
+    if (spec.effect === "morph") morph(tl, surface, seq.states, start);
+    else if (spec.effect === "flight") flight(tl, surface, seq.states, start);
+    else if (spec.effect === "typing") typing(tl, surface, seq.states[0], start);
+    else if (spec.effect === "diff") diff(tl, surface, seq.states, start);
+    else if (spec.effect === "highlight") highlight(tl, surface, seq.states[0], start, spec.line || 0);
+    else if (spec.effect === "scroll") scroll(tl, surface, seq.states[0], start, spec.line || 1);
+  }
+
+  function go() {
+    var spec = window.__BLOCK;
+    var surface = document.getElementById("surface");
+    var root = document.getElementById("root");
+    window.__timelines = window.__timelines || {};
+    var tl = gsap.timeline({ paused: true });
+    window.__timelines["code-diff"] = tl; // register synchronously
+    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
+    });
+  }
+
+  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
+  else go();
+})();
 
-        if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
-        else go();
-      })();
     </script>
   </body>
 </html>
diff --git a/registry/blocks/code-highlight/code-highlight.html b/registry/blocks/code-highlight/code-highlight.html
index 42bdf43d5d..ee99e23241 100644
--- a/registry/blocks/code-highlight/code-highlight.html
+++ b/registry/blocks/code-highlight/code-highlight.html
@@ -6,225 +6,37 @@
     <title>Code Highlight Sweep</title>
     <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
     <style>
-      * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-      }
-      html,
-      body {
-        width: 1920px;
-        height: 1080px;
-        overflow: hidden;
-        background: #05070b;
-      }
-      #root {
-        position: relative;
-        width: 1920px;
-        height: 1080px;
-        font-family: "JetBrains Mono", monospace;
-        color: #e6edf3;
-      }
-      .bg-field {
-        position: absolute;
-        inset: 0;
-        background: radial-gradient(1200px 700px at 50% 18%, #0e1726 0%, #070b12 55%, #05070b 100%);
-      }
-      .bg-grid {
-        position: absolute;
-        inset: 0;
-        background-image:
-          linear-gradient(rgba(88, 166, 255, 0.05) 1px, transparent 1px),
-          linear-gradient(90deg, rgba(88, 166, 255, 0.05) 1px, transparent 1px);
-        background-size: 64px 64px;
-        mask-image: radial-gradient(1100px 620px at 50% 42%, #000 0%, transparent 78%);
-      }
-      .bg-glow {
-        position: absolute;
-        width: 900px;
-        height: 900px;
-        border-radius: 50%;
-        filter: blur(120px);
-        opacity: 0.5;
-      }
-      .bg-glow.a {
-        background: #1f6feb55;
-        left: -180px;
-        top: -200px;
-      }
-      .bg-glow.b {
-        background: #2ea04355;
-        right: -200px;
-        bottom: -260px;
-      }
-      .editor {
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-        width: 1380px;
-        height: 800px;
-        background: #0b0f17;
-        border: 1px solid #1d2733;
-        border-radius: 16px;
-        box-shadow:
-          0 40px 120px rgba(0, 0, 0, 0.6),
-          0 2px 0 rgba(255, 255, 255, 0.03) inset;
-        overflow: hidden;
-        display: flex;
-        flex-direction: column;
-      }
-      .titlebar {
-        height: 56px;
-        flex: 0 0 56px;
-        display: flex;
-        align-items: center;
-        gap: 16px;
-        padding: 0 22px;
-        background: linear-gradient(#11161f, #0c111a);
-        border-bottom: 1px solid #1b2430;
-      }
-      .dots {
-        display: flex;
-        gap: 10px;
-      }
-      .dot {
-        width: 14px;
-        height: 14px;
-        border-radius: 50%;
-      }
-      .dot.r {
-        background: #ff5f57;
-      }
-      .dot.y {
-        background: #febc2e;
-      }
-      .dot.g {
-        background: #28c840;
-      }
-      .filename {
-        font-size: 19px;
-        color: #8b98a9;
-        letter-spacing: 0.2px;
-      }
-      .filename .accent {
-        color: #d6e2f0;
-      }
-      .code-surface {
-        position: relative;
-        flex: 1 1 auto;
-        overflow: hidden;
-      }
-      .scene {
-        position: absolute;
-        inset: 0;
-        opacity: 0;
-        will-change: opacity;
-      }
-      .code {
-        position: absolute;
-        top: 38px;
-        left: 0;
-        right: 0;
-        padding: 0 44px 0 104px;
-        font-size: 30px;
-        line-height: 46px;
-        font-variant-ligatures: none;
-        tab-size: 2;
-      }
-      .gutter {
-        position: absolute;
-        top: 38px;
-        left: 0;
-        width: 84px;
-        padding-right: 18px;
-        font-size: 30px;
-        line-height: 46px;
-        text-align: right;
-        color: #828c9b;
-        user-select: none;
-      }
-      .ln {
-        display: block;
-        height: 46px;
-      }
-      .line {
-        display: block;
-        min-height: 46px;
-        white-space: pre;
-        position: relative;
-        z-index: 1;
-      }
-      .tok {
-        display: inline-block;
-        white-space: pre;
-        will-change: transform, opacity;
-      }
-      .caret {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 3px;
-        height: 32px;
-        margin-top: 6px;
-        background: #58a6ff;
-        border-radius: 1px;
-        z-index: 3;
-      }
-      .hl-box {
-        position: absolute;
-        background: rgba(88, 166, 255, 0.16);
-        border-left: 3px solid #58a6ff;
-        border-radius: 6px;
-        z-index: 0;
-        overflow: hidden;
-      }
-      .diff-line {
-        display: block;
-        min-height: 0;
-        line-height: 46px;
-        white-space: pre;
-        position: relative;
-        overflow: hidden;
-        padding-left: 14px;
-      }
-      .diff-sign {
-        display: inline-block;
-        width: 22px;
-        color: #41506220;
-      }
-      .diff-del {
-        background: rgba(248, 81, 73, 0.12);
-        box-shadow: inset 3px 0 #f85149;
-      }
-      .diff-add {
-        background: rgba(63, 185, 80, 0.12);
-        box-shadow: inset 3px 0 #3fb950;
-      }
-      .diff-del .diff-sign {
-        color: #f85149;
-      }
-      .diff-add .diff-sign {
-        color: #3fb950;
-      }
-      .flight-block {
-        position: absolute;
-        white-space: pre;
-        font-size: 27px;
-        line-height: 40px;
-        padding: 11px 22px;
-        border-radius: 11px;
-        background: #0f1722;
-        border: 1px solid #233044;
-        box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
-        will-change: transform, opacity;
-      }
-      .flight-target {
-        position: absolute;
-        border: 1.5px dashed #2a3a4f;
-        border-radius: 14px;
-        opacity: 0;
-      }
+      * { margin: 0; padding: 0; box-sizing: border-box; }
+      html, body { width: 1920px; height: 1080px; overflow: hidden; background: #05070b; }
+      #root { position: relative; width: 1920px; height: 1080px; font-family: "JetBrains Mono", monospace; color: #e6edf3; }
+      .bg-field { position: absolute; inset: 0; background: radial-gradient(1200px 700px at 50% 18%, #0e1726 0%, #070b12 55%, #05070b 100%); }
+      .bg-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(88,166,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(88,166,255,0.05) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(1100px 620px at 50% 42%, #000 0%, transparent 78%); }
+      .bg-glow { position: absolute; width: 900px; height: 900px; border-radius: 50%; filter: blur(120px); opacity: 0.5; }
+      .bg-glow.a { background: #1f6feb55; left: -180px; top: -200px; }
+      .bg-glow.b { background: #2ea04355; right: -200px; bottom: -260px; }
+      .editor { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 1380px; height: 800px; background: #0b0f17; border: 1px solid #1d2733; border-radius: 16px; box-shadow: 0 40px 120px rgba(0,0,0,0.6), 0 2px 0 rgba(255,255,255,0.03) inset; overflow: hidden; display: flex; flex-direction: column; }
+      .titlebar { height: 56px; flex: 0 0 56px; display: flex; align-items: center; gap: 16px; padding: 0 22px; background: linear-gradient(#11161f, #0c111a); border-bottom: 1px solid #1b2430; }
+      .dots { display: flex; gap: 10px; }
+      .dot { width: 14px; height: 14px; border-radius: 50%; }
+      .dot.r { background: #ff5f57; } .dot.y { background: #febc2e; } .dot.g { background: #28c840; }
+      .filename { font-size: 19px; color: #8b98a9; letter-spacing: 0.2px; }
+      .filename .accent { color: #d6e2f0; }
+      .code-surface { position: relative; flex: 1 1 auto; overflow: hidden; }
+      .scene { position: absolute; inset: 0; opacity: 0; will-change: opacity; }
+      .code { position: absolute; top: 38px; left: 0; right: 0; padding: 0 44px 0 104px; font-size: 30px; line-height: 46px; font-variant-ligatures: none; tab-size: 2; }
+      .gutter { position: absolute; top: 38px; left: 0; width: 84px; padding-right: 18px; font-size: 30px; line-height: 46px; text-align: right; color: #828c9b; user-select: none; }
+      .ln { display: block; height: 46px; }
+      .line { display: block; min-height: 46px; white-space: pre; position: relative; z-index: 1; }
+      .tok { display: inline-block; white-space: pre; will-change: transform, opacity; }
+      .caret { position: absolute; top: 0; left: 0; width: 3px; height: 32px; margin-top: 6px; background: #58a6ff; border-radius: 1px; z-index: 3; }
+      .hl-box { position: absolute; background: rgba(88,166,255,0.16); border-left: 3px solid #58a6ff; border-radius: 6px; z-index: 0; overflow: hidden; }
+      .diff-line { display: block; min-height: 0; line-height: 46px; white-space: pre; position: relative; overflow: hidden; padding-left: 14px; }
+      .diff-sign { display: inline-block; width: 22px; color: #41506220; }
+      .diff-del { background: rgba(248,81,73,0.12); box-shadow: inset 3px 0 #f85149; }
+      .diff-add { background: rgba(63,185,80,0.12); box-shadow: inset 3px 0 #3fb950; }
+      .diff-del .diff-sign { color: #f85149; } .diff-add .diff-sign { color: #3fb950; }
+      .flight-block { position: absolute; white-space: pre; font-size: 27px; line-height: 40px; padding: 11px 22px; border-radius: 11px; background: #0f1722; border: 1px solid #233044; box-shadow: 0 16px 44px rgba(0,0,0,0.5); will-change: transform, opacity; }
+      .flight-target { position: absolute; border: 1.5px dashed #2a3a4f; border-radius: 14px; opacity: 0; }
     </style>
   </head>
   <body>
@@ -242,744 +54,442 @@
       <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>
-          <span class="filename"
-            ><span class="accent">loadConfig.js</span> — Code Highlight Sweep</span
-          >
+          <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>
         <div class="code-surface" id="surface"></div>
       </div>
     </div>
     <script>
-      window.__TOKENS = {
-        feature: {
-          lang: "js",
-          theme: "github-dark",
-          bg: "#24292e",
-          fg: "#e1e4e8",
-          states: [
-            {
-              code: 'async function loadConfig(path) {\n  const raw = await readFile(path, "utf8")\n  const config = JSON.parse(raw)\n  return validate(config)\n}',
-              tokens: [
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-0",
-                  content: "async",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-1",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-2",
-                  content: "function",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-3",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-4",
-                  content: "loadConfig",
-                  color: "#B392F0",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-5",
-                  content: "(",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-6",
-                  content: "path",
-                  color: "#FFAB70",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-7",
-                  content: ") {",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-8",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-9",
-                  content: "  ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-10",
-                  content: "const",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-11",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-12",
-                  content: "raw",
-                  color: "#79B8FF",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-13",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-14",
-                  content: "=",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-15",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-16",
-                  content: "await",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-17",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-18",
-                  content: "readFile",
-                  color: "#B392F0",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-19",
-                  content: "(path,",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-20",
-                  content: " ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-21",
-                  content: '"utf8"',
-                  color: "#9ECBFF",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-22",
-                  content: ")",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-23",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-24",
-                  content: "  ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-25",
-                  content: "const",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-26",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-27",
-                  content: "config",
-                  color: "#79B8FF",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-28",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-29",
-                  content: "=",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-30",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-31",
-                  content: "JSON",
-                  color: "#79B8FF",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-32",
-                  content: ".",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-33",
-                  content: "parse",
-                  color: "#B392F0",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-34",
-                  content: "(raw)",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-35",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-36",
-                  content: "  ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-37",
-                  content: "return",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-38",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-39",
-                  content: "validate",
-                  color: "#B392F0",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-40",
-                  content: "(config)",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-41",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-42",
-                  content: "}",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-43",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-              ],
-            },
-          ],
-        },
-      };
-      window.__BLOCK = {
-        id: "code-highlight",
-        effect: "highlight",
-        seq: "feature",
-        line: 1,
-        duration: 5,
-      };
+      window.__TOKENS = {"feature":{"lang":"js","theme":"github-dark","bg":"#24292e","fg":"#e1e4e8","states":[{"code":"async function loadConfig(path) {\n  const raw = await readFile(path, \"utf8\")\n  const config = JSON.parse(raw)\n  return validate(config)\n}","tokens":[{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-0","content":"async","color":"#F97583","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-1","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-2","content":"function","color":"#F97583","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-3","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-4","content":"loadConfig","color":"#B392F0","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-5","content":"(","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-6","content":"path","color":"#FFAB70","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-7","content":") {","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-8","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-9","content":"  ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-10","content":"const","color":"#F97583","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-11","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-12","content":"raw","color":"#79B8FF","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-13","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-14","content":"=","color":"#F97583","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-15","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-16","content":"await","color":"#F97583","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-17","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-18","content":"readFile","color":"#B392F0","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-19","content":"(path,","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-20","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-21","content":"\"utf8\"","color":"#9ECBFF","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-22","content":")","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-23","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-24","content":"  ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-25","content":"const","color":"#F97583","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-26","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-27","content":"config","color":"#79B8FF","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-28","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-29","content":"=","color":"#F97583","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-30","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-31","content":"JSON","color":"#79B8FF","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-32","content":".","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-33","content":"parse","color":"#B392F0","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-34","content":"(raw)","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-35","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-36","content":"  ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-37","content":"return","color":"#F97583","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-38","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-39","content":"validate","color":"#B392F0","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-40","content":"(config)","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-41","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-42","content":"}","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-43","content":"\n","color":"#e1e4e8","fontStyle":0}]}]}};
+      window.__BLOCK = {"id":"code-highlight","effect":"highlight","seq":"feature","line":1,"duration":5};
     </script>
     <script>
-      // 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
-      // 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].
-      (function () {
-        "use strict";
-        var T = window.__TOKENS || {};
+// 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
+// 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].
+(function () {
+  "use strict";
+  var T = window.__TOKENS || {};
 
-        function lineDiv() {
-          var d = document.createElement("div");
-          d.className = "line";
-          return d;
-        }
+  function lineDiv() {
+    var d = document.createElement("div");
+    d.className = "line";
+    return d;
+  }
 
-        // Render a code state's keyed tokens into codeEl as lines of inline-block .tok spans.
-        function renderState(codeEl, state) {
-          codeEl.textContent = "";
-          var keyToEl = new Map();
-          var line = lineDiv();
-          codeEl.appendChild(line);
-          for (var i = 0; i < state.tokens.length; i++) {
-            var t = state.tokens[i];
-            if (t.content === "\n") {
-              line = lineDiv();
-              codeEl.appendChild(line);
-              continue;
-            }
-            var span = document.createElement("span");
-            span.className = "tok";
-            span.textContent = t.content;
-            span.style.color = t.color;
-            if (t.fontStyle & 1) span.style.fontStyle = "italic";
-            if (t.fontStyle & 2) span.style.fontWeight = "700";
-            line.appendChild(span);
-            keyToEl.set(t.key, span);
-          }
-          var last = codeEl.lastChild;
-          if (last && last.className === "line" && last.children.length === 0)
-            codeEl.removeChild(last);
-          return keyToEl;
-        }
+  // Render a code state's keyed tokens into codeEl as lines of inline-block .tok spans.
+  function renderState(codeEl, state) {
+    codeEl.textContent = "";
+    var keyToEl = new Map();
+    var line = lineDiv();
+    codeEl.appendChild(line);
+    for (var i = 0; i < state.tokens.length; i++) {
+      var t = state.tokens[i];
+      if (t.content === "\n") {
+        line = lineDiv();
+        codeEl.appendChild(line);
+        continue;
+      }
+      var span = document.createElement("span");
+      span.className = "tok";
+      span.textContent = t.content;
+      span.style.color = t.color;
+      if (t.fontStyle & 1) span.style.fontStyle = "italic";
+      if (t.fontStyle & 2) span.style.fontWeight = "700";
+      line.appendChild(span);
+      keyToEl.set(t.key, span);
+    }
+    var last = codeEl.lastChild;
+    if (last && last.className === "line" && last.children.length === 0) codeEl.removeChild(last);
+    return keyToEl;
+  }
 
-        function rectsOf(keyToEl) {
-          var m = new Map();
-          keyToEl.forEach(function (el, k) {
-            var r = el.getBoundingClientRect();
-            m.set(k, { left: r.left, top: r.top });
-          });
-          return m;
-        }
+  function rectsOf(keyToEl) {
+    var m = new Map();
+    keyToEl.forEach(function (el, k) {
+      var r = el.getBoundingClientRect();
+      m.set(k, { left: r.left, top: r.top });
+    });
+    return m;
+  }
 
-        function makeScene(surface, withGutter) {
-          var scene = document.createElement("div");
-          scene.className = "scene";
-          if (withGutter) {
-            var g = document.createElement("div");
-            g.className = "gutter";
-            scene.appendChild(g);
-          }
-          var code = document.createElement("div");
-          code.className = "code";
-          scene.appendChild(code);
-          surface.appendChild(scene);
-          return { scene: scene, code: code, gutter: scene.querySelector(".gutter") };
-        }
+  function makeScene(surface, withGutter) {
+    var scene = document.createElement("div");
+    scene.className = "scene";
+    if (withGutter) {
+      var g = document.createElement("div");
+      g.className = "gutter";
+      scene.appendChild(g);
+    }
+    var code = document.createElement("div");
+    code.className = "code";
+    scene.appendChild(code);
+    surface.appendChild(scene);
+    return { scene: scene, code: code, gutter: scene.querySelector(".gutter") };
+  }
 
-        function fillGutter(g, n) {
-          var html = "";
-          for (var i = 1; i <= n; i++) html += '<span class="ln">' + i + "</span>";
-          g.innerHTML = html;
-        }
+  function fillGutter(g, n) {
+    var html = "";
+    for (var i = 1; i <= n; i++) html += '<span class="ln">' + i + "</span>";
+    g.innerHTML = html;
+  }
 
-        function splitLines(state) {
-          var lines = [{ text: "", tokens: [] }];
-          for (var i = 0; i < state.tokens.length; i++) {
-            var t = state.tokens[i];
-            if (t.content === "\n") {
-              lines.push({ text: "", tokens: [] });
-              continue;
-            }
-            var cur = lines[lines.length - 1];
-            cur.tokens.push(t);
-            cur.text += t.content;
-          }
-          if (lines.length && lines[lines.length - 1].tokens.length === 0) lines.pop();
-          return lines;
-        }
+  function splitLines(state) {
+    var lines = [{ text: "", tokens: [] }];
+    for (var i = 0; i < state.tokens.length; i++) {
+      var t = state.tokens[i];
+      if (t.content === "\n") {
+        lines.push({ text: "", tokens: [] });
+        continue;
+      }
+      var cur = lines[lines.length - 1];
+      cur.tokens.push(t);
+      cur.text += t.content;
+    }
+    if (lines.length && lines[lines.length - 1].tokens.length === 0) lines.pop();
+    return lines;
+  }
 
-        function lineDiff(a, b) {
-          var n = a.length;
-          var m = b.length;
-          var dp = [];
-          for (var i = 0; i <= n; i++) dp.push(new Array(m + 1).fill(0));
-          for (var i = n - 1; i >= 0; i--) {
-            for (var j = m - 1; j >= 0; j--) {
-              dp[i][j] =
-                a[i].text === b[j].text
-                  ? dp[i + 1][j + 1] + 1
-                  : Math.max(dp[i + 1][j], dp[i][j + 1]);
-            }
-          }
-          var ops = [];
-          var i = 0;
-          var j = 0;
-          while (i < n && j < m) {
-            if (a[i].text === b[j].text) {
-              ops.push({ type: "same", line: b[j] });
-              i++;
-              j++;
-            } else if (dp[i + 1][j] >= dp[i][j + 1]) {
-              ops.push({ type: "del", line: a[i] });
-              i++;
-            } else {
-              ops.push({ type: "add", line: b[j] });
-              j++;
-            }
-          }
-          while (i < n) ops.push({ type: "del", line: a[i++] });
-          while (j < m) ops.push({ type: "add", line: b[j++] });
-          return ops;
-        }
+  function lineDiff(a, b) {
+    var n = a.length;
+    var m = b.length;
+    var dp = [];
+    for (var i = 0; i <= n; i++) dp.push(new Array(m + 1).fill(0));
+    for (var i = n - 1; i >= 0; i--) {
+      for (var j = m - 1; j >= 0; j--) {
+        dp[i][j] = a[i].text === b[j].text ? dp[i + 1][j + 1] + 1 : Math.max(dp[i + 1][j], dp[i][j + 1]);
+      }
+    }
+    var ops = [];
+    var i = 0;
+    var j = 0;
+    while (i < n && j < m) {
+      if (a[i].text === b[j].text) {
+        ops.push({ type: "same", line: b[j] });
+        i++;
+        j++;
+      } else if (dp[i + 1][j] >= dp[i][j + 1]) {
+        ops.push({ type: "del", line: a[i] });
+        i++;
+      } else {
+        ops.push({ type: "add", line: b[j] });
+        j++;
+      }
+    }
+    while (i < n) ops.push({ type: "del", line: a[i++] });
+    while (j < m) ops.push({ type: "add", line: b[j++] });
+    return ops;
+  }
 
-        // ---- single-scene effect builders (fade in, play, hold to end) -------------
-        var FADE = 0.45;
+  // ---- single-scene effect builders (fade in, play, hold to end) -------------
+  var FADE = 0.45;
 
-        function morph(tl, surface, states, start) {
-          var STEP = 1.2;
-          var HOLD = 1.0;
-          var t = start;
-          for (var s = 0; s < states.length - 1; s++) {
-            var parts = makeScene(surface, false);
-            var code = parts.code;
-            var fromEls = renderState(code, states[s]);
-            var fromR = rectsOf(fromEls);
-            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;
-            toEls.forEach(function (el, k) {
-              var fr = fromR.get(k);
-              var tr = toR.get(k);
-              if (fr) {
-                seg.fromTo(
-                  el,
-                  { x: fr.left - tr.left, y: fr.top - tr.top },
-                  { x: 0, y: 0, duration: STEP, ease: "power2.inOut" },
-                  0,
-                );
-              } else {
-                seg.fromTo(
-                  el,
-                  { opacity: 0 },
-                  { opacity: 1, duration: FD, ease: "power1.out" },
-                  ENTER_AT,
-                );
-              }
-            });
-            var toKeys = new Set(toEls.keys());
-            var fromState = states[s];
-            for (var i = 0; i < fromState.tokens.length; i++) {
-              var tok = fromState.tokens[i];
-              if (tok.content === "\n" || toKeys.has(tok.key) || !fromR.has(tok.key)) continue;
-              var r = fromR.get(tok.key);
-              var span = document.createElement("span");
-              span.className = "tok";
-              span.textContent = tok.content;
-              span.style.position = "absolute";
-              span.style.left = r.left - base.left + "px";
-              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);
-            }
-            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);
-            if (!isLast)
-              tl.to(parts.scene, { opacity: 0, duration: FADE, ease: "power1.in" }, segEnd - FADE);
-            tl.add(seg, segStart);
-            t = segEnd - FADE;
-          }
+  function morph(tl, surface, states, start) {
+    var STEP = 1.2;
+    var HOLD = 1.0;
+    var t = start;
+    for (var s = 0; s < states.length - 1; s++) {
+      var parts = makeScene(surface, false);
+      var code = parts.code;
+      var fromEls = renderState(code, states[s]);
+      var fromR = rectsOf(fromEls);
+      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;
+      toEls.forEach(function (el, k) {
+        var fr = fromR.get(k);
+        var tr = toR.get(k);
+        if (fr) {
+          seg.fromTo(el, { x: fr.left - tr.left, y: fr.top - tr.top }, { x: 0, y: 0, duration: STEP, ease: "power2.inOut" }, 0);
+        } else {
+          seg.fromTo(el, { opacity: 0 }, { opacity: 1, duration: FD, ease: "power1.out" }, ENTER_AT);
         }
+      });
+      var toKeys = new Set(toEls.keys());
+      var fromState = states[s];
+      for (var i = 0; i < fromState.tokens.length; i++) {
+        var tok = fromState.tokens[i];
+        if (tok.content === "\n" || toKeys.has(tok.key) || !fromR.has(tok.key)) continue;
+        var r = fromR.get(tok.key);
+        var span = document.createElement("span");
+        span.className = "tok";
+        span.textContent = tok.content;
+        span.style.position = "absolute";
+        span.style.left = r.left - base.left + "px";
+        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);
+      }
+      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);
+      if (!isLast) tl.to(parts.scene, { opacity: 0, duration: FADE, ease: "power1.in" }, segEnd - FADE);
+      tl.add(seg, segStart);
+      t = segEnd - FADE;
+    }
+  }
 
-        function flight(tl, surface, states, start) {
-          var FLY = 1.0;
-          var STAGGER = 0.3;
-          var parts = makeScene(surface, false);
-          parts.code.remove();
-          var scene = parts.scene;
-          var target = document.createElement("div");
-          target.className = "flight-target";
-          scene.appendChild(target);
-          var W = surface.clientWidth;
-          var H = surface.clientHeight;
-          var leftCx = W * 0.27;
-          var rightCx = W * 0.71;
-          var midY = H * 0.46;
-          var gap = 70;
-          var blocks = states.map(function (st) {
-            var blk = document.createElement("div");
-            blk.className = "flight-block";
-            renderState(blk, st);
-            scene.appendChild(blk);
-            return blk;
-          });
-          var n = blocks.length;
-          var maxW = 0;
-          var firstDestY = 0;
-          blocks.forEach(function (blk, i) {
-            var bw = blk.getBoundingClientRect().width;
-            if (bw > maxW) maxW = bw;
-            var destX = rightCx - bw / 2;
-            var destY = midY + (i - (n - 1) / 2) * gap;
-            if (i === 0) firstDestY = destY;
-            var srcX = leftCx - bw / 2;
-            var srcY = midY + (i - (n - 1) / 2) * (gap + 16);
-            blk.style.left = destX + "px";
-            blk.style.top = destY + "px";
-            tl.fromTo(
-              blk,
-              { x: srcX - destX, y: srcY - destY, opacity: 0, rotation: -5, scale: 0.9 },
-              {
-                x: 0,
-                y: 0,
-                opacity: 1,
-                rotation: 0,
-                scale: 1,
-                duration: FLY,
-                ease: "power3.inOut",
-              },
-              start + FADE + i * STAGGER,
-            );
-          });
-          target.style.left = rightCx - maxW / 2 - 26 + "px";
-          target.style.top = firstDestY - 18 + "px";
-          target.style.width = maxW + 52 + "px";
-          target.style.height = (n - 1) * gap + 62 + "px";
-          var landAt = start + FADE + (n - 1) * STAGGER + FLY;
-          tl.set(scene, { opacity: 1 }, 0);
-          tl.to(target, { opacity: 1, duration: 0.5, ease: "power1.out" }, landAt - 0.5);
-        }
+  function flight(tl, surface, states, start) {
+    var FLY = 0.95;
+    var STAGGER = 0.26;
+    var GAP = 20;
+    var parts = makeScene(surface, false);
+    parts.code.remove();
+    var scene = parts.scene;
+    var target = document.createElement("div");
+    target.className = "flight-target";
+    scene.appendChild(target);
+    var W = surface.clientWidth;
+    var H = surface.clientHeight;
 
-        function typing(tl, surface, state, start) {
-          var PER = 0.05;
-          var parts = makeScene(surface, true);
-          var code = parts.code;
-          var keyToEl = renderState(code, state);
-          fillGutter(parts.gutter, code.querySelectorAll(".line").length);
-          var base = code.getBoundingClientRect();
-          var caret = document.createElement("div");
-          caret.className = "caret";
-          code.appendChild(caret);
-          var toks = [];
-          keyToEl.forEach(function (el) {
-            toks.push(el);
-          });
-          tl.set(parts.scene, { opacity: 0 }, 0);
-          tl.to(parts.scene, { opacity: 1, duration: FADE, ease: "power1.out" }, start);
-          var t0 = start + FADE;
-          if (toks.length) {
-            var r0 = toks[0].getBoundingClientRect();
-            tl.set(caret, { x: r0.left - base.left, y: r0.top - base.top, opacity: 1 }, 0);
-          }
-          toks.forEach(function (el, i) {
-            tl.set(el, { opacity: 0 }, 0);
-            tl.to(el, { opacity: 1, duration: 0.08, ease: "none" }, t0 + i * PER);
-            var r = el.getBoundingClientRect();
-            tl.set(caret, { x: r.right - base.left, y: r.top - base.top }, t0 + i * PER);
-          });
-        }
+    var blocks = states.map(function (st) {
+      var blk = document.createElement("div");
+      blk.className = "flight-block";
+      renderState(blk, st);
+      scene.appendChild(blk);
+      return blk;
+    });
+    var n = blocks.length;
 
-        function diff(tl, surface, states, start) {
-          var DEL = 0.55;
-          var ADD = 0.6;
-          var ops = lineDiff(splitLines(states[0]), splitLines(states[1]));
-          var parts = makeScene(surface, false);
-          var code = parts.code;
-          var delEls = [];
-          var addEls = [];
-          ops.forEach(function (op) {
-            var ln = document.createElement("div");
-            ln.className =
-              "diff-line" +
-              (op.type === "del" ? " diff-del" : op.type === "add" ? " diff-add" : "");
-            var sign = document.createElement("span");
-            sign.className = "diff-sign";
-            sign.textContent = op.type === "del" ? "- " : op.type === "add" ? "+ " : "  ";
-            ln.appendChild(sign);
-            op.line.tokens.forEach(function (t) {
-              var s = document.createElement("span");
-              s.className = "tok";
-              s.textContent = t.content;
-              s.style.color = t.color;
-              ln.appendChild(s);
-            });
-            code.appendChild(ln);
-            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);
-          var atDel = start + FADE + 0.3;
-          delEls.forEach(function (el, k) {
-            tl.fromTo(
-              el,
-              { height: 46, opacity: 1 },
-              { height: 0, opacity: 0, duration: DEL, ease: "power2.inOut" },
-              atDel + k * 0.08,
-            );
-          });
-          var atAdd = atDel + DEL + 0.15;
-          addEls.forEach(function (el, k) {
-            tl.set(el, { height: 0, opacity: 0 }, 0);
-            tl.fromTo(
-              el,
-              { height: 0, opacity: 0 },
-              { height: 46, opacity: 1, duration: ADD, ease: "power2.out" },
-              atAdd + k * 0.12,
-            );
-          });
-        }
+    // Pass 1: measure natural size, then make every chip the SAME width (symmetry).
+    var maxW = 0;
+    var chipH = 0;
+    blocks.forEach(function (blk) {
+      var r = blk.getBoundingClientRect();
+      if (r.width > maxW) maxW = r.width;
+      if (r.height > chipH) chipH = r.height;
+    });
+    blocks.forEach(function (blk) {
+      blk.style.width = maxW + "px";
+    });
 
-        function highlight(tl, surface, state, start, targetIdx) {
-          var SWEEP = 0.9;
-          var parts = makeScene(surface, true);
-          var code = parts.code;
-          renderState(code, state);
-          var lines = code.querySelectorAll(".line");
-          fillGutter(parts.gutter, lines.length);
-          var base = code.getBoundingClientRect();
-          var idx = Math.max(0, Math.min(lines.length - 1, targetIdx));
-          var lr = lines[idx].getBoundingClientRect();
-          var box = document.createElement("div");
-          box.className = "hl-box";
-          box.style.left = lr.left - base.left - 8 + "px";
-          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);
-          var at = start + FADE + 0.2;
-          tl.fromTo(
-            box,
-            { width: 0, opacity: 0 },
-            { width: lr.width + 18, opacity: 1, duration: SWEEP, ease: "power2.inOut" },
-            at,
-          );
-          for (var i = 0; i < lines.length; i++) {
-            if (i === idx) continue;
-            tl.fromTo(
-              lines[i],
-              { opacity: 1 },
-              { opacity: 0.45, duration: SWEEP, ease: "power2.inOut" },
-              at,
-            );
-          }
-        }
+    // Pass 2: evenly-stacked, left-aligned, group centered in the surface.
+    var stackH = n * chipH + (n - 1) * GAP;
+    var destLeft = Math.round((W - maxW) / 2);
+    var topY = Math.round((H - stackH) / 2);
+    blocks.forEach(function (blk, i) {
+      var destY = topY + i * (chipH + GAP);
+      blk.style.left = destLeft + "px";
+      blk.style.top = destY + "px";
+      // fly straight in from the left to the shared left edge — clean, no skew
+      var srcX = destLeft - W * 0.32;
+      tl.fromTo(
+        blk,
+        { x: srcX - destLeft, opacity: 0, scale: 0.96 },
+        { x: 0, opacity: 1, scale: 1, duration: FLY, ease: "power3.out" },
+        start + FADE + i * STAGGER,
+      );
+    });
 
-        function scroll(tl, surface, state, start, targetLine) {
-          var SCROLL = 1.7;
-          var parts = makeScene(surface, true);
-          var code = parts.code;
-          renderState(code, state);
-          var lines = code.querySelectorAll(".line");
-          fillGutter(parts.gutter, lines.length);
-          var surfRect = surface.getBoundingClientRect();
-          var idx = Math.max(0, Math.min(lines.length - 1, targetLine - 1));
-          var lr = lines[idx].getBoundingClientRect();
-          var lineCenter = lr.top + lr.height / 2 - surfRect.top;
-          var dy = surfRect.height * 0.5 - lineCenter;
-          var box = document.createElement("div");
-          box.className = "hl-box";
-          box.style.left = lines[idx].offsetLeft - 8 + "px";
-          box.style.top = lines[idx].offsetTop - 1 + "px";
-          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);
-          var at = start + FADE + 0.35;
-          tl.fromTo(
-            [code, parts.gutter],
-            { y: 0 },
-            { y: dy, duration: SCROLL, ease: "power2.inOut" },
-            at,
-          );
-          var arrAt = at + SCROLL;
-          for (var i = 0; i < lines.length; i++) {
-            if (i === idx) continue;
-            tl.fromTo(
-              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);
-        }
+    // Even-padded panel tightly wrapping the uniform stack.
+    var padX = 30;
+    var padY = 24;
+    target.style.left = destLeft - padX + "px";
+    target.style.top = topY - padY + "px";
+    target.style.width = maxW + padX * 2 + "px";
+    target.style.height = stackH + padY * 2 + "px";
+    var landAt = start + FADE + (n - 1) * STAGGER + FLY;
+    tl.set(scene, { opacity: 1 }, 0);
+    tl.to(target, { opacity: 1, duration: 0.5, ease: "power1.out" }, landAt - 0.5);
+  }
 
-        function buildEffect(tl, surface, spec) {
-          var start = 0.45;
-          var seq = T[spec.seq];
-          if (spec.effect === "morph") morph(tl, surface, seq.states, start);
-          else if (spec.effect === "flight") flight(tl, surface, seq.states, start);
-          else if (spec.effect === "typing") typing(tl, surface, seq.states[0], start);
-          else if (spec.effect === "diff") diff(tl, surface, seq.states, start);
-          else if (spec.effect === "highlight")
-            highlight(tl, surface, seq.states[0], start, spec.line || 0);
-          else if (spec.effect === "scroll")
-            scroll(tl, surface, seq.states[0], start, spec.line || 1);
-        }
+  function typing(tl, surface, state, start) {
+    var PER = 0.028; // seconds per character — smooth, fast typewriter
+    var parts = makeScene(surface, true);
+    var code = parts.code;
 
-        function go() {
-          var spec = window.__BLOCK;
-          var surface = document.getElementById("surface");
-          var root = document.getElementById("root");
-          window.__timelines = window.__timelines || {};
-          var tl = gsap.timeline({ paused: true });
-          window.__timelines["code-highlight"] = tl; // register synchronously
-          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
-          });
-        }
+    // Per-CHARACTER render (granular reveal reads smoother than per-token pops).
+    code.textContent = "";
+    var line = document.createElement("div");
+    line.className = "line";
+    code.appendChild(line);
+    var chars = [];
+    for (var i = 0; i < state.tokens.length; i++) {
+      var t = state.tokens[i];
+      if (t.content === "\n") {
+        line = document.createElement("div");
+        line.className = "line";
+        code.appendChild(line);
+        continue;
+      }
+      for (var c = 0; c < t.content.length; c++) {
+        var span = document.createElement("span");
+        span.className = "tok";
+        span.textContent = t.content[c];
+        span.style.color = t.color;
+        if (t.fontStyle & 1) span.style.fontStyle = "italic";
+        if (t.fontStyle & 2) span.style.fontWeight = "700";
+        line.appendChild(span);
+        chars.push({ el: span, ws: t.content[c] === " " });
+      }
+    }
+    var last = code.lastChild;
+    if (last && last.className === "line" && last.children.length === 0) code.removeChild(last);
+
+    fillGutter(parts.gutter, code.querySelectorAll(".line").length);
+    var base = code.getBoundingClientRect();
+    var caret = document.createElement("div");
+    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);
+
+    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);
+    }
+    chars.forEach(function (c, i) {
+      var at = t0 + i * PER;
+      tl.set(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);
+      // caret glides at constant speed to each char's right edge (linear = no stop-start jitter)
+      var r = c.el.getBoundingClientRect();
+      tl.to(caret, { x: r.right - base.left, y: r.top - base.top, duration: PER, ease: "none" }, at);
+    });
+  }
+
+  function diff(tl, surface, states, start) {
+    var DEL = 0.55;
+    var ADD = 0.6;
+    var ops = lineDiff(splitLines(states[0]), splitLines(states[1]));
+    var parts = makeScene(surface, false);
+    var code = parts.code;
+    var delEls = [];
+    var addEls = [];
+    ops.forEach(function (op) {
+      var ln = document.createElement("div");
+      ln.className = "diff-line" + (op.type === "del" ? " diff-del" : op.type === "add" ? " diff-add" : "");
+      var sign = document.createElement("span");
+      sign.className = "diff-sign";
+      sign.textContent = op.type === "del" ? "- " : op.type === "add" ? "+ " : "  ";
+      ln.appendChild(sign);
+      op.line.tokens.forEach(function (t) {
+        var s = document.createElement("span");
+        s.className = "tok";
+        s.textContent = t.content;
+        s.style.color = t.color;
+        ln.appendChild(s);
+      });
+      code.appendChild(ln);
+      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);
+    var atDel = start + FADE + 0.3;
+    delEls.forEach(function (el, k) {
+      tl.fromTo(el, { height: 46, opacity: 1 }, { height: 0, opacity: 0, duration: DEL, ease: "power2.inOut" }, atDel + k * 0.08);
+    });
+    var atAdd = atDel + DEL + 0.15;
+    addEls.forEach(function (el, k) {
+      tl.set(el, { height: 0, opacity: 0 }, 0);
+      tl.fromTo(el, { height: 0, opacity: 0 }, { height: 46, opacity: 1, duration: ADD, ease: "power2.out" }, atAdd + k * 0.12);
+    });
+  }
+
+  function highlight(tl, surface, state, start, targetIdx) {
+    var SWEEP = 0.9;
+    var parts = makeScene(surface, true);
+    var code = parts.code;
+    renderState(code, state);
+    var lines = code.querySelectorAll(".line");
+    fillGutter(parts.gutter, lines.length);
+    var base = code.getBoundingClientRect();
+    var idx = Math.max(0, Math.min(lines.length - 1, targetIdx));
+    var lr = lines[idx].getBoundingClientRect();
+    var box = document.createElement("div");
+    box.className = "hl-box";
+    box.style.left = lr.left - base.left - 8 + "px";
+    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);
+    var at = start + FADE + 0.2;
+    tl.fromTo(box, { width: 0, opacity: 0 }, { width: lr.width + 18, opacity: 1, duration: SWEEP, ease: "power2.inOut" }, at);
+    for (var i = 0; i < lines.length; i++) {
+      if (i === idx) continue;
+      tl.fromTo(lines[i], { opacity: 1 }, { opacity: 0.45, duration: SWEEP, ease: "power2.inOut" }, at);
+    }
+  }
+
+  function scroll(tl, surface, state, start, targetLine) {
+    var SCROLL = 1.7;
+    var parts = makeScene(surface, true);
+    var code = parts.code;
+    renderState(code, state);
+    var lines = code.querySelectorAll(".line");
+    fillGutter(parts.gutter, lines.length);
+    var surfRect = surface.getBoundingClientRect();
+    var idx = Math.max(0, Math.min(lines.length - 1, targetLine - 1));
+    var lr = lines[idx].getBoundingClientRect();
+    var lineCenter = lr.top + lr.height / 2 - surfRect.top;
+    var dy = surfRect.height * 0.5 - lineCenter;
+    var box = document.createElement("div");
+    box.className = "hl-box";
+    box.style.left = lines[idx].offsetLeft - 8 + "px";
+    box.style.top = lines[idx].offsetTop - 1 + "px";
+    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);
+    var at = start + FADE + 0.35;
+    tl.fromTo([code, parts.gutter], { y: 0 }, { y: dy, duration: SCROLL, ease: "power2.inOut" }, at);
+    var arrAt = at + SCROLL;
+    for (var i = 0; i < lines.length; i++) {
+      if (i === idx) continue;
+      tl.fromTo(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);
+  }
+
+  function buildEffect(tl, surface, spec) {
+    var start = 0.45;
+    var seq = T[spec.seq];
+    if (spec.effect === "morph") morph(tl, surface, seq.states, start);
+    else if (spec.effect === "flight") flight(tl, surface, seq.states, start);
+    else if (spec.effect === "typing") typing(tl, surface, seq.states[0], start);
+    else if (spec.effect === "diff") diff(tl, surface, seq.states, start);
+    else if (spec.effect === "highlight") highlight(tl, surface, seq.states[0], start, spec.line || 0);
+    else if (spec.effect === "scroll") scroll(tl, surface, seq.states[0], start, spec.line || 1);
+  }
+
+  function go() {
+    var spec = window.__BLOCK;
+    var surface = document.getElementById("surface");
+    var root = document.getElementById("root");
+    window.__timelines = window.__timelines || {};
+    var tl = gsap.timeline({ paused: true });
+    window.__timelines["code-highlight"] = tl; // register synchronously
+    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
+    });
+  }
+
+  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
+  else go();
+})();
 
-        if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
-        else go();
-      })();
     </script>
   </body>
 </html>
diff --git a/registry/blocks/code-morph/code-morph.html b/registry/blocks/code-morph/code-morph.html
index 25ca145468..f1030c8648 100644
--- a/registry/blocks/code-morph/code-morph.html
+++ b/registry/blocks/code-morph/code-morph.html
@@ -6,225 +6,37 @@
     <title>Code Morph</title>
     <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
     <style>
-      * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-      }
-      html,
-      body {
-        width: 1920px;
-        height: 1080px;
-        overflow: hidden;
-        background: #05070b;
-      }
-      #root {
-        position: relative;
-        width: 1920px;
-        height: 1080px;
-        font-family: "JetBrains Mono", monospace;
-        color: #e6edf3;
-      }
-      .bg-field {
-        position: absolute;
-        inset: 0;
-        background: radial-gradient(1200px 700px at 50% 18%, #0e1726 0%, #070b12 55%, #05070b 100%);
-      }
-      .bg-grid {
-        position: absolute;
-        inset: 0;
-        background-image:
-          linear-gradient(rgba(88, 166, 255, 0.05) 1px, transparent 1px),
-          linear-gradient(90deg, rgba(88, 166, 255, 0.05) 1px, transparent 1px);
-        background-size: 64px 64px;
-        mask-image: radial-gradient(1100px 620px at 50% 42%, #000 0%, transparent 78%);
-      }
-      .bg-glow {
-        position: absolute;
-        width: 900px;
-        height: 900px;
-        border-radius: 50%;
-        filter: blur(120px);
-        opacity: 0.5;
-      }
-      .bg-glow.a {
-        background: #1f6feb55;
-        left: -180px;
-        top: -200px;
-      }
-      .bg-glow.b {
-        background: #2ea04355;
-        right: -200px;
-        bottom: -260px;
-      }
-      .editor {
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-        width: 1380px;
-        height: 800px;
-        background: #0b0f17;
-        border: 1px solid #1d2733;
-        border-radius: 16px;
-        box-shadow:
-          0 40px 120px rgba(0, 0, 0, 0.6),
-          0 2px 0 rgba(255, 255, 255, 0.03) inset;
-        overflow: hidden;
-        display: flex;
-        flex-direction: column;
-      }
-      .titlebar {
-        height: 56px;
-        flex: 0 0 56px;
-        display: flex;
-        align-items: center;
-        gap: 16px;
-        padding: 0 22px;
-        background: linear-gradient(#11161f, #0c111a);
-        border-bottom: 1px solid #1b2430;
-      }
-      .dots {
-        display: flex;
-        gap: 10px;
-      }
-      .dot {
-        width: 14px;
-        height: 14px;
-        border-radius: 50%;
-      }
-      .dot.r {
-        background: #ff5f57;
-      }
-      .dot.y {
-        background: #febc2e;
-      }
-      .dot.g {
-        background: #28c840;
-      }
-      .filename {
-        font-size: 19px;
-        color: #8b98a9;
-        letter-spacing: 0.2px;
-      }
-      .filename .accent {
-        color: #d6e2f0;
-      }
-      .code-surface {
-        position: relative;
-        flex: 1 1 auto;
-        overflow: hidden;
-      }
-      .scene {
-        position: absolute;
-        inset: 0;
-        opacity: 0;
-        will-change: opacity;
-      }
-      .code {
-        position: absolute;
-        top: 38px;
-        left: 0;
-        right: 0;
-        padding: 0 44px 0 104px;
-        font-size: 30px;
-        line-height: 46px;
-        font-variant-ligatures: none;
-        tab-size: 2;
-      }
-      .gutter {
-        position: absolute;
-        top: 38px;
-        left: 0;
-        width: 84px;
-        padding-right: 18px;
-        font-size: 30px;
-        line-height: 46px;
-        text-align: right;
-        color: #828c9b;
-        user-select: none;
-      }
-      .ln {
-        display: block;
-        height: 46px;
-      }
-      .line {
-        display: block;
-        min-height: 46px;
-        white-space: pre;
-        position: relative;
-        z-index: 1;
-      }
-      .tok {
-        display: inline-block;
-        white-space: pre;
-        will-change: transform, opacity;
-      }
-      .caret {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 3px;
-        height: 32px;
-        margin-top: 6px;
-        background: #58a6ff;
-        border-radius: 1px;
-        z-index: 3;
-      }
-      .hl-box {
-        position: absolute;
-        background: rgba(88, 166, 255, 0.16);
-        border-left: 3px solid #58a6ff;
-        border-radius: 6px;
-        z-index: 0;
-        overflow: hidden;
-      }
-      .diff-line {
-        display: block;
-        min-height: 0;
-        line-height: 46px;
-        white-space: pre;
-        position: relative;
-        overflow: hidden;
-        padding-left: 14px;
-      }
-      .diff-sign {
-        display: inline-block;
-        width: 22px;
-        color: #41506220;
-      }
-      .diff-del {
-        background: rgba(248, 81, 73, 0.12);
-        box-shadow: inset 3px 0 #f85149;
-      }
-      .diff-add {
-        background: rgba(63, 185, 80, 0.12);
-        box-shadow: inset 3px 0 #3fb950;
-      }
-      .diff-del .diff-sign {
-        color: #f85149;
-      }
-      .diff-add .diff-sign {
-        color: #3fb950;
-      }
-      .flight-block {
-        position: absolute;
-        white-space: pre;
-        font-size: 27px;
-        line-height: 40px;
-        padding: 11px 22px;
-        border-radius: 11px;
-        background: #0f1722;
-        border: 1px solid #233044;
-        box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
-        will-change: transform, opacity;
-      }
-      .flight-target {
-        position: absolute;
-        border: 1.5px dashed #2a3a4f;
-        border-radius: 14px;
-        opacity: 0;
-      }
+      * { margin: 0; padding: 0; box-sizing: border-box; }
+      html, body { width: 1920px; height: 1080px; overflow: hidden; background: #05070b; }
+      #root { position: relative; width: 1920px; height: 1080px; font-family: "JetBrains Mono", monospace; color: #e6edf3; }
+      .bg-field { position: absolute; inset: 0; background: radial-gradient(1200px 700px at 50% 18%, #0e1726 0%, #070b12 55%, #05070b 100%); }
+      .bg-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(88,166,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(88,166,255,0.05) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(1100px 620px at 50% 42%, #000 0%, transparent 78%); }
+      .bg-glow { position: absolute; width: 900px; height: 900px; border-radius: 50%; filter: blur(120px); opacity: 0.5; }
+      .bg-glow.a { background: #1f6feb55; left: -180px; top: -200px; }
+      .bg-glow.b { background: #2ea04355; right: -200px; bottom: -260px; }
+      .editor { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 1380px; height: 800px; background: #0b0f17; border: 1px solid #1d2733; border-radius: 16px; box-shadow: 0 40px 120px rgba(0,0,0,0.6), 0 2px 0 rgba(255,255,255,0.03) inset; overflow: hidden; display: flex; flex-direction: column; }
+      .titlebar { height: 56px; flex: 0 0 56px; display: flex; align-items: center; gap: 16px; padding: 0 22px; background: linear-gradient(#11161f, #0c111a); border-bottom: 1px solid #1b2430; }
+      .dots { display: flex; gap: 10px; }
+      .dot { width: 14px; height: 14px; border-radius: 50%; }
+      .dot.r { background: #ff5f57; } .dot.y { background: #febc2e; } .dot.g { background: #28c840; }
+      .filename { font-size: 19px; color: #8b98a9; letter-spacing: 0.2px; }
+      .filename .accent { color: #d6e2f0; }
+      .code-surface { position: relative; flex: 1 1 auto; overflow: hidden; }
+      .scene { position: absolute; inset: 0; opacity: 0; will-change: opacity; }
+      .code { position: absolute; top: 38px; left: 0; right: 0; padding: 0 44px 0 104px; font-size: 30px; line-height: 46px; font-variant-ligatures: none; tab-size: 2; }
+      .gutter { position: absolute; top: 38px; left: 0; width: 84px; padding-right: 18px; font-size: 30px; line-height: 46px; text-align: right; color: #828c9b; user-select: none; }
+      .ln { display: block; height: 46px; }
+      .line { display: block; min-height: 46px; white-space: pre; position: relative; z-index: 1; }
+      .tok { display: inline-block; white-space: pre; will-change: transform, opacity; }
+      .caret { position: absolute; top: 0; left: 0; width: 3px; height: 32px; margin-top: 6px; background: #58a6ff; border-radius: 1px; z-index: 3; }
+      .hl-box { position: absolute; background: rgba(88,166,255,0.16); border-left: 3px solid #58a6ff; border-radius: 6px; z-index: 0; overflow: hidden; }
+      .diff-line { display: block; min-height: 0; line-height: 46px; white-space: pre; position: relative; overflow: hidden; padding-left: 14px; }
+      .diff-sign { display: inline-block; width: 22px; color: #41506220; }
+      .diff-del { background: rgba(248,81,73,0.12); box-shadow: inset 3px 0 #f85149; }
+      .diff-add { background: rgba(63,185,80,0.12); box-shadow: inset 3px 0 #3fb950; }
+      .diff-del .diff-sign { color: #f85149; } .diff-add .diff-sign { color: #3fb950; }
+      .flight-block { position: absolute; white-space: pre; font-size: 27px; line-height: 40px; padding: 11px 22px; border-radius: 11px; background: #0f1722; border: 1px solid #233044; box-shadow: 0 16px 44px rgba(0,0,0,0.5); will-change: transform, opacity; }
+      .flight-target { position: absolute; border: 1.5px dashed #2a3a4f; border-radius: 14px; opacity: 0; }
     </style>
   </head>
   <body>
@@ -242,1190 +54,442 @@
       <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>
+          <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>
         <div class="code-surface" id="surface"></div>
       </div>
     </div>
     <script>
-      window.__TOKENS = {
-        morph: {
-          lang: "js",
-          theme: "github-dark",
-          bg: "#24292e",
-          fg: "#e1e4e8",
-          states: [
-            {
-              code: "function activeNames(users) {\n  const out = []\n  for (const u of users) {\n    if (u.active) {\n      out.push(u.name)\n    }\n  }\n  return out\n}",
-              tokens: [
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-0",
-                  content: "function",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-1",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-2",
-                  content: "activeNames",
-                  color: "#B392F0",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-3",
-                  content: "(",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-4",
-                  content: "users",
-                  color: "#FFAB70",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-5",
-                  content: ") {",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-6",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-7",
-                  content: "  ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-8",
-                  content: "const",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-9",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-10",
-                  content: "out",
-                  color: "#79B8FF",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-11",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-12",
-                  content: "=",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-13",
-                  content: " ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-14",
-                  content: "[]",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-15",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-16",
-                  content: "  ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-17",
-                  content: "for",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-18",
-                  content: " ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-19",
-                  content: "(",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-20",
-                  content: "const",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-21",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-22",
-                  content: "u",
-                  color: "#79B8FF",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-23",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-24",
-                  content: "of",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-25",
-                  content: " ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-26",
-                  content: "users) {",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-27",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-28",
-                  content: "    ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-29",
-                  content: "if",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-30",
-                  content: " ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-31",
-                  content: "(u.active) {",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-32",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-33",
-                  content: "      ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-34",
-                  content: "out.",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-35",
-                  content: "push",
-                  color: "#B392F0",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-36",
-                  content: "(u.name)",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-37",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-38",
-                  content: "    ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-39",
-                  content: "}",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-40",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-41",
-                  content: "  ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-42",
-                  content: "}",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-43",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-44",
-                  content: "  ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-45",
-                  content: "return",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-46",
-                  content: " ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-47",
-                  content: "out",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-48",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-49",
-                  content: "}",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-50",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-              ],
-            },
-            {
-              code: "function activeNames(users) {\n  return users\n    .filter((u) => u.active)\n    .map((u) => u.name)\n}",
-              tokens: [
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-0",
-                  content: "function",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-1",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-2",
-                  content: "activeNames",
-                  color: "#B392F0",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-3",
-                  content: "(",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-4",
-                  content: "users",
-                  color: "#FFAB70",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-5",
-                  content: ") {",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-6",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-7",
-                  content: "  ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-45",
-                  content: "return",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-25",
-                  content: " ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-10",
-                  content: "users",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-27",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-28",
-                  content: "    ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-13",
-                  content: ".",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-14",
-                  content: "filter",
-                  color: "#B392F0",
-                  fontStyle: 0,
-                },
-                {
-                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-15",
-                  content: "((",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-16",
-                  content: "u",
-                  color: "#FFAB70",
-                  fontStyle: 0,
-                },
-                {
-                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-17",
-                  content: ")",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-18",
-                  content: " ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-19",
-                  content: "=>",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-20",
-                  content: " ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-21",
-                  content: "u.active)",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-32",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-23",
-                  content: "    ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-24",
-                  content: ".",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-25",
-                  content: "map",
-                  color: "#B392F0",
-                  fontStyle: 0,
-                },
-                {
-                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-26",
-                  content: "((",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-27",
-                  content: "u",
-                  color: "#FFAB70",
-                  fontStyle: 0,
-                },
-                {
-                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-28",
-                  content: ")",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-29",
-                  content: " ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-30",
-                  content: "=>",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-31",
-                  content: " ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-32",
-                  content: "u.name)",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-48",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-49",
-                  content: "}",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-35",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-              ],
-            },
-            {
-              code: "const activeNames = (users) =>\n  users.filter((u) => u.active).map((u) => u.name)",
-              tokens: [
-                {
-                  key: "VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-0",
-                  content: "const",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-1",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-2",
-                  content: "activeNames",
-                  color: "#B392F0",
-                  fontStyle: 0,
-                },
-                {
-                  key: "VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-3",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-4",
-                  content: "=",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-5",
-                  content: " ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-3",
-                  content: "(",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-4",
-                  content: "users",
-                  color: "#FFAB70",
-                  fontStyle: 0,
-                },
-                {
-                  key: "VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-8",
-                  content: ")",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-9",
-                  content: " ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-10",
-                  content: "=>",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-6",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-7",
-                  content: "  ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-13",
-                  content: "users.",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-14",
-                  content: "filter",
-                  color: "#B392F0",
-                  fontStyle: 0,
-                },
-                {
-                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-15",
-                  content: "((",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-16",
-                  content: "u",
-                  color: "#FFAB70",
-                  fontStyle: 0,
-                },
-                {
-                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-17",
-                  content: ")",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-18",
-                  content: " ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-19",
-                  content: "=>",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-20",
-                  content: " ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-21",
-                  content: "u.active).",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-25",
-                  content: "map",
-                  color: "#B392F0",
-                  fontStyle: 0,
-                },
-                {
-                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-26",
-                  content: "((",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-27",
-                  content: "u",
-                  color: "#FFAB70",
-                  fontStyle: 0,
-                },
-                {
-                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-28",
-                  content: ")",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-29",
-                  content: " ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-30",
-                  content: "=>",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-31",
-                  content: " ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-32",
-                  content: "u.name)",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-30",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-              ],
-            },
-          ],
-        },
-      };
-      window.__BLOCK = { id: "code-morph", effect: "morph", seq: "morph", duration: 7 };
+      window.__TOKENS = {"morph":{"lang":"js","theme":"github-dark","bg":"#24292e","fg":"#e1e4e8","states":[{"code":"function activeNames(users) {\n  const out = []\n  for (const u of users) {\n    if (u.active) {\n      out.push(u.name)\n    }\n  }\n  return out\n}","tokens":[{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-0","content":"function","color":"#F97583","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-1","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-2","content":"activeNames","color":"#B392F0","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-3","content":"(","color":"#E1E4E8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-4","content":"users","color":"#FFAB70","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-5","content":") {","color":"#E1E4E8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-6","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-7","content":"  ","color":"#E1E4E8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-8","content":"const","color":"#F97583","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-9","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-10","content":"out","color":"#79B8FF","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-11","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-12","content":"=","color":"#F97583","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-13","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-14","content":"[]","color":"#E1E4E8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-15","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-16","content":"  ","color":"#E1E4E8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-17","content":"for","color":"#F97583","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-18","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-19","content":"(","color":"#E1E4E8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-20","content":"const","color":"#F97583","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-21","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-22","content":"u","color":"#79B8FF","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-23","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-24","content":"of","color":"#F97583","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-25","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-26","content":"users) {","color":"#E1E4E8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-27","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-28","content":"    ","color":"#E1E4E8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-29","content":"if","color":"#F97583","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-30","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-31","content":"(u.active) {","color":"#E1E4E8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-32","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-33","content":"      ","color":"#e1e4e8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-34","content":"out.","color":"#E1E4E8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-35","content":"push","color":"#B392F0","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-36","content":"(u.name)","color":"#E1E4E8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-37","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-38","content":"    ","color":"#e1e4e8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-39","content":"}","color":"#E1E4E8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-40","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-41","content":"  ","color":"#e1e4e8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-42","content":"}","color":"#E1E4E8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-43","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-44","content":"  ","color":"#E1E4E8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-45","content":"return","color":"#F97583","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-46","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-47","content":"out","color":"#E1E4E8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-48","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-49","content":"}","color":"#E1E4E8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-50","content":"\n","color":"#e1e4e8","fontStyle":0}]},{"code":"function activeNames(users) {\n  return users\n    .filter((u) => u.active)\n    .map((u) => u.name)\n}","tokens":[{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-0","content":"function","color":"#F97583","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-1","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-2","content":"activeNames","color":"#B392F0","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-3","content":"(","color":"#E1E4E8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-4","content":"users","color":"#FFAB70","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-5","content":") {","color":"#E1E4E8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-6","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-7","content":"  ","color":"#E1E4E8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-45","content":"return","color":"#F97583","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-25","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-10","content":"users","color":"#E1E4E8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-27","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-28","content":"    ","color":"#e1e4e8","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-13","content":".","color":"#E1E4E8","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-14","content":"filter","color":"#B392F0","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-15","content":"((","color":"#E1E4E8","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-16","content":"u","color":"#FFAB70","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-17","content":")","color":"#E1E4E8","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-18","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-19","content":"=>","color":"#F97583","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-20","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-21","content":"u.active)","color":"#E1E4E8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-32","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-23","content":"    ","color":"#e1e4e8","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-24","content":".","color":"#E1E4E8","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-25","content":"map","color":"#B392F0","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-26","content":"((","color":"#E1E4E8","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-27","content":"u","color":"#FFAB70","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-28","content":")","color":"#E1E4E8","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-29","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-30","content":"=>","color":"#F97583","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-31","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-32","content":"u.name)","color":"#E1E4E8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-48","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-49","content":"}","color":"#E1E4E8","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-35","content":"\n","color":"#e1e4e8","fontStyle":0}]},{"code":"const activeNames = (users) =>\n  users.filter((u) => u.active).map((u) => u.name)","tokens":[{"key":"VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-0","content":"const","color":"#F97583","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-1","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-2","content":"activeNames","color":"#B392F0","fontStyle":0},{"key":"VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-3","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-4","content":"=","color":"#F97583","fontStyle":0},{"key":"VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-5","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-3","content":"(","color":"#E1E4E8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-4","content":"users","color":"#FFAB70","fontStyle":0},{"key":"VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-8","content":")","color":"#E1E4E8","fontStyle":0},{"key":"VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-9","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-10","content":"=>","color":"#F97583","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-6","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-7","content":"  ","color":"#e1e4e8","fontStyle":0},{"key":"VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-13","content":"users.","color":"#E1E4E8","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-14","content":"filter","color":"#B392F0","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-15","content":"((","color":"#E1E4E8","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-16","content":"u","color":"#FFAB70","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-17","content":")","color":"#E1E4E8","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-18","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-19","content":"=>","color":"#F97583","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-20","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-21","content":"u.active).","color":"#E1E4E8","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-25","content":"map","color":"#B392F0","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-26","content":"((","color":"#E1E4E8","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-27","content":"u","color":"#FFAB70","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-28","content":")","color":"#E1E4E8","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-29","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-30","content":"=>","color":"#F97583","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-31","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-32","content":"u.name)","color":"#E1E4E8","fontStyle":0},{"key":"VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-30","content":"\n","color":"#e1e4e8","fontStyle":0}]}]}};
+      window.__BLOCK = {"id":"code-morph","effect":"morph","seq":"morph","duration":7};
     </script>
     <script>
-      // 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
-      // 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].
-      (function () {
-        "use strict";
-        var T = window.__TOKENS || {};
+// 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
+// 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].
+(function () {
+  "use strict";
+  var T = window.__TOKENS || {};
 
-        function lineDiv() {
-          var d = document.createElement("div");
-          d.className = "line";
-          return d;
-        }
+  function lineDiv() {
+    var d = document.createElement("div");
+    d.className = "line";
+    return d;
+  }
 
-        // Render a code state's keyed tokens into codeEl as lines of inline-block .tok spans.
-        function renderState(codeEl, state) {
-          codeEl.textContent = "";
-          var keyToEl = new Map();
-          var line = lineDiv();
-          codeEl.appendChild(line);
-          for (var i = 0; i < state.tokens.length; i++) {
-            var t = state.tokens[i];
-            if (t.content === "\n") {
-              line = lineDiv();
-              codeEl.appendChild(line);
-              continue;
-            }
-            var span = document.createElement("span");
-            span.className = "tok";
-            span.textContent = t.content;
-            span.style.color = t.color;
-            if (t.fontStyle & 1) span.style.fontStyle = "italic";
-            if (t.fontStyle & 2) span.style.fontWeight = "700";
-            line.appendChild(span);
-            keyToEl.set(t.key, span);
-          }
-          var last = codeEl.lastChild;
-          if (last && last.className === "line" && last.children.length === 0)
-            codeEl.removeChild(last);
-          return keyToEl;
-        }
+  // Render a code state's keyed tokens into codeEl as lines of inline-block .tok spans.
+  function renderState(codeEl, state) {
+    codeEl.textContent = "";
+    var keyToEl = new Map();
+    var line = lineDiv();
+    codeEl.appendChild(line);
+    for (var i = 0; i < state.tokens.length; i++) {
+      var t = state.tokens[i];
+      if (t.content === "\n") {
+        line = lineDiv();
+        codeEl.appendChild(line);
+        continue;
+      }
+      var span = document.createElement("span");
+      span.className = "tok";
+      span.textContent = t.content;
+      span.style.color = t.color;
+      if (t.fontStyle & 1) span.style.fontStyle = "italic";
+      if (t.fontStyle & 2) span.style.fontWeight = "700";
+      line.appendChild(span);
+      keyToEl.set(t.key, span);
+    }
+    var last = codeEl.lastChild;
+    if (last && last.className === "line" && last.children.length === 0) codeEl.removeChild(last);
+    return keyToEl;
+  }
 
-        function rectsOf(keyToEl) {
-          var m = new Map();
-          keyToEl.forEach(function (el, k) {
-            var r = el.getBoundingClientRect();
-            m.set(k, { left: r.left, top: r.top });
-          });
-          return m;
-        }
+  function rectsOf(keyToEl) {
+    var m = new Map();
+    keyToEl.forEach(function (el, k) {
+      var r = el.getBoundingClientRect();
+      m.set(k, { left: r.left, top: r.top });
+    });
+    return m;
+  }
 
-        function makeScene(surface, withGutter) {
-          var scene = document.createElement("div");
-          scene.className = "scene";
-          if (withGutter) {
-            var g = document.createElement("div");
-            g.className = "gutter";
-            scene.appendChild(g);
-          }
-          var code = document.createElement("div");
-          code.className = "code";
-          scene.appendChild(code);
-          surface.appendChild(scene);
-          return { scene: scene, code: code, gutter: scene.querySelector(".gutter") };
-        }
+  function makeScene(surface, withGutter) {
+    var scene = document.createElement("div");
+    scene.className = "scene";
+    if (withGutter) {
+      var g = document.createElement("div");
+      g.className = "gutter";
+      scene.appendChild(g);
+    }
+    var code = document.createElement("div");
+    code.className = "code";
+    scene.appendChild(code);
+    surface.appendChild(scene);
+    return { scene: scene, code: code, gutter: scene.querySelector(".gutter") };
+  }
 
-        function fillGutter(g, n) {
-          var html = "";
-          for (var i = 1; i <= n; i++) html += '<span class="ln">' + i + "</span>";
-          g.innerHTML = html;
-        }
+  function fillGutter(g, n) {
+    var html = "";
+    for (var i = 1; i <= n; i++) html += '<span class="ln">' + i + "</span>";
+    g.innerHTML = html;
+  }
 
-        function splitLines(state) {
-          var lines = [{ text: "", tokens: [] }];
-          for (var i = 0; i < state.tokens.length; i++) {
-            var t = state.tokens[i];
-            if (t.content === "\n") {
-              lines.push({ text: "", tokens: [] });
-              continue;
-            }
-            var cur = lines[lines.length - 1];
-            cur.tokens.push(t);
-            cur.text += t.content;
-          }
-          if (lines.length && lines[lines.length - 1].tokens.length === 0) lines.pop();
-          return lines;
-        }
+  function splitLines(state) {
+    var lines = [{ text: "", tokens: [] }];
+    for (var i = 0; i < state.tokens.length; i++) {
+      var t = state.tokens[i];
+      if (t.content === "\n") {
+        lines.push({ text: "", tokens: [] });
+        continue;
+      }
+      var cur = lines[lines.length - 1];
+      cur.tokens.push(t);
+      cur.text += t.content;
+    }
+    if (lines.length && lines[lines.length - 1].tokens.length === 0) lines.pop();
+    return lines;
+  }
 
-        function lineDiff(a, b) {
-          var n = a.length;
-          var m = b.length;
-          var dp = [];
-          for (var i = 0; i <= n; i++) dp.push(new Array(m + 1).fill(0));
-          for (var i = n - 1; i >= 0; i--) {
-            for (var j = m - 1; j >= 0; j--) {
-              dp[i][j] =
-                a[i].text === b[j].text
-                  ? dp[i + 1][j + 1] + 1
-                  : Math.max(dp[i + 1][j], dp[i][j + 1]);
-            }
-          }
-          var ops = [];
-          var i = 0;
-          var j = 0;
-          while (i < n && j < m) {
-            if (a[i].text === b[j].text) {
-              ops.push({ type: "same", line: b[j] });
-              i++;
-              j++;
-            } else if (dp[i + 1][j] >= dp[i][j + 1]) {
-              ops.push({ type: "del", line: a[i] });
-              i++;
-            } else {
-              ops.push({ type: "add", line: b[j] });
-              j++;
-            }
-          }
-          while (i < n) ops.push({ type: "del", line: a[i++] });
-          while (j < m) ops.push({ type: "add", line: b[j++] });
-          return ops;
-        }
+  function lineDiff(a, b) {
+    var n = a.length;
+    var m = b.length;
+    var dp = [];
+    for (var i = 0; i <= n; i++) dp.push(new Array(m + 1).fill(0));
+    for (var i = n - 1; i >= 0; i--) {
+      for (var j = m - 1; j >= 0; j--) {
+        dp[i][j] = a[i].text === b[j].text ? dp[i + 1][j + 1] + 1 : Math.max(dp[i + 1][j], dp[i][j + 1]);
+      }
+    }
+    var ops = [];
+    var i = 0;
+    var j = 0;
+    while (i < n && j < m) {
+      if (a[i].text === b[j].text) {
+        ops.push({ type: "same", line: b[j] });
+        i++;
+        j++;
+      } else if (dp[i + 1][j] >= dp[i][j + 1]) {
+        ops.push({ type: "del", line: a[i] });
+        i++;
+      } else {
+        ops.push({ type: "add", line: b[j] });
+        j++;
+      }
+    }
+    while (i < n) ops.push({ type: "del", line: a[i++] });
+    while (j < m) ops.push({ type: "add", line: b[j++] });
+    return ops;
+  }
 
-        // ---- single-scene effect builders (fade in, play, hold to end) -------------
-        var FADE = 0.45;
+  // ---- single-scene effect builders (fade in, play, hold to end) -------------
+  var FADE = 0.45;
 
-        function morph(tl, surface, states, start) {
-          var STEP = 1.2;
-          var HOLD = 1.0;
-          var t = start;
-          for (var s = 0; s < states.length - 1; s++) {
-            var parts = makeScene(surface, false);
-            var code = parts.code;
-            var fromEls = renderState(code, states[s]);
-            var fromR = rectsOf(fromEls);
-            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;
-            toEls.forEach(function (el, k) {
-              var fr = fromR.get(k);
-              var tr = toR.get(k);
-              if (fr) {
-                seg.fromTo(
-                  el,
-                  { x: fr.left - tr.left, y: fr.top - tr.top },
-                  { x: 0, y: 0, duration: STEP, ease: "power2.inOut" },
-                  0,
-                );
-              } else {
-                seg.fromTo(
-                  el,
-                  { opacity: 0 },
-                  { opacity: 1, duration: FD, ease: "power1.out" },
-                  ENTER_AT,
-                );
-              }
-            });
-            var toKeys = new Set(toEls.keys());
-            var fromState = states[s];
-            for (var i = 0; i < fromState.tokens.length; i++) {
-              var tok = fromState.tokens[i];
-              if (tok.content === "\n" || toKeys.has(tok.key) || !fromR.has(tok.key)) continue;
-              var r = fromR.get(tok.key);
-              var span = document.createElement("span");
-              span.className = "tok";
-              span.textContent = tok.content;
-              span.style.position = "absolute";
-              span.style.left = r.left - base.left + "px";
-              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);
-            }
-            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);
-            if (!isLast)
-              tl.to(parts.scene, { opacity: 0, duration: FADE, ease: "power1.in" }, segEnd - FADE);
-            tl.add(seg, segStart);
-            t = segEnd - FADE;
-          }
+  function morph(tl, surface, states, start) {
+    var STEP = 1.2;
+    var HOLD = 1.0;
+    var t = start;
+    for (var s = 0; s < states.length - 1; s++) {
+      var parts = makeScene(surface, false);
+      var code = parts.code;
+      var fromEls = renderState(code, states[s]);
+      var fromR = rectsOf(fromEls);
+      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;
+      toEls.forEach(function (el, k) {
+        var fr = fromR.get(k);
+        var tr = toR.get(k);
+        if (fr) {
+          seg.fromTo(el, { x: fr.left - tr.left, y: fr.top - tr.top }, { x: 0, y: 0, duration: STEP, ease: "power2.inOut" }, 0);
+        } else {
+          seg.fromTo(el, { opacity: 0 }, { opacity: 1, duration: FD, ease: "power1.out" }, ENTER_AT);
         }
+      });
+      var toKeys = new Set(toEls.keys());
+      var fromState = states[s];
+      for (var i = 0; i < fromState.tokens.length; i++) {
+        var tok = fromState.tokens[i];
+        if (tok.content === "\n" || toKeys.has(tok.key) || !fromR.has(tok.key)) continue;
+        var r = fromR.get(tok.key);
+        var span = document.createElement("span");
+        span.className = "tok";
+        span.textContent = tok.content;
+        span.style.position = "absolute";
+        span.style.left = r.left - base.left + "px";
+        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);
+      }
+      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);
+      if (!isLast) tl.to(parts.scene, { opacity: 0, duration: FADE, ease: "power1.in" }, segEnd - FADE);
+      tl.add(seg, segStart);
+      t = segEnd - FADE;
+    }
+  }
 
-        function flight(tl, surface, states, start) {
-          var FLY = 1.0;
-          var STAGGER = 0.3;
-          var parts = makeScene(surface, false);
-          parts.code.remove();
-          var scene = parts.scene;
-          var target = document.createElement("div");
-          target.className = "flight-target";
-          scene.appendChild(target);
-          var W = surface.clientWidth;
-          var H = surface.clientHeight;
-          var leftCx = W * 0.27;
-          var rightCx = W * 0.71;
-          var midY = H * 0.46;
-          var gap = 70;
-          var blocks = states.map(function (st) {
-            var blk = document.createElement("div");
-            blk.className = "flight-block";
-            renderState(blk, st);
-            scene.appendChild(blk);
-            return blk;
-          });
-          var n = blocks.length;
-          var maxW = 0;
-          var firstDestY = 0;
-          blocks.forEach(function (blk, i) {
-            var bw = blk.getBoundingClientRect().width;
-            if (bw > maxW) maxW = bw;
-            var destX = rightCx - bw / 2;
-            var destY = midY + (i - (n - 1) / 2) * gap;
-            if (i === 0) firstDestY = destY;
-            var srcX = leftCx - bw / 2;
-            var srcY = midY + (i - (n - 1) / 2) * (gap + 16);
-            blk.style.left = destX + "px";
-            blk.style.top = destY + "px";
-            tl.fromTo(
-              blk,
-              { x: srcX - destX, y: srcY - destY, opacity: 0, rotation: -5, scale: 0.9 },
-              {
-                x: 0,
-                y: 0,
-                opacity: 1,
-                rotation: 0,
-                scale: 1,
-                duration: FLY,
-                ease: "power3.inOut",
-              },
-              start + FADE + i * STAGGER,
-            );
-          });
-          target.style.left = rightCx - maxW / 2 - 26 + "px";
-          target.style.top = firstDestY - 18 + "px";
-          target.style.width = maxW + 52 + "px";
-          target.style.height = (n - 1) * gap + 62 + "px";
-          var landAt = start + FADE + (n - 1) * STAGGER + FLY;
-          tl.set(scene, { opacity: 1 }, 0);
-          tl.to(target, { opacity: 1, duration: 0.5, ease: "power1.out" }, landAt - 0.5);
-        }
+  function flight(tl, surface, states, start) {
+    var FLY = 0.95;
+    var STAGGER = 0.26;
+    var GAP = 20;
+    var parts = makeScene(surface, false);
+    parts.code.remove();
+    var scene = parts.scene;
+    var target = document.createElement("div");
+    target.className = "flight-target";
+    scene.appendChild(target);
+    var W = surface.clientWidth;
+    var H = surface.clientHeight;
 
-        function typing(tl, surface, state, start) {
-          var PER = 0.05;
-          var parts = makeScene(surface, true);
-          var code = parts.code;
-          var keyToEl = renderState(code, state);
-          fillGutter(parts.gutter, code.querySelectorAll(".line").length);
-          var base = code.getBoundingClientRect();
-          var caret = document.createElement("div");
-          caret.className = "caret";
-          code.appendChild(caret);
-          var toks = [];
-          keyToEl.forEach(function (el) {
-            toks.push(el);
-          });
-          tl.set(parts.scene, { opacity: 0 }, 0);
-          tl.to(parts.scene, { opacity: 1, duration: FADE, ease: "power1.out" }, start);
-          var t0 = start + FADE;
-          if (toks.length) {
-            var r0 = toks[0].getBoundingClientRect();
-            tl.set(caret, { x: r0.left - base.left, y: r0.top - base.top, opacity: 1 }, 0);
-          }
-          toks.forEach(function (el, i) {
-            tl.set(el, { opacity: 0 }, 0);
-            tl.to(el, { opacity: 1, duration: 0.08, ease: "none" }, t0 + i * PER);
-            var r = el.getBoundingClientRect();
-            tl.set(caret, { x: r.right - base.left, y: r.top - base.top }, t0 + i * PER);
-          });
-        }
+    var blocks = states.map(function (st) {
+      var blk = document.createElement("div");
+      blk.className = "flight-block";
+      renderState(blk, st);
+      scene.appendChild(blk);
+      return blk;
+    });
+    var n = blocks.length;
 
-        function diff(tl, surface, states, start) {
-          var DEL = 0.55;
-          var ADD = 0.6;
-          var ops = lineDiff(splitLines(states[0]), splitLines(states[1]));
-          var parts = makeScene(surface, false);
-          var code = parts.code;
-          var delEls = [];
-          var addEls = [];
-          ops.forEach(function (op) {
-            var ln = document.createElement("div");
-            ln.className =
-              "diff-line" +
-              (op.type === "del" ? " diff-del" : op.type === "add" ? " diff-add" : "");
-            var sign = document.createElement("span");
-            sign.className = "diff-sign";
-            sign.textContent = op.type === "del" ? "- " : op.type === "add" ? "+ " : "  ";
-            ln.appendChild(sign);
-            op.line.tokens.forEach(function (t) {
-              var s = document.createElement("span");
-              s.className = "tok";
-              s.textContent = t.content;
-              s.style.color = t.color;
-              ln.appendChild(s);
-            });
-            code.appendChild(ln);
-            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);
-          var atDel = start + FADE + 0.3;
-          delEls.forEach(function (el, k) {
-            tl.fromTo(
-              el,
-              { height: 46, opacity: 1 },
-              { height: 0, opacity: 0, duration: DEL, ease: "power2.inOut" },
-              atDel + k * 0.08,
-            );
-          });
-          var atAdd = atDel + DEL + 0.15;
-          addEls.forEach(function (el, k) {
-            tl.set(el, { height: 0, opacity: 0 }, 0);
-            tl.fromTo(
-              el,
-              { height: 0, opacity: 0 },
-              { height: 46, opacity: 1, duration: ADD, ease: "power2.out" },
-              atAdd + k * 0.12,
-            );
-          });
-        }
+    // Pass 1: measure natural size, then make every chip the SAME width (symmetry).
+    var maxW = 0;
+    var chipH = 0;
+    blocks.forEach(function (blk) {
+      var r = blk.getBoundingClientRect();
+      if (r.width > maxW) maxW = r.width;
+      if (r.height > chipH) chipH = r.height;
+    });
+    blocks.forEach(function (blk) {
+      blk.style.width = maxW + "px";
+    });
 
-        function highlight(tl, surface, state, start, targetIdx) {
-          var SWEEP = 0.9;
-          var parts = makeScene(surface, true);
-          var code = parts.code;
-          renderState(code, state);
-          var lines = code.querySelectorAll(".line");
-          fillGutter(parts.gutter, lines.length);
-          var base = code.getBoundingClientRect();
-          var idx = Math.max(0, Math.min(lines.length - 1, targetIdx));
-          var lr = lines[idx].getBoundingClientRect();
-          var box = document.createElement("div");
-          box.className = "hl-box";
-          box.style.left = lr.left - base.left - 8 + "px";
-          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);
-          var at = start + FADE + 0.2;
-          tl.fromTo(
-            box,
-            { width: 0, opacity: 0 },
-            { width: lr.width + 18, opacity: 1, duration: SWEEP, ease: "power2.inOut" },
-            at,
-          );
-          for (var i = 0; i < lines.length; i++) {
-            if (i === idx) continue;
-            tl.fromTo(
-              lines[i],
-              { opacity: 1 },
-              { opacity: 0.45, duration: SWEEP, ease: "power2.inOut" },
-              at,
-            );
-          }
-        }
+    // Pass 2: evenly-stacked, left-aligned, group centered in the surface.
+    var stackH = n * chipH + (n - 1) * GAP;
+    var destLeft = Math.round((W - maxW) / 2);
+    var topY = Math.round((H - stackH) / 2);
+    blocks.forEach(function (blk, i) {
+      var destY = topY + i * (chipH + GAP);
+      blk.style.left = destLeft + "px";
+      blk.style.top = destY + "px";
+      // fly straight in from the left to the shared left edge — clean, no skew
+      var srcX = destLeft - W * 0.32;
+      tl.fromTo(
+        blk,
+        { x: srcX - destLeft, opacity: 0, scale: 0.96 },
+        { x: 0, opacity: 1, scale: 1, duration: FLY, ease: "power3.out" },
+        start + FADE + i * STAGGER,
+      );
+    });
 
-        function scroll(tl, surface, state, start, targetLine) {
-          var SCROLL = 1.7;
-          var parts = makeScene(surface, true);
-          var code = parts.code;
-          renderState(code, state);
-          var lines = code.querySelectorAll(".line");
-          fillGutter(parts.gutter, lines.length);
-          var surfRect = surface.getBoundingClientRect();
-          var idx = Math.max(0, Math.min(lines.length - 1, targetLine - 1));
-          var lr = lines[idx].getBoundingClientRect();
-          var lineCenter = lr.top + lr.height / 2 - surfRect.top;
-          var dy = surfRect.height * 0.5 - lineCenter;
-          var box = document.createElement("div");
-          box.className = "hl-box";
-          box.style.left = lines[idx].offsetLeft - 8 + "px";
-          box.style.top = lines[idx].offsetTop - 1 + "px";
-          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);
-          var at = start + FADE + 0.35;
-          tl.fromTo(
-            [code, parts.gutter],
-            { y: 0 },
-            { y: dy, duration: SCROLL, ease: "power2.inOut" },
-            at,
-          );
-          var arrAt = at + SCROLL;
-          for (var i = 0; i < lines.length; i++) {
-            if (i === idx) continue;
-            tl.fromTo(
-              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);
-        }
+    // Even-padded panel tightly wrapping the uniform stack.
+    var padX = 30;
+    var padY = 24;
+    target.style.left = destLeft - padX + "px";
+    target.style.top = topY - padY + "px";
+    target.style.width = maxW + padX * 2 + "px";
+    target.style.height = stackH + padY * 2 + "px";
+    var landAt = start + FADE + (n - 1) * STAGGER + FLY;
+    tl.set(scene, { opacity: 1 }, 0);
+    tl.to(target, { opacity: 1, duration: 0.5, ease: "power1.out" }, landAt - 0.5);
+  }
 
-        function buildEffect(tl, surface, spec) {
-          var start = 0.45;
-          var seq = T[spec.seq];
-          if (spec.effect === "morph") morph(tl, surface, seq.states, start);
-          else if (spec.effect === "flight") flight(tl, surface, seq.states, start);
-          else if (spec.effect === "typing") typing(tl, surface, seq.states[0], start);
-          else if (spec.effect === "diff") diff(tl, surface, seq.states, start);
-          else if (spec.effect === "highlight")
-            highlight(tl, surface, seq.states[0], start, spec.line || 0);
-          else if (spec.effect === "scroll")
-            scroll(tl, surface, seq.states[0], start, spec.line || 1);
-        }
+  function typing(tl, surface, state, start) {
+    var PER = 0.028; // seconds per character — smooth, fast typewriter
+    var parts = makeScene(surface, true);
+    var code = parts.code;
 
-        function go() {
-          var spec = window.__BLOCK;
-          var surface = document.getElementById("surface");
-          var root = document.getElementById("root");
-          window.__timelines = window.__timelines || {};
-          var tl = gsap.timeline({ paused: true });
-          window.__timelines["code-morph"] = tl; // register synchronously
-          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
-          });
-        }
+    // Per-CHARACTER render (granular reveal reads smoother than per-token pops).
+    code.textContent = "";
+    var line = document.createElement("div");
+    line.className = "line";
+    code.appendChild(line);
+    var chars = [];
+    for (var i = 0; i < state.tokens.length; i++) {
+      var t = state.tokens[i];
+      if (t.content === "\n") {
+        line = document.createElement("div");
+        line.className = "line";
+        code.appendChild(line);
+        continue;
+      }
+      for (var c = 0; c < t.content.length; c++) {
+        var span = document.createElement("span");
+        span.className = "tok";
+        span.textContent = t.content[c];
+        span.style.color = t.color;
+        if (t.fontStyle & 1) span.style.fontStyle = "italic";
+        if (t.fontStyle & 2) span.style.fontWeight = "700";
+        line.appendChild(span);
+        chars.push({ el: span, ws: t.content[c] === " " });
+      }
+    }
+    var last = code.lastChild;
+    if (last && last.className === "line" && last.children.length === 0) code.removeChild(last);
+
+    fillGutter(parts.gutter, code.querySelectorAll(".line").length);
+    var base = code.getBoundingClientRect();
+    var caret = document.createElement("div");
+    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);
+
+    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);
+    }
+    chars.forEach(function (c, i) {
+      var at = t0 + i * PER;
+      tl.set(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);
+      // caret glides at constant speed to each char's right edge (linear = no stop-start jitter)
+      var r = c.el.getBoundingClientRect();
+      tl.to(caret, { x: r.right - base.left, y: r.top - base.top, duration: PER, ease: "none" }, at);
+    });
+  }
+
+  function diff(tl, surface, states, start) {
+    var DEL = 0.55;
+    var ADD = 0.6;
+    var ops = lineDiff(splitLines(states[0]), splitLines(states[1]));
+    var parts = makeScene(surface, false);
+    var code = parts.code;
+    var delEls = [];
+    var addEls = [];
+    ops.forEach(function (op) {
+      var ln = document.createElement("div");
+      ln.className = "diff-line" + (op.type === "del" ? " diff-del" : op.type === "add" ? " diff-add" : "");
+      var sign = document.createElement("span");
+      sign.className = "diff-sign";
+      sign.textContent = op.type === "del" ? "- " : op.type === "add" ? "+ " : "  ";
+      ln.appendChild(sign);
+      op.line.tokens.forEach(function (t) {
+        var s = document.createElement("span");
+        s.className = "tok";
+        s.textContent = t.content;
+        s.style.color = t.color;
+        ln.appendChild(s);
+      });
+      code.appendChild(ln);
+      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);
+    var atDel = start + FADE + 0.3;
+    delEls.forEach(function (el, k) {
+      tl.fromTo(el, { height: 46, opacity: 1 }, { height: 0, opacity: 0, duration: DEL, ease: "power2.inOut" }, atDel + k * 0.08);
+    });
+    var atAdd = atDel + DEL + 0.15;
+    addEls.forEach(function (el, k) {
+      tl.set(el, { height: 0, opacity: 0 }, 0);
+      tl.fromTo(el, { height: 0, opacity: 0 }, { height: 46, opacity: 1, duration: ADD, ease: "power2.out" }, atAdd + k * 0.12);
+    });
+  }
+
+  function highlight(tl, surface, state, start, targetIdx) {
+    var SWEEP = 0.9;
+    var parts = makeScene(surface, true);
+    var code = parts.code;
+    renderState(code, state);
+    var lines = code.querySelectorAll(".line");
+    fillGutter(parts.gutter, lines.length);
+    var base = code.getBoundingClientRect();
+    var idx = Math.max(0, Math.min(lines.length - 1, targetIdx));
+    var lr = lines[idx].getBoundingClientRect();
+    var box = document.createElement("div");
+    box.className = "hl-box";
+    box.style.left = lr.left - base.left - 8 + "px";
+    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);
+    var at = start + FADE + 0.2;
+    tl.fromTo(box, { width: 0, opacity: 0 }, { width: lr.width + 18, opacity: 1, duration: SWEEP, ease: "power2.inOut" }, at);
+    for (var i = 0; i < lines.length; i++) {
+      if (i === idx) continue;
+      tl.fromTo(lines[i], { opacity: 1 }, { opacity: 0.45, duration: SWEEP, ease: "power2.inOut" }, at);
+    }
+  }
+
+  function scroll(tl, surface, state, start, targetLine) {
+    var SCROLL = 1.7;
+    var parts = makeScene(surface, true);
+    var code = parts.code;
+    renderState(code, state);
+    var lines = code.querySelectorAll(".line");
+    fillGutter(parts.gutter, lines.length);
+    var surfRect = surface.getBoundingClientRect();
+    var idx = Math.max(0, Math.min(lines.length - 1, targetLine - 1));
+    var lr = lines[idx].getBoundingClientRect();
+    var lineCenter = lr.top + lr.height / 2 - surfRect.top;
+    var dy = surfRect.height * 0.5 - lineCenter;
+    var box = document.createElement("div");
+    box.className = "hl-box";
+    box.style.left = lines[idx].offsetLeft - 8 + "px";
+    box.style.top = lines[idx].offsetTop - 1 + "px";
+    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);
+    var at = start + FADE + 0.35;
+    tl.fromTo([code, parts.gutter], { y: 0 }, { y: dy, duration: SCROLL, ease: "power2.inOut" }, at);
+    var arrAt = at + SCROLL;
+    for (var i = 0; i < lines.length; i++) {
+      if (i === idx) continue;
+      tl.fromTo(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);
+  }
+
+  function buildEffect(tl, surface, spec) {
+    var start = 0.45;
+    var seq = T[spec.seq];
+    if (spec.effect === "morph") morph(tl, surface, seq.states, start);
+    else if (spec.effect === "flight") flight(tl, surface, seq.states, start);
+    else if (spec.effect === "typing") typing(tl, surface, seq.states[0], start);
+    else if (spec.effect === "diff") diff(tl, surface, seq.states, start);
+    else if (spec.effect === "highlight") highlight(tl, surface, seq.states[0], start, spec.line || 0);
+    else if (spec.effect === "scroll") scroll(tl, surface, seq.states[0], start, spec.line || 1);
+  }
+
+  function go() {
+    var spec = window.__BLOCK;
+    var surface = document.getElementById("surface");
+    var root = document.getElementById("root");
+    window.__timelines = window.__timelines || {};
+    var tl = gsap.timeline({ paused: true });
+    window.__timelines["code-morph"] = tl; // register synchronously
+    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
+    });
+  }
+
+  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
+  else go();
+})();
 
-        if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
-        else go();
-      })();
     </script>
   </body>
 </html>
diff --git a/registry/blocks/code-particle-assemble/code-particle-assemble.html b/registry/blocks/code-particle-assemble/code-particle-assemble.html
index c6c4431819..94b0bfbf1d 100644
--- a/registry/blocks/code-particle-assemble/code-particle-assemble.html
+++ b/registry/blocks/code-particle-assemble/code-particle-assemble.html
@@ -7,30 +7,10 @@
     <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js"></script>
     <style>
-      * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-      }
-      html,
-      body {
-        width: 1920px;
-        height: 1080px;
-        overflow: hidden;
-        background: #05070b;
-      }
-      #root {
-        position: relative;
-        width: 1920px;
-        height: 1080px;
-      }
-      #gl {
-        position: absolute;
-        inset: 0;
-        width: 1920px;
-        height: 1080px;
-        display: block;
-      }
+      * { margin: 0; padding: 0; box-sizing: border-box; }
+      html, body { width: 1920px; height: 1080px; overflow: hidden; background: #05070b; }
+      #root { position: relative; width: 1920px; height: 1080px; }
+      #gl { position: absolute; inset: 0; width: 1920px; height: 1080px; display: block; }
     </style>
   </head>
   <body>
@@ -45,606 +25,415 @@
       <canvas id="gl" width="1920" height="1080"></canvas>
     </div>
     <script>
-      window.__TOKENS = {
-        assemble: {
-          lang: "js",
-          theme: "github-dark",
-          bg: "#24292e",
-          fg: "#e1e4e8",
-          states: [
-            {
-              code: "const app = pipe(\n  parse,\n  optimize,\n  emit,\n)",
-              tokens: [
-                {
-                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-0",
-                  content: "const",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-1",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-2",
-                  content: "app",
-                  color: "#79B8FF",
-                  fontStyle: 0,
-                },
-                {
-                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-3",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-4",
-                  content: "=",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-5",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-6",
-                  content: "pipe",
-                  color: "#B392F0",
-                  fontStyle: 0,
-                },
-                {
-                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-7",
-                  content: "(",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-8",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-9",
-                  content: "  ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-10",
-                  content: "parse,",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-11",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-12",
-                  content: "  ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-13",
-                  content: "optimize,",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-14",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-15",
-                  content: "  ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-16",
-                  content: "emit,",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-17",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-18",
-                  content: ")",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-19",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-              ],
-            },
-          ],
-        },
-      };
-      window.__BLOCK = {
-        id: "code-particle-assemble",
-        effect: "particles",
-        seq: "assemble",
-        duration: 8,
-        seed: 23,
-      };
+      window.__TOKENS = {"assemble":{"lang":"js","theme":"github-dark","bg":"#24292e","fg":"#e1e4e8","states":[{"code":"const app = pipe(\n  parse,\n  optimize,\n  emit,\n)","tokens":[{"key":"AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-0","content":"const","color":"#F97583","fontStyle":0},{"key":"AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-1","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-2","content":"app","color":"#79B8FF","fontStyle":0},{"key":"AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-3","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-4","content":"=","color":"#F97583","fontStyle":0},{"key":"AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-5","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-6","content":"pipe","color":"#B392F0","fontStyle":0},{"key":"AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-7","content":"(","color":"#E1E4E8","fontStyle":0},{"key":"AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-8","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-9","content":"  ","color":"#e1e4e8","fontStyle":0},{"key":"AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-10","content":"parse,","color":"#E1E4E8","fontStyle":0},{"key":"AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-11","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-12","content":"  ","color":"#e1e4e8","fontStyle":0},{"key":"AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-13","content":"optimize,","color":"#E1E4E8","fontStyle":0},{"key":"AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-14","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-15","content":"  ","color":"#e1e4e8","fontStyle":0},{"key":"AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-16","content":"emit,","color":"#E1E4E8","fontStyle":0},{"key":"AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-17","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-18","content":")","color":"#E1E4E8","fontStyle":0},{"key":"AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-19","content":"\n","color":"#e1e4e8","fontStyle":0}]}]}};
+      window.__BLOCK = {"id":"code-particle-assemble","effect":"particles","seq":"assemble","duration":8,"seed":23};
     </script>
     <script>
-      // hf-code-anim-gl.js — WebGL code-animation engine for the "crazy" Code Animations blocks.
-      //
-      // 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
-      //   - 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
-      //
-      // Each block sets window.__BLOCK = { id, effect, seq, duration, seed } and includes this engine.
-      (function () {
-        "use strict";
-        var T = window.__TOKENS || {};
-
-        // ---- seeded PRNG (no Math.random) -----------------------------------------
-        function mulberry32(a) {
-          return function () {
-            a |= 0;
-            a = (a + 0x6d2b79f5) | 0;
-            var t = Math.imul(a ^ (a >>> 15), 1 | a);
-            t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
-            return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
-          };
-        }
-
-        // ---- split a token state into lines of {content,color} --------------------
-        function splitLines(state) {
-          var lines = [[]];
-          for (var i = 0; i < state.tokens.length; i++) {
-            var t = state.tokens[i];
-            if (t.content === "\n") {
-              lines.push([]);
-              continue;
-            }
-            lines[lines.length - 1].push(t);
-          }
-          while (lines.length && lines[lines.length - 1].length === 0) lines.pop();
-          return lines;
-        }
-
-        // ---- THE BRIDGE: draw baked tokens to an offscreen 2D canvas ---------------
-        // Returns { canvas, W, H, lines, lineH, padY, fontPx } so effects can sample it.
-        function drawCodeToCanvas(state, opts) {
-          opts = opts || {};
-          var fontPx = opts.fontPx || 36;
-          var lineH = opts.lineH || 54;
-          var padX = opts.padX || 70;
-          var padY = opts.padY || 60;
-          var weight = opts.weight || 500;
-          var font = weight + " " + fontPx + 'px "JetBrains Mono", monospace';
-
-          var lines = splitLines(state);
-          var measure = document.createElement("canvas").getContext("2d");
-          measure.font = font;
-          var maxW = 0;
-          for (var i = 0; i < lines.length; i++) {
-            var w = 0;
-            for (var j = 0; j < lines[i].length; j++)
-              w += measure.measureText(lines[i][j].content).width;
-            if (w > maxW) maxW = w;
-          }
-          var W = Math.max(2, Math.ceil(maxW + padX * 2));
-          var H = Math.max(2, Math.ceil(lines.length * lineH + padY * 2));
-
-          var canvas = document.createElement("canvas");
-          canvas.width = W;
-          canvas.height = H;
-          var ctx = canvas.getContext("2d");
-          if (opts.transparent) {
-            ctx.clearRect(0, 0, W, H);
-          } else {
-            ctx.fillStyle = opts.bg || "#0b0f17";
-            ctx.fillRect(0, 0, W, H);
-          }
-          ctx.textBaseline = "top";
-          ctx.font = font;
-          for (var li = 0; li < lines.length; li++) {
-            var x = padX;
-            var y = padY + li * lineH;
-            for (var k = 0; k < lines[li].length; k++) {
-              var tok = lines[li][k];
-              ctx.fillStyle = tok.color;
-              ctx.fillText(tok.content, x, y);
-              x += ctx.measureText(tok.content).width;
-            }
-          }
-          return {
-            canvas: canvas,
-            W: W,
-            H: H,
-            lines: lines.length,
-            lineH: lineH,
-            padY: padY,
-            fontPx: fontPx,
-          };
-        }
-
-        // ===========================================================================
-        // Effect 1 — code-3d-extrude: code on a lit, beveled slab that rotates to rest
-        // ===========================================================================
-        function fxExtrude(THREE, scene, camera, renderer, state, st, tl, dur) {
-          scene.background = new THREE.Color(0x05070b);
-          var code = drawCodeToCanvas(state, {
-            fontPx: 38,
-            lineH: 56,
-            padX: 80,
-            padY: 70,
-            weight: 600,
-          });
-          var tex = new THREE.CanvasTexture(code.canvas);
-          tex.minFilter = THREE.LinearFilter;
-          tex.magFilter = THREE.LinearFilter;
-          tex.generateMipmaps = false;
-
-          var aspect = code.W / code.H;
-          var slabH = 6.2;
-          var slabW = slabH * aspect;
-          var depth = 0.5;
-
-          // beveled slab: rounded extruded rectangle
-          var hw = slabW / 2;
-          var hh = slabH / 2;
-          var r = 0.18;
-          var shape = new THREE.Shape();
-          shape.moveTo(-hw + r, -hh);
-          shape.lineTo(hw - r, -hh);
-          shape.quadraticCurveTo(hw, -hh, hw, -hh + r);
-          shape.lineTo(hw, hh - r);
-          shape.quadraticCurveTo(hw, hh, hw - r, hh);
-          shape.lineTo(-hw + r, hh);
-          shape.quadraticCurveTo(-hw, hh, -hw, hh - r);
-          shape.lineTo(-hw, -hh + r);
-          shape.quadraticCurveTo(-hw, -hh, -hw + r, -hh);
-          var geo = new THREE.ExtrudeGeometry(shape, {
-            depth: depth,
-            bevelEnabled: true,
-            bevelThickness: 0.12,
-            bevelSize: 0.1,
-            bevelSegments: 3,
-            steps: 1,
-          });
-          geo.center();
-          // UVs from ExtrudeGeometry don't map the texture nicely to the face; remap front-face UVs from XY bounds.
-          geo.computeBoundingBox();
-          var bb = geo.boundingBox;
-          var sizeX = bb.max.x - bb.min.x;
-          var sizeY = bb.max.y - bb.min.y;
-          var pos = geo.attributes.position;
-          var uv = geo.attributes.uv;
-          for (var vi = 0; vi < pos.count; vi++) {
-            uv.setXY(vi, (pos.getX(vi) - bb.min.x) / sizeX, (pos.getY(vi) - bb.min.y) / sizeY);
-          }
-          uv.needsUpdate = true;
-
-          // Face is an unlit "screen" — shows the exact vivid Shiki colors (no PBR/emissive wash).
-          // The 3D read comes from the lit, beveled EDGES + perspective, like a glowing monitor.
-          var faceMat = new THREE.MeshBasicMaterial({ map: tex });
-          var edgeMat = new THREE.MeshStandardMaterial({
-            color: 0x141d2b,
-            roughness: 0.3,
-            metalness: 0.4,
-          });
-          // ExtrudeGeometry groups: 0 = front+back faces, 1 = sides. Front shows the code.
-          var slab = new THREE.Mesh(geo, [faceMat, edgeMat]);
-          scene.add(slab);
-
-          scene.add(new THREE.AmbientLight(0xffffff, 0.5));
-          var key = new THREE.DirectionalLight(0xbcd4ff, 1.25);
-          key.position.set(5, 7, 9);
-          scene.add(key);
-          var rim = new THREE.DirectionalLight(0x4fffa0, 0.45);
-          rim.position.set(-7, -3, 5);
-          scene.add(rim);
-
-          camera.position.set(0, 0, 10);
-
-          // fit camera distance so the WHOLE slab fits (width-limited for wide code), ~78% fill
-          var vfov = (camera.fov * Math.PI) / 180;
-          var screenAspect = 1920 / 1080;
-          var fitH = slabH / 2 / Math.tan(vfov / 2) / 0.78;
-          var fitW = slabW / 2 / (Math.tan(vfov / 2) * screenAspect) / 0.78;
-          var fitZ = Math.max(fitH, fitW);
-
-          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);
-          // gentle breathing drift at rest (subtle — stays readable)
-          tl.to(
-            st,
-            { rotY: 0.06, rotX: -0.02, duration: dur * 0.4, ease: "sine.inOut" },
-            dur * 0.6,
-          );
-
-          return function () {
-            slab.rotation.y = st.rotY;
-            slab.rotation.x = st.rotX;
-            camera.position.z = st.camZ;
-            camera.lookAt(0, 0, 0);
-            renderer.render(scene, camera);
-          };
-        }
-
-        // ===========================================================================
-        // Effect 2 — code-shader-dissolve: code "compiles" out of GPU noise, holds crisp
-        // ===========================================================================
-        function fxDissolve(THREE, scene, camera, renderer, state, st, tl, dur, seed) {
-          scene.background = new THREE.Color(0x05070b);
-          var code = drawCodeToCanvas(state, {
-            fontPx: 40,
-            lineH: 60,
-            padX: 90,
-            padY: 80,
-            weight: 600,
-          });
-          var tex = new THREE.CanvasTexture(code.canvas);
-          tex.minFilter = THREE.LinearFilter;
-          tex.magFilter = THREE.LinearFilter;
-          tex.generateMipmaps = false;
-
-          var aspect = code.W / code.H;
-          var planeH = 6.6;
-          var planeW = planeH * aspect;
-
-          var uniforms = {
-            uTex: { value: tex },
-            uProgress: { value: 0 },
-            uSeed: { value: (seed || 1) * 13.37 },
-          };
-          var mat = new THREE.ShaderMaterial({
-            uniforms: uniforms,
-            transparent: true,
-            vertexShader: [
-              "varying vec2 vUv;",
-              "void main(){ vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0); }",
-            ].join("\n"),
-            fragmentShader: [
-              "precision highp float;",
-              "uniform sampler2D uTex;",
-              "uniform float uProgress;",
-              "uniform float uSeed;",
-              "varying vec2 vUv;",
-              "float hash(vec2 p){ p=fract(p*vec2(123.34,456.21)); p+=dot(p,p+45.32); return fract(p.x*p.y); }",
-              "float noise(vec2 p){ vec2 i=floor(p),f=fract(p); float a=hash(i),b=hash(i+vec2(1.,0.)),c=hash(i+vec2(0.,1.)),d=hash(i+vec2(1.,1.)); vec2 u=f*f*(3.-2.*f); return mix(mix(a,b,u.x),mix(c,d,u.x),u.y); }",
-              "void main(){",
-              "  vec2 uv = vUv;",
-              // multi-octave seeded noise field
-              "  float n = noise(uv*16.0+uSeed)*0.6 + noise(uv*48.0+uSeed*1.7)*0.3 + noise(uv*120.0+uSeed*2.3)*0.1;",
-              "  float edge = 0.12;",
-              "  float reveal = smoothstep(n-edge, n+edge, uProgress);", // 0 hidden -> 1 shown
-              // chromatic fringe strongest at the dissolving edge
-              "  float band = reveal*(1.0-reveal)*4.0;",
-              "  float off = band*0.010;",
-              "  float r = texture2D(uTex, uv+vec2(off,0.0)).r;",
-              "  float g = texture2D(uTex, uv).g;",
-              "  float b = texture2D(uTex, uv-vec2(off,0.0)).b;",
-              "  vec3 codeCol = vec3(r,g,b);",
-              // additive cyan edge glow along the dissolve front
-              "  vec3 glow = vec3(0.30,0.72,1.0) * band * 0.9;",
-              "  vec3 outc = codeCol*reveal + glow;",
-              "  float a = max(reveal, band*0.8);",
-              "  gl_FragColor = vec4(outc, a);",
-              "}",
-            ].join("\n"),
-          });
-
-          var plane = new THREE.Mesh(new THREE.PlaneGeometry(planeW, planeH), mat);
-          scene.add(plane);
-
-          camera.position.set(0, 0, 10);
-          var vfov = (camera.fov * Math.PI) / 180;
-          var screenAspect = 1920 / 1080;
-          var fitH = planeH / 2 / Math.tan(vfov / 2) / 0.82;
-          var fitW = planeW / 2 / (Math.tan(vfov / 2) * screenAspect) / 0.82;
-          camera.position.z = Math.max(fitH, fitW);
-          camera.lookAt(0, 0, 0);
-
-          // compile in, then hold crisp. Overshoot to 1.15 so even max-noise pixels
-          // (n up to ~1.0, edge 0.12) fully resolve — no leftover specks at rest.
-          tl.to(uniforms.uProgress, { value: 1.15, duration: dur * 0.62, ease: "power1.inOut" }, 0);
-
-          return function () {
-            renderer.render(scene, camera);
-          };
-        }
-
-        // ===========================================================================
-        // Effect 3 — code-particle-assemble: GPU points scatter then fly to glyph pixels
-        // ===========================================================================
-        function fxParticles(THREE, scene, camera, renderer, state, st, tl, dur, seed) {
-          scene.background = new THREE.Color(0x05070b);
-          var code = drawCodeToCanvas(state, {
-            fontPx: 46,
-            lineH: 70,
-            padX: 70,
-            padY: 64,
-            weight: 700,
-          });
-          var cw = code.W;
-          var ch = code.H;
-          var data = code.canvas.getContext("2d").getImageData(0, 0, cw, ch).data;
-          var rng = mulberry32(((seed || 1) * 2654435761) >>> 0);
-
-          var worldW = 13.0;
-          var worldH = worldW * (ch / cw);
-
-          // sample glyph pixels (brighter than the dark bg) on a fixed grid
-          var step = 2;
-          var tx = [];
-          var col = [];
-          for (var y = 0; y < ch; y += step) {
-            for (var x = 0; x < cw; x += step) {
-              var idx = (y * cw + x) * 4;
-              var r = data[idx];
-              var g = data[idx + 1];
-              var b = data[idx + 2];
-              if (r + g + b < 120) continue; // skip background
-              tx.push((x / cw - 0.5) * worldW, -(y / ch - 0.5) * worldH, 0);
-              col.push(r / 255, g / 255, b / 255);
-            }
-          }
-          var n = tx.length / 3;
-
-          var positions = new Float32Array(n * 3);
-          var aOrigin = new Float32Array(n * 3);
-          var aTarget = new Float32Array(tx);
-          var aColor = new Float32Array(col);
-          var aDelay = new Float32Array(n);
-          for (var i = 0; i < n; i++) {
-            var sx = (rng() * 2 - 1) * worldW * 1.15;
-            var sy = (rng() * 2 - 1) * worldH * 1.7;
-            var sz = (rng() * 2 - 1) * 9.0 - 2.0;
-            aOrigin[i * 3] = sx;
-            aOrigin[i * 3 + 1] = sy;
-            aOrigin[i * 3 + 2] = sz;
-            positions[i * 3] = sx;
-            positions[i * 3 + 1] = sy;
-            positions[i * 3 + 2] = sz;
-            aDelay[i] = rng();
-          }
-
-          var geo = new THREE.BufferGeometry();
-          geo.setAttribute("position", new THREE.BufferAttribute(positions, 3));
-          geo.setAttribute("aOrigin", new THREE.BufferAttribute(aOrigin, 3));
-          geo.setAttribute("aTarget", new THREE.BufferAttribute(aTarget, 3));
-          geo.setAttribute("aColor", new THREE.BufferAttribute(aColor, 3));
-          geo.setAttribute("aDelay", new THREE.BufferAttribute(aDelay, 1));
-
-          var uniforms = { uProgress: { value: 0 }, uSize: { value: 3.4 } };
-          var mat = new THREE.ShaderMaterial({
-            uniforms: uniforms,
-            transparent: true,
-            depthTest: false,
-            depthWrite: false,
-            blending: THREE.NormalBlending,
-            vertexShader: [
-              "attribute vec3 aOrigin; attribute vec3 aTarget; attribute vec3 aColor; attribute float aDelay;",
-              "uniform float uProgress; uniform float uSize;",
-              "varying vec3 vColor; varying float vP;",
-              "void main(){",
-              "  float span = 0.62;",
-              "  float p = clamp((uProgress - aDelay*(1.0-span)) / span, 0.0, 1.0);",
-              "  p = p*p*(3.0-2.0*p);",
-              "  vec3 pos = mix(aOrigin, aTarget, p);",
-              "  vec4 mv = modelViewMatrix * vec4(pos, 1.0);",
-              "  gl_Position = projectionMatrix * mv;",
-              "  gl_PointSize = uSize * (60.0 / -mv.z) * (0.45 + 0.55*p);",
-              "  vColor = aColor; vP = p;",
-              "}",
-            ].join("\n"),
-            fragmentShader: [
-              "precision highp float;",
-              "varying vec3 vColor; varying float vP;",
-              "void main(){",
-              "  vec2 d = gl_PointCoord - 0.5;",
-              "  float r2 = dot(d, d);",
-              "  if (r2 > 0.25) discard;",
-              "  float a = smoothstep(0.25, 0.02, r2);",
-              // brighter & whiter in flight, resolves to true color as it lands
-              "  vec3 c = mix(vColor + vec3(0.32)*(1.0-vP), vColor, vP);",
-              "  gl_FragColor = vec4(c, a * (0.7 + 0.3*vP));",
-              "}",
-            ].join("\n"),
-          });
-
-          var pts = new THREE.Points(geo, mat);
-          scene.add(pts);
-
-          camera.position.set(0, 0, 10);
-          var vfov = (camera.fov * Math.PI) / 180;
-          var sa = 1920 / 1080;
-          var fitH = worldH / 2 / Math.tan(vfov / 2) / 0.78;
-          var fitW = worldW / 2 / (Math.tan(vfov / 2) * sa) / 0.78;
-          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);
-
-          return function () {
-            renderer.render(scene, camera);
-          };
-        }
-
-        // ---- dispatch + boot ------------------------------------------------------
-        function buildEffect(THREE, scene, camera, renderer, spec, st, tl) {
-          var state = T[spec.seq].states[0];
-          var dur = spec.duration;
-          if (spec.effect === "extrude")
-            return fxExtrude(THREE, scene, camera, renderer, state, st, tl, dur);
-          if (spec.effect === "dissolve")
-            return fxDissolve(THREE, scene, camera, renderer, state, st, tl, dur, spec.seed);
-          if (spec.effect === "particles")
-            return fxParticles(THREE, scene, camera, renderer, state, st, tl, dur, spec.seed);
-          return function () {};
-        }
-
-        function go() {
-          var spec = window.__BLOCK;
-          var root = document.getElementById("root");
-          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({
-            canvas: glcanvas,
-            antialias: true,
-            alpha: false,
-            preserveDrawingBuffer: true,
-          });
-          renderer.setPixelRatio(1);
-          renderer.setSize(W, H, false);
-          var scene = new THREE.Scene();
-          var camera = new THREE.PerspectiveCamera(45, W / H, 0.1, 200);
-          var st = {};
-
-          document.fonts.ready.then(function () {
-            var renderFn = buildEffect(THREE, scene, camera, renderer, spec, st, tl);
-            function render() {
-              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
-            render(); // paint frame 0
-          });
-        }
-
-        if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
-        else go();
-      })();
+// hf-code-anim-gl.js — WebGL code-animation engine for the "crazy" Code Animations blocks.
+//
+// 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
+//   - 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
+//
+// Each block sets window.__BLOCK = { id, effect, seq, duration, seed } and includes this engine.
+(function () {
+  "use strict";
+  var T = window.__TOKENS || {};
+
+  // ---- seeded PRNG (no Math.random) -----------------------------------------
+  function mulberry32(a) {
+    return function () {
+      a |= 0;
+      a = (a + 0x6d2b79f5) | 0;
+      var t = Math.imul(a ^ (a >>> 15), 1 | a);
+      t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+      return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+    };
+  }
+
+  // ---- split a token state into lines of {content,color} --------------------
+  function splitLines(state) {
+    var lines = [[]];
+    for (var i = 0; i < state.tokens.length; i++) {
+      var t = state.tokens[i];
+      if (t.content === "\n") {
+        lines.push([]);
+        continue;
+      }
+      lines[lines.length - 1].push(t);
+    }
+    while (lines.length && lines[lines.length - 1].length === 0) lines.pop();
+    return lines;
+  }
+
+  // ---- THE BRIDGE: draw baked tokens to an offscreen 2D canvas ---------------
+  // Returns { canvas, W, H, lines, lineH, padY, fontPx } so effects can sample it.
+  function drawCodeToCanvas(state, opts) {
+    opts = opts || {};
+    var fontPx = opts.fontPx || 36;
+    var lineH = opts.lineH || 54;
+    var padX = opts.padX || 70;
+    var padY = opts.padY || 60;
+    var weight = opts.weight || 500;
+    var font = weight + " " + fontPx + 'px "JetBrains Mono", monospace';
+
+    var lines = splitLines(state);
+    var measure = document.createElement("canvas").getContext("2d");
+    measure.font = font;
+    var maxW = 0;
+    for (var i = 0; i < lines.length; i++) {
+      var w = 0;
+      for (var j = 0; j < lines[i].length; j++) w += measure.measureText(lines[i][j].content).width;
+      if (w > maxW) maxW = w;
+    }
+    var W = Math.max(2, Math.ceil(maxW + padX * 2));
+    var H = Math.max(2, Math.ceil(lines.length * lineH + padY * 2));
+
+    var canvas = document.createElement("canvas");
+    canvas.width = W;
+    canvas.height = H;
+    var ctx = canvas.getContext("2d");
+    if (opts.transparent) {
+      ctx.clearRect(0, 0, W, H);
+    } else {
+      ctx.fillStyle = opts.bg || "#0b0f17";
+      ctx.fillRect(0, 0, W, H);
+    }
+    ctx.textBaseline = "top";
+    ctx.font = font;
+    for (var li = 0; li < lines.length; li++) {
+      var x = padX;
+      var y = padY + li * lineH;
+      for (var k = 0; k < lines[li].length; k++) {
+        var tok = lines[li][k];
+        ctx.fillStyle = tok.color;
+        ctx.fillText(tok.content, x, y);
+        x += ctx.measureText(tok.content).width;
+      }
+    }
+    return { canvas: canvas, W: W, H: H, lines: lines.length, lineH: lineH, padY: padY, fontPx: fontPx };
+  }
+
+  // ===========================================================================
+  // Effect 1 — code-3d-extrude: code on a lit, beveled slab that rotates to rest
+  // ===========================================================================
+  function fxExtrude(THREE, scene, camera, renderer, state, st, tl, dur) {
+    scene.background = new THREE.Color(0x05070b);
+    var code = drawCodeToCanvas(state, { fontPx: 38, lineH: 56, padX: 80, padY: 70, weight: 600 });
+    var tex = new THREE.CanvasTexture(code.canvas);
+    tex.minFilter = THREE.LinearFilter;
+    tex.magFilter = THREE.LinearFilter;
+    tex.generateMipmaps = false;
+
+    var aspect = code.W / code.H;
+    var slabH = 6.2;
+    var slabW = slabH * aspect;
+    var depth = 0.5;
+
+    // beveled slab: rounded extruded rectangle
+    var hw = slabW / 2;
+    var hh = slabH / 2;
+    var r = 0.18;
+    var shape = new THREE.Shape();
+    shape.moveTo(-hw + r, -hh);
+    shape.lineTo(hw - r, -hh);
+    shape.quadraticCurveTo(hw, -hh, hw, -hh + r);
+    shape.lineTo(hw, hh - r);
+    shape.quadraticCurveTo(hw, hh, hw - r, hh);
+    shape.lineTo(-hw + r, hh);
+    shape.quadraticCurveTo(-hw, hh, -hw, hh - r);
+    shape.lineTo(-hw, -hh + r);
+    shape.quadraticCurveTo(-hw, -hh, -hw + r, -hh);
+    var geo = new THREE.ExtrudeGeometry(shape, { depth: depth, bevelEnabled: true, bevelThickness: 0.12, bevelSize: 0.1, bevelSegments: 3, steps: 1 });
+    geo.center();
+    // UVs from ExtrudeGeometry don't map the texture nicely to the face; remap front-face UVs from XY bounds.
+    geo.computeBoundingBox();
+    var bb = geo.boundingBox;
+    var sizeX = bb.max.x - bb.min.x;
+    var sizeY = bb.max.y - bb.min.y;
+    var pos = geo.attributes.position;
+    var uv = geo.attributes.uv;
+    for (var vi = 0; vi < pos.count; vi++) {
+      uv.setXY(vi, (pos.getX(vi) - bb.min.x) / sizeX, (pos.getY(vi) - bb.min.y) / sizeY);
+    }
+    uv.needsUpdate = true;
+
+    // Face is an unlit "screen" — shows the exact vivid Shiki colors (no PBR/emissive wash).
+    // The 3D read comes from the lit, beveled EDGES + perspective, like a glowing monitor.
+    var faceMat = new THREE.MeshBasicMaterial({ map: tex });
+    var edgeMat = new THREE.MeshStandardMaterial({ color: 0x141d2b, roughness: 0.3, metalness: 0.4 });
+    // ExtrudeGeometry groups: 0 = front+back faces, 1 = sides. Front shows the code.
+    var slab = new THREE.Mesh(geo, [faceMat, edgeMat]);
+    scene.add(slab);
+
+    scene.add(new THREE.AmbientLight(0xffffff, 0.5));
+    var key = new THREE.DirectionalLight(0xbcd4ff, 1.25);
+    key.position.set(5, 7, 9);
+    scene.add(key);
+    var rim = new THREE.DirectionalLight(0x4fffa0, 0.45);
+    rim.position.set(-7, -3, 5);
+    scene.add(rim);
+
+    camera.position.set(0, 0, 10);
+
+    // fit camera distance so the WHOLE slab fits (width-limited for wide code), ~78% fill
+    var vfov = (camera.fov * Math.PI) / 180;
+    var screenAspect = 1920 / 1080;
+    var fitH = slabH / 2 / Math.tan(vfov / 2) / 0.78;
+    var fitW = slabW / 2 / (Math.tan(vfov / 2) * screenAspect) / 0.78;
+    var fitZ = Math.max(fitH, fitW);
+
+    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);
+    // gentle breathing drift at rest (subtle — stays readable)
+    tl.to(st, { rotY: 0.06, rotX: -0.02, duration: dur * 0.4, ease: "sine.inOut" }, dur * 0.6);
+
+    return function () {
+      slab.rotation.y = st.rotY;
+      slab.rotation.x = st.rotX;
+      camera.position.z = st.camZ;
+      camera.lookAt(0, 0, 0);
+      // boot loop's render() issues the single renderer.render() — don't double-render here
+    };
+  }
+
+  // ===========================================================================
+  // Effect 2 — code-shader-dissolve: code "compiles" out of GPU noise, holds crisp
+  // ===========================================================================
+  function fxDissolve(THREE, scene, camera, renderer, state, st, tl, dur, seed) {
+    scene.background = new THREE.Color(0x05070b);
+    var code = drawCodeToCanvas(state, { fontPx: 40, lineH: 60, padX: 90, padY: 80, weight: 600 });
+    var tex = new THREE.CanvasTexture(code.canvas);
+    tex.minFilter = THREE.LinearFilter;
+    tex.magFilter = THREE.LinearFilter;
+    tex.generateMipmaps = false;
+
+    var aspect = code.W / code.H;
+    var planeH = 6.6;
+    var planeW = planeH * aspect;
+
+    var uniforms = {
+      uTex: { value: tex },
+      uProgress: { value: 0 },
+      uSeed: { value: (seed || 1) * 13.37 },
+    };
+    var mat = new THREE.ShaderMaterial({
+      uniforms: uniforms,
+      transparent: true,
+      vertexShader: [
+        "varying vec2 vUv;",
+        "void main(){ vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0); }",
+      ].join("\n"),
+      fragmentShader: [
+        "precision highp float;",
+        "uniform sampler2D uTex;",
+        "uniform float uProgress;",
+        "uniform float uSeed;",
+        "varying vec2 vUv;",
+        "float hash(vec2 p){ p=fract(p*vec2(123.34,456.21)); p+=dot(p,p+45.32); return fract(p.x*p.y); }",
+        "float noise(vec2 p){ vec2 i=floor(p),f=fract(p); float a=hash(i),b=hash(i+vec2(1.,0.)),c=hash(i+vec2(0.,1.)),d=hash(i+vec2(1.,1.)); vec2 u=f*f*(3.-2.*f); return mix(mix(a,b,u.x),mix(c,d,u.x),u.y); }",
+        "void main(){",
+        "  vec2 uv = vUv;",
+        // multi-octave seeded noise field
+        "  float n = noise(uv*16.0+uSeed)*0.6 + noise(uv*48.0+uSeed*1.7)*0.3 + noise(uv*120.0+uSeed*2.3)*0.1;",
+        "  float edge = 0.12;",
+        "  float reveal = smoothstep(n-edge, n+edge, uProgress);", // 0 hidden -> 1 shown
+        // chromatic fringe strongest at the dissolving edge
+        "  float band = reveal*(1.0-reveal)*4.0;",
+        "  float off = band*0.010;",
+        "  float r = texture2D(uTex, uv+vec2(off,0.0)).r;",
+        "  float g = texture2D(uTex, uv).g;",
+        "  float b = texture2D(uTex, uv-vec2(off,0.0)).b;",
+        "  vec3 codeCol = vec3(r,g,b);",
+        // additive cyan edge glow along the dissolve front
+        "  vec3 glow = vec3(0.30,0.72,1.0) * band * 0.9;",
+        "  vec3 outc = codeCol*reveal + glow;",
+        "  float a = max(reveal, band*0.8);",
+        "  gl_FragColor = vec4(outc, a);",
+        "}",
+      ].join("\n"),
+    });
+
+    var plane = new THREE.Mesh(new THREE.PlaneGeometry(planeW, planeH), mat);
+    scene.add(plane);
+
+    camera.position.set(0, 0, 10);
+    var vfov = (camera.fov * Math.PI) / 180;
+    var screenAspect = 1920 / 1080;
+    var fitH = planeH / 2 / Math.tan(vfov / 2) / 0.82;
+    var fitW = planeW / 2 / (Math.tan(vfov / 2) * screenAspect) / 0.82;
+    camera.position.z = Math.max(fitH, fitW);
+    camera.lookAt(0, 0, 0);
+
+    // compile in, then hold crisp. Overshoot to 1.15 so even max-noise pixels
+    // (n up to ~1.0, edge 0.12) fully resolve — no leftover specks at rest.
+    tl.to(uniforms.uProgress, { value: 1.15, duration: dur * 0.62, ease: "power1.inOut" }, 0);
+
+    // uProgress is tweened by GSAP; the boot loop's render() draws once per frame.
+    return function () {};
+  }
+
+  // ===========================================================================
+  // Effect 3 — code-particle-assemble: GPU points scatter then fly to glyph pixels
+  // ===========================================================================
+  function fxParticles(THREE, scene, camera, renderer, state, st, tl, dur, seed) {
+    scene.background = new THREE.Color(0x05070b);
+    var code = drawCodeToCanvas(state, { fontPx: 46, lineH: 70, padX: 70, padY: 64, weight: 700 });
+    var cw = code.W;
+    var ch = code.H;
+    var data = code.canvas.getContext("2d").getImageData(0, 0, cw, ch).data;
+    var rng = mulberry32(((seed || 1) * 2654435761) >>> 0);
+
+    var worldW = 13.0;
+    var worldH = worldW * (ch / cw);
+
+    // sample glyph pixels (brighter than the dark bg) on a fixed grid
+    var step = 2;
+    var tx = [];
+    var col = [];
+    for (var y = 0; y < ch; y += step) {
+      for (var x = 0; x < cw; x += step) {
+        var idx = (y * cw + x) * 4;
+        var r = data[idx];
+        var g = data[idx + 1];
+        var b = data[idx + 2];
+        if (r + g + b < 120) continue; // skip background
+        tx.push((x / cw - 0.5) * worldW, -(y / ch - 0.5) * worldH, 0);
+        col.push(r / 255, g / 255, b / 255);
+      }
+    }
+    var n = tx.length / 3;
+
+    var positions = new Float32Array(n * 3);
+    var aOrigin = new Float32Array(n * 3);
+    var aTarget = new Float32Array(tx);
+    var aColor = new Float32Array(col);
+    var aDelay = new Float32Array(n);
+    for (var i = 0; i < n; i++) {
+      var sx = (rng() * 2 - 1) * worldW * 1.15;
+      var sy = (rng() * 2 - 1) * worldH * 1.7;
+      var sz = (rng() * 2 - 1) * 9.0 - 2.0;
+      aOrigin[i * 3] = sx;
+      aOrigin[i * 3 + 1] = sy;
+      aOrigin[i * 3 + 2] = sz;
+      positions[i * 3] = sx;
+      positions[i * 3 + 1] = sy;
+      positions[i * 3 + 2] = sz;
+      aDelay[i] = rng();
+    }
+
+    var geo = new THREE.BufferGeometry();
+    geo.setAttribute("position", new THREE.BufferAttribute(positions, 3));
+    geo.setAttribute("aOrigin", new THREE.BufferAttribute(aOrigin, 3));
+    geo.setAttribute("aTarget", new THREE.BufferAttribute(aTarget, 3));
+    geo.setAttribute("aColor", new THREE.BufferAttribute(aColor, 3));
+    geo.setAttribute("aDelay", new THREE.BufferAttribute(aDelay, 1));
+
+    var uniforms = { uProgress: { value: 0 }, uSize: { value: 3.4 } };
+    var mat = new THREE.ShaderMaterial({
+      uniforms: uniforms,
+      transparent: true,
+      depthTest: false,
+      depthWrite: false,
+      blending: THREE.NormalBlending,
+      vertexShader: [
+        "attribute vec3 aOrigin; attribute vec3 aTarget; attribute vec3 aColor; attribute float aDelay;",
+        "uniform float uProgress; uniform float uSize;",
+        "varying vec3 vColor; varying float vP;",
+        "void main(){",
+        "  float span = 0.62;",
+        "  float p = clamp((uProgress - aDelay*(1.0-span)) / span, 0.0, 1.0);",
+        "  p = p*p*(3.0-2.0*p);",
+        "  vec3 pos = mix(aOrigin, aTarget, p);",
+        "  vec4 mv = modelViewMatrix * vec4(pos, 1.0);",
+        "  gl_Position = projectionMatrix * mv;",
+        "  gl_PointSize = uSize * (60.0 / -mv.z) * (0.45 + 0.55*p);",
+        "  vColor = aColor; vP = p;",
+        "}",
+      ].join("\n"),
+      fragmentShader: [
+        "precision highp float;",
+        "varying vec3 vColor; varying float vP;",
+        "void main(){",
+        "  vec2 d = gl_PointCoord - 0.5;",
+        "  float r2 = dot(d, d);",
+        "  if (r2 > 0.25) discard;",
+        "  float a = smoothstep(0.25, 0.02, r2);",
+        // brighter & whiter in flight, resolves to true color as it lands
+        "  vec3 c = mix(vColor + vec3(0.32)*(1.0-vP), vColor, vP);",
+        "  gl_FragColor = vec4(c, a * (0.7 + 0.3*vP));",
+        "}",
+      ].join("\n"),
+    });
+
+    var pts = new THREE.Points(geo, mat);
+    scene.add(pts);
+
+    camera.position.set(0, 0, 10);
+    var vfov = (camera.fov * Math.PI) / 180;
+    var sa = 1920 / 1080;
+    var fitH = worldH / 2 / Math.tan(vfov / 2) / 0.78;
+    var fitW = worldW / 2 / (Math.tan(vfov / 2) * sa) / 0.78;
+    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);
+
+    // uProgress is tweened by GSAP; the boot loop's render() draws once per frame.
+    return function () {};
+  }
+
+  // ---- dispatch + boot ------------------------------------------------------
+  function buildEffect(THREE, scene, camera, renderer, spec, st, tl) {
+    var state = T[spec.seq].states[0];
+    var dur = spec.duration;
+    if (spec.effect === "extrude") return fxExtrude(THREE, scene, camera, renderer, state, st, tl, dur);
+    if (spec.effect === "dissolve") return fxDissolve(THREE, scene, camera, renderer, state, st, tl, dur, spec.seed);
+    if (spec.effect === "particles") return fxParticles(THREE, scene, camera, renderer, state, st, tl, dur, spec.seed);
+    return function () {};
+  }
+
+  function go() {
+    var spec = window.__BLOCK;
+    var root = document.getElementById("root");
+    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({ canvas: glcanvas, antialias: true, alpha: false, preserveDrawingBuffer: true });
+    renderer.setPixelRatio(1);
+    renderer.setSize(W, H, false);
+    var scene = new THREE.Scene();
+    var camera = new THREE.PerspectiveCamera(45, W / H, 0.1, 200);
+    var st = {};
+
+    document.fonts.ready.then(function () {
+      var renderFn = buildEffect(THREE, scene, camera, renderer, spec, st, tl);
+      function render() {
+        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
+      render(); // paint frame 0
+    });
+  }
+
+  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
+  else go();
+})();
+
     </script>
   </body>
 </html>
diff --git a/registry/blocks/code-scroll/code-scroll.html b/registry/blocks/code-scroll/code-scroll.html
index 7332440b65..7000f8bc00 100644
--- a/registry/blocks/code-scroll/code-scroll.html
+++ b/registry/blocks/code-scroll/code-scroll.html
@@ -6,225 +6,37 @@
     <title>Code Scroll To Line</title>
     <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
     <style>
-      * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-      }
-      html,
-      body {
-        width: 1920px;
-        height: 1080px;
-        overflow: hidden;
-        background: #05070b;
-      }
-      #root {
-        position: relative;
-        width: 1920px;
-        height: 1080px;
-        font-family: "JetBrains Mono", monospace;
-        color: #e6edf3;
-      }
-      .bg-field {
-        position: absolute;
-        inset: 0;
-        background: radial-gradient(1200px 700px at 50% 18%, #0e1726 0%, #070b12 55%, #05070b 100%);
-      }
-      .bg-grid {
-        position: absolute;
-        inset: 0;
-        background-image:
-          linear-gradient(rgba(88, 166, 255, 0.05) 1px, transparent 1px),
-          linear-gradient(90deg, rgba(88, 166, 255, 0.05) 1px, transparent 1px);
-        background-size: 64px 64px;
-        mask-image: radial-gradient(1100px 620px at 50% 42%, #000 0%, transparent 78%);
-      }
-      .bg-glow {
-        position: absolute;
-        width: 900px;
-        height: 900px;
-        border-radius: 50%;
-        filter: blur(120px);
-        opacity: 0.5;
-      }
-      .bg-glow.a {
-        background: #1f6feb55;
-        left: -180px;
-        top: -200px;
-      }
-      .bg-glow.b {
-        background: #2ea04355;
-        right: -200px;
-        bottom: -260px;
-      }
-      .editor {
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-        width: 1380px;
-        height: 800px;
-        background: #0b0f17;
-        border: 1px solid #1d2733;
-        border-radius: 16px;
-        box-shadow:
-          0 40px 120px rgba(0, 0, 0, 0.6),
-          0 2px 0 rgba(255, 255, 255, 0.03) inset;
-        overflow: hidden;
-        display: flex;
-        flex-direction: column;
-      }
-      .titlebar {
-        height: 56px;
-        flex: 0 0 56px;
-        display: flex;
-        align-items: center;
-        gap: 16px;
-        padding: 0 22px;
-        background: linear-gradient(#11161f, #0c111a);
-        border-bottom: 1px solid #1b2430;
-      }
-      .dots {
-        display: flex;
-        gap: 10px;
-      }
-      .dot {
-        width: 14px;
-        height: 14px;
-        border-radius: 50%;
-      }
-      .dot.r {
-        background: #ff5f57;
-      }
-      .dot.y {
-        background: #febc2e;
-      }
-      .dot.g {
-        background: #28c840;
-      }
-      .filename {
-        font-size: 19px;
-        color: #8b98a9;
-        letter-spacing: 0.2px;
-      }
-      .filename .accent {
-        color: #d6e2f0;
-      }
-      .code-surface {
-        position: relative;
-        flex: 1 1 auto;
-        overflow: hidden;
-      }
-      .scene {
-        position: absolute;
-        inset: 0;
-        opacity: 0;
-        will-change: opacity;
-      }
-      .code {
-        position: absolute;
-        top: 38px;
-        left: 0;
-        right: 0;
-        padding: 0 44px 0 104px;
-        font-size: 30px;
-        line-height: 46px;
-        font-variant-ligatures: none;
-        tab-size: 2;
-      }
-      .gutter {
-        position: absolute;
-        top: 38px;
-        left: 0;
-        width: 84px;
-        padding-right: 18px;
-        font-size: 30px;
-        line-height: 46px;
-        text-align: right;
-        color: #828c9b;
-        user-select: none;
-      }
-      .ln {
-        display: block;
-        height: 46px;
-      }
-      .line {
-        display: block;
-        min-height: 46px;
-        white-space: pre;
-        position: relative;
-        z-index: 1;
-      }
-      .tok {
-        display: inline-block;
-        white-space: pre;
-        will-change: transform, opacity;
-      }
-      .caret {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 3px;
-        height: 32px;
-        margin-top: 6px;
-        background: #58a6ff;
-        border-radius: 1px;
-        z-index: 3;
-      }
-      .hl-box {
-        position: absolute;
-        background: rgba(88, 166, 255, 0.16);
-        border-left: 3px solid #58a6ff;
-        border-radius: 6px;
-        z-index: 0;
-        overflow: hidden;
-      }
-      .diff-line {
-        display: block;
-        min-height: 0;
-        line-height: 46px;
-        white-space: pre;
-        position: relative;
-        overflow: hidden;
-        padding-left: 14px;
-      }
-      .diff-sign {
-        display: inline-block;
-        width: 22px;
-        color: #41506220;
-      }
-      .diff-del {
-        background: rgba(248, 81, 73, 0.12);
-        box-shadow: inset 3px 0 #f85149;
-      }
-      .diff-add {
-        background: rgba(63, 185, 80, 0.12);
-        box-shadow: inset 3px 0 #3fb950;
-      }
-      .diff-del .diff-sign {
-        color: #f85149;
-      }
-      .diff-add .diff-sign {
-        color: #3fb950;
-      }
-      .flight-block {
-        position: absolute;
-        white-space: pre;
-        font-size: 27px;
-        line-height: 40px;
-        padding: 11px 22px;
-        border-radius: 11px;
-        background: #0f1722;
-        border: 1px solid #233044;
-        box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
-        will-change: transform, opacity;
-      }
-      .flight-target {
-        position: absolute;
-        border: 1.5px dashed #2a3a4f;
-        border-radius: 14px;
-        opacity: 0;
-      }
+      * { margin: 0; padding: 0; box-sizing: border-box; }
+      html, body { width: 1920px; height: 1080px; overflow: hidden; background: #05070b; }
+      #root { position: relative; width: 1920px; height: 1080px; font-family: "JetBrains Mono", monospace; color: #e6edf3; }
+      .bg-field { position: absolute; inset: 0; background: radial-gradient(1200px 700px at 50% 18%, #0e1726 0%, #070b12 55%, #05070b 100%); }
+      .bg-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(88,166,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(88,166,255,0.05) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(1100px 620px at 50% 42%, #000 0%, transparent 78%); }
+      .bg-glow { position: absolute; width: 900px; height: 900px; border-radius: 50%; filter: blur(120px); opacity: 0.5; }
+      .bg-glow.a { background: #1f6feb55; left: -180px; top: -200px; }
+      .bg-glow.b { background: #2ea04355; right: -200px; bottom: -260px; }
+      .editor { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 1380px; height: 800px; background: #0b0f17; border: 1px solid #1d2733; border-radius: 16px; box-shadow: 0 40px 120px rgba(0,0,0,0.6), 0 2px 0 rgba(255,255,255,0.03) inset; overflow: hidden; display: flex; flex-direction: column; }
+      .titlebar { height: 56px; flex: 0 0 56px; display: flex; align-items: center; gap: 16px; padding: 0 22px; background: linear-gradient(#11161f, #0c111a); border-bottom: 1px solid #1b2430; }
+      .dots { display: flex; gap: 10px; }
+      .dot { width: 14px; height: 14px; border-radius: 50%; }
+      .dot.r { background: #ff5f57; } .dot.y { background: #febc2e; } .dot.g { background: #28c840; }
+      .filename { font-size: 19px; color: #8b98a9; letter-spacing: 0.2px; }
+      .filename .accent { color: #d6e2f0; }
+      .code-surface { position: relative; flex: 1 1 auto; overflow: hidden; }
+      .scene { position: absolute; inset: 0; opacity: 0; will-change: opacity; }
+      .code { position: absolute; top: 38px; left: 0; right: 0; padding: 0 44px 0 104px; font-size: 30px; line-height: 46px; font-variant-ligatures: none; tab-size: 2; }
+      .gutter { position: absolute; top: 38px; left: 0; width: 84px; padding-right: 18px; font-size: 30px; line-height: 46px; text-align: right; color: #828c9b; user-select: none; }
+      .ln { display: block; height: 46px; }
+      .line { display: block; min-height: 46px; white-space: pre; position: relative; z-index: 1; }
+      .tok { display: inline-block; white-space: pre; will-change: transform, opacity; }
+      .caret { position: absolute; top: 0; left: 0; width: 3px; height: 32px; margin-top: 6px; background: #58a6ff; border-radius: 1px; z-index: 3; }
+      .hl-box { position: absolute; background: rgba(88,166,255,0.16); border-left: 3px solid #58a6ff; border-radius: 6px; z-index: 0; overflow: hidden; }
+      .diff-line { display: block; min-height: 0; line-height: 46px; white-space: pre; position: relative; overflow: hidden; padding-left: 14px; }
+      .diff-sign { display: inline-block; width: 22px; color: #41506220; }
+      .diff-del { background: rgba(248,81,73,0.12); box-shadow: inset 3px 0 #f85149; }
+      .diff-add { background: rgba(63,185,80,0.12); box-shadow: inset 3px 0 #3fb950; }
+      .diff-del .diff-sign { color: #f85149; } .diff-add .diff-sign { color: #3fb950; }
+      .flight-block { position: absolute; white-space: pre; font-size: 27px; line-height: 40px; padding: 11px 22px; border-radius: 11px; background: #0f1722; border: 1px solid #233044; box-shadow: 0 16px 44px rgba(0,0,0,0.5); will-change: transform, opacity; }
+      .flight-target { position: absolute; border: 1.5px dashed #2a3a4f; border-radius: 14px; opacity: 0; }
     </style>
   </head>
   <body>
@@ -242,1554 +54,442 @@
       <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>
-          <span class="filename"
-            ><span class="accent">fetchWithRetry.js</span> — Code Scroll To Line</span
-          >
+          <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>
         <div class="code-surface" id="surface"></div>
       </div>
     </div>
     <script>
-      window.__TOKENS = {
-        scroll: {
-          lang: "js",
-          theme: "github-dark",
-          bg: "#24292e",
-          fg: "#e1e4e8",
-          states: [
-            {
-              code: 'import { createClient } from "./client"\nimport { logger } from "./logger"\n\nconst RETRIES = 3\n\nexport async function fetchWithRetry(url, opts = {}) {\n  const client = createClient(opts)\n  let lastError = null\n\n  for (let attempt = 1; attempt <= RETRIES; attempt++) {\n    try {\n      const res = await client.get(url)\n      if (res.ok) return res.body\n      lastError = new Error("bad status " + res.status)\n    } catch (err) {\n      lastError = err\n      logger.warn("attempt " + attempt + " failed")\n    }\n    await sleep(attempt * 250)\n  }\n\n  throw lastError\n}',
-              tokens: [
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-0",
-                  content: "import",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-1",
-                  content: " ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-2",
-                  content: "{ createClient }",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-3",
-                  content: " ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-4",
-                  content: "from",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-5",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-6",
-                  content: '"./client"',
-                  color: "#9ECBFF",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-7",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-8",
-                  content: "import",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-9",
-                  content: " ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-10",
-                  content: "{ logger }",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-11",
-                  content: " ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-12",
-                  content: "from",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-13",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-14",
-                  content: '"./logger"',
-                  color: "#9ECBFF",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-15",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-16",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-17",
-                  content: "const",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-18",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-19",
-                  content: "RETRIES",
-                  color: "#79B8FF",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-20",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-21",
-                  content: "=",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-22",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-23",
-                  content: "3",
-                  color: "#79B8FF",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-24",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-25",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-26",
-                  content: "export",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-27",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-28",
-                  content: "async",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-29",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-30",
-                  content: "function",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-31",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-32",
-                  content: "fetchWithRetry",
-                  color: "#B392F0",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-33",
-                  content: "(",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-34",
-                  content: "url",
-                  color: "#FFAB70",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-35",
-                  content: ",",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-36",
-                  content: " ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-37",
-                  content: "opts",
-                  color: "#FFAB70",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-38",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-39",
-                  content: "=",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-40",
-                  content: " ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-41",
-                  content: "{}) {",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-42",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-43",
-                  content: "  ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-44",
-                  content: "const",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-45",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-46",
-                  content: "client",
-                  color: "#79B8FF",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-47",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-48",
-                  content: "=",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-49",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-50",
-                  content: "createClient",
-                  color: "#B392F0",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-51",
-                  content: "(opts)",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-52",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-53",
-                  content: "  ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-54",
-                  content: "let",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-55",
-                  content: " ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-56",
-                  content: "lastError",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-57",
-                  content: " ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-58",
-                  content: "=",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-59",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-60",
-                  content: "null",
-                  color: "#79B8FF",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-61",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-62",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-63",
-                  content: "  ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-64",
-                  content: "for",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-65",
-                  content: " ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-66",
-                  content: "(",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-67",
-                  content: "let",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-68",
-                  content: " ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-69",
-                  content: "attempt",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-70",
-                  content: " ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-71",
-                  content: "=",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-72",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-73",
-                  content: "1",
-                  color: "#79B8FF",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-74",
-                  content: "; attempt",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-75",
-                  content: " ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-76",
-                  content: "<=",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-77",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-78",
-                  content: "RETRIES",
-                  color: "#79B8FF",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-79",
-                  content: "; attempt",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-80",
-                  content: "++",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-81",
-                  content: ") {",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-82",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-83",
-                  content: "    ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-84",
-                  content: "try",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-85",
-                  content: " ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-86",
-                  content: "{",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-87",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-88",
-                  content: "      ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-89",
-                  content: "const",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-90",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-91",
-                  content: "res",
-                  color: "#79B8FF",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-92",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-93",
-                  content: "=",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-94",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-95",
-                  content: "await",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-96",
-                  content: " ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-97",
-                  content: "client.",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-98",
-                  content: "get",
-                  color: "#B392F0",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-99",
-                  content: "(url)",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-100",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-101",
-                  content: "      ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-102",
-                  content: "if",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-103",
-                  content: " ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-104",
-                  content: "(res.ok)",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-105",
-                  content: " ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-106",
-                  content: "return",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-107",
-                  content: " ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-108",
-                  content: "res.body",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-109",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-110",
-                  content: "      ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-111",
-                  content: "lastError",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-112",
-                  content: " ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-113",
-                  content: "=",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-114",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-115",
-                  content: "new",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-116",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-117",
-                  content: "Error",
-                  color: "#B392F0",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-118",
-                  content: "(",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-119",
-                  content: '"bad status "',
-                  color: "#9ECBFF",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-120",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-121",
-                  content: "+",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-122",
-                  content: " ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-123",
-                  content: "res.status)",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-124",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-125",
-                  content: "    ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-126",
-                  content: "}",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-127",
-                  content: " ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-128",
-                  content: "catch",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-129",
-                  content: " ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-130",
-                  content: "(err) {",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-131",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-132",
-                  content: "      ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-133",
-                  content: "lastError",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-134",
-                  content: " ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-135",
-                  content: "=",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-136",
-                  content: " ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-137",
-                  content: "err",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-138",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-139",
-                  content: "      ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-140",
-                  content: "logger.",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-141",
-                  content: "warn",
-                  color: "#B392F0",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-142",
-                  content: "(",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-143",
-                  content: '"attempt "',
-                  color: "#9ECBFF",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-144",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-145",
-                  content: "+",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-146",
-                  content: " ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-147",
-                  content: "attempt",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-148",
-                  content: " ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-149",
-                  content: "+",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-150",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-151",
-                  content: '" failed"',
-                  color: "#9ECBFF",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-152",
-                  content: ")",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-153",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-154",
-                  content: "    ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-155",
-                  content: "}",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-156",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-157",
-                  content: "    ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-158",
-                  content: "await",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-159",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-160",
-                  content: "sleep",
-                  color: "#B392F0",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-161",
-                  content: "(attempt",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-162",
-                  content: " ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-163",
-                  content: "*",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-164",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-165",
-                  content: "250",
-                  color: "#79B8FF",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-166",
-                  content: ")",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-167",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-168",
-                  content: "  ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-169",
-                  content: "}",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-170",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-171",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-172",
-                  content: "  ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-173",
-                  content: "throw",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-174",
-                  content: " ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-175",
-                  content: "lastError",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-176",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-177",
-                  content: "}",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-178",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-              ],
-            },
-          ],
-        },
-      };
-      window.__BLOCK = {
-        id: "code-scroll",
-        effect: "scroll",
-        seq: "scroll",
-        line: 12,
-        duration: 6,
-      };
+      window.__TOKENS = {"scroll":{"lang":"js","theme":"github-dark","bg":"#24292e","fg":"#e1e4e8","states":[{"code":"import { createClient } from \"./client\"\nimport { logger } from \"./logger\"\n\nconst RETRIES = 3\n\nexport async function fetchWithRetry(url, opts = {}) {\n  const client = createClient(opts)\n  let lastError = null\n\n  for (let attempt = 1; attempt <= RETRIES; attempt++) {\n    try {\n      const res = await client.get(url)\n      if (res.ok) return res.body\n      lastError = new Error(\"bad status \" + res.status)\n    } catch (err) {\n      lastError = err\n      logger.warn(\"attempt \" + attempt + \" failed\")\n    }\n    await sleep(attempt * 250)\n  }\n\n  throw lastError\n}","tokens":[{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-0","content":"import","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-1","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-2","content":"{ createClient }","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-3","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-4","content":"from","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-5","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-6","content":"\"./client\"","color":"#9ECBFF","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-7","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-8","content":"import","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-9","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-10","content":"{ logger }","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-11","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-12","content":"from","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-13","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-14","content":"\"./logger\"","color":"#9ECBFF","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-15","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-16","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-17","content":"const","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-18","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-19","content":"RETRIES","color":"#79B8FF","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-20","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-21","content":"=","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-22","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-23","content":"3","color":"#79B8FF","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-24","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-25","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-26","content":"export","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-27","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-28","content":"async","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-29","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-30","content":"function","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-31","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-32","content":"fetchWithRetry","color":"#B392F0","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-33","content":"(","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-34","content":"url","color":"#FFAB70","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-35","content":",","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-36","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-37","content":"opts","color":"#FFAB70","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-38","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-39","content":"=","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-40","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-41","content":"{}) {","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-42","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-43","content":"  ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-44","content":"const","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-45","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-46","content":"client","color":"#79B8FF","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-47","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-48","content":"=","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-49","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-50","content":"createClient","color":"#B392F0","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-51","content":"(opts)","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-52","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-53","content":"  ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-54","content":"let","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-55","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-56","content":"lastError","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-57","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-58","content":"=","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-59","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-60","content":"null","color":"#79B8FF","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-61","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-62","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-63","content":"  ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-64","content":"for","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-65","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-66","content":"(","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-67","content":"let","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-68","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-69","content":"attempt","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-70","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-71","content":"=","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-72","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-73","content":"1","color":"#79B8FF","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-74","content":"; attempt","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-75","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-76","content":"<=","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-77","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-78","content":"RETRIES","color":"#79B8FF","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-79","content":"; attempt","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-80","content":"++","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-81","content":") {","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-82","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-83","content":"    ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-84","content":"try","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-85","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-86","content":"{","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-87","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-88","content":"      ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-89","content":"const","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-90","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-91","content":"res","color":"#79B8FF","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-92","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-93","content":"=","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-94","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-95","content":"await","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-96","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-97","content":"client.","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-98","content":"get","color":"#B392F0","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-99","content":"(url)","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-100","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-101","content":"      ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-102","content":"if","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-103","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-104","content":"(res.ok)","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-105","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-106","content":"return","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-107","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-108","content":"res.body","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-109","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-110","content":"      ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-111","content":"lastError","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-112","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-113","content":"=","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-114","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-115","content":"new","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-116","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-117","content":"Error","color":"#B392F0","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-118","content":"(","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-119","content":"\"bad status \"","color":"#9ECBFF","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-120","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-121","content":"+","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-122","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-123","content":"res.status)","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-124","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-125","content":"    ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-126","content":"}","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-127","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-128","content":"catch","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-129","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-130","content":"(err) {","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-131","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-132","content":"      ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-133","content":"lastError","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-134","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-135","content":"=","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-136","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-137","content":"err","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-138","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-139","content":"      ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-140","content":"logger.","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-141","content":"warn","color":"#B392F0","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-142","content":"(","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-143","content":"\"attempt \"","color":"#9ECBFF","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-144","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-145","content":"+","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-146","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-147","content":"attempt","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-148","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-149","content":"+","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-150","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-151","content":"\" failed\"","color":"#9ECBFF","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-152","content":")","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-153","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-154","content":"    ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-155","content":"}","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-156","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-157","content":"    ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-158","content":"await","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-159","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-160","content":"sleep","color":"#B392F0","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-161","content":"(attempt","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-162","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-163","content":"*","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-164","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-165","content":"250","color":"#79B8FF","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-166","content":")","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-167","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-168","content":"  ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-169","content":"}","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-170","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-171","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-172","content":"  ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-173","content":"throw","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-174","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-175","content":"lastError","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-176","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-177","content":"}","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-178","content":"\n","color":"#e1e4e8","fontStyle":0}]}]}};
+      window.__BLOCK = {"id":"code-scroll","effect":"scroll","seq":"scroll","line":12,"duration":6};
     </script>
     <script>
-      // 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
-      // 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].
-      (function () {
-        "use strict";
-        var T = window.__TOKENS || {};
+// 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
+// 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].
+(function () {
+  "use strict";
+  var T = window.__TOKENS || {};
 
-        function lineDiv() {
-          var d = document.createElement("div");
-          d.className = "line";
-          return d;
-        }
+  function lineDiv() {
+    var d = document.createElement("div");
+    d.className = "line";
+    return d;
+  }
 
-        // Render a code state's keyed tokens into codeEl as lines of inline-block .tok spans.
-        function renderState(codeEl, state) {
-          codeEl.textContent = "";
-          var keyToEl = new Map();
-          var line = lineDiv();
-          codeEl.appendChild(line);
-          for (var i = 0; i < state.tokens.length; i++) {
-            var t = state.tokens[i];
-            if (t.content === "\n") {
-              line = lineDiv();
-              codeEl.appendChild(line);
-              continue;
-            }
-            var span = document.createElement("span");
-            span.className = "tok";
-            span.textContent = t.content;
-            span.style.color = t.color;
-            if (t.fontStyle & 1) span.style.fontStyle = "italic";
-            if (t.fontStyle & 2) span.style.fontWeight = "700";
-            line.appendChild(span);
-            keyToEl.set(t.key, span);
-          }
-          var last = codeEl.lastChild;
-          if (last && last.className === "line" && last.children.length === 0)
-            codeEl.removeChild(last);
-          return keyToEl;
-        }
+  // Render a code state's keyed tokens into codeEl as lines of inline-block .tok spans.
+  function renderState(codeEl, state) {
+    codeEl.textContent = "";
+    var keyToEl = new Map();
+    var line = lineDiv();
+    codeEl.appendChild(line);
+    for (var i = 0; i < state.tokens.length; i++) {
+      var t = state.tokens[i];
+      if (t.content === "\n") {
+        line = lineDiv();
+        codeEl.appendChild(line);
+        continue;
+      }
+      var span = document.createElement("span");
+      span.className = "tok";
+      span.textContent = t.content;
+      span.style.color = t.color;
+      if (t.fontStyle & 1) span.style.fontStyle = "italic";
+      if (t.fontStyle & 2) span.style.fontWeight = "700";
+      line.appendChild(span);
+      keyToEl.set(t.key, span);
+    }
+    var last = codeEl.lastChild;
+    if (last && last.className === "line" && last.children.length === 0) codeEl.removeChild(last);
+    return keyToEl;
+  }
 
-        function rectsOf(keyToEl) {
-          var m = new Map();
-          keyToEl.forEach(function (el, k) {
-            var r = el.getBoundingClientRect();
-            m.set(k, { left: r.left, top: r.top });
-          });
-          return m;
-        }
+  function rectsOf(keyToEl) {
+    var m = new Map();
+    keyToEl.forEach(function (el, k) {
+      var r = el.getBoundingClientRect();
+      m.set(k, { left: r.left, top: r.top });
+    });
+    return m;
+  }
 
-        function makeScene(surface, withGutter) {
-          var scene = document.createElement("div");
-          scene.className = "scene";
-          if (withGutter) {
-            var g = document.createElement("div");
-            g.className = "gutter";
-            scene.appendChild(g);
-          }
-          var code = document.createElement("div");
-          code.className = "code";
-          scene.appendChild(code);
-          surface.appendChild(scene);
-          return { scene: scene, code: code, gutter: scene.querySelector(".gutter") };
-        }
+  function makeScene(surface, withGutter) {
+    var scene = document.createElement("div");
+    scene.className = "scene";
+    if (withGutter) {
+      var g = document.createElement("div");
+      g.className = "gutter";
+      scene.appendChild(g);
+    }
+    var code = document.createElement("div");
+    code.className = "code";
+    scene.appendChild(code);
+    surface.appendChild(scene);
+    return { scene: scene, code: code, gutter: scene.querySelector(".gutter") };
+  }
 
-        function fillGutter(g, n) {
-          var html = "";
-          for (var i = 1; i <= n; i++) html += '<span class="ln">' + i + "</span>";
-          g.innerHTML = html;
-        }
+  function fillGutter(g, n) {
+    var html = "";
+    for (var i = 1; i <= n; i++) html += '<span class="ln">' + i + "</span>";
+    g.innerHTML = html;
+  }
 
-        function splitLines(state) {
-          var lines = [{ text: "", tokens: [] }];
-          for (var i = 0; i < state.tokens.length; i++) {
-            var t = state.tokens[i];
-            if (t.content === "\n") {
-              lines.push({ text: "", tokens: [] });
-              continue;
-            }
-            var cur = lines[lines.length - 1];
-            cur.tokens.push(t);
-            cur.text += t.content;
-          }
-          if (lines.length && lines[lines.length - 1].tokens.length === 0) lines.pop();
-          return lines;
-        }
+  function splitLines(state) {
+    var lines = [{ text: "", tokens: [] }];
+    for (var i = 0; i < state.tokens.length; i++) {
+      var t = state.tokens[i];
+      if (t.content === "\n") {
+        lines.push({ text: "", tokens: [] });
+        continue;
+      }
+      var cur = lines[lines.length - 1];
+      cur.tokens.push(t);
+      cur.text += t.content;
+    }
+    if (lines.length && lines[lines.length - 1].tokens.length === 0) lines.pop();
+    return lines;
+  }
 
-        function lineDiff(a, b) {
-          var n = a.length;
-          var m = b.length;
-          var dp = [];
-          for (var i = 0; i <= n; i++) dp.push(new Array(m + 1).fill(0));
-          for (var i = n - 1; i >= 0; i--) {
-            for (var j = m - 1; j >= 0; j--) {
-              dp[i][j] =
-                a[i].text === b[j].text
-                  ? dp[i + 1][j + 1] + 1
-                  : Math.max(dp[i + 1][j], dp[i][j + 1]);
-            }
-          }
-          var ops = [];
-          var i = 0;
-          var j = 0;
-          while (i < n && j < m) {
-            if (a[i].text === b[j].text) {
-              ops.push({ type: "same", line: b[j] });
-              i++;
-              j++;
-            } else if (dp[i + 1][j] >= dp[i][j + 1]) {
-              ops.push({ type: "del", line: a[i] });
-              i++;
-            } else {
-              ops.push({ type: "add", line: b[j] });
-              j++;
-            }
-          }
-          while (i < n) ops.push({ type: "del", line: a[i++] });
-          while (j < m) ops.push({ type: "add", line: b[j++] });
-          return ops;
-        }
+  function lineDiff(a, b) {
+    var n = a.length;
+    var m = b.length;
+    var dp = [];
+    for (var i = 0; i <= n; i++) dp.push(new Array(m + 1).fill(0));
+    for (var i = n - 1; i >= 0; i--) {
+      for (var j = m - 1; j >= 0; j--) {
+        dp[i][j] = a[i].text === b[j].text ? dp[i + 1][j + 1] + 1 : Math.max(dp[i + 1][j], dp[i][j + 1]);
+      }
+    }
+    var ops = [];
+    var i = 0;
+    var j = 0;
+    while (i < n && j < m) {
+      if (a[i].text === b[j].text) {
+        ops.push({ type: "same", line: b[j] });
+        i++;
+        j++;
+      } else if (dp[i + 1][j] >= dp[i][j + 1]) {
+        ops.push({ type: "del", line: a[i] });
+        i++;
+      } else {
+        ops.push({ type: "add", line: b[j] });
+        j++;
+      }
+    }
+    while (i < n) ops.push({ type: "del", line: a[i++] });
+    while (j < m) ops.push({ type: "add", line: b[j++] });
+    return ops;
+  }
 
-        // ---- single-scene effect builders (fade in, play, hold to end) -------------
-        var FADE = 0.45;
+  // ---- single-scene effect builders (fade in, play, hold to end) -------------
+  var FADE = 0.45;
 
-        function morph(tl, surface, states, start) {
-          var STEP = 1.2;
-          var HOLD = 1.0;
-          var t = start;
-          for (var s = 0; s < states.length - 1; s++) {
-            var parts = makeScene(surface, false);
-            var code = parts.code;
-            var fromEls = renderState(code, states[s]);
-            var fromR = rectsOf(fromEls);
-            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;
-            toEls.forEach(function (el, k) {
-              var fr = fromR.get(k);
-              var tr = toR.get(k);
-              if (fr) {
-                seg.fromTo(
-                  el,
-                  { x: fr.left - tr.left, y: fr.top - tr.top },
-                  { x: 0, y: 0, duration: STEP, ease: "power2.inOut" },
-                  0,
-                );
-              } else {
-                seg.fromTo(
-                  el,
-                  { opacity: 0 },
-                  { opacity: 1, duration: FD, ease: "power1.out" },
-                  ENTER_AT,
-                );
-              }
-            });
-            var toKeys = new Set(toEls.keys());
-            var fromState = states[s];
-            for (var i = 0; i < fromState.tokens.length; i++) {
-              var tok = fromState.tokens[i];
-              if (tok.content === "\n" || toKeys.has(tok.key) || !fromR.has(tok.key)) continue;
-              var r = fromR.get(tok.key);
-              var span = document.createElement("span");
-              span.className = "tok";
-              span.textContent = tok.content;
-              span.style.position = "absolute";
-              span.style.left = r.left - base.left + "px";
-              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);
-            }
-            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);
-            if (!isLast)
-              tl.to(parts.scene, { opacity: 0, duration: FADE, ease: "power1.in" }, segEnd - FADE);
-            tl.add(seg, segStart);
-            t = segEnd - FADE;
-          }
+  function morph(tl, surface, states, start) {
+    var STEP = 1.2;
+    var HOLD = 1.0;
+    var t = start;
+    for (var s = 0; s < states.length - 1; s++) {
+      var parts = makeScene(surface, false);
+      var code = parts.code;
+      var fromEls = renderState(code, states[s]);
+      var fromR = rectsOf(fromEls);
+      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;
+      toEls.forEach(function (el, k) {
+        var fr = fromR.get(k);
+        var tr = toR.get(k);
+        if (fr) {
+          seg.fromTo(el, { x: fr.left - tr.left, y: fr.top - tr.top }, { x: 0, y: 0, duration: STEP, ease: "power2.inOut" }, 0);
+        } else {
+          seg.fromTo(el, { opacity: 0 }, { opacity: 1, duration: FD, ease: "power1.out" }, ENTER_AT);
         }
+      });
+      var toKeys = new Set(toEls.keys());
+      var fromState = states[s];
+      for (var i = 0; i < fromState.tokens.length; i++) {
+        var tok = fromState.tokens[i];
+        if (tok.content === "\n" || toKeys.has(tok.key) || !fromR.has(tok.key)) continue;
+        var r = fromR.get(tok.key);
+        var span = document.createElement("span");
+        span.className = "tok";
+        span.textContent = tok.content;
+        span.style.position = "absolute";
+        span.style.left = r.left - base.left + "px";
+        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);
+      }
+      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);
+      if (!isLast) tl.to(parts.scene, { opacity: 0, duration: FADE, ease: "power1.in" }, segEnd - FADE);
+      tl.add(seg, segStart);
+      t = segEnd - FADE;
+    }
+  }
 
-        function flight(tl, surface, states, start) {
-          var FLY = 1.0;
-          var STAGGER = 0.3;
-          var parts = makeScene(surface, false);
-          parts.code.remove();
-          var scene = parts.scene;
-          var target = document.createElement("div");
-          target.className = "flight-target";
-          scene.appendChild(target);
-          var W = surface.clientWidth;
-          var H = surface.clientHeight;
-          var leftCx = W * 0.27;
-          var rightCx = W * 0.71;
-          var midY = H * 0.46;
-          var gap = 70;
-          var blocks = states.map(function (st) {
-            var blk = document.createElement("div");
-            blk.className = "flight-block";
-            renderState(blk, st);
-            scene.appendChild(blk);
-            return blk;
-          });
-          var n = blocks.length;
-          var maxW = 0;
-          var firstDestY = 0;
-          blocks.forEach(function (blk, i) {
-            var bw = blk.getBoundingClientRect().width;
-            if (bw > maxW) maxW = bw;
-            var destX = rightCx - bw / 2;
-            var destY = midY + (i - (n - 1) / 2) * gap;
-            if (i === 0) firstDestY = destY;
-            var srcX = leftCx - bw / 2;
-            var srcY = midY + (i - (n - 1) / 2) * (gap + 16);
-            blk.style.left = destX + "px";
-            blk.style.top = destY + "px";
-            tl.fromTo(
-              blk,
-              { x: srcX - destX, y: srcY - destY, opacity: 0, rotation: -5, scale: 0.9 },
-              {
-                x: 0,
-                y: 0,
-                opacity: 1,
-                rotation: 0,
-                scale: 1,
-                duration: FLY,
-                ease: "power3.inOut",
-              },
-              start + FADE + i * STAGGER,
-            );
-          });
-          target.style.left = rightCx - maxW / 2 - 26 + "px";
-          target.style.top = firstDestY - 18 + "px";
-          target.style.width = maxW + 52 + "px";
-          target.style.height = (n - 1) * gap + 62 + "px";
-          var landAt = start + FADE + (n - 1) * STAGGER + FLY;
-          tl.set(scene, { opacity: 1 }, 0);
-          tl.to(target, { opacity: 1, duration: 0.5, ease: "power1.out" }, landAt - 0.5);
-        }
+  function flight(tl, surface, states, start) {
+    var FLY = 0.95;
+    var STAGGER = 0.26;
+    var GAP = 20;
+    var parts = makeScene(surface, false);
+    parts.code.remove();
+    var scene = parts.scene;
+    var target = document.createElement("div");
+    target.className = "flight-target";
+    scene.appendChild(target);
+    var W = surface.clientWidth;
+    var H = surface.clientHeight;
 
-        function typing(tl, surface, state, start) {
-          var PER = 0.05;
-          var parts = makeScene(surface, true);
-          var code = parts.code;
-          var keyToEl = renderState(code, state);
-          fillGutter(parts.gutter, code.querySelectorAll(".line").length);
-          var base = code.getBoundingClientRect();
-          var caret = document.createElement("div");
-          caret.className = "caret";
-          code.appendChild(caret);
-          var toks = [];
-          keyToEl.forEach(function (el) {
-            toks.push(el);
-          });
-          tl.set(parts.scene, { opacity: 0 }, 0);
-          tl.to(parts.scene, { opacity: 1, duration: FADE, ease: "power1.out" }, start);
-          var t0 = start + FADE;
-          if (toks.length) {
-            var r0 = toks[0].getBoundingClientRect();
-            tl.set(caret, { x: r0.left - base.left, y: r0.top - base.top, opacity: 1 }, 0);
-          }
-          toks.forEach(function (el, i) {
-            tl.set(el, { opacity: 0 }, 0);
-            tl.to(el, { opacity: 1, duration: 0.08, ease: "none" }, t0 + i * PER);
-            var r = el.getBoundingClientRect();
-            tl.set(caret, { x: r.right - base.left, y: r.top - base.top }, t0 + i * PER);
-          });
-        }
+    var blocks = states.map(function (st) {
+      var blk = document.createElement("div");
+      blk.className = "flight-block";
+      renderState(blk, st);
+      scene.appendChild(blk);
+      return blk;
+    });
+    var n = blocks.length;
 
-        function diff(tl, surface, states, start) {
-          var DEL = 0.55;
-          var ADD = 0.6;
-          var ops = lineDiff(splitLines(states[0]), splitLines(states[1]));
-          var parts = makeScene(surface, false);
-          var code = parts.code;
-          var delEls = [];
-          var addEls = [];
-          ops.forEach(function (op) {
-            var ln = document.createElement("div");
-            ln.className =
-              "diff-line" +
-              (op.type === "del" ? " diff-del" : op.type === "add" ? " diff-add" : "");
-            var sign = document.createElement("span");
-            sign.className = "diff-sign";
-            sign.textContent = op.type === "del" ? "- " : op.type === "add" ? "+ " : "  ";
-            ln.appendChild(sign);
-            op.line.tokens.forEach(function (t) {
-              var s = document.createElement("span");
-              s.className = "tok";
-              s.textContent = t.content;
-              s.style.color = t.color;
-              ln.appendChild(s);
-            });
-            code.appendChild(ln);
-            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);
-          var atDel = start + FADE + 0.3;
-          delEls.forEach(function (el, k) {
-            tl.fromTo(
-              el,
-              { height: 46, opacity: 1 },
-              { height: 0, opacity: 0, duration: DEL, ease: "power2.inOut" },
-              atDel + k * 0.08,
-            );
-          });
-          var atAdd = atDel + DEL + 0.15;
-          addEls.forEach(function (el, k) {
-            tl.set(el, { height: 0, opacity: 0 }, 0);
-            tl.fromTo(
-              el,
-              { height: 0, opacity: 0 },
-              { height: 46, opacity: 1, duration: ADD, ease: "power2.out" },
-              atAdd + k * 0.12,
-            );
-          });
-        }
+    // Pass 1: measure natural size, then make every chip the SAME width (symmetry).
+    var maxW = 0;
+    var chipH = 0;
+    blocks.forEach(function (blk) {
+      var r = blk.getBoundingClientRect();
+      if (r.width > maxW) maxW = r.width;
+      if (r.height > chipH) chipH = r.height;
+    });
+    blocks.forEach(function (blk) {
+      blk.style.width = maxW + "px";
+    });
 
-        function highlight(tl, surface, state, start, targetIdx) {
-          var SWEEP = 0.9;
-          var parts = makeScene(surface, true);
-          var code = parts.code;
-          renderState(code, state);
-          var lines = code.querySelectorAll(".line");
-          fillGutter(parts.gutter, lines.length);
-          var base = code.getBoundingClientRect();
-          var idx = Math.max(0, Math.min(lines.length - 1, targetIdx));
-          var lr = lines[idx].getBoundingClientRect();
-          var box = document.createElement("div");
-          box.className = "hl-box";
-          box.style.left = lr.left - base.left - 8 + "px";
-          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);
-          var at = start + FADE + 0.2;
-          tl.fromTo(
-            box,
-            { width: 0, opacity: 0 },
-            { width: lr.width + 18, opacity: 1, duration: SWEEP, ease: "power2.inOut" },
-            at,
-          );
-          for (var i = 0; i < lines.length; i++) {
-            if (i === idx) continue;
-            tl.fromTo(
-              lines[i],
-              { opacity: 1 },
-              { opacity: 0.45, duration: SWEEP, ease: "power2.inOut" },
-              at,
-            );
-          }
-        }
+    // Pass 2: evenly-stacked, left-aligned, group centered in the surface.
+    var stackH = n * chipH + (n - 1) * GAP;
+    var destLeft = Math.round((W - maxW) / 2);
+    var topY = Math.round((H - stackH) / 2);
+    blocks.forEach(function (blk, i) {
+      var destY = topY + i * (chipH + GAP);
+      blk.style.left = destLeft + "px";
+      blk.style.top = destY + "px";
+      // fly straight in from the left to the shared left edge — clean, no skew
+      var srcX = destLeft - W * 0.32;
+      tl.fromTo(
+        blk,
+        { x: srcX - destLeft, opacity: 0, scale: 0.96 },
+        { x: 0, opacity: 1, scale: 1, duration: FLY, ease: "power3.out" },
+        start + FADE + i * STAGGER,
+      );
+    });
 
-        function scroll(tl, surface, state, start, targetLine) {
-          var SCROLL = 1.7;
-          var parts = makeScene(surface, true);
-          var code = parts.code;
-          renderState(code, state);
-          var lines = code.querySelectorAll(".line");
-          fillGutter(parts.gutter, lines.length);
-          var surfRect = surface.getBoundingClientRect();
-          var idx = Math.max(0, Math.min(lines.length - 1, targetLine - 1));
-          var lr = lines[idx].getBoundingClientRect();
-          var lineCenter = lr.top + lr.height / 2 - surfRect.top;
-          var dy = surfRect.height * 0.5 - lineCenter;
-          var box = document.createElement("div");
-          box.className = "hl-box";
-          box.style.left = lines[idx].offsetLeft - 8 + "px";
-          box.style.top = lines[idx].offsetTop - 1 + "px";
-          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);
-          var at = start + FADE + 0.35;
-          tl.fromTo(
-            [code, parts.gutter],
-            { y: 0 },
-            { y: dy, duration: SCROLL, ease: "power2.inOut" },
-            at,
-          );
-          var arrAt = at + SCROLL;
-          for (var i = 0; i < lines.length; i++) {
-            if (i === idx) continue;
-            tl.fromTo(
-              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);
-        }
+    // Even-padded panel tightly wrapping the uniform stack.
+    var padX = 30;
+    var padY = 24;
+    target.style.left = destLeft - padX + "px";
+    target.style.top = topY - padY + "px";
+    target.style.width = maxW + padX * 2 + "px";
+    target.style.height = stackH + padY * 2 + "px";
+    var landAt = start + FADE + (n - 1) * STAGGER + FLY;
+    tl.set(scene, { opacity: 1 }, 0);
+    tl.to(target, { opacity: 1, duration: 0.5, ease: "power1.out" }, landAt - 0.5);
+  }
 
-        function buildEffect(tl, surface, spec) {
-          var start = 0.45;
-          var seq = T[spec.seq];
-          if (spec.effect === "morph") morph(tl, surface, seq.states, start);
-          else if (spec.effect === "flight") flight(tl, surface, seq.states, start);
-          else if (spec.effect === "typing") typing(tl, surface, seq.states[0], start);
-          else if (spec.effect === "diff") diff(tl, surface, seq.states, start);
-          else if (spec.effect === "highlight")
-            highlight(tl, surface, seq.states[0], start, spec.line || 0);
-          else if (spec.effect === "scroll")
-            scroll(tl, surface, seq.states[0], start, spec.line || 1);
-        }
+  function typing(tl, surface, state, start) {
+    var PER = 0.028; // seconds per character — smooth, fast typewriter
+    var parts = makeScene(surface, true);
+    var code = parts.code;
 
-        function go() {
-          var spec = window.__BLOCK;
-          var surface = document.getElementById("surface");
-          var root = document.getElementById("root");
-          window.__timelines = window.__timelines || {};
-          var tl = gsap.timeline({ paused: true });
-          window.__timelines["code-scroll"] = tl; // register synchronously
-          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
-          });
-        }
+    // Per-CHARACTER render (granular reveal reads smoother than per-token pops).
+    code.textContent = "";
+    var line = document.createElement("div");
+    line.className = "line";
+    code.appendChild(line);
+    var chars = [];
+    for (var i = 0; i < state.tokens.length; i++) {
+      var t = state.tokens[i];
+      if (t.content === "\n") {
+        line = document.createElement("div");
+        line.className = "line";
+        code.appendChild(line);
+        continue;
+      }
+      for (var c = 0; c < t.content.length; c++) {
+        var span = document.createElement("span");
+        span.className = "tok";
+        span.textContent = t.content[c];
+        span.style.color = t.color;
+        if (t.fontStyle & 1) span.style.fontStyle = "italic";
+        if (t.fontStyle & 2) span.style.fontWeight = "700";
+        line.appendChild(span);
+        chars.push({ el: span, ws: t.content[c] === " " });
+      }
+    }
+    var last = code.lastChild;
+    if (last && last.className === "line" && last.children.length === 0) code.removeChild(last);
+
+    fillGutter(parts.gutter, code.querySelectorAll(".line").length);
+    var base = code.getBoundingClientRect();
+    var caret = document.createElement("div");
+    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);
+
+    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);
+    }
+    chars.forEach(function (c, i) {
+      var at = t0 + i * PER;
+      tl.set(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);
+      // caret glides at constant speed to each char's right edge (linear = no stop-start jitter)
+      var r = c.el.getBoundingClientRect();
+      tl.to(caret, { x: r.right - base.left, y: r.top - base.top, duration: PER, ease: "none" }, at);
+    });
+  }
+
+  function diff(tl, surface, states, start) {
+    var DEL = 0.55;
+    var ADD = 0.6;
+    var ops = lineDiff(splitLines(states[0]), splitLines(states[1]));
+    var parts = makeScene(surface, false);
+    var code = parts.code;
+    var delEls = [];
+    var addEls = [];
+    ops.forEach(function (op) {
+      var ln = document.createElement("div");
+      ln.className = "diff-line" + (op.type === "del" ? " diff-del" : op.type === "add" ? " diff-add" : "");
+      var sign = document.createElement("span");
+      sign.className = "diff-sign";
+      sign.textContent = op.type === "del" ? "- " : op.type === "add" ? "+ " : "  ";
+      ln.appendChild(sign);
+      op.line.tokens.forEach(function (t) {
+        var s = document.createElement("span");
+        s.className = "tok";
+        s.textContent = t.content;
+        s.style.color = t.color;
+        ln.appendChild(s);
+      });
+      code.appendChild(ln);
+      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);
+    var atDel = start + FADE + 0.3;
+    delEls.forEach(function (el, k) {
+      tl.fromTo(el, { height: 46, opacity: 1 }, { height: 0, opacity: 0, duration: DEL, ease: "power2.inOut" }, atDel + k * 0.08);
+    });
+    var atAdd = atDel + DEL + 0.15;
+    addEls.forEach(function (el, k) {
+      tl.set(el, { height: 0, opacity: 0 }, 0);
+      tl.fromTo(el, { height: 0, opacity: 0 }, { height: 46, opacity: 1, duration: ADD, ease: "power2.out" }, atAdd + k * 0.12);
+    });
+  }
+
+  function highlight(tl, surface, state, start, targetIdx) {
+    var SWEEP = 0.9;
+    var parts = makeScene(surface, true);
+    var code = parts.code;
+    renderState(code, state);
+    var lines = code.querySelectorAll(".line");
+    fillGutter(parts.gutter, lines.length);
+    var base = code.getBoundingClientRect();
+    var idx = Math.max(0, Math.min(lines.length - 1, targetIdx));
+    var lr = lines[idx].getBoundingClientRect();
+    var box = document.createElement("div");
+    box.className = "hl-box";
+    box.style.left = lr.left - base.left - 8 + "px";
+    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);
+    var at = start + FADE + 0.2;
+    tl.fromTo(box, { width: 0, opacity: 0 }, { width: lr.width + 18, opacity: 1, duration: SWEEP, ease: "power2.inOut" }, at);
+    for (var i = 0; i < lines.length; i++) {
+      if (i === idx) continue;
+      tl.fromTo(lines[i], { opacity: 1 }, { opacity: 0.45, duration: SWEEP, ease: "power2.inOut" }, at);
+    }
+  }
+
+  function scroll(tl, surface, state, start, targetLine) {
+    var SCROLL = 1.7;
+    var parts = makeScene(surface, true);
+    var code = parts.code;
+    renderState(code, state);
+    var lines = code.querySelectorAll(".line");
+    fillGutter(parts.gutter, lines.length);
+    var surfRect = surface.getBoundingClientRect();
+    var idx = Math.max(0, Math.min(lines.length - 1, targetLine - 1));
+    var lr = lines[idx].getBoundingClientRect();
+    var lineCenter = lr.top + lr.height / 2 - surfRect.top;
+    var dy = surfRect.height * 0.5 - lineCenter;
+    var box = document.createElement("div");
+    box.className = "hl-box";
+    box.style.left = lines[idx].offsetLeft - 8 + "px";
+    box.style.top = lines[idx].offsetTop - 1 + "px";
+    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);
+    var at = start + FADE + 0.35;
+    tl.fromTo([code, parts.gutter], { y: 0 }, { y: dy, duration: SCROLL, ease: "power2.inOut" }, at);
+    var arrAt = at + SCROLL;
+    for (var i = 0; i < lines.length; i++) {
+      if (i === idx) continue;
+      tl.fromTo(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);
+  }
+
+  function buildEffect(tl, surface, spec) {
+    var start = 0.45;
+    var seq = T[spec.seq];
+    if (spec.effect === "morph") morph(tl, surface, seq.states, start);
+    else if (spec.effect === "flight") flight(tl, surface, seq.states, start);
+    else if (spec.effect === "typing") typing(tl, surface, seq.states[0], start);
+    else if (spec.effect === "diff") diff(tl, surface, seq.states, start);
+    else if (spec.effect === "highlight") highlight(tl, surface, seq.states[0], start, spec.line || 0);
+    else if (spec.effect === "scroll") scroll(tl, surface, seq.states[0], start, spec.line || 1);
+  }
+
+  function go() {
+    var spec = window.__BLOCK;
+    var surface = document.getElementById("surface");
+    var root = document.getElementById("root");
+    window.__timelines = window.__timelines || {};
+    var tl = gsap.timeline({ paused: true });
+    window.__timelines["code-scroll"] = tl; // register synchronously
+    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
+    });
+  }
+
+  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
+  else go();
+})();
 
-        if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
-        else go();
-      })();
     </script>
   </body>
 </html>
diff --git a/registry/blocks/code-shader-dissolve/code-shader-dissolve.html b/registry/blocks/code-shader-dissolve/code-shader-dissolve.html
index c2e687a0d4..54f0baad5c 100644
--- a/registry/blocks/code-shader-dissolve/code-shader-dissolve.html
+++ b/registry/blocks/code-shader-dissolve/code-shader-dissolve.html
@@ -7,30 +7,10 @@
     <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js"></script>
     <style>
-      * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-      }
-      html,
-      body {
-        width: 1920px;
-        height: 1080px;
-        overflow: hidden;
-        background: #05070b;
-      }
-      #root {
-        position: relative;
-        width: 1920px;
-        height: 1080px;
-      }
-      #gl {
-        position: absolute;
-        inset: 0;
-        width: 1920px;
-        height: 1080px;
-        display: block;
-      }
+      * { margin: 0; padding: 0; box-sizing: border-box; }
+      html, body { width: 1920px; height: 1080px; overflow: hidden; background: #05070b; }
+      #root { position: relative; width: 1920px; height: 1080px; }
+      #gl { position: absolute; inset: 0; width: 1920px; height: 1080px; display: block; }
     </style>
   </head>
   <body>
@@ -45,706 +25,415 @@
       <canvas id="gl" width="1920" height="1080"></canvas>
     </div>
     <script>
-      window.__TOKENS = {
-        compile: {
-          lang: "js",
-          theme: "github-dark",
-          bg: "#24292e",
-          fg: "#e1e4e8",
-          states: [
-            {
-              code: "function compile(src) {\n  const ast = parse(src)\n  const ir = optimize(ast)\n  return emit(ir)\n}",
-              tokens: [
-                {
-                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-0",
-                  content: "function",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-1",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-2",
-                  content: "compile",
-                  color: "#B392F0",
-                  fontStyle: 0,
-                },
-                {
-                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-3",
-                  content: "(",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-4",
-                  content: "src",
-                  color: "#FFAB70",
-                  fontStyle: 0,
-                },
-                {
-                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-5",
-                  content: ") {",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-6",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-7",
-                  content: "  ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-8",
-                  content: "const",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-9",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-10",
-                  content: "ast",
-                  color: "#79B8FF",
-                  fontStyle: 0,
-                },
-                {
-                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-11",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-12",
-                  content: "=",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-13",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-14",
-                  content: "parse",
-                  color: "#B392F0",
-                  fontStyle: 0,
-                },
-                {
-                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-15",
-                  content: "(src)",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-16",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-17",
-                  content: "  ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-18",
-                  content: "const",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-19",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-20",
-                  content: "ir",
-                  color: "#79B8FF",
-                  fontStyle: 0,
-                },
-                {
-                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-21",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-22",
-                  content: "=",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-23",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-24",
-                  content: "optimize",
-                  color: "#B392F0",
-                  fontStyle: 0,
-                },
-                {
-                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-25",
-                  content: "(ast)",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-26",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-27",
-                  content: "  ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-28",
-                  content: "return",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-29",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-30",
-                  content: "emit",
-                  color: "#B392F0",
-                  fontStyle: 0,
-                },
-                {
-                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-31",
-                  content: "(ir)",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-32",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-33",
-                  content: "}",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-34",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-              ],
-            },
-          ],
-        },
-      };
-      window.__BLOCK = {
-        id: "code-shader-dissolve",
-        effect: "dissolve",
-        seq: "compile",
-        duration: 7,
-        seed: 11,
-      };
+      window.__TOKENS = {"compile":{"lang":"js","theme":"github-dark","bg":"#24292e","fg":"#e1e4e8","states":[{"code":"function compile(src) {\n  const ast = parse(src)\n  const ir = optimize(ast)\n  return emit(ir)\n}","tokens":[{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-0","content":"function","color":"#F97583","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-1","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-2","content":"compile","color":"#B392F0","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-3","content":"(","color":"#E1E4E8","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-4","content":"src","color":"#FFAB70","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-5","content":") {","color":"#E1E4E8","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-6","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-7","content":"  ","color":"#E1E4E8","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-8","content":"const","color":"#F97583","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-9","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-10","content":"ast","color":"#79B8FF","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-11","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-12","content":"=","color":"#F97583","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-13","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-14","content":"parse","color":"#B392F0","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-15","content":"(src)","color":"#E1E4E8","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-16","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-17","content":"  ","color":"#E1E4E8","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-18","content":"const","color":"#F97583","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-19","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-20","content":"ir","color":"#79B8FF","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-21","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-22","content":"=","color":"#F97583","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-23","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-24","content":"optimize","color":"#B392F0","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-25","content":"(ast)","color":"#E1E4E8","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-26","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-27","content":"  ","color":"#E1E4E8","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-28","content":"return","color":"#F97583","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-29","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-30","content":"emit","color":"#B392F0","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-31","content":"(ir)","color":"#E1E4E8","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-32","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-33","content":"}","color":"#E1E4E8","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-34","content":"\n","color":"#e1e4e8","fontStyle":0}]}]}};
+      window.__BLOCK = {"id":"code-shader-dissolve","effect":"dissolve","seq":"compile","duration":7,"seed":11};
     </script>
     <script>
-      // hf-code-anim-gl.js — WebGL code-animation engine for the "crazy" Code Animations blocks.
-      //
-      // 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
-      //   - 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
-      //
-      // Each block sets window.__BLOCK = { id, effect, seq, duration, seed } and includes this engine.
-      (function () {
-        "use strict";
-        var T = window.__TOKENS || {};
-
-        // ---- seeded PRNG (no Math.random) -----------------------------------------
-        function mulberry32(a) {
-          return function () {
-            a |= 0;
-            a = (a + 0x6d2b79f5) | 0;
-            var t = Math.imul(a ^ (a >>> 15), 1 | a);
-            t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
-            return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
-          };
-        }
-
-        // ---- split a token state into lines of {content,color} --------------------
-        function splitLines(state) {
-          var lines = [[]];
-          for (var i = 0; i < state.tokens.length; i++) {
-            var t = state.tokens[i];
-            if (t.content === "\n") {
-              lines.push([]);
-              continue;
-            }
-            lines[lines.length - 1].push(t);
-          }
-          while (lines.length && lines[lines.length - 1].length === 0) lines.pop();
-          return lines;
-        }
-
-        // ---- THE BRIDGE: draw baked tokens to an offscreen 2D canvas ---------------
-        // Returns { canvas, W, H, lines, lineH, padY, fontPx } so effects can sample it.
-        function drawCodeToCanvas(state, opts) {
-          opts = opts || {};
-          var fontPx = opts.fontPx || 36;
-          var lineH = opts.lineH || 54;
-          var padX = opts.padX || 70;
-          var padY = opts.padY || 60;
-          var weight = opts.weight || 500;
-          var font = weight + " " + fontPx + 'px "JetBrains Mono", monospace';
-
-          var lines = splitLines(state);
-          var measure = document.createElement("canvas").getContext("2d");
-          measure.font = font;
-          var maxW = 0;
-          for (var i = 0; i < lines.length; i++) {
-            var w = 0;
-            for (var j = 0; j < lines[i].length; j++)
-              w += measure.measureText(lines[i][j].content).width;
-            if (w > maxW) maxW = w;
-          }
-          var W = Math.max(2, Math.ceil(maxW + padX * 2));
-          var H = Math.max(2, Math.ceil(lines.length * lineH + padY * 2));
-
-          var canvas = document.createElement("canvas");
-          canvas.width = W;
-          canvas.height = H;
-          var ctx = canvas.getContext("2d");
-          if (opts.transparent) {
-            ctx.clearRect(0, 0, W, H);
-          } else {
-            ctx.fillStyle = opts.bg || "#0b0f17";
-            ctx.fillRect(0, 0, W, H);
-          }
-          ctx.textBaseline = "top";
-          ctx.font = font;
-          for (var li = 0; li < lines.length; li++) {
-            var x = padX;
-            var y = padY + li * lineH;
-            for (var k = 0; k < lines[li].length; k++) {
-              var tok = lines[li][k];
-              ctx.fillStyle = tok.color;
-              ctx.fillText(tok.content, x, y);
-              x += ctx.measureText(tok.content).width;
-            }
-          }
-          return {
-            canvas: canvas,
-            W: W,
-            H: H,
-            lines: lines.length,
-            lineH: lineH,
-            padY: padY,
-            fontPx: fontPx,
-          };
-        }
-
-        // ===========================================================================
-        // Effect 1 — code-3d-extrude: code on a lit, beveled slab that rotates to rest
-        // ===========================================================================
-        function fxExtrude(THREE, scene, camera, renderer, state, st, tl, dur) {
-          scene.background = new THREE.Color(0x05070b);
-          var code = drawCodeToCanvas(state, {
-            fontPx: 38,
-            lineH: 56,
-            padX: 80,
-            padY: 70,
-            weight: 600,
-          });
-          var tex = new THREE.CanvasTexture(code.canvas);
-          tex.minFilter = THREE.LinearFilter;
-          tex.magFilter = THREE.LinearFilter;
-          tex.generateMipmaps = false;
-
-          var aspect = code.W / code.H;
-          var slabH = 6.2;
-          var slabW = slabH * aspect;
-          var depth = 0.5;
-
-          // beveled slab: rounded extruded rectangle
-          var hw = slabW / 2;
-          var hh = slabH / 2;
-          var r = 0.18;
-          var shape = new THREE.Shape();
-          shape.moveTo(-hw + r, -hh);
-          shape.lineTo(hw - r, -hh);
-          shape.quadraticCurveTo(hw, -hh, hw, -hh + r);
-          shape.lineTo(hw, hh - r);
-          shape.quadraticCurveTo(hw, hh, hw - r, hh);
-          shape.lineTo(-hw + r, hh);
-          shape.quadraticCurveTo(-hw, hh, -hw, hh - r);
-          shape.lineTo(-hw, -hh + r);
-          shape.quadraticCurveTo(-hw, -hh, -hw + r, -hh);
-          var geo = new THREE.ExtrudeGeometry(shape, {
-            depth: depth,
-            bevelEnabled: true,
-            bevelThickness: 0.12,
-            bevelSize: 0.1,
-            bevelSegments: 3,
-            steps: 1,
-          });
-          geo.center();
-          // UVs from ExtrudeGeometry don't map the texture nicely to the face; remap front-face UVs from XY bounds.
-          geo.computeBoundingBox();
-          var bb = geo.boundingBox;
-          var sizeX = bb.max.x - bb.min.x;
-          var sizeY = bb.max.y - bb.min.y;
-          var pos = geo.attributes.position;
-          var uv = geo.attributes.uv;
-          for (var vi = 0; vi < pos.count; vi++) {
-            uv.setXY(vi, (pos.getX(vi) - bb.min.x) / sizeX, (pos.getY(vi) - bb.min.y) / sizeY);
-          }
-          uv.needsUpdate = true;
-
-          var faceMat = new THREE.MeshStandardMaterial({
-            map: tex,
-            roughness: 0.42,
-            metalness: 0.0,
-            emissive: 0xffffff,
-            emissiveMap: tex,
-            emissiveIntensity: 0.5,
-          });
-          var edgeMat = new THREE.MeshStandardMaterial({
-            color: 0x121a26,
-            roughness: 0.35,
-            metalness: 0.3,
-          });
-          // ExtrudeGeometry groups: 0 = front+back faces, 1 = sides. Front shows the code.
-          var slab = new THREE.Mesh(geo, [faceMat, edgeMat]);
-          scene.add(slab);
-
-          scene.add(new THREE.AmbientLight(0xffffff, 0.5));
-          var key = new THREE.DirectionalLight(0xbcd4ff, 1.25);
-          key.position.set(5, 7, 9);
-          scene.add(key);
-          var rim = new THREE.DirectionalLight(0x4fffa0, 0.45);
-          rim.position.set(-7, -3, 5);
-          scene.add(rim);
-
-          camera.position.set(0, 0, 10);
-
-          // fit camera distance so the WHOLE slab fits (width-limited for wide code), ~78% fill
-          var vfov = (camera.fov * Math.PI) / 180;
-          var screenAspect = 1920 / 1080;
-          var fitH = slabH / 2 / Math.tan(vfov / 2) / 0.78;
-          var fitW = slabW / 2 / (Math.tan(vfov / 2) * screenAspect) / 0.78;
-          var fitZ = Math.max(fitH, fitW);
-
-          st.rotY = -1.0;
-          st.rotX = 0.4;
-          st.camZ = fitZ + 6;
-          st.glow = 0.0;
-          tl.to(
-            st,
-            { rotY: 0, rotX: 0, camZ: fitZ, glow: 0.6, duration: dur * 0.6, ease: "power3.out" },
-            0,
-          );
-          // gentle breathing drift at rest (subtle — stays readable)
-          tl.to(
-            st,
-            { rotY: 0.06, rotX: -0.02, duration: dur * 0.4, ease: "sine.inOut" },
-            dur * 0.6,
-          );
-
-          return function () {
-            slab.rotation.y = st.rotY;
-            slab.rotation.x = st.rotX;
-            faceMat.emissiveIntensity = st.glow;
-            camera.position.z = st.camZ;
-            camera.lookAt(0, 0, 0);
-            renderer.render(scene, camera);
-          };
-        }
-
-        // ===========================================================================
-        // Effect 2 — code-shader-dissolve: code "compiles" out of GPU noise, holds crisp
-        // ===========================================================================
-        function fxDissolve(THREE, scene, camera, renderer, state, st, tl, dur, seed) {
-          scene.background = new THREE.Color(0x05070b);
-          var code = drawCodeToCanvas(state, {
-            fontPx: 40,
-            lineH: 60,
-            padX: 90,
-            padY: 80,
-            weight: 600,
-          });
-          var tex = new THREE.CanvasTexture(code.canvas);
-          tex.minFilter = THREE.LinearFilter;
-          tex.magFilter = THREE.LinearFilter;
-          tex.generateMipmaps = false;
-
-          var aspect = code.W / code.H;
-          var planeH = 6.6;
-          var planeW = planeH * aspect;
-
-          var uniforms = {
-            uTex: { value: tex },
-            uProgress: { value: 0 },
-            uSeed: { value: (seed || 1) * 13.37 },
-          };
-          var mat = new THREE.ShaderMaterial({
-            uniforms: uniforms,
-            transparent: true,
-            vertexShader: [
-              "varying vec2 vUv;",
-              "void main(){ vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0); }",
-            ].join("\n"),
-            fragmentShader: [
-              "precision highp float;",
-              "uniform sampler2D uTex;",
-              "uniform float uProgress;",
-              "uniform float uSeed;",
-              "varying vec2 vUv;",
-              "float hash(vec2 p){ p=fract(p*vec2(123.34,456.21)); p+=dot(p,p+45.32); return fract(p.x*p.y); }",
-              "float noise(vec2 p){ vec2 i=floor(p),f=fract(p); float a=hash(i),b=hash(i+vec2(1.,0.)),c=hash(i+vec2(0.,1.)),d=hash(i+vec2(1.,1.)); vec2 u=f*f*(3.-2.*f); return mix(mix(a,b,u.x),mix(c,d,u.x),u.y); }",
-              "void main(){",
-              "  vec2 uv = vUv;",
-              // multi-octave seeded noise field
-              "  float n = noise(uv*16.0+uSeed)*0.6 + noise(uv*48.0+uSeed*1.7)*0.3 + noise(uv*120.0+uSeed*2.3)*0.1;",
-              "  float edge = 0.12;",
-              "  float reveal = smoothstep(n-edge, n+edge, uProgress);", // 0 hidden -> 1 shown
-              // chromatic fringe strongest at the dissolving edge
-              "  float band = reveal*(1.0-reveal)*4.0;",
-              "  float off = band*0.010;",
-              "  float r = texture2D(uTex, uv+vec2(off,0.0)).r;",
-              "  float g = texture2D(uTex, uv).g;",
-              "  float b = texture2D(uTex, uv-vec2(off,0.0)).b;",
-              "  vec3 codeCol = vec3(r,g,b);",
-              // additive cyan edge glow along the dissolve front
-              "  vec3 glow = vec3(0.30,0.72,1.0) * band * 0.9;",
-              "  vec3 outc = codeCol*reveal + glow;",
-              "  float a = max(reveal, band*0.8);",
-              "  gl_FragColor = vec4(outc, a);",
-              "}",
-            ].join("\n"),
-          });
-
-          var plane = new THREE.Mesh(new THREE.PlaneGeometry(planeW, planeH), mat);
-          scene.add(plane);
-
-          camera.position.set(0, 0, 10);
-          var vfov = (camera.fov * Math.PI) / 180;
-          var screenAspect = 1920 / 1080;
-          var fitH = planeH / 2 / Math.tan(vfov / 2) / 0.82;
-          var fitW = planeW / 2 / (Math.tan(vfov / 2) * screenAspect) / 0.82;
-          camera.position.z = Math.max(fitH, fitW);
-          camera.lookAt(0, 0, 0);
-
-          // compile in, then hold crisp. Overshoot to 1.15 so even max-noise pixels
-          // (n up to ~1.0, edge 0.12) fully resolve — no leftover specks at rest.
-          tl.to(uniforms.uProgress, { value: 1.15, duration: dur * 0.62, ease: "power1.inOut" }, 0);
-
-          return function () {
-            renderer.render(scene, camera);
-          };
-        }
-
-        // ===========================================================================
-        // Effect 3 — code-particle-assemble: GPU points scatter then fly to glyph pixels
-        // ===========================================================================
-        function fxParticles(THREE, scene, camera, renderer, state, st, tl, dur, seed) {
-          scene.background = new THREE.Color(0x05070b);
-          var code = drawCodeToCanvas(state, {
-            fontPx: 46,
-            lineH: 70,
-            padX: 70,
-            padY: 64,
-            weight: 700,
-          });
-          var cw = code.W;
-          var ch = code.H;
-          var data = code.canvas.getContext("2d").getImageData(0, 0, cw, ch).data;
-          var rng = mulberry32(((seed || 1) * 2654435761) >>> 0);
-
-          var worldW = 13.0;
-          var worldH = worldW * (ch / cw);
-
-          // sample glyph pixels (brighter than the dark bg) on a fixed grid
-          var step = 2;
-          var tx = [];
-          var col = [];
-          for (var y = 0; y < ch; y += step) {
-            for (var x = 0; x < cw; x += step) {
-              var idx = (y * cw + x) * 4;
-              var r = data[idx];
-              var g = data[idx + 1];
-              var b = data[idx + 2];
-              if (r + g + b < 120) continue; // skip background
-              tx.push((x / cw - 0.5) * worldW, -(y / ch - 0.5) * worldH, 0);
-              col.push(r / 255, g / 255, b / 255);
-            }
-          }
-          var n = tx.length / 3;
-
-          var positions = new Float32Array(n * 3);
-          var aOrigin = new Float32Array(n * 3);
-          var aTarget = new Float32Array(tx);
-          var aColor = new Float32Array(col);
-          var aDelay = new Float32Array(n);
-          for (var i = 0; i < n; i++) {
-            var sx = (rng() * 2 - 1) * worldW * 1.15;
-            var sy = (rng() * 2 - 1) * worldH * 1.7;
-            var sz = (rng() * 2 - 1) * 9.0 - 2.0;
-            aOrigin[i * 3] = sx;
-            aOrigin[i * 3 + 1] = sy;
-            aOrigin[i * 3 + 2] = sz;
-            positions[i * 3] = sx;
-            positions[i * 3 + 1] = sy;
-            positions[i * 3 + 2] = sz;
-            aDelay[i] = rng();
-          }
-
-          var geo = new THREE.BufferGeometry();
-          geo.setAttribute("position", new THREE.BufferAttribute(positions, 3));
-          geo.setAttribute("aOrigin", new THREE.BufferAttribute(aOrigin, 3));
-          geo.setAttribute("aTarget", new THREE.BufferAttribute(aTarget, 3));
-          geo.setAttribute("aColor", new THREE.BufferAttribute(aColor, 3));
-          geo.setAttribute("aDelay", new THREE.BufferAttribute(aDelay, 1));
-
-          var uniforms = { uProgress: { value: 0 }, uSize: { value: 3.4 } };
-          var mat = new THREE.ShaderMaterial({
-            uniforms: uniforms,
-            transparent: true,
-            depthTest: false,
-            blending: THREE.AdditiveBlending,
-            vertexShader: [
-              "attribute vec3 aOrigin; attribute vec3 aTarget; attribute vec3 aColor; attribute float aDelay;",
-              "uniform float uProgress; uniform float uSize;",
-              "varying vec3 vColor; varying float vP;",
-              "void main(){",
-              "  float span = 0.62;",
-              "  float p = clamp((uProgress - aDelay*(1.0-span)) / span, 0.0, 1.0);",
-              "  p = p*p*(3.0-2.0*p);",
-              "  vec3 pos = mix(aOrigin, aTarget, p);",
-              "  vec4 mv = modelViewMatrix * vec4(pos, 1.0);",
-              "  gl_Position = projectionMatrix * mv;",
-              "  gl_PointSize = uSize * (60.0 / -mv.z) * (0.45 + 0.55*p);",
-              "  vColor = aColor; vP = p;",
-              "}",
-            ].join("\n"),
-            fragmentShader: [
-              "precision highp float;",
-              "varying vec3 vColor; varying float vP;",
-              "void main(){",
-              "  vec2 d = gl_PointCoord - 0.5;",
-              "  float r2 = dot(d, d);",
-              "  if (r2 > 0.25) discard;",
-              "  float a = smoothstep(0.25, 0.02, r2);",
-              // brighter & whiter in flight, resolves to true color as it lands
-              "  vec3 c = mix(vColor + vec3(0.5)*(1.0-vP), vColor, vP);",
-              "  gl_FragColor = vec4(c, a * (0.55 + 0.45*vP));",
-              "}",
-            ].join("\n"),
-          });
-
-          var pts = new THREE.Points(geo, mat);
-          scene.add(pts);
-
-          camera.position.set(0, 0, 10);
-          var vfov = (camera.fov * Math.PI) / 180;
-          var sa = 1920 / 1080;
-          var fitH = worldH / 2 / Math.tan(vfov / 2) / 0.78;
-          var fitW = worldW / 2 / (Math.tan(vfov / 2) * sa) / 0.78;
-          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);
-
-          return function () {
-            renderer.render(scene, camera);
-          };
-        }
-
-        // ---- dispatch + boot ------------------------------------------------------
-        function buildEffect(THREE, scene, camera, renderer, spec, st, tl) {
-          var state = T[spec.seq].states[0];
-          var dur = spec.duration;
-          if (spec.effect === "extrude")
-            return fxExtrude(THREE, scene, camera, renderer, state, st, tl, dur);
-          if (spec.effect === "dissolve")
-            return fxDissolve(THREE, scene, camera, renderer, state, st, tl, dur, spec.seed);
-          if (spec.effect === "particles")
-            return fxParticles(THREE, scene, camera, renderer, state, st, tl, dur, spec.seed);
-          return function () {};
-        }
-
-        function go() {
-          var spec = window.__BLOCK;
-          var root = document.getElementById("root");
-          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({
-            canvas: glcanvas,
-            antialias: true,
-            alpha: false,
-            preserveDrawingBuffer: true,
-          });
-          renderer.setPixelRatio(1);
-          renderer.setSize(W, H, false);
-          var scene = new THREE.Scene();
-          var camera = new THREE.PerspectiveCamera(45, W / H, 0.1, 200);
-          var st = {};
-
-          document.fonts.ready.then(function () {
-            var renderFn = buildEffect(THREE, scene, camera, renderer, spec, st, tl);
-            function render() {
-              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
-            render(); // paint frame 0
-          });
-        }
-
-        if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
-        else go();
-      })();
+// hf-code-anim-gl.js — WebGL code-animation engine for the "crazy" Code Animations blocks.
+//
+// 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
+//   - 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
+//
+// Each block sets window.__BLOCK = { id, effect, seq, duration, seed } and includes this engine.
+(function () {
+  "use strict";
+  var T = window.__TOKENS || {};
+
+  // ---- seeded PRNG (no Math.random) -----------------------------------------
+  function mulberry32(a) {
+    return function () {
+      a |= 0;
+      a = (a + 0x6d2b79f5) | 0;
+      var t = Math.imul(a ^ (a >>> 15), 1 | a);
+      t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+      return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+    };
+  }
+
+  // ---- split a token state into lines of {content,color} --------------------
+  function splitLines(state) {
+    var lines = [[]];
+    for (var i = 0; i < state.tokens.length; i++) {
+      var t = state.tokens[i];
+      if (t.content === "\n") {
+        lines.push([]);
+        continue;
+      }
+      lines[lines.length - 1].push(t);
+    }
+    while (lines.length && lines[lines.length - 1].length === 0) lines.pop();
+    return lines;
+  }
+
+  // ---- THE BRIDGE: draw baked tokens to an offscreen 2D canvas ---------------
+  // Returns { canvas, W, H, lines, lineH, padY, fontPx } so effects can sample it.
+  function drawCodeToCanvas(state, opts) {
+    opts = opts || {};
+    var fontPx = opts.fontPx || 36;
+    var lineH = opts.lineH || 54;
+    var padX = opts.padX || 70;
+    var padY = opts.padY || 60;
+    var weight = opts.weight || 500;
+    var font = weight + " " + fontPx + 'px "JetBrains Mono", monospace';
+
+    var lines = splitLines(state);
+    var measure = document.createElement("canvas").getContext("2d");
+    measure.font = font;
+    var maxW = 0;
+    for (var i = 0; i < lines.length; i++) {
+      var w = 0;
+      for (var j = 0; j < lines[i].length; j++) w += measure.measureText(lines[i][j].content).width;
+      if (w > maxW) maxW = w;
+    }
+    var W = Math.max(2, Math.ceil(maxW + padX * 2));
+    var H = Math.max(2, Math.ceil(lines.length * lineH + padY * 2));
+
+    var canvas = document.createElement("canvas");
+    canvas.width = W;
+    canvas.height = H;
+    var ctx = canvas.getContext("2d");
+    if (opts.transparent) {
+      ctx.clearRect(0, 0, W, H);
+    } else {
+      ctx.fillStyle = opts.bg || "#0b0f17";
+      ctx.fillRect(0, 0, W, H);
+    }
+    ctx.textBaseline = "top";
+    ctx.font = font;
+    for (var li = 0; li < lines.length; li++) {
+      var x = padX;
+      var y = padY + li * lineH;
+      for (var k = 0; k < lines[li].length; k++) {
+        var tok = lines[li][k];
+        ctx.fillStyle = tok.color;
+        ctx.fillText(tok.content, x, y);
+        x += ctx.measureText(tok.content).width;
+      }
+    }
+    return { canvas: canvas, W: W, H: H, lines: lines.length, lineH: lineH, padY: padY, fontPx: fontPx };
+  }
+
+  // ===========================================================================
+  // Effect 1 — code-3d-extrude: code on a lit, beveled slab that rotates to rest
+  // ===========================================================================
+  function fxExtrude(THREE, scene, camera, renderer, state, st, tl, dur) {
+    scene.background = new THREE.Color(0x05070b);
+    var code = drawCodeToCanvas(state, { fontPx: 38, lineH: 56, padX: 80, padY: 70, weight: 600 });
+    var tex = new THREE.CanvasTexture(code.canvas);
+    tex.minFilter = THREE.LinearFilter;
+    tex.magFilter = THREE.LinearFilter;
+    tex.generateMipmaps = false;
+
+    var aspect = code.W / code.H;
+    var slabH = 6.2;
+    var slabW = slabH * aspect;
+    var depth = 0.5;
+
+    // beveled slab: rounded extruded rectangle
+    var hw = slabW / 2;
+    var hh = slabH / 2;
+    var r = 0.18;
+    var shape = new THREE.Shape();
+    shape.moveTo(-hw + r, -hh);
+    shape.lineTo(hw - r, -hh);
+    shape.quadraticCurveTo(hw, -hh, hw, -hh + r);
+    shape.lineTo(hw, hh - r);
+    shape.quadraticCurveTo(hw, hh, hw - r, hh);
+    shape.lineTo(-hw + r, hh);
+    shape.quadraticCurveTo(-hw, hh, -hw, hh - r);
+    shape.lineTo(-hw, -hh + r);
+    shape.quadraticCurveTo(-hw, -hh, -hw + r, -hh);
+    var geo = new THREE.ExtrudeGeometry(shape, { depth: depth, bevelEnabled: true, bevelThickness: 0.12, bevelSize: 0.1, bevelSegments: 3, steps: 1 });
+    geo.center();
+    // UVs from ExtrudeGeometry don't map the texture nicely to the face; remap front-face UVs from XY bounds.
+    geo.computeBoundingBox();
+    var bb = geo.boundingBox;
+    var sizeX = bb.max.x - bb.min.x;
+    var sizeY = bb.max.y - bb.min.y;
+    var pos = geo.attributes.position;
+    var uv = geo.attributes.uv;
+    for (var vi = 0; vi < pos.count; vi++) {
+      uv.setXY(vi, (pos.getX(vi) - bb.min.x) / sizeX, (pos.getY(vi) - bb.min.y) / sizeY);
+    }
+    uv.needsUpdate = true;
+
+    // Face is an unlit "screen" — shows the exact vivid Shiki colors (no PBR/emissive wash).
+    // The 3D read comes from the lit, beveled EDGES + perspective, like a glowing monitor.
+    var faceMat = new THREE.MeshBasicMaterial({ map: tex });
+    var edgeMat = new THREE.MeshStandardMaterial({ color: 0x141d2b, roughness: 0.3, metalness: 0.4 });
+    // ExtrudeGeometry groups: 0 = front+back faces, 1 = sides. Front shows the code.
+    var slab = new THREE.Mesh(geo, [faceMat, edgeMat]);
+    scene.add(slab);
+
+    scene.add(new THREE.AmbientLight(0xffffff, 0.5));
+    var key = new THREE.DirectionalLight(0xbcd4ff, 1.25);
+    key.position.set(5, 7, 9);
+    scene.add(key);
+    var rim = new THREE.DirectionalLight(0x4fffa0, 0.45);
+    rim.position.set(-7, -3, 5);
+    scene.add(rim);
+
+    camera.position.set(0, 0, 10);
+
+    // fit camera distance so the WHOLE slab fits (width-limited for wide code), ~78% fill
+    var vfov = (camera.fov * Math.PI) / 180;
+    var screenAspect = 1920 / 1080;
+    var fitH = slabH / 2 / Math.tan(vfov / 2) / 0.78;
+    var fitW = slabW / 2 / (Math.tan(vfov / 2) * screenAspect) / 0.78;
+    var fitZ = Math.max(fitH, fitW);
+
+    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);
+    // gentle breathing drift at rest (subtle — stays readable)
+    tl.to(st, { rotY: 0.06, rotX: -0.02, duration: dur * 0.4, ease: "sine.inOut" }, dur * 0.6);
+
+    return function () {
+      slab.rotation.y = st.rotY;
+      slab.rotation.x = st.rotX;
+      camera.position.z = st.camZ;
+      camera.lookAt(0, 0, 0);
+      // boot loop's render() issues the single renderer.render() — don't double-render here
+    };
+  }
+
+  // ===========================================================================
+  // Effect 2 — code-shader-dissolve: code "compiles" out of GPU noise, holds crisp
+  // ===========================================================================
+  function fxDissolve(THREE, scene, camera, renderer, state, st, tl, dur, seed) {
+    scene.background = new THREE.Color(0x05070b);
+    var code = drawCodeToCanvas(state, { fontPx: 40, lineH: 60, padX: 90, padY: 80, weight: 600 });
+    var tex = new THREE.CanvasTexture(code.canvas);
+    tex.minFilter = THREE.LinearFilter;
+    tex.magFilter = THREE.LinearFilter;
+    tex.generateMipmaps = false;
+
+    var aspect = code.W / code.H;
+    var planeH = 6.6;
+    var planeW = planeH * aspect;
+
+    var uniforms = {
+      uTex: { value: tex },
+      uProgress: { value: 0 },
+      uSeed: { value: (seed || 1) * 13.37 },
+    };
+    var mat = new THREE.ShaderMaterial({
+      uniforms: uniforms,
+      transparent: true,
+      vertexShader: [
+        "varying vec2 vUv;",
+        "void main(){ vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0); }",
+      ].join("\n"),
+      fragmentShader: [
+        "precision highp float;",
+        "uniform sampler2D uTex;",
+        "uniform float uProgress;",
+        "uniform float uSeed;",
+        "varying vec2 vUv;",
+        "float hash(vec2 p){ p=fract(p*vec2(123.34,456.21)); p+=dot(p,p+45.32); return fract(p.x*p.y); }",
+        "float noise(vec2 p){ vec2 i=floor(p),f=fract(p); float a=hash(i),b=hash(i+vec2(1.,0.)),c=hash(i+vec2(0.,1.)),d=hash(i+vec2(1.,1.)); vec2 u=f*f*(3.-2.*f); return mix(mix(a,b,u.x),mix(c,d,u.x),u.y); }",
+        "void main(){",
+        "  vec2 uv = vUv;",
+        // multi-octave seeded noise field
+        "  float n = noise(uv*16.0+uSeed)*0.6 + noise(uv*48.0+uSeed*1.7)*0.3 + noise(uv*120.0+uSeed*2.3)*0.1;",
+        "  float edge = 0.12;",
+        "  float reveal = smoothstep(n-edge, n+edge, uProgress);", // 0 hidden -> 1 shown
+        // chromatic fringe strongest at the dissolving edge
+        "  float band = reveal*(1.0-reveal)*4.0;",
+        "  float off = band*0.010;",
+        "  float r = texture2D(uTex, uv+vec2(off,0.0)).r;",
+        "  float g = texture2D(uTex, uv).g;",
+        "  float b = texture2D(uTex, uv-vec2(off,0.0)).b;",
+        "  vec3 codeCol = vec3(r,g,b);",
+        // additive cyan edge glow along the dissolve front
+        "  vec3 glow = vec3(0.30,0.72,1.0) * band * 0.9;",
+        "  vec3 outc = codeCol*reveal + glow;",
+        "  float a = max(reveal, band*0.8);",
+        "  gl_FragColor = vec4(outc, a);",
+        "}",
+      ].join("\n"),
+    });
+
+    var plane = new THREE.Mesh(new THREE.PlaneGeometry(planeW, planeH), mat);
+    scene.add(plane);
+
+    camera.position.set(0, 0, 10);
+    var vfov = (camera.fov * Math.PI) / 180;
+    var screenAspect = 1920 / 1080;
+    var fitH = planeH / 2 / Math.tan(vfov / 2) / 0.82;
+    var fitW = planeW / 2 / (Math.tan(vfov / 2) * screenAspect) / 0.82;
+    camera.position.z = Math.max(fitH, fitW);
+    camera.lookAt(0, 0, 0);
+
+    // compile in, then hold crisp. Overshoot to 1.15 so even max-noise pixels
+    // (n up to ~1.0, edge 0.12) fully resolve — no leftover specks at rest.
+    tl.to(uniforms.uProgress, { value: 1.15, duration: dur * 0.62, ease: "power1.inOut" }, 0);
+
+    // uProgress is tweened by GSAP; the boot loop's render() draws once per frame.
+    return function () {};
+  }
+
+  // ===========================================================================
+  // Effect 3 — code-particle-assemble: GPU points scatter then fly to glyph pixels
+  // ===========================================================================
+  function fxParticles(THREE, scene, camera, renderer, state, st, tl, dur, seed) {
+    scene.background = new THREE.Color(0x05070b);
+    var code = drawCodeToCanvas(state, { fontPx: 46, lineH: 70, padX: 70, padY: 64, weight: 700 });
+    var cw = code.W;
+    var ch = code.H;
+    var data = code.canvas.getContext("2d").getImageData(0, 0, cw, ch).data;
+    var rng = mulberry32(((seed || 1) * 2654435761) >>> 0);
+
+    var worldW = 13.0;
+    var worldH = worldW * (ch / cw);
+
+    // sample glyph pixels (brighter than the dark bg) on a fixed grid
+    var step = 2;
+    var tx = [];
+    var col = [];
+    for (var y = 0; y < ch; y += step) {
+      for (var x = 0; x < cw; x += step) {
+        var idx = (y * cw + x) * 4;
+        var r = data[idx];
+        var g = data[idx + 1];
+        var b = data[idx + 2];
+        if (r + g + b < 120) continue; // skip background
+        tx.push((x / cw - 0.5) * worldW, -(y / ch - 0.5) * worldH, 0);
+        col.push(r / 255, g / 255, b / 255);
+      }
+    }
+    var n = tx.length / 3;
+
+    var positions = new Float32Array(n * 3);
+    var aOrigin = new Float32Array(n * 3);
+    var aTarget = new Float32Array(tx);
+    var aColor = new Float32Array(col);
+    var aDelay = new Float32Array(n);
+    for (var i = 0; i < n; i++) {
+      var sx = (rng() * 2 - 1) * worldW * 1.15;
+      var sy = (rng() * 2 - 1) * worldH * 1.7;
+      var sz = (rng() * 2 - 1) * 9.0 - 2.0;
+      aOrigin[i * 3] = sx;
+      aOrigin[i * 3 + 1] = sy;
+      aOrigin[i * 3 + 2] = sz;
+      positions[i * 3] = sx;
+      positions[i * 3 + 1] = sy;
+      positions[i * 3 + 2] = sz;
+      aDelay[i] = rng();
+    }
+
+    var geo = new THREE.BufferGeometry();
+    geo.setAttribute("position", new THREE.BufferAttribute(positions, 3));
+    geo.setAttribute("aOrigin", new THREE.BufferAttribute(aOrigin, 3));
+    geo.setAttribute("aTarget", new THREE.BufferAttribute(aTarget, 3));
+    geo.setAttribute("aColor", new THREE.BufferAttribute(aColor, 3));
+    geo.setAttribute("aDelay", new THREE.BufferAttribute(aDelay, 1));
+
+    var uniforms = { uProgress: { value: 0 }, uSize: { value: 3.4 } };
+    var mat = new THREE.ShaderMaterial({
+      uniforms: uniforms,
+      transparent: true,
+      depthTest: false,
+      depthWrite: false,
+      blending: THREE.NormalBlending,
+      vertexShader: [
+        "attribute vec3 aOrigin; attribute vec3 aTarget; attribute vec3 aColor; attribute float aDelay;",
+        "uniform float uProgress; uniform float uSize;",
+        "varying vec3 vColor; varying float vP;",
+        "void main(){",
+        "  float span = 0.62;",
+        "  float p = clamp((uProgress - aDelay*(1.0-span)) / span, 0.0, 1.0);",
+        "  p = p*p*(3.0-2.0*p);",
+        "  vec3 pos = mix(aOrigin, aTarget, p);",
+        "  vec4 mv = modelViewMatrix * vec4(pos, 1.0);",
+        "  gl_Position = projectionMatrix * mv;",
+        "  gl_PointSize = uSize * (60.0 / -mv.z) * (0.45 + 0.55*p);",
+        "  vColor = aColor; vP = p;",
+        "}",
+      ].join("\n"),
+      fragmentShader: [
+        "precision highp float;",
+        "varying vec3 vColor; varying float vP;",
+        "void main(){",
+        "  vec2 d = gl_PointCoord - 0.5;",
+        "  float r2 = dot(d, d);",
+        "  if (r2 > 0.25) discard;",
+        "  float a = smoothstep(0.25, 0.02, r2);",
+        // brighter & whiter in flight, resolves to true color as it lands
+        "  vec3 c = mix(vColor + vec3(0.32)*(1.0-vP), vColor, vP);",
+        "  gl_FragColor = vec4(c, a * (0.7 + 0.3*vP));",
+        "}",
+      ].join("\n"),
+    });
+
+    var pts = new THREE.Points(geo, mat);
+    scene.add(pts);
+
+    camera.position.set(0, 0, 10);
+    var vfov = (camera.fov * Math.PI) / 180;
+    var sa = 1920 / 1080;
+    var fitH = worldH / 2 / Math.tan(vfov / 2) / 0.78;
+    var fitW = worldW / 2 / (Math.tan(vfov / 2) * sa) / 0.78;
+    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);
+
+    // uProgress is tweened by GSAP; the boot loop's render() draws once per frame.
+    return function () {};
+  }
+
+  // ---- dispatch + boot ------------------------------------------------------
+  function buildEffect(THREE, scene, camera, renderer, spec, st, tl) {
+    var state = T[spec.seq].states[0];
+    var dur = spec.duration;
+    if (spec.effect === "extrude") return fxExtrude(THREE, scene, camera, renderer, state, st, tl, dur);
+    if (spec.effect === "dissolve") return fxDissolve(THREE, scene, camera, renderer, state, st, tl, dur, spec.seed);
+    if (spec.effect === "particles") return fxParticles(THREE, scene, camera, renderer, state, st, tl, dur, spec.seed);
+    return function () {};
+  }
+
+  function go() {
+    var spec = window.__BLOCK;
+    var root = document.getElementById("root");
+    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({ canvas: glcanvas, antialias: true, alpha: false, preserveDrawingBuffer: true });
+    renderer.setPixelRatio(1);
+    renderer.setSize(W, H, false);
+    var scene = new THREE.Scene();
+    var camera = new THREE.PerspectiveCamera(45, W / H, 0.1, 200);
+    var st = {};
+
+    document.fonts.ready.then(function () {
+      var renderFn = buildEffect(THREE, scene, camera, renderer, spec, st, tl);
+      function render() {
+        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
+      render(); // paint frame 0
+    });
+  }
+
+  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
+  else go();
+})();
+
     </script>
   </body>
 </html>
diff --git a/registry/blocks/code-snippet-flight/code-snippet-flight.html b/registry/blocks/code-snippet-flight/code-snippet-flight.html
index 6516ec324c..915645ce90 100644
--- a/registry/blocks/code-snippet-flight/code-snippet-flight.html
+++ b/registry/blocks/code-snippet-flight/code-snippet-flight.html
@@ -6,225 +6,37 @@
     <title>Code Snippet Flight</title>
     <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
     <style>
-      * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-      }
-      html,
-      body {
-        width: 1920px;
-        height: 1080px;
-        overflow: hidden;
-        background: #05070b;
-      }
-      #root {
-        position: relative;
-        width: 1920px;
-        height: 1080px;
-        font-family: "JetBrains Mono", monospace;
-        color: #e6edf3;
-      }
-      .bg-field {
-        position: absolute;
-        inset: 0;
-        background: radial-gradient(1200px 700px at 50% 18%, #0e1726 0%, #070b12 55%, #05070b 100%);
-      }
-      .bg-grid {
-        position: absolute;
-        inset: 0;
-        background-image:
-          linear-gradient(rgba(88, 166, 255, 0.05) 1px, transparent 1px),
-          linear-gradient(90deg, rgba(88, 166, 255, 0.05) 1px, transparent 1px);
-        background-size: 64px 64px;
-        mask-image: radial-gradient(1100px 620px at 50% 42%, #000 0%, transparent 78%);
-      }
-      .bg-glow {
-        position: absolute;
-        width: 900px;
-        height: 900px;
-        border-radius: 50%;
-        filter: blur(120px);
-        opacity: 0.5;
-      }
-      .bg-glow.a {
-        background: #1f6feb55;
-        left: -180px;
-        top: -200px;
-      }
-      .bg-glow.b {
-        background: #2ea04355;
-        right: -200px;
-        bottom: -260px;
-      }
-      .editor {
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-        width: 1380px;
-        height: 800px;
-        background: #0b0f17;
-        border: 1px solid #1d2733;
-        border-radius: 16px;
-        box-shadow:
-          0 40px 120px rgba(0, 0, 0, 0.6),
-          0 2px 0 rgba(255, 255, 255, 0.03) inset;
-        overflow: hidden;
-        display: flex;
-        flex-direction: column;
-      }
-      .titlebar {
-        height: 56px;
-        flex: 0 0 56px;
-        display: flex;
-        align-items: center;
-        gap: 16px;
-        padding: 0 22px;
-        background: linear-gradient(#11161f, #0c111a);
-        border-bottom: 1px solid #1b2430;
-      }
-      .dots {
-        display: flex;
-        gap: 10px;
-      }
-      .dot {
-        width: 14px;
-        height: 14px;
-        border-radius: 50%;
-      }
-      .dot.r {
-        background: #ff5f57;
-      }
-      .dot.y {
-        background: #febc2e;
-      }
-      .dot.g {
-        background: #28c840;
-      }
-      .filename {
-        font-size: 19px;
-        color: #8b98a9;
-        letter-spacing: 0.2px;
-      }
-      .filename .accent {
-        color: #d6e2f0;
-      }
-      .code-surface {
-        position: relative;
-        flex: 1 1 auto;
-        overflow: hidden;
-      }
-      .scene {
-        position: absolute;
-        inset: 0;
-        opacity: 0;
-        will-change: opacity;
-      }
-      .code {
-        position: absolute;
-        top: 38px;
-        left: 0;
-        right: 0;
-        padding: 0 44px 0 104px;
-        font-size: 30px;
-        line-height: 46px;
-        font-variant-ligatures: none;
-        tab-size: 2;
-      }
-      .gutter {
-        position: absolute;
-        top: 38px;
-        left: 0;
-        width: 84px;
-        padding-right: 18px;
-        font-size: 30px;
-        line-height: 46px;
-        text-align: right;
-        color: #828c9b;
-        user-select: none;
-      }
-      .ln {
-        display: block;
-        height: 46px;
-      }
-      .line {
-        display: block;
-        min-height: 46px;
-        white-space: pre;
-        position: relative;
-        z-index: 1;
-      }
-      .tok {
-        display: inline-block;
-        white-space: pre;
-        will-change: transform, opacity;
-      }
-      .caret {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 3px;
-        height: 32px;
-        margin-top: 6px;
-        background: #58a6ff;
-        border-radius: 1px;
-        z-index: 3;
-      }
-      .hl-box {
-        position: absolute;
-        background: rgba(88, 166, 255, 0.16);
-        border-left: 3px solid #58a6ff;
-        border-radius: 6px;
-        z-index: 0;
-        overflow: hidden;
-      }
-      .diff-line {
-        display: block;
-        min-height: 0;
-        line-height: 46px;
-        white-space: pre;
-        position: relative;
-        overflow: hidden;
-        padding-left: 14px;
-      }
-      .diff-sign {
-        display: inline-block;
-        width: 22px;
-        color: #41506220;
-      }
-      .diff-del {
-        background: rgba(248, 81, 73, 0.12);
-        box-shadow: inset 3px 0 #f85149;
-      }
-      .diff-add {
-        background: rgba(63, 185, 80, 0.12);
-        box-shadow: inset 3px 0 #3fb950;
-      }
-      .diff-del .diff-sign {
-        color: #f85149;
-      }
-      .diff-add .diff-sign {
-        color: #3fb950;
-      }
-      .flight-block {
-        position: absolute;
-        white-space: pre;
-        font-size: 27px;
-        line-height: 40px;
-        padding: 11px 22px;
-        border-radius: 11px;
-        background: #0f1722;
-        border: 1px solid #233044;
-        box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
-        will-change: transform, opacity;
-      }
-      .flight-target {
-        position: absolute;
-        border: 1.5px dashed #2a3a4f;
-        border-radius: 14px;
-        opacity: 0;
-      }
+      * { margin: 0; padding: 0; box-sizing: border-box; }
+      html, body { width: 1920px; height: 1080px; overflow: hidden; background: #05070b; }
+      #root { position: relative; width: 1920px; height: 1080px; font-family: "JetBrains Mono", monospace; color: #e6edf3; }
+      .bg-field { position: absolute; inset: 0; background: radial-gradient(1200px 700px at 50% 18%, #0e1726 0%, #070b12 55%, #05070b 100%); }
+      .bg-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(88,166,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(88,166,255,0.05) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(1100px 620px at 50% 42%, #000 0%, transparent 78%); }
+      .bg-glow { position: absolute; width: 900px; height: 900px; border-radius: 50%; filter: blur(120px); opacity: 0.5; }
+      .bg-glow.a { background: #1f6feb55; left: -180px; top: -200px; }
+      .bg-glow.b { background: #2ea04355; right: -200px; bottom: -260px; }
+      .editor { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 1380px; height: 800px; background: #0b0f17; border: 1px solid #1d2733; border-radius: 16px; box-shadow: 0 40px 120px rgba(0,0,0,0.6), 0 2px 0 rgba(255,255,255,0.03) inset; overflow: hidden; display: flex; flex-direction: column; }
+      .titlebar { height: 56px; flex: 0 0 56px; display: flex; align-items: center; gap: 16px; padding: 0 22px; background: linear-gradient(#11161f, #0c111a); border-bottom: 1px solid #1b2430; }
+      .dots { display: flex; gap: 10px; }
+      .dot { width: 14px; height: 14px; border-radius: 50%; }
+      .dot.r { background: #ff5f57; } .dot.y { background: #febc2e; } .dot.g { background: #28c840; }
+      .filename { font-size: 19px; color: #8b98a9; letter-spacing: 0.2px; }
+      .filename .accent { color: #d6e2f0; }
+      .code-surface { position: relative; flex: 1 1 auto; overflow: hidden; }
+      .scene { position: absolute; inset: 0; opacity: 0; will-change: opacity; }
+      .code { position: absolute; top: 38px; left: 0; right: 0; padding: 0 44px 0 104px; font-size: 30px; line-height: 46px; font-variant-ligatures: none; tab-size: 2; }
+      .gutter { position: absolute; top: 38px; left: 0; width: 84px; padding-right: 18px; font-size: 30px; line-height: 46px; text-align: right; color: #828c9b; user-select: none; }
+      .ln { display: block; height: 46px; }
+      .line { display: block; min-height: 46px; white-space: pre; position: relative; z-index: 1; }
+      .tok { display: inline-block; white-space: pre; will-change: transform, opacity; }
+      .caret { position: absolute; top: 0; left: 0; width: 3px; height: 32px; margin-top: 6px; background: #58a6ff; border-radius: 1px; z-index: 3; }
+      .hl-box { position: absolute; background: rgba(88,166,255,0.16); border-left: 3px solid #58a6ff; border-radius: 6px; z-index: 0; overflow: hidden; }
+      .diff-line { display: block; min-height: 0; line-height: 46px; white-space: pre; position: relative; overflow: hidden; padding-left: 14px; }
+      .diff-sign { display: inline-block; width: 22px; color: #41506220; }
+      .diff-del { background: rgba(248,81,73,0.12); box-shadow: inset 3px 0 #f85149; }
+      .diff-add { background: rgba(63,185,80,0.12); box-shadow: inset 3px 0 #3fb950; }
+      .diff-del .diff-sign { color: #f85149; } .diff-add .diff-sign { color: #3fb950; }
+      .flight-block { position: absolute; white-space: pre; font-size: 27px; line-height: 40px; padding: 11px 22px; border-radius: 11px; background: #0f1722; border: 1px solid #233044; box-shadow: 0 16px 44px rgba(0,0,0,0.5); will-change: transform, opacity; }
+      .flight-target { position: absolute; border: 1.5px dashed #2a3a4f; border-radius: 14px; opacity: 0; }
     </style>
   </head>
   <body>
@@ -242,685 +54,442 @@
       <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>
-          <span class="filename"
-            ><span class="accent">pipeline.js</span> — Code Snippet Flight</span
-          >
+          <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>
         <div class="code-surface" id="surface"></div>
       </div>
     </div>
     <script>
-      window.__TOKENS = {
-        flight: {
-          lang: "js",
-          theme: "github-dark",
-          bg: "#24292e",
-          fg: "#e1e4e8",
-          states: [
-            {
-              code: "const x = parse(input)",
-              tokens: [
-                {
-                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-0",
-                  content: "const",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-1",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-2",
-                  content: "x",
-                  color: "#79B8FF",
-                  fontStyle: 0,
-                },
-                {
-                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-3",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-4",
-                  content: "=",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-5",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-6",
-                  content: "parse",
-                  color: "#B392F0",
-                  fontStyle: 0,
-                },
-                {
-                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-7",
-                  content: "(input)",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-8",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-              ],
-            },
-            {
-              code: "const y = transform(x)",
-              tokens: [
-                {
-                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-0",
-                  content: "const",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-1",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "ulDeJnFQa2Vy-61y5zTTA7sNfq7d4aUawNMAxQ6sVgg-2",
-                  content: "y",
-                  color: "#79B8FF",
-                  fontStyle: 0,
-                },
-                {
-                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-3",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-4",
-                  content: "=",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-5",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "ulDeJnFQa2Vy-61y5zTTA7sNfq7d4aUawNMAxQ6sVgg-6",
-                  content: "transform",
-                  color: "#B392F0",
-                  fontStyle: 0,
-                },
-                {
-                  key: "ulDeJnFQa2Vy-61y5zTTA7sNfq7d4aUawNMAxQ6sVgg-7",
-                  content: "(x)",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "ulDeJnFQa2Vy-61y5zTTA7sNfq7d4aUawNMAxQ6sVgg-8",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-              ],
-            },
-            {
-              code: "const z = render(y)",
-              tokens: [
-                {
-                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-0",
-                  content: "const",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-1",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "wFuhzZNydG-3inU2s1h1gU8Kivya8CAP9gl9S4MBQj4-2",
-                  content: "z",
-                  color: "#79B8FF",
-                  fontStyle: 0,
-                },
-                {
-                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-3",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-4",
-                  content: "=",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-5",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "wFuhzZNydG-3inU2s1h1gU8Kivya8CAP9gl9S4MBQj4-6",
-                  content: "render",
-                  color: "#B392F0",
-                  fontStyle: 0,
-                },
-                {
-                  key: "wFuhzZNydG-3inU2s1h1gU8Kivya8CAP9gl9S4MBQj4-7",
-                  content: "(y)",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "wFuhzZNydG-3inU2s1h1gU8Kivya8CAP9gl9S4MBQj4-8",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-              ],
-            },
-          ],
-        },
-      };
-      window.__BLOCK = { id: "code-snippet-flight", effect: "flight", seq: "flight", duration: 6 };
+      window.__TOKENS = {"flight":{"lang":"js","theme":"github-dark","bg":"#24292e","fg":"#e1e4e8","states":[{"code":"const x = parse(input)","tokens":[{"key":"qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-0","content":"const","color":"#F97583","fontStyle":0},{"key":"qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-1","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-2","content":"x","color":"#79B8FF","fontStyle":0},{"key":"qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-3","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-4","content":"=","color":"#F97583","fontStyle":0},{"key":"qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-5","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-6","content":"parse","color":"#B392F0","fontStyle":0},{"key":"qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-7","content":"(input)","color":"#E1E4E8","fontStyle":0},{"key":"qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-8","content":"\n","color":"#e1e4e8","fontStyle":0}]},{"code":"const y = transform(x)","tokens":[{"key":"qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-0","content":"const","color":"#F97583","fontStyle":0},{"key":"qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-1","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"ulDeJnFQa2Vy-61y5zTTA7sNfq7d4aUawNMAxQ6sVgg-2","content":"y","color":"#79B8FF","fontStyle":0},{"key":"qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-3","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-4","content":"=","color":"#F97583","fontStyle":0},{"key":"qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-5","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"ulDeJnFQa2Vy-61y5zTTA7sNfq7d4aUawNMAxQ6sVgg-6","content":"transform","color":"#B392F0","fontStyle":0},{"key":"ulDeJnFQa2Vy-61y5zTTA7sNfq7d4aUawNMAxQ6sVgg-7","content":"(x)","color":"#E1E4E8","fontStyle":0},{"key":"ulDeJnFQa2Vy-61y5zTTA7sNfq7d4aUawNMAxQ6sVgg-8","content":"\n","color":"#e1e4e8","fontStyle":0}]},{"code":"const z = render(y)","tokens":[{"key":"qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-0","content":"const","color":"#F97583","fontStyle":0},{"key":"qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-1","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"wFuhzZNydG-3inU2s1h1gU8Kivya8CAP9gl9S4MBQj4-2","content":"z","color":"#79B8FF","fontStyle":0},{"key":"qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-3","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-4","content":"=","color":"#F97583","fontStyle":0},{"key":"qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-5","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"wFuhzZNydG-3inU2s1h1gU8Kivya8CAP9gl9S4MBQj4-6","content":"render","color":"#B392F0","fontStyle":0},{"key":"wFuhzZNydG-3inU2s1h1gU8Kivya8CAP9gl9S4MBQj4-7","content":"(y)","color":"#E1E4E8","fontStyle":0},{"key":"wFuhzZNydG-3inU2s1h1gU8Kivya8CAP9gl9S4MBQj4-8","content":"\n","color":"#e1e4e8","fontStyle":0}]}]}};
+      window.__BLOCK = {"id":"code-snippet-flight","effect":"flight","seq":"flight","duration":6};
     </script>
     <script>
-      // 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
-      // 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].
-      (function () {
-        "use strict";
-        var T = window.__TOKENS || {};
+// 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
+// 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].
+(function () {
+  "use strict";
+  var T = window.__TOKENS || {};
 
-        function lineDiv() {
-          var d = document.createElement("div");
-          d.className = "line";
-          return d;
-        }
+  function lineDiv() {
+    var d = document.createElement("div");
+    d.className = "line";
+    return d;
+  }
 
-        // Render a code state's keyed tokens into codeEl as lines of inline-block .tok spans.
-        function renderState(codeEl, state) {
-          codeEl.textContent = "";
-          var keyToEl = new Map();
-          var line = lineDiv();
-          codeEl.appendChild(line);
-          for (var i = 0; i < state.tokens.length; i++) {
-            var t = state.tokens[i];
-            if (t.content === "\n") {
-              line = lineDiv();
-              codeEl.appendChild(line);
-              continue;
-            }
-            var span = document.createElement("span");
-            span.className = "tok";
-            span.textContent = t.content;
-            span.style.color = t.color;
-            if (t.fontStyle & 1) span.style.fontStyle = "italic";
-            if (t.fontStyle & 2) span.style.fontWeight = "700";
-            line.appendChild(span);
-            keyToEl.set(t.key, span);
-          }
-          var last = codeEl.lastChild;
-          if (last && last.className === "line" && last.children.length === 0)
-            codeEl.removeChild(last);
-          return keyToEl;
-        }
+  // Render a code state's keyed tokens into codeEl as lines of inline-block .tok spans.
+  function renderState(codeEl, state) {
+    codeEl.textContent = "";
+    var keyToEl = new Map();
+    var line = lineDiv();
+    codeEl.appendChild(line);
+    for (var i = 0; i < state.tokens.length; i++) {
+      var t = state.tokens[i];
+      if (t.content === "\n") {
+        line = lineDiv();
+        codeEl.appendChild(line);
+        continue;
+      }
+      var span = document.createElement("span");
+      span.className = "tok";
+      span.textContent = t.content;
+      span.style.color = t.color;
+      if (t.fontStyle & 1) span.style.fontStyle = "italic";
+      if (t.fontStyle & 2) span.style.fontWeight = "700";
+      line.appendChild(span);
+      keyToEl.set(t.key, span);
+    }
+    var last = codeEl.lastChild;
+    if (last && last.className === "line" && last.children.length === 0) codeEl.removeChild(last);
+    return keyToEl;
+  }
 
-        function rectsOf(keyToEl) {
-          var m = new Map();
-          keyToEl.forEach(function (el, k) {
-            var r = el.getBoundingClientRect();
-            m.set(k, { left: r.left, top: r.top });
-          });
-          return m;
-        }
+  function rectsOf(keyToEl) {
+    var m = new Map();
+    keyToEl.forEach(function (el, k) {
+      var r = el.getBoundingClientRect();
+      m.set(k, { left: r.left, top: r.top });
+    });
+    return m;
+  }
 
-        function makeScene(surface, withGutter) {
-          var scene = document.createElement("div");
-          scene.className = "scene";
-          if (withGutter) {
-            var g = document.createElement("div");
-            g.className = "gutter";
-            scene.appendChild(g);
-          }
-          var code = document.createElement("div");
-          code.className = "code";
-          scene.appendChild(code);
-          surface.appendChild(scene);
-          return { scene: scene, code: code, gutter: scene.querySelector(".gutter") };
-        }
+  function makeScene(surface, withGutter) {
+    var scene = document.createElement("div");
+    scene.className = "scene";
+    if (withGutter) {
+      var g = document.createElement("div");
+      g.className = "gutter";
+      scene.appendChild(g);
+    }
+    var code = document.createElement("div");
+    code.className = "code";
+    scene.appendChild(code);
+    surface.appendChild(scene);
+    return { scene: scene, code: code, gutter: scene.querySelector(".gutter") };
+  }
 
-        function fillGutter(g, n) {
-          var html = "";
-          for (var i = 1; i <= n; i++) html += '<span class="ln">' + i + "</span>";
-          g.innerHTML = html;
-        }
+  function fillGutter(g, n) {
+    var html = "";
+    for (var i = 1; i <= n; i++) html += '<span class="ln">' + i + "</span>";
+    g.innerHTML = html;
+  }
 
-        function splitLines(state) {
-          var lines = [{ text: "", tokens: [] }];
-          for (var i = 0; i < state.tokens.length; i++) {
-            var t = state.tokens[i];
-            if (t.content === "\n") {
-              lines.push({ text: "", tokens: [] });
-              continue;
-            }
-            var cur = lines[lines.length - 1];
-            cur.tokens.push(t);
-            cur.text += t.content;
-          }
-          if (lines.length && lines[lines.length - 1].tokens.length === 0) lines.pop();
-          return lines;
-        }
+  function splitLines(state) {
+    var lines = [{ text: "", tokens: [] }];
+    for (var i = 0; i < state.tokens.length; i++) {
+      var t = state.tokens[i];
+      if (t.content === "\n") {
+        lines.push({ text: "", tokens: [] });
+        continue;
+      }
+      var cur = lines[lines.length - 1];
+      cur.tokens.push(t);
+      cur.text += t.content;
+    }
+    if (lines.length && lines[lines.length - 1].tokens.length === 0) lines.pop();
+    return lines;
+  }
 
-        function lineDiff(a, b) {
-          var n = a.length;
-          var m = b.length;
-          var dp = [];
-          for (var i = 0; i <= n; i++) dp.push(new Array(m + 1).fill(0));
-          for (var i = n - 1; i >= 0; i--) {
-            for (var j = m - 1; j >= 0; j--) {
-              dp[i][j] =
-                a[i].text === b[j].text
-                  ? dp[i + 1][j + 1] + 1
-                  : Math.max(dp[i + 1][j], dp[i][j + 1]);
-            }
-          }
-          var ops = [];
-          var i = 0;
-          var j = 0;
-          while (i < n && j < m) {
-            if (a[i].text === b[j].text) {
-              ops.push({ type: "same", line: b[j] });
-              i++;
-              j++;
-            } else if (dp[i + 1][j] >= dp[i][j + 1]) {
-              ops.push({ type: "del", line: a[i] });
-              i++;
-            } else {
-              ops.push({ type: "add", line: b[j] });
-              j++;
-            }
-          }
-          while (i < n) ops.push({ type: "del", line: a[i++] });
-          while (j < m) ops.push({ type: "add", line: b[j++] });
-          return ops;
-        }
+  function lineDiff(a, b) {
+    var n = a.length;
+    var m = b.length;
+    var dp = [];
+    for (var i = 0; i <= n; i++) dp.push(new Array(m + 1).fill(0));
+    for (var i = n - 1; i >= 0; i--) {
+      for (var j = m - 1; j >= 0; j--) {
+        dp[i][j] = a[i].text === b[j].text ? dp[i + 1][j + 1] + 1 : Math.max(dp[i + 1][j], dp[i][j + 1]);
+      }
+    }
+    var ops = [];
+    var i = 0;
+    var j = 0;
+    while (i < n && j < m) {
+      if (a[i].text === b[j].text) {
+        ops.push({ type: "same", line: b[j] });
+        i++;
+        j++;
+      } else if (dp[i + 1][j] >= dp[i][j + 1]) {
+        ops.push({ type: "del", line: a[i] });
+        i++;
+      } else {
+        ops.push({ type: "add", line: b[j] });
+        j++;
+      }
+    }
+    while (i < n) ops.push({ type: "del", line: a[i++] });
+    while (j < m) ops.push({ type: "add", line: b[j++] });
+    return ops;
+  }
 
-        // ---- single-scene effect builders (fade in, play, hold to end) -------------
-        var FADE = 0.45;
+  // ---- single-scene effect builders (fade in, play, hold to end) -------------
+  var FADE = 0.45;
 
-        function morph(tl, surface, states, start) {
-          var STEP = 1.2;
-          var HOLD = 1.0;
-          var t = start;
-          for (var s = 0; s < states.length - 1; s++) {
-            var parts = makeScene(surface, false);
-            var code = parts.code;
-            var fromEls = renderState(code, states[s]);
-            var fromR = rectsOf(fromEls);
-            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;
-            toEls.forEach(function (el, k) {
-              var fr = fromR.get(k);
-              var tr = toR.get(k);
-              if (fr) {
-                seg.fromTo(
-                  el,
-                  { x: fr.left - tr.left, y: fr.top - tr.top },
-                  { x: 0, y: 0, duration: STEP, ease: "power2.inOut" },
-                  0,
-                );
-              } else {
-                seg.fromTo(
-                  el,
-                  { opacity: 0 },
-                  { opacity: 1, duration: FD, ease: "power1.out" },
-                  ENTER_AT,
-                );
-              }
-            });
-            var toKeys = new Set(toEls.keys());
-            var fromState = states[s];
-            for (var i = 0; i < fromState.tokens.length; i++) {
-              var tok = fromState.tokens[i];
-              if (tok.content === "\n" || toKeys.has(tok.key) || !fromR.has(tok.key)) continue;
-              var r = fromR.get(tok.key);
-              var span = document.createElement("span");
-              span.className = "tok";
-              span.textContent = tok.content;
-              span.style.position = "absolute";
-              span.style.left = r.left - base.left + "px";
-              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);
-            }
-            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);
-            if (!isLast)
-              tl.to(parts.scene, { opacity: 0, duration: FADE, ease: "power1.in" }, segEnd - FADE);
-            tl.add(seg, segStart);
-            t = segEnd - FADE;
-          }
+  function morph(tl, surface, states, start) {
+    var STEP = 1.2;
+    var HOLD = 1.0;
+    var t = start;
+    for (var s = 0; s < states.length - 1; s++) {
+      var parts = makeScene(surface, false);
+      var code = parts.code;
+      var fromEls = renderState(code, states[s]);
+      var fromR = rectsOf(fromEls);
+      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;
+      toEls.forEach(function (el, k) {
+        var fr = fromR.get(k);
+        var tr = toR.get(k);
+        if (fr) {
+          seg.fromTo(el, { x: fr.left - tr.left, y: fr.top - tr.top }, { x: 0, y: 0, duration: STEP, ease: "power2.inOut" }, 0);
+        } else {
+          seg.fromTo(el, { opacity: 0 }, { opacity: 1, duration: FD, ease: "power1.out" }, ENTER_AT);
         }
+      });
+      var toKeys = new Set(toEls.keys());
+      var fromState = states[s];
+      for (var i = 0; i < fromState.tokens.length; i++) {
+        var tok = fromState.tokens[i];
+        if (tok.content === "\n" || toKeys.has(tok.key) || !fromR.has(tok.key)) continue;
+        var r = fromR.get(tok.key);
+        var span = document.createElement("span");
+        span.className = "tok";
+        span.textContent = tok.content;
+        span.style.position = "absolute";
+        span.style.left = r.left - base.left + "px";
+        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);
+      }
+      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);
+      if (!isLast) tl.to(parts.scene, { opacity: 0, duration: FADE, ease: "power1.in" }, segEnd - FADE);
+      tl.add(seg, segStart);
+      t = segEnd - FADE;
+    }
+  }
 
-        function flight(tl, surface, states, start) {
-          var FLY = 0.95;
-          var STAGGER = 0.26;
-          var GAP = 20;
-          var parts = makeScene(surface, false);
-          parts.code.remove();
-          var scene = parts.scene;
-          var target = document.createElement("div");
-          target.className = "flight-target";
-          scene.appendChild(target);
-          var W = surface.clientWidth;
-          var H = surface.clientHeight;
+  function flight(tl, surface, states, start) {
+    var FLY = 0.95;
+    var STAGGER = 0.26;
+    var GAP = 20;
+    var parts = makeScene(surface, false);
+    parts.code.remove();
+    var scene = parts.scene;
+    var target = document.createElement("div");
+    target.className = "flight-target";
+    scene.appendChild(target);
+    var W = surface.clientWidth;
+    var H = surface.clientHeight;
 
-          var blocks = states.map(function (st) {
-            var blk = document.createElement("div");
-            blk.className = "flight-block";
-            renderState(blk, st);
-            scene.appendChild(blk);
-            return blk;
-          });
-          var n = blocks.length;
+    var blocks = states.map(function (st) {
+      var blk = document.createElement("div");
+      blk.className = "flight-block";
+      renderState(blk, st);
+      scene.appendChild(blk);
+      return blk;
+    });
+    var n = blocks.length;
 
-          // Pass 1: measure natural size, then make every chip the SAME width (symmetry).
-          var maxW = 0;
-          var chipH = 0;
-          blocks.forEach(function (blk) {
-            var r = blk.getBoundingClientRect();
-            if (r.width > maxW) maxW = r.width;
-            if (r.height > chipH) chipH = r.height;
-          });
-          blocks.forEach(function (blk) {
-            blk.style.width = maxW + "px";
-          });
+    // Pass 1: measure natural size, then make every chip the SAME width (symmetry).
+    var maxW = 0;
+    var chipH = 0;
+    blocks.forEach(function (blk) {
+      var r = blk.getBoundingClientRect();
+      if (r.width > maxW) maxW = r.width;
+      if (r.height > chipH) chipH = r.height;
+    });
+    blocks.forEach(function (blk) {
+      blk.style.width = maxW + "px";
+    });
 
-          // Pass 2: evenly-stacked, left-aligned, group centered in the surface.
-          var stackH = n * chipH + (n - 1) * GAP;
-          var destLeft = Math.round((W - maxW) / 2);
-          var topY = Math.round((H - stackH) / 2);
-          blocks.forEach(function (blk, i) {
-            var destY = topY + i * (chipH + GAP);
-            blk.style.left = destLeft + "px";
-            blk.style.top = destY + "px";
-            // fly straight in from the left to the shared left edge — clean, no skew
-            var srcX = destLeft - W * 0.32;
-            tl.fromTo(
-              blk,
-              { x: srcX - destLeft, opacity: 0, scale: 0.96 },
-              { x: 0, opacity: 1, scale: 1, duration: FLY, ease: "power3.out" },
-              start + FADE + i * STAGGER,
-            );
-          });
+    // Pass 2: evenly-stacked, left-aligned, group centered in the surface.
+    var stackH = n * chipH + (n - 1) * GAP;
+    var destLeft = Math.round((W - maxW) / 2);
+    var topY = Math.round((H - stackH) / 2);
+    blocks.forEach(function (blk, i) {
+      var destY = topY + i * (chipH + GAP);
+      blk.style.left = destLeft + "px";
+      blk.style.top = destY + "px";
+      // fly straight in from the left to the shared left edge — clean, no skew
+      var srcX = destLeft - W * 0.32;
+      tl.fromTo(
+        blk,
+        { x: srcX - destLeft, opacity: 0, scale: 0.96 },
+        { x: 0, opacity: 1, scale: 1, duration: FLY, ease: "power3.out" },
+        start + FADE + i * STAGGER,
+      );
+    });
 
-          // Even-padded panel tightly wrapping the uniform stack.
-          var padX = 30;
-          var padY = 24;
-          target.style.left = destLeft - padX + "px";
-          target.style.top = topY - padY + "px";
-          target.style.width = maxW + padX * 2 + "px";
-          target.style.height = stackH + padY * 2 + "px";
-          var landAt = start + FADE + (n - 1) * STAGGER + FLY;
-          tl.set(scene, { opacity: 1 }, 0);
-          tl.to(target, { opacity: 1, duration: 0.5, ease: "power1.out" }, landAt - 0.5);
-        }
+    // Even-padded panel tightly wrapping the uniform stack.
+    var padX = 30;
+    var padY = 24;
+    target.style.left = destLeft - padX + "px";
+    target.style.top = topY - padY + "px";
+    target.style.width = maxW + padX * 2 + "px";
+    target.style.height = stackH + padY * 2 + "px";
+    var landAt = start + FADE + (n - 1) * STAGGER + FLY;
+    tl.set(scene, { opacity: 1 }, 0);
+    tl.to(target, { opacity: 1, duration: 0.5, ease: "power1.out" }, landAt - 0.5);
+  }
 
-        function typing(tl, surface, state, start) {
-          var PER = 0.028; // seconds per character — smooth, fast typewriter
-          var parts = makeScene(surface, true);
-          var code = parts.code;
+  function typing(tl, surface, state, start) {
+    var PER = 0.028; // seconds per character — smooth, fast typewriter
+    var parts = makeScene(surface, true);
+    var code = parts.code;
 
-          // Per-CHARACTER render (granular reveal reads smoother than per-token pops).
-          code.textContent = "";
-          var line = document.createElement("div");
-          line.className = "line";
-          code.appendChild(line);
-          var chars = [];
-          for (var i = 0; i < state.tokens.length; i++) {
-            var t = state.tokens[i];
-            if (t.content === "\n") {
-              line = document.createElement("div");
-              line.className = "line";
-              code.appendChild(line);
-              continue;
-            }
-            for (var c = 0; c < t.content.length; c++) {
-              var span = document.createElement("span");
-              span.className = "tok";
-              span.textContent = t.content[c];
-              span.style.color = t.color;
-              if (t.fontStyle & 1) span.style.fontStyle = "italic";
-              if (t.fontStyle & 2) span.style.fontWeight = "700";
-              line.appendChild(span);
-              chars.push({ el: span, ws: t.content[c] === " " });
-            }
-          }
-          var last = code.lastChild;
-          if (last && last.className === "line" && last.children.length === 0)
-            code.removeChild(last);
+    // Per-CHARACTER render (granular reveal reads smoother than per-token pops).
+    code.textContent = "";
+    var line = document.createElement("div");
+    line.className = "line";
+    code.appendChild(line);
+    var chars = [];
+    for (var i = 0; i < state.tokens.length; i++) {
+      var t = state.tokens[i];
+      if (t.content === "\n") {
+        line = document.createElement("div");
+        line.className = "line";
+        code.appendChild(line);
+        continue;
+      }
+      for (var c = 0; c < t.content.length; c++) {
+        var span = document.createElement("span");
+        span.className = "tok";
+        span.textContent = t.content[c];
+        span.style.color = t.color;
+        if (t.fontStyle & 1) span.style.fontStyle = "italic";
+        if (t.fontStyle & 2) span.style.fontWeight = "700";
+        line.appendChild(span);
+        chars.push({ el: span, ws: t.content[c] === " " });
+      }
+    }
+    var last = code.lastChild;
+    if (last && last.className === "line" && last.children.length === 0) code.removeChild(last);
 
-          fillGutter(parts.gutter, code.querySelectorAll(".line").length);
-          var base = code.getBoundingClientRect();
-          var caret = document.createElement("div");
-          caret.className = "caret";
-          code.appendChild(caret);
+    fillGutter(parts.gutter, code.querySelectorAll(".line").length);
+    var base = code.getBoundingClientRect();
+    var caret = document.createElement("div");
+    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);
+    tl.set(parts.scene, { opacity: 0 }, 0);
+    tl.to(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);
-          }
-          chars.forEach(function (c, i) {
-            var at = t0 + i * PER;
-            tl.set(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);
-            // caret glides at constant speed to each char's right edge (linear = no stop-start jitter)
-            var r = c.el.getBoundingClientRect();
-            tl.to(
-              caret,
-              { x: r.right - base.left, y: r.top - base.top, duration: PER, ease: "none" },
-              at,
-            );
-          });
-        }
+    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);
+    }
+    chars.forEach(function (c, i) {
+      var at = t0 + i * PER;
+      tl.set(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);
+      // caret glides at constant speed to each char's right edge (linear = no stop-start jitter)
+      var r = c.el.getBoundingClientRect();
+      tl.to(caret, { x: r.right - base.left, y: r.top - base.top, duration: PER, ease: "none" }, at);
+    });
+  }
 
-        function diff(tl, surface, states, start) {
-          var DEL = 0.55;
-          var ADD = 0.6;
-          var ops = lineDiff(splitLines(states[0]), splitLines(states[1]));
-          var parts = makeScene(surface, false);
-          var code = parts.code;
-          var delEls = [];
-          var addEls = [];
-          ops.forEach(function (op) {
-            var ln = document.createElement("div");
-            ln.className =
-              "diff-line" +
-              (op.type === "del" ? " diff-del" : op.type === "add" ? " diff-add" : "");
-            var sign = document.createElement("span");
-            sign.className = "diff-sign";
-            sign.textContent = op.type === "del" ? "- " : op.type === "add" ? "+ " : "  ";
-            ln.appendChild(sign);
-            op.line.tokens.forEach(function (t) {
-              var s = document.createElement("span");
-              s.className = "tok";
-              s.textContent = t.content;
-              s.style.color = t.color;
-              ln.appendChild(s);
-            });
-            code.appendChild(ln);
-            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);
-          var atDel = start + FADE + 0.3;
-          delEls.forEach(function (el, k) {
-            tl.fromTo(
-              el,
-              { height: 46, opacity: 1 },
-              { height: 0, opacity: 0, duration: DEL, ease: "power2.inOut" },
-              atDel + k * 0.08,
-            );
-          });
-          var atAdd = atDel + DEL + 0.15;
-          addEls.forEach(function (el, k) {
-            tl.set(el, { height: 0, opacity: 0 }, 0);
-            tl.fromTo(
-              el,
-              { height: 0, opacity: 0 },
-              { height: 46, opacity: 1, duration: ADD, ease: "power2.out" },
-              atAdd + k * 0.12,
-            );
-          });
-        }
+  function diff(tl, surface, states, start) {
+    var DEL = 0.55;
+    var ADD = 0.6;
+    var ops = lineDiff(splitLines(states[0]), splitLines(states[1]));
+    var parts = makeScene(surface, false);
+    var code = parts.code;
+    var delEls = [];
+    var addEls = [];
+    ops.forEach(function (op) {
+      var ln = document.createElement("div");
+      ln.className = "diff-line" + (op.type === "del" ? " diff-del" : op.type === "add" ? " diff-add" : "");
+      var sign = document.createElement("span");
+      sign.className = "diff-sign";
+      sign.textContent = op.type === "del" ? "- " : op.type === "add" ? "+ " : "  ";
+      ln.appendChild(sign);
+      op.line.tokens.forEach(function (t) {
+        var s = document.createElement("span");
+        s.className = "tok";
+        s.textContent = t.content;
+        s.style.color = t.color;
+        ln.appendChild(s);
+      });
+      code.appendChild(ln);
+      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);
+    var atDel = start + FADE + 0.3;
+    delEls.forEach(function (el, k) {
+      tl.fromTo(el, { height: 46, opacity: 1 }, { height: 0, opacity: 0, duration: DEL, ease: "power2.inOut" }, atDel + k * 0.08);
+    });
+    var atAdd = atDel + DEL + 0.15;
+    addEls.forEach(function (el, k) {
+      tl.set(el, { height: 0, opacity: 0 }, 0);
+      tl.fromTo(el, { height: 0, opacity: 0 }, { height: 46, opacity: 1, duration: ADD, ease: "power2.out" }, atAdd + k * 0.12);
+    });
+  }
 
-        function highlight(tl, surface, state, start, targetIdx) {
-          var SWEEP = 0.9;
-          var parts = makeScene(surface, true);
-          var code = parts.code;
-          renderState(code, state);
-          var lines = code.querySelectorAll(".line");
-          fillGutter(parts.gutter, lines.length);
-          var base = code.getBoundingClientRect();
-          var idx = Math.max(0, Math.min(lines.length - 1, targetIdx));
-          var lr = lines[idx].getBoundingClientRect();
-          var box = document.createElement("div");
-          box.className = "hl-box";
-          box.style.left = lr.left - base.left - 8 + "px";
-          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);
-          var at = start + FADE + 0.2;
-          tl.fromTo(
-            box,
-            { width: 0, opacity: 0 },
-            { width: lr.width + 18, opacity: 1, duration: SWEEP, ease: "power2.inOut" },
-            at,
-          );
-          for (var i = 0; i < lines.length; i++) {
-            if (i === idx) continue;
-            tl.fromTo(
-              lines[i],
-              { opacity: 1 },
-              { opacity: 0.45, duration: SWEEP, ease: "power2.inOut" },
-              at,
-            );
-          }
-        }
+  function highlight(tl, surface, state, start, targetIdx) {
+    var SWEEP = 0.9;
+    var parts = makeScene(surface, true);
+    var code = parts.code;
+    renderState(code, state);
+    var lines = code.querySelectorAll(".line");
+    fillGutter(parts.gutter, lines.length);
+    var base = code.getBoundingClientRect();
+    var idx = Math.max(0, Math.min(lines.length - 1, targetIdx));
+    var lr = lines[idx].getBoundingClientRect();
+    var box = document.createElement("div");
+    box.className = "hl-box";
+    box.style.left = lr.left - base.left - 8 + "px";
+    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);
+    var at = start + FADE + 0.2;
+    tl.fromTo(box, { width: 0, opacity: 0 }, { width: lr.width + 18, opacity: 1, duration: SWEEP, ease: "power2.inOut" }, at);
+    for (var i = 0; i < lines.length; i++) {
+      if (i === idx) continue;
+      tl.fromTo(lines[i], { opacity: 1 }, { opacity: 0.45, duration: SWEEP, ease: "power2.inOut" }, at);
+    }
+  }
 
-        function scroll(tl, surface, state, start, targetLine) {
-          var SCROLL = 1.7;
-          var parts = makeScene(surface, true);
-          var code = parts.code;
-          renderState(code, state);
-          var lines = code.querySelectorAll(".line");
-          fillGutter(parts.gutter, lines.length);
-          var surfRect = surface.getBoundingClientRect();
-          var idx = Math.max(0, Math.min(lines.length - 1, targetLine - 1));
-          var lr = lines[idx].getBoundingClientRect();
-          var lineCenter = lr.top + lr.height / 2 - surfRect.top;
-          var dy = surfRect.height * 0.5 - lineCenter;
-          var box = document.createElement("div");
-          box.className = "hl-box";
-          box.style.left = lines[idx].offsetLeft - 8 + "px";
-          box.style.top = lines[idx].offsetTop - 1 + "px";
-          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);
-          var at = start + FADE + 0.35;
-          tl.fromTo(
-            [code, parts.gutter],
-            { y: 0 },
-            { y: dy, duration: SCROLL, ease: "power2.inOut" },
-            at,
-          );
-          var arrAt = at + SCROLL;
-          for (var i = 0; i < lines.length; i++) {
-            if (i === idx) continue;
-            tl.fromTo(
-              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);
-        }
+  function scroll(tl, surface, state, start, targetLine) {
+    var SCROLL = 1.7;
+    var parts = makeScene(surface, true);
+    var code = parts.code;
+    renderState(code, state);
+    var lines = code.querySelectorAll(".line");
+    fillGutter(parts.gutter, lines.length);
+    var surfRect = surface.getBoundingClientRect();
+    var idx = Math.max(0, Math.min(lines.length - 1, targetLine - 1));
+    var lr = lines[idx].getBoundingClientRect();
+    var lineCenter = lr.top + lr.height / 2 - surfRect.top;
+    var dy = surfRect.height * 0.5 - lineCenter;
+    var box = document.createElement("div");
+    box.className = "hl-box";
+    box.style.left = lines[idx].offsetLeft - 8 + "px";
+    box.style.top = lines[idx].offsetTop - 1 + "px";
+    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);
+    var at = start + FADE + 0.35;
+    tl.fromTo([code, parts.gutter], { y: 0 }, { y: dy, duration: SCROLL, ease: "power2.inOut" }, at);
+    var arrAt = at + SCROLL;
+    for (var i = 0; i < lines.length; i++) {
+      if (i === idx) continue;
+      tl.fromTo(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);
+  }
 
-        function buildEffect(tl, surface, spec) {
-          var start = 0.45;
-          var seq = T[spec.seq];
-          if (spec.effect === "morph") morph(tl, surface, seq.states, start);
-          else if (spec.effect === "flight") flight(tl, surface, seq.states, start);
-          else if (spec.effect === "typing") typing(tl, surface, seq.states[0], start);
-          else if (spec.effect === "diff") diff(tl, surface, seq.states, start);
-          else if (spec.effect === "highlight")
-            highlight(tl, surface, seq.states[0], start, spec.line || 0);
-          else if (spec.effect === "scroll")
-            scroll(tl, surface, seq.states[0], start, spec.line || 1);
-        }
+  function buildEffect(tl, surface, spec) {
+    var start = 0.45;
+    var seq = T[spec.seq];
+    if (spec.effect === "morph") morph(tl, surface, seq.states, start);
+    else if (spec.effect === "flight") flight(tl, surface, seq.states, start);
+    else if (spec.effect === "typing") typing(tl, surface, seq.states[0], start);
+    else if (spec.effect === "diff") diff(tl, surface, seq.states, start);
+    else if (spec.effect === "highlight") highlight(tl, surface, seq.states[0], start, spec.line || 0);
+    else if (spec.effect === "scroll") scroll(tl, surface, seq.states[0], start, spec.line || 1);
+  }
 
-        function go() {
-          var spec = window.__BLOCK;
-          var surface = document.getElementById("surface");
-          var root = document.getElementById("root");
-          window.__timelines = window.__timelines || {};
-          var tl = gsap.timeline({ paused: true });
-          window.__timelines["code-snippet-flight"] = tl; // register synchronously
-          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
-          });
-        }
+  function go() {
+    var spec = window.__BLOCK;
+    var surface = document.getElementById("surface");
+    var root = document.getElementById("root");
+    window.__timelines = window.__timelines || {};
+    var tl = gsap.timeline({ paused: true });
+    window.__timelines["code-snippet-flight"] = tl; // register synchronously
+    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
+    });
+  }
+
+  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
+  else go();
+})();
 
-        if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
-        else go();
-      })();
     </script>
   </body>
 </html>
diff --git a/registry/blocks/code-typing/code-typing.html b/registry/blocks/code-typing/code-typing.html
index 432557449d..72f450f428 100644
--- a/registry/blocks/code-typing/code-typing.html
+++ b/registry/blocks/code-typing/code-typing.html
@@ -6,225 +6,37 @@
     <title>Code Typing</title>
     <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
     <style>
-      * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-      }
-      html,
-      body {
-        width: 1920px;
-        height: 1080px;
-        overflow: hidden;
-        background: #05070b;
-      }
-      #root {
-        position: relative;
-        width: 1920px;
-        height: 1080px;
-        font-family: "JetBrains Mono", monospace;
-        color: #e6edf3;
-      }
-      .bg-field {
-        position: absolute;
-        inset: 0;
-        background: radial-gradient(1200px 700px at 50% 18%, #0e1726 0%, #070b12 55%, #05070b 100%);
-      }
-      .bg-grid {
-        position: absolute;
-        inset: 0;
-        background-image:
-          linear-gradient(rgba(88, 166, 255, 0.05) 1px, transparent 1px),
-          linear-gradient(90deg, rgba(88, 166, 255, 0.05) 1px, transparent 1px);
-        background-size: 64px 64px;
-        mask-image: radial-gradient(1100px 620px at 50% 42%, #000 0%, transparent 78%);
-      }
-      .bg-glow {
-        position: absolute;
-        width: 900px;
-        height: 900px;
-        border-radius: 50%;
-        filter: blur(120px);
-        opacity: 0.5;
-      }
-      .bg-glow.a {
-        background: #1f6feb55;
-        left: -180px;
-        top: -200px;
-      }
-      .bg-glow.b {
-        background: #2ea04355;
-        right: -200px;
-        bottom: -260px;
-      }
-      .editor {
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-        width: 1380px;
-        height: 800px;
-        background: #0b0f17;
-        border: 1px solid #1d2733;
-        border-radius: 16px;
-        box-shadow:
-          0 40px 120px rgba(0, 0, 0, 0.6),
-          0 2px 0 rgba(255, 255, 255, 0.03) inset;
-        overflow: hidden;
-        display: flex;
-        flex-direction: column;
-      }
-      .titlebar {
-        height: 56px;
-        flex: 0 0 56px;
-        display: flex;
-        align-items: center;
-        gap: 16px;
-        padding: 0 22px;
-        background: linear-gradient(#11161f, #0c111a);
-        border-bottom: 1px solid #1b2430;
-      }
-      .dots {
-        display: flex;
-        gap: 10px;
-      }
-      .dot {
-        width: 14px;
-        height: 14px;
-        border-radius: 50%;
-      }
-      .dot.r {
-        background: #ff5f57;
-      }
-      .dot.y {
-        background: #febc2e;
-      }
-      .dot.g {
-        background: #28c840;
-      }
-      .filename {
-        font-size: 19px;
-        color: #8b98a9;
-        letter-spacing: 0.2px;
-      }
-      .filename .accent {
-        color: #d6e2f0;
-      }
-      .code-surface {
-        position: relative;
-        flex: 1 1 auto;
-        overflow: hidden;
-      }
-      .scene {
-        position: absolute;
-        inset: 0;
-        opacity: 0;
-        will-change: opacity;
-      }
-      .code {
-        position: absolute;
-        top: 38px;
-        left: 0;
-        right: 0;
-        padding: 0 44px 0 104px;
-        font-size: 30px;
-        line-height: 46px;
-        font-variant-ligatures: none;
-        tab-size: 2;
-      }
-      .gutter {
-        position: absolute;
-        top: 38px;
-        left: 0;
-        width: 84px;
-        padding-right: 18px;
-        font-size: 30px;
-        line-height: 46px;
-        text-align: right;
-        color: #828c9b;
-        user-select: none;
-      }
-      .ln {
-        display: block;
-        height: 46px;
-      }
-      .line {
-        display: block;
-        min-height: 46px;
-        white-space: pre;
-        position: relative;
-        z-index: 1;
-      }
-      .tok {
-        display: inline-block;
-        white-space: pre;
-        will-change: transform, opacity;
-      }
-      .caret {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 3px;
-        height: 32px;
-        margin-top: 6px;
-        background: #58a6ff;
-        border-radius: 1px;
-        z-index: 3;
-      }
-      .hl-box {
-        position: absolute;
-        background: rgba(88, 166, 255, 0.16);
-        border-left: 3px solid #58a6ff;
-        border-radius: 6px;
-        z-index: 0;
-        overflow: hidden;
-      }
-      .diff-line {
-        display: block;
-        min-height: 0;
-        line-height: 46px;
-        white-space: pre;
-        position: relative;
-        overflow: hidden;
-        padding-left: 14px;
-      }
-      .diff-sign {
-        display: inline-block;
-        width: 22px;
-        color: #41506220;
-      }
-      .diff-del {
-        background: rgba(248, 81, 73, 0.12);
-        box-shadow: inset 3px 0 #f85149;
-      }
-      .diff-add {
-        background: rgba(63, 185, 80, 0.12);
-        box-shadow: inset 3px 0 #3fb950;
-      }
-      .diff-del .diff-sign {
-        color: #f85149;
-      }
-      .diff-add .diff-sign {
-        color: #3fb950;
-      }
-      .flight-block {
-        position: absolute;
-        white-space: pre;
-        font-size: 27px;
-        line-height: 40px;
-        padding: 11px 22px;
-        border-radius: 11px;
-        background: #0f1722;
-        border: 1px solid #233044;
-        box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
-        will-change: transform, opacity;
-      }
-      .flight-target {
-        position: absolute;
-        border: 1.5px dashed #2a3a4f;
-        border-radius: 14px;
-        opacity: 0;
-      }
+      * { margin: 0; padding: 0; box-sizing: border-box; }
+      html, body { width: 1920px; height: 1080px; overflow: hidden; background: #05070b; }
+      #root { position: relative; width: 1920px; height: 1080px; font-family: "JetBrains Mono", monospace; color: #e6edf3; }
+      .bg-field { position: absolute; inset: 0; background: radial-gradient(1200px 700px at 50% 18%, #0e1726 0%, #070b12 55%, #05070b 100%); }
+      .bg-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(88,166,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(88,166,255,0.05) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(1100px 620px at 50% 42%, #000 0%, transparent 78%); }
+      .bg-glow { position: absolute; width: 900px; height: 900px; border-radius: 50%; filter: blur(120px); opacity: 0.5; }
+      .bg-glow.a { background: #1f6feb55; left: -180px; top: -200px; }
+      .bg-glow.b { background: #2ea04355; right: -200px; bottom: -260px; }
+      .editor { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 1380px; height: 800px; background: #0b0f17; border: 1px solid #1d2733; border-radius: 16px; box-shadow: 0 40px 120px rgba(0,0,0,0.6), 0 2px 0 rgba(255,255,255,0.03) inset; overflow: hidden; display: flex; flex-direction: column; }
+      .titlebar { height: 56px; flex: 0 0 56px; display: flex; align-items: center; gap: 16px; padding: 0 22px; background: linear-gradient(#11161f, #0c111a); border-bottom: 1px solid #1b2430; }
+      .dots { display: flex; gap: 10px; }
+      .dot { width: 14px; height: 14px; border-radius: 50%; }
+      .dot.r { background: #ff5f57; } .dot.y { background: #febc2e; } .dot.g { background: #28c840; }
+      .filename { font-size: 19px; color: #8b98a9; letter-spacing: 0.2px; }
+      .filename .accent { color: #d6e2f0; }
+      .code-surface { position: relative; flex: 1 1 auto; overflow: hidden; }
+      .scene { position: absolute; inset: 0; opacity: 0; will-change: opacity; }
+      .code { position: absolute; top: 38px; left: 0; right: 0; padding: 0 44px 0 104px; font-size: 30px; line-height: 46px; font-variant-ligatures: none; tab-size: 2; }
+      .gutter { position: absolute; top: 38px; left: 0; width: 84px; padding-right: 18px; font-size: 30px; line-height: 46px; text-align: right; color: #828c9b; user-select: none; }
+      .ln { display: block; height: 46px; }
+      .line { display: block; min-height: 46px; white-space: pre; position: relative; z-index: 1; }
+      .tok { display: inline-block; white-space: pre; will-change: transform, opacity; }
+      .caret { position: absolute; top: 0; left: 0; width: 3px; height: 32px; margin-top: 6px; background: #58a6ff; border-radius: 1px; z-index: 3; }
+      .hl-box { position: absolute; background: rgba(88,166,255,0.16); border-left: 3px solid #58a6ff; border-radius: 6px; z-index: 0; overflow: hidden; }
+      .diff-line { display: block; min-height: 0; line-height: 46px; white-space: pre; position: relative; overflow: hidden; padding-left: 14px; }
+      .diff-sign { display: inline-block; width: 22px; color: #41506220; }
+      .diff-del { background: rgba(248,81,73,0.12); box-shadow: inset 3px 0 #f85149; }
+      .diff-add { background: rgba(63,185,80,0.12); box-shadow: inset 3px 0 #3fb950; }
+      .diff-del .diff-sign { color: #f85149; } .diff-add .diff-sign { color: #3fb950; }
+      .flight-block { position: absolute; white-space: pre; font-size: 27px; line-height: 40px; padding: 11px 22px; border-radius: 11px; background: #0f1722; border: 1px solid #233044; box-shadow: 0 16px 44px rgba(0,0,0,0.5); will-change: transform, opacity; }
+      .flight-target { position: absolute; border: 1.5px dashed #2a3a4f; border-radius: 14px; opacity: 0; }
     </style>
   </head>
   <body>
@@ -242,775 +54,442 @@
       <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>
+          <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>
         <div class="code-surface" id="surface"></div>
       </div>
     </div>
     <script>
-      window.__TOKENS = {
-        feature: {
-          lang: "js",
-          theme: "github-dark",
-          bg: "#24292e",
-          fg: "#e1e4e8",
-          states: [
-            {
-              code: 'async function loadConfig(path) {\n  const raw = await readFile(path, "utf8")\n  const config = JSON.parse(raw)\n  return validate(config)\n}',
-              tokens: [
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-0",
-                  content: "async",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-1",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-2",
-                  content: "function",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-3",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-4",
-                  content: "loadConfig",
-                  color: "#B392F0",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-5",
-                  content: "(",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-6",
-                  content: "path",
-                  color: "#FFAB70",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-7",
-                  content: ") {",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-8",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-9",
-                  content: "  ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-10",
-                  content: "const",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-11",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-12",
-                  content: "raw",
-                  color: "#79B8FF",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-13",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-14",
-                  content: "=",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-15",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-16",
-                  content: "await",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-17",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-18",
-                  content: "readFile",
-                  color: "#B392F0",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-19",
-                  content: "(path,",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-20",
-                  content: " ",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-21",
-                  content: '"utf8"',
-                  color: "#9ECBFF",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-22",
-                  content: ")",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-23",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-24",
-                  content: "  ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-25",
-                  content: "const",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-26",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-27",
-                  content: "config",
-                  color: "#79B8FF",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-28",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-29",
-                  content: "=",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-30",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-31",
-                  content: "JSON",
-                  color: "#79B8FF",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-32",
-                  content: ".",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-33",
-                  content: "parse",
-                  color: "#B392F0",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-34",
-                  content: "(raw)",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-35",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-36",
-                  content: "  ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-37",
-                  content: "return",
-                  color: "#F97583",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-38",
-                  content: " ",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-39",
-                  content: "validate",
-                  color: "#B392F0",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-40",
-                  content: "(config)",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-41",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-42",
-                  content: "}",
-                  color: "#E1E4E8",
-                  fontStyle: 0,
-                },
-                {
-                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-43",
-                  content: "\n",
-                  color: "#e1e4e8",
-                  fontStyle: 0,
-                },
-              ],
-            },
-          ],
-        },
-      };
-      window.__BLOCK = { id: "code-typing", effect: "typing", seq: "feature", duration: 5 };
+      window.__TOKENS = {"feature":{"lang":"js","theme":"github-dark","bg":"#24292e","fg":"#e1e4e8","states":[{"code":"async function loadConfig(path) {\n  const raw = await readFile(path, \"utf8\")\n  const config = JSON.parse(raw)\n  return validate(config)\n}","tokens":[{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-0","content":"async","color":"#F97583","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-1","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-2","content":"function","color":"#F97583","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-3","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-4","content":"loadConfig","color":"#B392F0","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-5","content":"(","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-6","content":"path","color":"#FFAB70","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-7","content":") {","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-8","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-9","content":"  ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-10","content":"const","color":"#F97583","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-11","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-12","content":"raw","color":"#79B8FF","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-13","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-14","content":"=","color":"#F97583","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-15","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-16","content":"await","color":"#F97583","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-17","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-18","content":"readFile","color":"#B392F0","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-19","content":"(path,","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-20","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-21","content":"\"utf8\"","color":"#9ECBFF","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-22","content":")","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-23","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-24","content":"  ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-25","content":"const","color":"#F97583","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-26","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-27","content":"config","color":"#79B8FF","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-28","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-29","content":"=","color":"#F97583","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-30","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-31","content":"JSON","color":"#79B8FF","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-32","content":".","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-33","content":"parse","color":"#B392F0","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-34","content":"(raw)","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-35","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-36","content":"  ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-37","content":"return","color":"#F97583","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-38","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-39","content":"validate","color":"#B392F0","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-40","content":"(config)","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-41","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-42","content":"}","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-43","content":"\n","color":"#e1e4e8","fontStyle":0}]}]}};
+      window.__BLOCK = {"id":"code-typing","effect":"typing","seq":"feature","duration":5};
     </script>
     <script>
-      // 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
-      // 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].
-      (function () {
-        "use strict";
-        var T = window.__TOKENS || {};
+// 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
+// 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].
+(function () {
+  "use strict";
+  var T = window.__TOKENS || {};
 
-        function lineDiv() {
-          var d = document.createElement("div");
-          d.className = "line";
-          return d;
-        }
+  function lineDiv() {
+    var d = document.createElement("div");
+    d.className = "line";
+    return d;
+  }
 
-        // Render a code state's keyed tokens into codeEl as lines of inline-block .tok spans.
-        function renderState(codeEl, state) {
-          codeEl.textContent = "";
-          var keyToEl = new Map();
-          var line = lineDiv();
-          codeEl.appendChild(line);
-          for (var i = 0; i < state.tokens.length; i++) {
-            var t = state.tokens[i];
-            if (t.content === "\n") {
-              line = lineDiv();
-              codeEl.appendChild(line);
-              continue;
-            }
-            var span = document.createElement("span");
-            span.className = "tok";
-            span.textContent = t.content;
-            span.style.color = t.color;
-            if (t.fontStyle & 1) span.style.fontStyle = "italic";
-            if (t.fontStyle & 2) span.style.fontWeight = "700";
-            line.appendChild(span);
-            keyToEl.set(t.key, span);
-          }
-          var last = codeEl.lastChild;
-          if (last && last.className === "line" && last.children.length === 0)
-            codeEl.removeChild(last);
-          return keyToEl;
-        }
+  // Render a code state's keyed tokens into codeEl as lines of inline-block .tok spans.
+  function renderState(codeEl, state) {
+    codeEl.textContent = "";
+    var keyToEl = new Map();
+    var line = lineDiv();
+    codeEl.appendChild(line);
+    for (var i = 0; i < state.tokens.length; i++) {
+      var t = state.tokens[i];
+      if (t.content === "\n") {
+        line = lineDiv();
+        codeEl.appendChild(line);
+        continue;
+      }
+      var span = document.createElement("span");
+      span.className = "tok";
+      span.textContent = t.content;
+      span.style.color = t.color;
+      if (t.fontStyle & 1) span.style.fontStyle = "italic";
+      if (t.fontStyle & 2) span.style.fontWeight = "700";
+      line.appendChild(span);
+      keyToEl.set(t.key, span);
+    }
+    var last = codeEl.lastChild;
+    if (last && last.className === "line" && last.children.length === 0) codeEl.removeChild(last);
+    return keyToEl;
+  }
 
-        function rectsOf(keyToEl) {
-          var m = new Map();
-          keyToEl.forEach(function (el, k) {
-            var r = el.getBoundingClientRect();
-            m.set(k, { left: r.left, top: r.top });
-          });
-          return m;
-        }
+  function rectsOf(keyToEl) {
+    var m = new Map();
+    keyToEl.forEach(function (el, k) {
+      var r = el.getBoundingClientRect();
+      m.set(k, { left: r.left, top: r.top });
+    });
+    return m;
+  }
 
-        function makeScene(surface, withGutter) {
-          var scene = document.createElement("div");
-          scene.className = "scene";
-          if (withGutter) {
-            var g = document.createElement("div");
-            g.className = "gutter";
-            scene.appendChild(g);
-          }
-          var code = document.createElement("div");
-          code.className = "code";
-          scene.appendChild(code);
-          surface.appendChild(scene);
-          return { scene: scene, code: code, gutter: scene.querySelector(".gutter") };
-        }
+  function makeScene(surface, withGutter) {
+    var scene = document.createElement("div");
+    scene.className = "scene";
+    if (withGutter) {
+      var g = document.createElement("div");
+      g.className = "gutter";
+      scene.appendChild(g);
+    }
+    var code = document.createElement("div");
+    code.className = "code";
+    scene.appendChild(code);
+    surface.appendChild(scene);
+    return { scene: scene, code: code, gutter: scene.querySelector(".gutter") };
+  }
 
-        function fillGutter(g, n) {
-          var html = "";
-          for (var i = 1; i <= n; i++) html += '<span class="ln">' + i + "</span>";
-          g.innerHTML = html;
-        }
+  function fillGutter(g, n) {
+    var html = "";
+    for (var i = 1; i <= n; i++) html += '<span class="ln">' + i + "</span>";
+    g.innerHTML = html;
+  }
 
-        function splitLines(state) {
-          var lines = [{ text: "", tokens: [] }];
-          for (var i = 0; i < state.tokens.length; i++) {
-            var t = state.tokens[i];
-            if (t.content === "\n") {
-              lines.push({ text: "", tokens: [] });
-              continue;
-            }
-            var cur = lines[lines.length - 1];
-            cur.tokens.push(t);
-            cur.text += t.content;
-          }
-          if (lines.length && lines[lines.length - 1].tokens.length === 0) lines.pop();
-          return lines;
-        }
+  function splitLines(state) {
+    var lines = [{ text: "", tokens: [] }];
+    for (var i = 0; i < state.tokens.length; i++) {
+      var t = state.tokens[i];
+      if (t.content === "\n") {
+        lines.push({ text: "", tokens: [] });
+        continue;
+      }
+      var cur = lines[lines.length - 1];
+      cur.tokens.push(t);
+      cur.text += t.content;
+    }
+    if (lines.length && lines[lines.length - 1].tokens.length === 0) lines.pop();
+    return lines;
+  }
 
-        function lineDiff(a, b) {
-          var n = a.length;
-          var m = b.length;
-          var dp = [];
-          for (var i = 0; i <= n; i++) dp.push(new Array(m + 1).fill(0));
-          for (var i = n - 1; i >= 0; i--) {
-            for (var j = m - 1; j >= 0; j--) {
-              dp[i][j] =
-                a[i].text === b[j].text
-                  ? dp[i + 1][j + 1] + 1
-                  : Math.max(dp[i + 1][j], dp[i][j + 1]);
-            }
-          }
-          var ops = [];
-          var i = 0;
-          var j = 0;
-          while (i < n && j < m) {
-            if (a[i].text === b[j].text) {
-              ops.push({ type: "same", line: b[j] });
-              i++;
-              j++;
-            } else if (dp[i + 1][j] >= dp[i][j + 1]) {
-              ops.push({ type: "del", line: a[i] });
-              i++;
-            } else {
-              ops.push({ type: "add", line: b[j] });
-              j++;
-            }
-          }
-          while (i < n) ops.push({ type: "del", line: a[i++] });
-          while (j < m) ops.push({ type: "add", line: b[j++] });
-          return ops;
-        }
+  function lineDiff(a, b) {
+    var n = a.length;
+    var m = b.length;
+    var dp = [];
+    for (var i = 0; i <= n; i++) dp.push(new Array(m + 1).fill(0));
+    for (var i = n - 1; i >= 0; i--) {
+      for (var j = m - 1; j >= 0; j--) {
+        dp[i][j] = a[i].text === b[j].text ? dp[i + 1][j + 1] + 1 : Math.max(dp[i + 1][j], dp[i][j + 1]);
+      }
+    }
+    var ops = [];
+    var i = 0;
+    var j = 0;
+    while (i < n && j < m) {
+      if (a[i].text === b[j].text) {
+        ops.push({ type: "same", line: b[j] });
+        i++;
+        j++;
+      } else if (dp[i + 1][j] >= dp[i][j + 1]) {
+        ops.push({ type: "del", line: a[i] });
+        i++;
+      } else {
+        ops.push({ type: "add", line: b[j] });
+        j++;
+      }
+    }
+    while (i < n) ops.push({ type: "del", line: a[i++] });
+    while (j < m) ops.push({ type: "add", line: b[j++] });
+    return ops;
+  }
 
-        // ---- single-scene effect builders (fade in, play, hold to end) -------------
-        var FADE = 0.45;
+  // ---- single-scene effect builders (fade in, play, hold to end) -------------
+  var FADE = 0.45;
 
-        function morph(tl, surface, states, start) {
-          var STEP = 1.2;
-          var HOLD = 1.0;
-          var t = start;
-          for (var s = 0; s < states.length - 1; s++) {
-            var parts = makeScene(surface, false);
-            var code = parts.code;
-            var fromEls = renderState(code, states[s]);
-            var fromR = rectsOf(fromEls);
-            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;
-            toEls.forEach(function (el, k) {
-              var fr = fromR.get(k);
-              var tr = toR.get(k);
-              if (fr) {
-                seg.fromTo(
-                  el,
-                  { x: fr.left - tr.left, y: fr.top - tr.top },
-                  { x: 0, y: 0, duration: STEP, ease: "power2.inOut" },
-                  0,
-                );
-              } else {
-                seg.fromTo(
-                  el,
-                  { opacity: 0 },
-                  { opacity: 1, duration: FD, ease: "power1.out" },
-                  ENTER_AT,
-                );
-              }
-            });
-            var toKeys = new Set(toEls.keys());
-            var fromState = states[s];
-            for (var i = 0; i < fromState.tokens.length; i++) {
-              var tok = fromState.tokens[i];
-              if (tok.content === "\n" || toKeys.has(tok.key) || !fromR.has(tok.key)) continue;
-              var r = fromR.get(tok.key);
-              var span = document.createElement("span");
-              span.className = "tok";
-              span.textContent = tok.content;
-              span.style.position = "absolute";
-              span.style.left = r.left - base.left + "px";
-              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);
-            }
-            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);
-            if (!isLast)
-              tl.to(parts.scene, { opacity: 0, duration: FADE, ease: "power1.in" }, segEnd - FADE);
-            tl.add(seg, segStart);
-            t = segEnd - FADE;
-          }
+  function morph(tl, surface, states, start) {
+    var STEP = 1.2;
+    var HOLD = 1.0;
+    var t = start;
+    for (var s = 0; s < states.length - 1; s++) {
+      var parts = makeScene(surface, false);
+      var code = parts.code;
+      var fromEls = renderState(code, states[s]);
+      var fromR = rectsOf(fromEls);
+      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;
+      toEls.forEach(function (el, k) {
+        var fr = fromR.get(k);
+        var tr = toR.get(k);
+        if (fr) {
+          seg.fromTo(el, { x: fr.left - tr.left, y: fr.top - tr.top }, { x: 0, y: 0, duration: STEP, ease: "power2.inOut" }, 0);
+        } else {
+          seg.fromTo(el, { opacity: 0 }, { opacity: 1, duration: FD, ease: "power1.out" }, ENTER_AT);
         }
+      });
+      var toKeys = new Set(toEls.keys());
+      var fromState = states[s];
+      for (var i = 0; i < fromState.tokens.length; i++) {
+        var tok = fromState.tokens[i];
+        if (tok.content === "\n" || toKeys.has(tok.key) || !fromR.has(tok.key)) continue;
+        var r = fromR.get(tok.key);
+        var span = document.createElement("span");
+        span.className = "tok";
+        span.textContent = tok.content;
+        span.style.position = "absolute";
+        span.style.left = r.left - base.left + "px";
+        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);
+      }
+      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);
+      if (!isLast) tl.to(parts.scene, { opacity: 0, duration: FADE, ease: "power1.in" }, segEnd - FADE);
+      tl.add(seg, segStart);
+      t = segEnd - FADE;
+    }
+  }
 
-        function flight(tl, surface, states, start) {
-          var FLY = 0.95;
-          var STAGGER = 0.26;
-          var GAP = 20;
-          var parts = makeScene(surface, false);
-          parts.code.remove();
-          var scene = parts.scene;
-          var target = document.createElement("div");
-          target.className = "flight-target";
-          scene.appendChild(target);
-          var W = surface.clientWidth;
-          var H = surface.clientHeight;
+  function flight(tl, surface, states, start) {
+    var FLY = 0.95;
+    var STAGGER = 0.26;
+    var GAP = 20;
+    var parts = makeScene(surface, false);
+    parts.code.remove();
+    var scene = parts.scene;
+    var target = document.createElement("div");
+    target.className = "flight-target";
+    scene.appendChild(target);
+    var W = surface.clientWidth;
+    var H = surface.clientHeight;
 
-          var blocks = states.map(function (st) {
-            var blk = document.createElement("div");
-            blk.className = "flight-block";
-            renderState(blk, st);
-            scene.appendChild(blk);
-            return blk;
-          });
-          var n = blocks.length;
+    var blocks = states.map(function (st) {
+      var blk = document.createElement("div");
+      blk.className = "flight-block";
+      renderState(blk, st);
+      scene.appendChild(blk);
+      return blk;
+    });
+    var n = blocks.length;
 
-          // Pass 1: measure natural size, then make every chip the SAME width (symmetry).
-          var maxW = 0;
-          var chipH = 0;
-          blocks.forEach(function (blk) {
-            var r = blk.getBoundingClientRect();
-            if (r.width > maxW) maxW = r.width;
-            if (r.height > chipH) chipH = r.height;
-          });
-          blocks.forEach(function (blk) {
-            blk.style.width = maxW + "px";
-          });
+    // Pass 1: measure natural size, then make every chip the SAME width (symmetry).
+    var maxW = 0;
+    var chipH = 0;
+    blocks.forEach(function (blk) {
+      var r = blk.getBoundingClientRect();
+      if (r.width > maxW) maxW = r.width;
+      if (r.height > chipH) chipH = r.height;
+    });
+    blocks.forEach(function (blk) {
+      blk.style.width = maxW + "px";
+    });
 
-          // Pass 2: evenly-stacked, left-aligned, group centered in the surface.
-          var stackH = n * chipH + (n - 1) * GAP;
-          var destLeft = Math.round((W - maxW) / 2);
-          var topY = Math.round((H - stackH) / 2);
-          blocks.forEach(function (blk, i) {
-            var destY = topY + i * (chipH + GAP);
-            blk.style.left = destLeft + "px";
-            blk.style.top = destY + "px";
-            // fly straight in from the left to the shared left edge — clean, no skew
-            var srcX = destLeft - W * 0.32;
-            tl.fromTo(
-              blk,
-              { x: srcX - destLeft, opacity: 0, scale: 0.96 },
-              { x: 0, opacity: 1, scale: 1, duration: FLY, ease: "power3.out" },
-              start + FADE + i * STAGGER,
-            );
-          });
+    // Pass 2: evenly-stacked, left-aligned, group centered in the surface.
+    var stackH = n * chipH + (n - 1) * GAP;
+    var destLeft = Math.round((W - maxW) / 2);
+    var topY = Math.round((H - stackH) / 2);
+    blocks.forEach(function (blk, i) {
+      var destY = topY + i * (chipH + GAP);
+      blk.style.left = destLeft + "px";
+      blk.style.top = destY + "px";
+      // fly straight in from the left to the shared left edge — clean, no skew
+      var srcX = destLeft - W * 0.32;
+      tl.fromTo(
+        blk,
+        { x: srcX - destLeft, opacity: 0, scale: 0.96 },
+        { x: 0, opacity: 1, scale: 1, duration: FLY, ease: "power3.out" },
+        start + FADE + i * STAGGER,
+      );
+    });
 
-          // Even-padded panel tightly wrapping the uniform stack.
-          var padX = 30;
-          var padY = 24;
-          target.style.left = destLeft - padX + "px";
-          target.style.top = topY - padY + "px";
-          target.style.width = maxW + padX * 2 + "px";
-          target.style.height = stackH + padY * 2 + "px";
-          var landAt = start + FADE + (n - 1) * STAGGER + FLY;
-          tl.set(scene, { opacity: 1 }, 0);
-          tl.to(target, { opacity: 1, duration: 0.5, ease: "power1.out" }, landAt - 0.5);
-        }
+    // Even-padded panel tightly wrapping the uniform stack.
+    var padX = 30;
+    var padY = 24;
+    target.style.left = destLeft - padX + "px";
+    target.style.top = topY - padY + "px";
+    target.style.width = maxW + padX * 2 + "px";
+    target.style.height = stackH + padY * 2 + "px";
+    var landAt = start + FADE + (n - 1) * STAGGER + FLY;
+    tl.set(scene, { opacity: 1 }, 0);
+    tl.to(target, { opacity: 1, duration: 0.5, ease: "power1.out" }, landAt - 0.5);
+  }
 
-        function typing(tl, surface, state, start) {
-          var PER = 0.028; // seconds per character — smooth, fast typewriter
-          var parts = makeScene(surface, true);
-          var code = parts.code;
+  function typing(tl, surface, state, start) {
+    var PER = 0.028; // seconds per character — smooth, fast typewriter
+    var parts = makeScene(surface, true);
+    var code = parts.code;
 
-          // Per-CHARACTER render (granular reveal reads smoother than per-token pops).
-          code.textContent = "";
-          var line = document.createElement("div");
-          line.className = "line";
-          code.appendChild(line);
-          var chars = [];
-          for (var i = 0; i < state.tokens.length; i++) {
-            var t = state.tokens[i];
-            if (t.content === "\n") {
-              line = document.createElement("div");
-              line.className = "line";
-              code.appendChild(line);
-              continue;
-            }
-            for (var c = 0; c < t.content.length; c++) {
-              var span = document.createElement("span");
-              span.className = "tok";
-              span.textContent = t.content[c];
-              span.style.color = t.color;
-              if (t.fontStyle & 1) span.style.fontStyle = "italic";
-              if (t.fontStyle & 2) span.style.fontWeight = "700";
-              line.appendChild(span);
-              chars.push({ el: span, ws: t.content[c] === " " });
-            }
-          }
-          var last = code.lastChild;
-          if (last && last.className === "line" && last.children.length === 0)
-            code.removeChild(last);
+    // Per-CHARACTER render (granular reveal reads smoother than per-token pops).
+    code.textContent = "";
+    var line = document.createElement("div");
+    line.className = "line";
+    code.appendChild(line);
+    var chars = [];
+    for (var i = 0; i < state.tokens.length; i++) {
+      var t = state.tokens[i];
+      if (t.content === "\n") {
+        line = document.createElement("div");
+        line.className = "line";
+        code.appendChild(line);
+        continue;
+      }
+      for (var c = 0; c < t.content.length; c++) {
+        var span = document.createElement("span");
+        span.className = "tok";
+        span.textContent = t.content[c];
+        span.style.color = t.color;
+        if (t.fontStyle & 1) span.style.fontStyle = "italic";
+        if (t.fontStyle & 2) span.style.fontWeight = "700";
+        line.appendChild(span);
+        chars.push({ el: span, ws: t.content[c] === " " });
+      }
+    }
+    var last = code.lastChild;
+    if (last && last.className === "line" && last.children.length === 0) code.removeChild(last);
 
-          fillGutter(parts.gutter, code.querySelectorAll(".line").length);
-          var base = code.getBoundingClientRect();
-          var caret = document.createElement("div");
-          caret.className = "caret";
-          code.appendChild(caret);
+    fillGutter(parts.gutter, code.querySelectorAll(".line").length);
+    var base = code.getBoundingClientRect();
+    var caret = document.createElement("div");
+    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);
+    tl.set(parts.scene, { opacity: 0 }, 0);
+    tl.to(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);
-          }
-          chars.forEach(function (c, i) {
-            var at = t0 + i * PER;
-            tl.set(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);
-            // caret glides at constant speed to each char's right edge (linear = no stop-start jitter)
-            var r = c.el.getBoundingClientRect();
-            tl.to(
-              caret,
-              { x: r.right - base.left, y: r.top - base.top, duration: PER, ease: "none" },
-              at,
-            );
-          });
-        }
+    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);
+    }
+    chars.forEach(function (c, i) {
+      var at = t0 + i * PER;
+      tl.set(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);
+      // caret glides at constant speed to each char's right edge (linear = no stop-start jitter)
+      var r = c.el.getBoundingClientRect();
+      tl.to(caret, { x: r.right - base.left, y: r.top - base.top, duration: PER, ease: "none" }, at);
+    });
+  }
 
-        function diff(tl, surface, states, start) {
-          var DEL = 0.55;
-          var ADD = 0.6;
-          var ops = lineDiff(splitLines(states[0]), splitLines(states[1]));
-          var parts = makeScene(surface, false);
-          var code = parts.code;
-          var delEls = [];
-          var addEls = [];
-          ops.forEach(function (op) {
-            var ln = document.createElement("div");
-            ln.className =
-              "diff-line" +
-              (op.type === "del" ? " diff-del" : op.type === "add" ? " diff-add" : "");
-            var sign = document.createElement("span");
-            sign.className = "diff-sign";
-            sign.textContent = op.type === "del" ? "- " : op.type === "add" ? "+ " : "  ";
-            ln.appendChild(sign);
-            op.line.tokens.forEach(function (t) {
-              var s = document.createElement("span");
-              s.className = "tok";
-              s.textContent = t.content;
-              s.style.color = t.color;
-              ln.appendChild(s);
-            });
-            code.appendChild(ln);
-            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);
-          var atDel = start + FADE + 0.3;
-          delEls.forEach(function (el, k) {
-            tl.fromTo(
-              el,
-              { height: 46, opacity: 1 },
-              { height: 0, opacity: 0, duration: DEL, ease: "power2.inOut" },
-              atDel + k * 0.08,
-            );
-          });
-          var atAdd = atDel + DEL + 0.15;
-          addEls.forEach(function (el, k) {
-            tl.set(el, { height: 0, opacity: 0 }, 0);
-            tl.fromTo(
-              el,
-              { height: 0, opacity: 0 },
-              { height: 46, opacity: 1, duration: ADD, ease: "power2.out" },
-              atAdd + k * 0.12,
-            );
-          });
-        }
+  function diff(tl, surface, states, start) {
+    var DEL = 0.55;
+    var ADD = 0.6;
+    var ops = lineDiff(splitLines(states[0]), splitLines(states[1]));
+    var parts = makeScene(surface, false);
+    var code = parts.code;
+    var delEls = [];
+    var addEls = [];
+    ops.forEach(function (op) {
+      var ln = document.createElement("div");
+      ln.className = "diff-line" + (op.type === "del" ? " diff-del" : op.type === "add" ? " diff-add" : "");
+      var sign = document.createElement("span");
+      sign.className = "diff-sign";
+      sign.textContent = op.type === "del" ? "- " : op.type === "add" ? "+ " : "  ";
+      ln.appendChild(sign);
+      op.line.tokens.forEach(function (t) {
+        var s = document.createElement("span");
+        s.className = "tok";
+        s.textContent = t.content;
+        s.style.color = t.color;
+        ln.appendChild(s);
+      });
+      code.appendChild(ln);
+      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);
+    var atDel = start + FADE + 0.3;
+    delEls.forEach(function (el, k) {
+      tl.fromTo(el, { height: 46, opacity: 1 }, { height: 0, opacity: 0, duration: DEL, ease: "power2.inOut" }, atDel + k * 0.08);
+    });
+    var atAdd = atDel + DEL + 0.15;
+    addEls.forEach(function (el, k) {
+      tl.set(el, { height: 0, opacity: 0 }, 0);
+      tl.fromTo(el, { height: 0, opacity: 0 }, { height: 46, opacity: 1, duration: ADD, ease: "power2.out" }, atAdd + k * 0.12);
+    });
+  }
 
-        function highlight(tl, surface, state, start, targetIdx) {
-          var SWEEP = 0.9;
-          var parts = makeScene(surface, true);
-          var code = parts.code;
-          renderState(code, state);
-          var lines = code.querySelectorAll(".line");
-          fillGutter(parts.gutter, lines.length);
-          var base = code.getBoundingClientRect();
-          var idx = Math.max(0, Math.min(lines.length - 1, targetIdx));
-          var lr = lines[idx].getBoundingClientRect();
-          var box = document.createElement("div");
-          box.className = "hl-box";
-          box.style.left = lr.left - base.left - 8 + "px";
-          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);
-          var at = start + FADE + 0.2;
-          tl.fromTo(
-            box,
-            { width: 0, opacity: 0 },
-            { width: lr.width + 18, opacity: 1, duration: SWEEP, ease: "power2.inOut" },
-            at,
-          );
-          for (var i = 0; i < lines.length; i++) {
-            if (i === idx) continue;
-            tl.fromTo(
-              lines[i],
-              { opacity: 1 },
-              { opacity: 0.45, duration: SWEEP, ease: "power2.inOut" },
-              at,
-            );
-          }
-        }
+  function highlight(tl, surface, state, start, targetIdx) {
+    var SWEEP = 0.9;
+    var parts = makeScene(surface, true);
+    var code = parts.code;
+    renderState(code, state);
+    var lines = code.querySelectorAll(".line");
+    fillGutter(parts.gutter, lines.length);
+    var base = code.getBoundingClientRect();
+    var idx = Math.max(0, Math.min(lines.length - 1, targetIdx));
+    var lr = lines[idx].getBoundingClientRect();
+    var box = document.createElement("div");
+    box.className = "hl-box";
+    box.style.left = lr.left - base.left - 8 + "px";
+    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);
+    var at = start + FADE + 0.2;
+    tl.fromTo(box, { width: 0, opacity: 0 }, { width: lr.width + 18, opacity: 1, duration: SWEEP, ease: "power2.inOut" }, at);
+    for (var i = 0; i < lines.length; i++) {
+      if (i === idx) continue;
+      tl.fromTo(lines[i], { opacity: 1 }, { opacity: 0.45, duration: SWEEP, ease: "power2.inOut" }, at);
+    }
+  }
 
-        function scroll(tl, surface, state, start, targetLine) {
-          var SCROLL = 1.7;
-          var parts = makeScene(surface, true);
-          var code = parts.code;
-          renderState(code, state);
-          var lines = code.querySelectorAll(".line");
-          fillGutter(parts.gutter, lines.length);
-          var surfRect = surface.getBoundingClientRect();
-          var idx = Math.max(0, Math.min(lines.length - 1, targetLine - 1));
-          var lr = lines[idx].getBoundingClientRect();
-          var lineCenter = lr.top + lr.height / 2 - surfRect.top;
-          var dy = surfRect.height * 0.5 - lineCenter;
-          var box = document.createElement("div");
-          box.className = "hl-box";
-          box.style.left = lines[idx].offsetLeft - 8 + "px";
-          box.style.top = lines[idx].offsetTop - 1 + "px";
-          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);
-          var at = start + FADE + 0.35;
-          tl.fromTo(
-            [code, parts.gutter],
-            { y: 0 },
-            { y: dy, duration: SCROLL, ease: "power2.inOut" },
-            at,
-          );
-          var arrAt = at + SCROLL;
-          for (var i = 0; i < lines.length; i++) {
-            if (i === idx) continue;
-            tl.fromTo(
-              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);
-        }
+  function scroll(tl, surface, state, start, targetLine) {
+    var SCROLL = 1.7;
+    var parts = makeScene(surface, true);
+    var code = parts.code;
+    renderState(code, state);
+    var lines = code.querySelectorAll(".line");
+    fillGutter(parts.gutter, lines.length);
+    var surfRect = surface.getBoundingClientRect();
+    var idx = Math.max(0, Math.min(lines.length - 1, targetLine - 1));
+    var lr = lines[idx].getBoundingClientRect();
+    var lineCenter = lr.top + lr.height / 2 - surfRect.top;
+    var dy = surfRect.height * 0.5 - lineCenter;
+    var box = document.createElement("div");
+    box.className = "hl-box";
+    box.style.left = lines[idx].offsetLeft - 8 + "px";
+    box.style.top = lines[idx].offsetTop - 1 + "px";
+    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);
+    var at = start + FADE + 0.35;
+    tl.fromTo([code, parts.gutter], { y: 0 }, { y: dy, duration: SCROLL, ease: "power2.inOut" }, at);
+    var arrAt = at + SCROLL;
+    for (var i = 0; i < lines.length; i++) {
+      if (i === idx) continue;
+      tl.fromTo(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);
+  }
 
-        function buildEffect(tl, surface, spec) {
-          var start = 0.45;
-          var seq = T[spec.seq];
-          if (spec.effect === "morph") morph(tl, surface, seq.states, start);
-          else if (spec.effect === "flight") flight(tl, surface, seq.states, start);
-          else if (spec.effect === "typing") typing(tl, surface, seq.states[0], start);
-          else if (spec.effect === "diff") diff(tl, surface, seq.states, start);
-          else if (spec.effect === "highlight")
-            highlight(tl, surface, seq.states[0], start, spec.line || 0);
-          else if (spec.effect === "scroll")
-            scroll(tl, surface, seq.states[0], start, spec.line || 1);
-        }
+  function buildEffect(tl, surface, spec) {
+    var start = 0.45;
+    var seq = T[spec.seq];
+    if (spec.effect === "morph") morph(tl, surface, seq.states, start);
+    else if (spec.effect === "flight") flight(tl, surface, seq.states, start);
+    else if (spec.effect === "typing") typing(tl, surface, seq.states[0], start);
+    else if (spec.effect === "diff") diff(tl, surface, seq.states, start);
+    else if (spec.effect === "highlight") highlight(tl, surface, seq.states[0], start, spec.line || 0);
+    else if (spec.effect === "scroll") scroll(tl, surface, seq.states[0], start, spec.line || 1);
+  }
 
-        function go() {
-          var spec = window.__BLOCK;
-          var surface = document.getElementById("surface");
-          var root = document.getElementById("root");
-          window.__timelines = window.__timelines || {};
-          var tl = gsap.timeline({ paused: true });
-          window.__timelines["code-typing"] = tl; // register synchronously
-          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
-          });
-        }
+  function go() {
+    var spec = window.__BLOCK;
+    var surface = document.getElementById("surface");
+    var root = document.getElementById("root");
+    window.__timelines = window.__timelines || {};
+    var tl = gsap.timeline({ paused: true });
+    window.__timelines["code-typing"] = tl; // register synchronously
+    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
+    });
+  }
+
+  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
+  else go();
+})();
 
-        if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
-        else go();
-      })();
     </script>
   </body>
 </html>

From d8b9af1d014df4ac8cdbc2b4448407ead03b238a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Mon, 15 Jun 2026 19:52:57 -0400
Subject: [PATCH 5/7] fix(registry): one effect per block + dispose GPU
 resources + SRI vendor scripts
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Each block now inlines only the effect it dispatches — the generator strips the
other effect bodies and their dispatch branches at build time. Removes the dead,
drift-prone copies entirely (every block stays a single self-contained file);
render output is byte-identical to the prior revision.

GPU blocks register a beforeunload teardown that disposes the WebGLRenderer,
geometries, materials and textures — one-shot renders already exit per job, but
this frees GPU resources in long-lived Studio/player sessions.

Vendor scripts (GSAP, Three.js) now carry SRI integrity + crossorigin, pinned to
the sha384 of the jsdelivr-served files.
---
 .../code-3d-extrude/code-3d-extrude.html      | 216 ++-------------
 registry/blocks/code-diff/code-diff.html      | 240 +----------------
 .../blocks/code-highlight/code-highlight.html | 253 +-----------------
 registry/blocks/code-morph/code-morph.html    | 226 +---------------
 .../code-particle-assemble.html               | 191 ++-----------
 registry/blocks/code-scroll/code-scroll.html  | 247 +----------------
 .../code-shader-dissolve.html                 | 225 ++--------------
 .../code-snippet-flight.html                  | 215 +--------------
 registry/blocks/code-typing/code-typing.html  | 221 +--------------
 9 files changed, 80 insertions(+), 1954 deletions(-)

diff --git a/registry/blocks/code-3d-extrude/code-3d-extrude.html b/registry/blocks/code-3d-extrude/code-3d-extrude.html
index 371794df8e..fad9de2468 100644
--- a/registry/blocks/code-3d-extrude/code-3d-extrude.html
+++ b/registry/blocks/code-3d-extrude/code-3d-extrude.html
@@ -4,8 +4,8 @@
     <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/three@0.147.0/build/three.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js" integrity="sha384-sG0Hv1tP1lZCk9KQmrIbY/XNwi+OY84GQqhMscbnsoBFqAz8KNCil1kvfL3Hbbk2" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js" integrity="sha384-vV17nr/rMaJqmeZkFUzXLpHdQ+ME5QHKdydaqqN+3Ga39RJlNrTatJxHwGV4ml2C" crossorigin="anonymous"></script>
     <style>
       * { margin: 0; padding: 0; box-sizing: border-box; }
       html, body { width: 1920px; height: 1080px; overflow: hidden; background: #05070b; }
@@ -118,9 +118,6 @@
     return { canvas: canvas, W: W, H: H, lines: lines.length, lineH: lineH, padY: padY, fontPx: fontPx };
   }
 
-  // ===========================================================================
-  // Effect 1 — code-3d-extrude: code on a lit, beveled slab that rotates to rest
-  // ===========================================================================
   function fxExtrude(THREE, scene, camera, renderer, state, st, tl, dur) {
     scene.background = new THREE.Color(0x05070b);
     var code = drawCodeToCanvas(state, { fontPx: 38, lineH: 56, padX: 80, padY: 70, weight: 600 });
@@ -203,202 +200,32 @@
     };
   }
 
-  // ===========================================================================
-  // Effect 2 — code-shader-dissolve: code "compiles" out of GPU noise, holds crisp
-  // ===========================================================================
-  function fxDissolve(THREE, scene, camera, renderer, state, st, tl, dur, seed) {
-    scene.background = new THREE.Color(0x05070b);
-    var code = drawCodeToCanvas(state, { fontPx: 40, lineH: 60, padX: 90, padY: 80, weight: 600 });
-    var tex = new THREE.CanvasTexture(code.canvas);
-    tex.minFilter = THREE.LinearFilter;
-    tex.magFilter = THREE.LinearFilter;
-    tex.generateMipmaps = false;
-
-    var aspect = code.W / code.H;
-    var planeH = 6.6;
-    var planeW = planeH * aspect;
-
-    var uniforms = {
-      uTex: { value: tex },
-      uProgress: { value: 0 },
-      uSeed: { value: (seed || 1) * 13.37 },
-    };
-    var mat = new THREE.ShaderMaterial({
-      uniforms: uniforms,
-      transparent: true,
-      vertexShader: [
-        "varying vec2 vUv;",
-        "void main(){ vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0); }",
-      ].join("\n"),
-      fragmentShader: [
-        "precision highp float;",
-        "uniform sampler2D uTex;",
-        "uniform float uProgress;",
-        "uniform float uSeed;",
-        "varying vec2 vUv;",
-        "float hash(vec2 p){ p=fract(p*vec2(123.34,456.21)); p+=dot(p,p+45.32); return fract(p.x*p.y); }",
-        "float noise(vec2 p){ vec2 i=floor(p),f=fract(p); float a=hash(i),b=hash(i+vec2(1.,0.)),c=hash(i+vec2(0.,1.)),d=hash(i+vec2(1.,1.)); vec2 u=f*f*(3.-2.*f); return mix(mix(a,b,u.x),mix(c,d,u.x),u.y); }",
-        "void main(){",
-        "  vec2 uv = vUv;",
-        // multi-octave seeded noise field
-        "  float n = noise(uv*16.0+uSeed)*0.6 + noise(uv*48.0+uSeed*1.7)*0.3 + noise(uv*120.0+uSeed*2.3)*0.1;",
-        "  float edge = 0.12;",
-        "  float reveal = smoothstep(n-edge, n+edge, uProgress);", // 0 hidden -> 1 shown
-        // chromatic fringe strongest at the dissolving edge
-        "  float band = reveal*(1.0-reveal)*4.0;",
-        "  float off = band*0.010;",
-        "  float r = texture2D(uTex, uv+vec2(off,0.0)).r;",
-        "  float g = texture2D(uTex, uv).g;",
-        "  float b = texture2D(uTex, uv-vec2(off,0.0)).b;",
-        "  vec3 codeCol = vec3(r,g,b);",
-        // additive cyan edge glow along the dissolve front
-        "  vec3 glow = vec3(0.30,0.72,1.0) * band * 0.9;",
-        "  vec3 outc = codeCol*reveal + glow;",
-        "  float a = max(reveal, band*0.8);",
-        "  gl_FragColor = vec4(outc, a);",
-        "}",
-      ].join("\n"),
-    });
-
-    var plane = new THREE.Mesh(new THREE.PlaneGeometry(planeW, planeH), mat);
-    scene.add(plane);
-
-    camera.position.set(0, 0, 10);
-    var vfov = (camera.fov * Math.PI) / 180;
-    var screenAspect = 1920 / 1080;
-    var fitH = planeH / 2 / Math.tan(vfov / 2) / 0.82;
-    var fitW = planeW / 2 / (Math.tan(vfov / 2) * screenAspect) / 0.82;
-    camera.position.z = Math.max(fitH, fitW);
-    camera.lookAt(0, 0, 0);
-
-    // compile in, then hold crisp. Overshoot to 1.15 so even max-noise pixels
-    // (n up to ~1.0, edge 0.12) fully resolve — no leftover specks at rest.
-    tl.to(uniforms.uProgress, { value: 1.15, duration: dur * 0.62, ease: "power1.inOut" }, 0);
-
-    // uProgress is tweened by GSAP; the boot loop's render() draws once per frame.
-    return function () {};
-  }
-
-  // ===========================================================================
-  // Effect 3 — code-particle-assemble: GPU points scatter then fly to glyph pixels
-  // ===========================================================================
-  function fxParticles(THREE, scene, camera, renderer, state, st, tl, dur, seed) {
-    scene.background = new THREE.Color(0x05070b);
-    var code = drawCodeToCanvas(state, { fontPx: 46, lineH: 70, padX: 70, padY: 64, weight: 700 });
-    var cw = code.W;
-    var ch = code.H;
-    var data = code.canvas.getContext("2d").getImageData(0, 0, cw, ch).data;
-    var rng = mulberry32(((seed || 1) * 2654435761) >>> 0);
-
-    var worldW = 13.0;
-    var worldH = worldW * (ch / cw);
-
-    // sample glyph pixels (brighter than the dark bg) on a fixed grid
-    var step = 2;
-    var tx = [];
-    var col = [];
-    for (var y = 0; y < ch; y += step) {
-      for (var x = 0; x < cw; x += step) {
-        var idx = (y * cw + x) * 4;
-        var r = data[idx];
-        var g = data[idx + 1];
-        var b = data[idx + 2];
-        if (r + g + b < 120) continue; // skip background
-        tx.push((x / cw - 0.5) * worldW, -(y / ch - 0.5) * worldH, 0);
-        col.push(r / 255, g / 255, b / 255);
-      }
-    }
-    var n = tx.length / 3;
-
-    var positions = new Float32Array(n * 3);
-    var aOrigin = new Float32Array(n * 3);
-    var aTarget = new Float32Array(tx);
-    var aColor = new Float32Array(col);
-    var aDelay = new Float32Array(n);
-    for (var i = 0; i < n; i++) {
-      var sx = (rng() * 2 - 1) * worldW * 1.15;
-      var sy = (rng() * 2 - 1) * worldH * 1.7;
-      var sz = (rng() * 2 - 1) * 9.0 - 2.0;
-      aOrigin[i * 3] = sx;
-      aOrigin[i * 3 + 1] = sy;
-      aOrigin[i * 3 + 2] = sz;
-      positions[i * 3] = sx;
-      positions[i * 3 + 1] = sy;
-      positions[i * 3 + 2] = sz;
-      aDelay[i] = rng();
-    }
-
-    var geo = new THREE.BufferGeometry();
-    geo.setAttribute("position", new THREE.BufferAttribute(positions, 3));
-    geo.setAttribute("aOrigin", new THREE.BufferAttribute(aOrigin, 3));
-    geo.setAttribute("aTarget", new THREE.BufferAttribute(aTarget, 3));
-    geo.setAttribute("aColor", new THREE.BufferAttribute(aColor, 3));
-    geo.setAttribute("aDelay", new THREE.BufferAttribute(aDelay, 1));
-
-    var uniforms = { uProgress: { value: 0 }, uSize: { value: 3.4 } };
-    var mat = new THREE.ShaderMaterial({
-      uniforms: uniforms,
-      transparent: true,
-      depthTest: false,
-      depthWrite: false,
-      blending: THREE.NormalBlending,
-      vertexShader: [
-        "attribute vec3 aOrigin; attribute vec3 aTarget; attribute vec3 aColor; attribute float aDelay;",
-        "uniform float uProgress; uniform float uSize;",
-        "varying vec3 vColor; varying float vP;",
-        "void main(){",
-        "  float span = 0.62;",
-        "  float p = clamp((uProgress - aDelay*(1.0-span)) / span, 0.0, 1.0);",
-        "  p = p*p*(3.0-2.0*p);",
-        "  vec3 pos = mix(aOrigin, aTarget, p);",
-        "  vec4 mv = modelViewMatrix * vec4(pos, 1.0);",
-        "  gl_Position = projectionMatrix * mv;",
-        "  gl_PointSize = uSize * (60.0 / -mv.z) * (0.45 + 0.55*p);",
-        "  vColor = aColor; vP = p;",
-        "}",
-      ].join("\n"),
-      fragmentShader: [
-        "precision highp float;",
-        "varying vec3 vColor; varying float vP;",
-        "void main(){",
-        "  vec2 d = gl_PointCoord - 0.5;",
-        "  float r2 = dot(d, d);",
-        "  if (r2 > 0.25) discard;",
-        "  float a = smoothstep(0.25, 0.02, r2);",
-        // brighter & whiter in flight, resolves to true color as it lands
-        "  vec3 c = mix(vColor + vec3(0.32)*(1.0-vP), vColor, vP);",
-        "  gl_FragColor = vec4(c, a * (0.7 + 0.3*vP));",
-        "}",
-      ].join("\n"),
-    });
-
-    var pts = new THREE.Points(geo, mat);
-    scene.add(pts);
-
-    camera.position.set(0, 0, 10);
-    var vfov = (camera.fov * Math.PI) / 180;
-    var sa = 1920 / 1080;
-    var fitH = worldH / 2 / Math.tan(vfov / 2) / 0.78;
-    var fitW = worldW / 2 / (Math.tan(vfov / 2) * sa) / 0.78;
-    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);
-
-    // uProgress is tweened by GSAP; the boot loop's render() draws once per frame.
-    return function () {};
-  }
-
   // ---- dispatch + boot ------------------------------------------------------
   function buildEffect(THREE, scene, camera, renderer, spec, st, tl) {
     var state = T[spec.seq].states[0];
     var dur = spec.duration;
     if (spec.effect === "extrude") return fxExtrude(THREE, scene, camera, renderer, state, st, tl, dur);
-    if (spec.effect === "dissolve") return fxDissolve(THREE, scene, camera, renderer, state, st, tl, dur, spec.seed);
-    if (spec.effect === "particles") return fxParticles(THREE, scene, camera, renderer, state, st, tl, dur, spec.seed);
     return function () {};
   }
 
+  // Free GPU resources (renderer, geometries, materials, textures) on page teardown.
+  // One-shot renders exit per job so nothing leaks there; this guards long-lived
+  // Studio/player sessions that reload. Fires only on unload — never during capture.
+  function disposeGL(renderer, scene) {
+    scene.traverse(function (o) {
+      if (o.geometry && o.geometry.dispose) o.geometry.dispose();
+      var mats = o.material ? (Array.isArray(o.material) ? o.material : [o.material]) : [];
+      mats.forEach(function (m) {
+        if (m.map && m.map.dispose) m.map.dispose();
+        if (m.uniforms && m.uniforms.uTex && m.uniforms.uTex.value && m.uniforms.uTex.value.dispose) {
+          m.uniforms.uTex.value.dispose();
+        }
+        if (m.dispose) m.dispose();
+      });
+    });
+    if (renderer.dispose) renderer.dispose();
+  }
+
   function go() {
     var spec = window.__BLOCK;
     var root = document.getElementById("root");
@@ -427,6 +254,9 @@
       var dur = parseFloat(root.dataset.duration) || tl.duration();
       tl.to({}, { duration: dur }, 0); // pad to full composition length
       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 3dad6c1ced..67799a0704 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/gsap@3.14.2/dist/gsap.min.js" integrity="sha384-sG0Hv1tP1lZCk9KQmrIbY/XNwi+OY84GQqhMscbnsoBFqAz8KNCil1kvfL3Hbbk2" crossorigin="anonymous"></script>
     <style>
       * { margin: 0; padding: 0; box-sizing: border-box; }
       html, body { width: 1920px; height: 1080px; overflow: hidden; background: #05070b; }
@@ -190,179 +190,6 @@
   // ---- single-scene effect builders (fade in, play, hold to end) -------------
   var FADE = 0.45;
 
-  function morph(tl, surface, states, start) {
-    var STEP = 1.2;
-    var HOLD = 1.0;
-    var t = start;
-    for (var s = 0; s < states.length - 1; s++) {
-      var parts = makeScene(surface, false);
-      var code = parts.code;
-      var fromEls = renderState(code, states[s]);
-      var fromR = rectsOf(fromEls);
-      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;
-      toEls.forEach(function (el, k) {
-        var fr = fromR.get(k);
-        var tr = toR.get(k);
-        if (fr) {
-          seg.fromTo(el, { x: fr.left - tr.left, y: fr.top - tr.top }, { x: 0, y: 0, duration: STEP, ease: "power2.inOut" }, 0);
-        } else {
-          seg.fromTo(el, { opacity: 0 }, { opacity: 1, duration: FD, ease: "power1.out" }, ENTER_AT);
-        }
-      });
-      var toKeys = new Set(toEls.keys());
-      var fromState = states[s];
-      for (var i = 0; i < fromState.tokens.length; i++) {
-        var tok = fromState.tokens[i];
-        if (tok.content === "\n" || toKeys.has(tok.key) || !fromR.has(tok.key)) continue;
-        var r = fromR.get(tok.key);
-        var span = document.createElement("span");
-        span.className = "tok";
-        span.textContent = tok.content;
-        span.style.position = "absolute";
-        span.style.left = r.left - base.left + "px";
-        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);
-      }
-      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);
-      if (!isLast) tl.to(parts.scene, { opacity: 0, duration: FADE, ease: "power1.in" }, segEnd - FADE);
-      tl.add(seg, segStart);
-      t = segEnd - FADE;
-    }
-  }
-
-  function flight(tl, surface, states, start) {
-    var FLY = 0.95;
-    var STAGGER = 0.26;
-    var GAP = 20;
-    var parts = makeScene(surface, false);
-    parts.code.remove();
-    var scene = parts.scene;
-    var target = document.createElement("div");
-    target.className = "flight-target";
-    scene.appendChild(target);
-    var W = surface.clientWidth;
-    var H = surface.clientHeight;
-
-    var blocks = states.map(function (st) {
-      var blk = document.createElement("div");
-      blk.className = "flight-block";
-      renderState(blk, st);
-      scene.appendChild(blk);
-      return blk;
-    });
-    var n = blocks.length;
-
-    // Pass 1: measure natural size, then make every chip the SAME width (symmetry).
-    var maxW = 0;
-    var chipH = 0;
-    blocks.forEach(function (blk) {
-      var r = blk.getBoundingClientRect();
-      if (r.width > maxW) maxW = r.width;
-      if (r.height > chipH) chipH = r.height;
-    });
-    blocks.forEach(function (blk) {
-      blk.style.width = maxW + "px";
-    });
-
-    // Pass 2: evenly-stacked, left-aligned, group centered in the surface.
-    var stackH = n * chipH + (n - 1) * GAP;
-    var destLeft = Math.round((W - maxW) / 2);
-    var topY = Math.round((H - stackH) / 2);
-    blocks.forEach(function (blk, i) {
-      var destY = topY + i * (chipH + GAP);
-      blk.style.left = destLeft + "px";
-      blk.style.top = destY + "px";
-      // fly straight in from the left to the shared left edge — clean, no skew
-      var srcX = destLeft - W * 0.32;
-      tl.fromTo(
-        blk,
-        { x: srcX - destLeft, opacity: 0, scale: 0.96 },
-        { x: 0, opacity: 1, scale: 1, duration: FLY, ease: "power3.out" },
-        start + FADE + i * STAGGER,
-      );
-    });
-
-    // Even-padded panel tightly wrapping the uniform stack.
-    var padX = 30;
-    var padY = 24;
-    target.style.left = destLeft - padX + "px";
-    target.style.top = topY - padY + "px";
-    target.style.width = maxW + padX * 2 + "px";
-    target.style.height = stackH + padY * 2 + "px";
-    var landAt = start + FADE + (n - 1) * STAGGER + FLY;
-    tl.set(scene, { opacity: 1 }, 0);
-    tl.to(target, { opacity: 1, duration: 0.5, ease: "power1.out" }, landAt - 0.5);
-  }
-
-  function typing(tl, surface, state, start) {
-    var PER = 0.028; // seconds per character — smooth, fast typewriter
-    var parts = makeScene(surface, true);
-    var code = parts.code;
-
-    // Per-CHARACTER render (granular reveal reads smoother than per-token pops).
-    code.textContent = "";
-    var line = document.createElement("div");
-    line.className = "line";
-    code.appendChild(line);
-    var chars = [];
-    for (var i = 0; i < state.tokens.length; i++) {
-      var t = state.tokens[i];
-      if (t.content === "\n") {
-        line = document.createElement("div");
-        line.className = "line";
-        code.appendChild(line);
-        continue;
-      }
-      for (var c = 0; c < t.content.length; c++) {
-        var span = document.createElement("span");
-        span.className = "tok";
-        span.textContent = t.content[c];
-        span.style.color = t.color;
-        if (t.fontStyle & 1) span.style.fontStyle = "italic";
-        if (t.fontStyle & 2) span.style.fontWeight = "700";
-        line.appendChild(span);
-        chars.push({ el: span, ws: t.content[c] === " " });
-      }
-    }
-    var last = code.lastChild;
-    if (last && last.className === "line" && last.children.length === 0) code.removeChild(last);
-
-    fillGutter(parts.gutter, code.querySelectorAll(".line").length);
-    var base = code.getBoundingClientRect();
-    var caret = document.createElement("div");
-    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);
-
-    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);
-    }
-    chars.forEach(function (c, i) {
-      var at = t0 + i * PER;
-      tl.set(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);
-      // caret glides at constant speed to each char's right edge (linear = no stop-start jitter)
-      var r = c.el.getBoundingClientRect();
-      tl.to(caret, { x: r.right - base.left, y: r.top - base.top, duration: PER, ease: "none" }, at);
-    });
-  }
-
   function diff(tl, surface, states, start) {
     var DEL = 0.55;
     var ADD = 0.6;
@@ -402,73 +229,10 @@
     });
   }
 
-  function highlight(tl, surface, state, start, targetIdx) {
-    var SWEEP = 0.9;
-    var parts = makeScene(surface, true);
-    var code = parts.code;
-    renderState(code, state);
-    var lines = code.querySelectorAll(".line");
-    fillGutter(parts.gutter, lines.length);
-    var base = code.getBoundingClientRect();
-    var idx = Math.max(0, Math.min(lines.length - 1, targetIdx));
-    var lr = lines[idx].getBoundingClientRect();
-    var box = document.createElement("div");
-    box.className = "hl-box";
-    box.style.left = lr.left - base.left - 8 + "px";
-    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);
-    var at = start + FADE + 0.2;
-    tl.fromTo(box, { width: 0, opacity: 0 }, { width: lr.width + 18, opacity: 1, duration: SWEEP, ease: "power2.inOut" }, at);
-    for (var i = 0; i < lines.length; i++) {
-      if (i === idx) continue;
-      tl.fromTo(lines[i], { opacity: 1 }, { opacity: 0.45, duration: SWEEP, ease: "power2.inOut" }, at);
-    }
-  }
-
-  function scroll(tl, surface, state, start, targetLine) {
-    var SCROLL = 1.7;
-    var parts = makeScene(surface, true);
-    var code = parts.code;
-    renderState(code, state);
-    var lines = code.querySelectorAll(".line");
-    fillGutter(parts.gutter, lines.length);
-    var surfRect = surface.getBoundingClientRect();
-    var idx = Math.max(0, Math.min(lines.length - 1, targetLine - 1));
-    var lr = lines[idx].getBoundingClientRect();
-    var lineCenter = lr.top + lr.height / 2 - surfRect.top;
-    var dy = surfRect.height * 0.5 - lineCenter;
-    var box = document.createElement("div");
-    box.className = "hl-box";
-    box.style.left = lines[idx].offsetLeft - 8 + "px";
-    box.style.top = lines[idx].offsetTop - 1 + "px";
-    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);
-    var at = start + FADE + 0.35;
-    tl.fromTo([code, parts.gutter], { y: 0 }, { y: dy, duration: SCROLL, ease: "power2.inOut" }, at);
-    var arrAt = at + SCROLL;
-    for (var i = 0; i < lines.length; i++) {
-      if (i === idx) continue;
-      tl.fromTo(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);
-  }
-
   function buildEffect(tl, surface, spec) {
     var start = 0.45;
     var seq = T[spec.seq];
-    if (spec.effect === "morph") morph(tl, surface, seq.states, start);
-    else if (spec.effect === "flight") flight(tl, surface, seq.states, start);
-    else if (spec.effect === "typing") typing(tl, surface, seq.states[0], start);
-    else if (spec.effect === "diff") diff(tl, surface, seq.states, start);
-    else if (spec.effect === "highlight") highlight(tl, surface, seq.states[0], start, spec.line || 0);
-    else if (spec.effect === "scroll") scroll(tl, surface, seq.states[0], start, spec.line || 1);
+    if (spec.effect === "diff") diff(tl, surface, seq.states, start);
   }
 
   function go() {
diff --git a/registry/blocks/code-highlight/code-highlight.html b/registry/blocks/code-highlight/code-highlight.html
index ee99e23241..e2b62ffd43 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/gsap@3.14.2/dist/gsap.min.js" integrity="sha384-sG0Hv1tP1lZCk9KQmrIbY/XNwi+OY84GQqhMscbnsoBFqAz8KNCil1kvfL3Hbbk2" crossorigin="anonymous"></script>
     <style>
       * { margin: 0; padding: 0; box-sizing: border-box; }
       html, body { width: 1920px; height: 1080px; overflow: hidden; background: #05070b; }
@@ -190,218 +190,6 @@
   // ---- single-scene effect builders (fade in, play, hold to end) -------------
   var FADE = 0.45;
 
-  function morph(tl, surface, states, start) {
-    var STEP = 1.2;
-    var HOLD = 1.0;
-    var t = start;
-    for (var s = 0; s < states.length - 1; s++) {
-      var parts = makeScene(surface, false);
-      var code = parts.code;
-      var fromEls = renderState(code, states[s]);
-      var fromR = rectsOf(fromEls);
-      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;
-      toEls.forEach(function (el, k) {
-        var fr = fromR.get(k);
-        var tr = toR.get(k);
-        if (fr) {
-          seg.fromTo(el, { x: fr.left - tr.left, y: fr.top - tr.top }, { x: 0, y: 0, duration: STEP, ease: "power2.inOut" }, 0);
-        } else {
-          seg.fromTo(el, { opacity: 0 }, { opacity: 1, duration: FD, ease: "power1.out" }, ENTER_AT);
-        }
-      });
-      var toKeys = new Set(toEls.keys());
-      var fromState = states[s];
-      for (var i = 0; i < fromState.tokens.length; i++) {
-        var tok = fromState.tokens[i];
-        if (tok.content === "\n" || toKeys.has(tok.key) || !fromR.has(tok.key)) continue;
-        var r = fromR.get(tok.key);
-        var span = document.createElement("span");
-        span.className = "tok";
-        span.textContent = tok.content;
-        span.style.position = "absolute";
-        span.style.left = r.left - base.left + "px";
-        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);
-      }
-      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);
-      if (!isLast) tl.to(parts.scene, { opacity: 0, duration: FADE, ease: "power1.in" }, segEnd - FADE);
-      tl.add(seg, segStart);
-      t = segEnd - FADE;
-    }
-  }
-
-  function flight(tl, surface, states, start) {
-    var FLY = 0.95;
-    var STAGGER = 0.26;
-    var GAP = 20;
-    var parts = makeScene(surface, false);
-    parts.code.remove();
-    var scene = parts.scene;
-    var target = document.createElement("div");
-    target.className = "flight-target";
-    scene.appendChild(target);
-    var W = surface.clientWidth;
-    var H = surface.clientHeight;
-
-    var blocks = states.map(function (st) {
-      var blk = document.createElement("div");
-      blk.className = "flight-block";
-      renderState(blk, st);
-      scene.appendChild(blk);
-      return blk;
-    });
-    var n = blocks.length;
-
-    // Pass 1: measure natural size, then make every chip the SAME width (symmetry).
-    var maxW = 0;
-    var chipH = 0;
-    blocks.forEach(function (blk) {
-      var r = blk.getBoundingClientRect();
-      if (r.width > maxW) maxW = r.width;
-      if (r.height > chipH) chipH = r.height;
-    });
-    blocks.forEach(function (blk) {
-      blk.style.width = maxW + "px";
-    });
-
-    // Pass 2: evenly-stacked, left-aligned, group centered in the surface.
-    var stackH = n * chipH + (n - 1) * GAP;
-    var destLeft = Math.round((W - maxW) / 2);
-    var topY = Math.round((H - stackH) / 2);
-    blocks.forEach(function (blk, i) {
-      var destY = topY + i * (chipH + GAP);
-      blk.style.left = destLeft + "px";
-      blk.style.top = destY + "px";
-      // fly straight in from the left to the shared left edge — clean, no skew
-      var srcX = destLeft - W * 0.32;
-      tl.fromTo(
-        blk,
-        { x: srcX - destLeft, opacity: 0, scale: 0.96 },
-        { x: 0, opacity: 1, scale: 1, duration: FLY, ease: "power3.out" },
-        start + FADE + i * STAGGER,
-      );
-    });
-
-    // Even-padded panel tightly wrapping the uniform stack.
-    var padX = 30;
-    var padY = 24;
-    target.style.left = destLeft - padX + "px";
-    target.style.top = topY - padY + "px";
-    target.style.width = maxW + padX * 2 + "px";
-    target.style.height = stackH + padY * 2 + "px";
-    var landAt = start + FADE + (n - 1) * STAGGER + FLY;
-    tl.set(scene, { opacity: 1 }, 0);
-    tl.to(target, { opacity: 1, duration: 0.5, ease: "power1.out" }, landAt - 0.5);
-  }
-
-  function typing(tl, surface, state, start) {
-    var PER = 0.028; // seconds per character — smooth, fast typewriter
-    var parts = makeScene(surface, true);
-    var code = parts.code;
-
-    // Per-CHARACTER render (granular reveal reads smoother than per-token pops).
-    code.textContent = "";
-    var line = document.createElement("div");
-    line.className = "line";
-    code.appendChild(line);
-    var chars = [];
-    for (var i = 0; i < state.tokens.length; i++) {
-      var t = state.tokens[i];
-      if (t.content === "\n") {
-        line = document.createElement("div");
-        line.className = "line";
-        code.appendChild(line);
-        continue;
-      }
-      for (var c = 0; c < t.content.length; c++) {
-        var span = document.createElement("span");
-        span.className = "tok";
-        span.textContent = t.content[c];
-        span.style.color = t.color;
-        if (t.fontStyle & 1) span.style.fontStyle = "italic";
-        if (t.fontStyle & 2) span.style.fontWeight = "700";
-        line.appendChild(span);
-        chars.push({ el: span, ws: t.content[c] === " " });
-      }
-    }
-    var last = code.lastChild;
-    if (last && last.className === "line" && last.children.length === 0) code.removeChild(last);
-
-    fillGutter(parts.gutter, code.querySelectorAll(".line").length);
-    var base = code.getBoundingClientRect();
-    var caret = document.createElement("div");
-    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);
-
-    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);
-    }
-    chars.forEach(function (c, i) {
-      var at = t0 + i * PER;
-      tl.set(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);
-      // caret glides at constant speed to each char's right edge (linear = no stop-start jitter)
-      var r = c.el.getBoundingClientRect();
-      tl.to(caret, { x: r.right - base.left, y: r.top - base.top, duration: PER, ease: "none" }, at);
-    });
-  }
-
-  function diff(tl, surface, states, start) {
-    var DEL = 0.55;
-    var ADD = 0.6;
-    var ops = lineDiff(splitLines(states[0]), splitLines(states[1]));
-    var parts = makeScene(surface, false);
-    var code = parts.code;
-    var delEls = [];
-    var addEls = [];
-    ops.forEach(function (op) {
-      var ln = document.createElement("div");
-      ln.className = "diff-line" + (op.type === "del" ? " diff-del" : op.type === "add" ? " diff-add" : "");
-      var sign = document.createElement("span");
-      sign.className = "diff-sign";
-      sign.textContent = op.type === "del" ? "- " : op.type === "add" ? "+ " : "  ";
-      ln.appendChild(sign);
-      op.line.tokens.forEach(function (t) {
-        var s = document.createElement("span");
-        s.className = "tok";
-        s.textContent = t.content;
-        s.style.color = t.color;
-        ln.appendChild(s);
-      });
-      code.appendChild(ln);
-      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);
-    var atDel = start + FADE + 0.3;
-    delEls.forEach(function (el, k) {
-      tl.fromTo(el, { height: 46, opacity: 1 }, { height: 0, opacity: 0, duration: DEL, ease: "power2.inOut" }, atDel + k * 0.08);
-    });
-    var atAdd = atDel + DEL + 0.15;
-    addEls.forEach(function (el, k) {
-      tl.set(el, { height: 0, opacity: 0 }, 0);
-      tl.fromTo(el, { height: 0, opacity: 0 }, { height: 46, opacity: 1, duration: ADD, ease: "power2.out" }, atAdd + k * 0.12);
-    });
-  }
-
   function highlight(tl, surface, state, start, targetIdx) {
     var SWEEP = 0.9;
     var parts = makeScene(surface, true);
@@ -428,47 +216,10 @@
     }
   }
 
-  function scroll(tl, surface, state, start, targetLine) {
-    var SCROLL = 1.7;
-    var parts = makeScene(surface, true);
-    var code = parts.code;
-    renderState(code, state);
-    var lines = code.querySelectorAll(".line");
-    fillGutter(parts.gutter, lines.length);
-    var surfRect = surface.getBoundingClientRect();
-    var idx = Math.max(0, Math.min(lines.length - 1, targetLine - 1));
-    var lr = lines[idx].getBoundingClientRect();
-    var lineCenter = lr.top + lr.height / 2 - surfRect.top;
-    var dy = surfRect.height * 0.5 - lineCenter;
-    var box = document.createElement("div");
-    box.className = "hl-box";
-    box.style.left = lines[idx].offsetLeft - 8 + "px";
-    box.style.top = lines[idx].offsetTop - 1 + "px";
-    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);
-    var at = start + FADE + 0.35;
-    tl.fromTo([code, parts.gutter], { y: 0 }, { y: dy, duration: SCROLL, ease: "power2.inOut" }, at);
-    var arrAt = at + SCROLL;
-    for (var i = 0; i < lines.length; i++) {
-      if (i === idx) continue;
-      tl.fromTo(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);
-  }
-
   function buildEffect(tl, surface, spec) {
     var start = 0.45;
     var seq = T[spec.seq];
-    if (spec.effect === "morph") morph(tl, surface, seq.states, start);
-    else if (spec.effect === "flight") flight(tl, surface, seq.states, start);
-    else if (spec.effect === "typing") typing(tl, surface, seq.states[0], start);
-    else if (spec.effect === "diff") diff(tl, surface, seq.states, start);
-    else if (spec.effect === "highlight") highlight(tl, surface, seq.states[0], start, spec.line || 0);
-    else if (spec.effect === "scroll") scroll(tl, surface, seq.states[0], start, spec.line || 1);
+    if (spec.effect === "highlight") highlight(tl, surface, seq.states[0], start, spec.line || 0);
   }
 
   function go() {
diff --git a/registry/blocks/code-morph/code-morph.html b/registry/blocks/code-morph/code-morph.html
index f1030c8648..c472fc00e5 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/gsap@3.14.2/dist/gsap.min.js" integrity="sha384-sG0Hv1tP1lZCk9KQmrIbY/XNwi+OY84GQqhMscbnsoBFqAz8KNCil1kvfL3Hbbk2" crossorigin="anonymous"></script>
     <style>
       * { margin: 0; padding: 0; box-sizing: border-box; }
       html, body { width: 1920px; height: 1080px; overflow: hidden; background: #05070b; }
@@ -241,234 +241,10 @@
     }
   }
 
-  function flight(tl, surface, states, start) {
-    var FLY = 0.95;
-    var STAGGER = 0.26;
-    var GAP = 20;
-    var parts = makeScene(surface, false);
-    parts.code.remove();
-    var scene = parts.scene;
-    var target = document.createElement("div");
-    target.className = "flight-target";
-    scene.appendChild(target);
-    var W = surface.clientWidth;
-    var H = surface.clientHeight;
-
-    var blocks = states.map(function (st) {
-      var blk = document.createElement("div");
-      blk.className = "flight-block";
-      renderState(blk, st);
-      scene.appendChild(blk);
-      return blk;
-    });
-    var n = blocks.length;
-
-    // Pass 1: measure natural size, then make every chip the SAME width (symmetry).
-    var maxW = 0;
-    var chipH = 0;
-    blocks.forEach(function (blk) {
-      var r = blk.getBoundingClientRect();
-      if (r.width > maxW) maxW = r.width;
-      if (r.height > chipH) chipH = r.height;
-    });
-    blocks.forEach(function (blk) {
-      blk.style.width = maxW + "px";
-    });
-
-    // Pass 2: evenly-stacked, left-aligned, group centered in the surface.
-    var stackH = n * chipH + (n - 1) * GAP;
-    var destLeft = Math.round((W - maxW) / 2);
-    var topY = Math.round((H - stackH) / 2);
-    blocks.forEach(function (blk, i) {
-      var destY = topY + i * (chipH + GAP);
-      blk.style.left = destLeft + "px";
-      blk.style.top = destY + "px";
-      // fly straight in from the left to the shared left edge — clean, no skew
-      var srcX = destLeft - W * 0.32;
-      tl.fromTo(
-        blk,
-        { x: srcX - destLeft, opacity: 0, scale: 0.96 },
-        { x: 0, opacity: 1, scale: 1, duration: FLY, ease: "power3.out" },
-        start + FADE + i * STAGGER,
-      );
-    });
-
-    // Even-padded panel tightly wrapping the uniform stack.
-    var padX = 30;
-    var padY = 24;
-    target.style.left = destLeft - padX + "px";
-    target.style.top = topY - padY + "px";
-    target.style.width = maxW + padX * 2 + "px";
-    target.style.height = stackH + padY * 2 + "px";
-    var landAt = start + FADE + (n - 1) * STAGGER + FLY;
-    tl.set(scene, { opacity: 1 }, 0);
-    tl.to(target, { opacity: 1, duration: 0.5, ease: "power1.out" }, landAt - 0.5);
-  }
-
-  function typing(tl, surface, state, start) {
-    var PER = 0.028; // seconds per character — smooth, fast typewriter
-    var parts = makeScene(surface, true);
-    var code = parts.code;
-
-    // Per-CHARACTER render (granular reveal reads smoother than per-token pops).
-    code.textContent = "";
-    var line = document.createElement("div");
-    line.className = "line";
-    code.appendChild(line);
-    var chars = [];
-    for (var i = 0; i < state.tokens.length; i++) {
-      var t = state.tokens[i];
-      if (t.content === "\n") {
-        line = document.createElement("div");
-        line.className = "line";
-        code.appendChild(line);
-        continue;
-      }
-      for (var c = 0; c < t.content.length; c++) {
-        var span = document.createElement("span");
-        span.className = "tok";
-        span.textContent = t.content[c];
-        span.style.color = t.color;
-        if (t.fontStyle & 1) span.style.fontStyle = "italic";
-        if (t.fontStyle & 2) span.style.fontWeight = "700";
-        line.appendChild(span);
-        chars.push({ el: span, ws: t.content[c] === " " });
-      }
-    }
-    var last = code.lastChild;
-    if (last && last.className === "line" && last.children.length === 0) code.removeChild(last);
-
-    fillGutter(parts.gutter, code.querySelectorAll(".line").length);
-    var base = code.getBoundingClientRect();
-    var caret = document.createElement("div");
-    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);
-
-    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);
-    }
-    chars.forEach(function (c, i) {
-      var at = t0 + i * PER;
-      tl.set(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);
-      // caret glides at constant speed to each char's right edge (linear = no stop-start jitter)
-      var r = c.el.getBoundingClientRect();
-      tl.to(caret, { x: r.right - base.left, y: r.top - base.top, duration: PER, ease: "none" }, at);
-    });
-  }
-
-  function diff(tl, surface, states, start) {
-    var DEL = 0.55;
-    var ADD = 0.6;
-    var ops = lineDiff(splitLines(states[0]), splitLines(states[1]));
-    var parts = makeScene(surface, false);
-    var code = parts.code;
-    var delEls = [];
-    var addEls = [];
-    ops.forEach(function (op) {
-      var ln = document.createElement("div");
-      ln.className = "diff-line" + (op.type === "del" ? " diff-del" : op.type === "add" ? " diff-add" : "");
-      var sign = document.createElement("span");
-      sign.className = "diff-sign";
-      sign.textContent = op.type === "del" ? "- " : op.type === "add" ? "+ " : "  ";
-      ln.appendChild(sign);
-      op.line.tokens.forEach(function (t) {
-        var s = document.createElement("span");
-        s.className = "tok";
-        s.textContent = t.content;
-        s.style.color = t.color;
-        ln.appendChild(s);
-      });
-      code.appendChild(ln);
-      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);
-    var atDel = start + FADE + 0.3;
-    delEls.forEach(function (el, k) {
-      tl.fromTo(el, { height: 46, opacity: 1 }, { height: 0, opacity: 0, duration: DEL, ease: "power2.inOut" }, atDel + k * 0.08);
-    });
-    var atAdd = atDel + DEL + 0.15;
-    addEls.forEach(function (el, k) {
-      tl.set(el, { height: 0, opacity: 0 }, 0);
-      tl.fromTo(el, { height: 0, opacity: 0 }, { height: 46, opacity: 1, duration: ADD, ease: "power2.out" }, atAdd + k * 0.12);
-    });
-  }
-
-  function highlight(tl, surface, state, start, targetIdx) {
-    var SWEEP = 0.9;
-    var parts = makeScene(surface, true);
-    var code = parts.code;
-    renderState(code, state);
-    var lines = code.querySelectorAll(".line");
-    fillGutter(parts.gutter, lines.length);
-    var base = code.getBoundingClientRect();
-    var idx = Math.max(0, Math.min(lines.length - 1, targetIdx));
-    var lr = lines[idx].getBoundingClientRect();
-    var box = document.createElement("div");
-    box.className = "hl-box";
-    box.style.left = lr.left - base.left - 8 + "px";
-    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);
-    var at = start + FADE + 0.2;
-    tl.fromTo(box, { width: 0, opacity: 0 }, { width: lr.width + 18, opacity: 1, duration: SWEEP, ease: "power2.inOut" }, at);
-    for (var i = 0; i < lines.length; i++) {
-      if (i === idx) continue;
-      tl.fromTo(lines[i], { opacity: 1 }, { opacity: 0.45, duration: SWEEP, ease: "power2.inOut" }, at);
-    }
-  }
-
-  function scroll(tl, surface, state, start, targetLine) {
-    var SCROLL = 1.7;
-    var parts = makeScene(surface, true);
-    var code = parts.code;
-    renderState(code, state);
-    var lines = code.querySelectorAll(".line");
-    fillGutter(parts.gutter, lines.length);
-    var surfRect = surface.getBoundingClientRect();
-    var idx = Math.max(0, Math.min(lines.length - 1, targetLine - 1));
-    var lr = lines[idx].getBoundingClientRect();
-    var lineCenter = lr.top + lr.height / 2 - surfRect.top;
-    var dy = surfRect.height * 0.5 - lineCenter;
-    var box = document.createElement("div");
-    box.className = "hl-box";
-    box.style.left = lines[idx].offsetLeft - 8 + "px";
-    box.style.top = lines[idx].offsetTop - 1 + "px";
-    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);
-    var at = start + FADE + 0.35;
-    tl.fromTo([code, parts.gutter], { y: 0 }, { y: dy, duration: SCROLL, ease: "power2.inOut" }, at);
-    var arrAt = at + SCROLL;
-    for (var i = 0; i < lines.length; i++) {
-      if (i === idx) continue;
-      tl.fromTo(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);
-  }
-
   function buildEffect(tl, surface, spec) {
     var start = 0.45;
     var seq = T[spec.seq];
     if (spec.effect === "morph") morph(tl, surface, seq.states, start);
-    else if (spec.effect === "flight") flight(tl, surface, seq.states, start);
-    else if (spec.effect === "typing") typing(tl, surface, seq.states[0], start);
-    else if (spec.effect === "diff") diff(tl, surface, seq.states, start);
-    else if (spec.effect === "highlight") highlight(tl, surface, seq.states[0], start, spec.line || 0);
-    else if (spec.effect === "scroll") scroll(tl, surface, seq.states[0], start, spec.line || 1);
   }
 
   function go() {
diff --git a/registry/blocks/code-particle-assemble/code-particle-assemble.html b/registry/blocks/code-particle-assemble/code-particle-assemble.html
index 94b0bfbf1d..b37450466f 100644
--- a/registry/blocks/code-particle-assemble/code-particle-assemble.html
+++ b/registry/blocks/code-particle-assemble/code-particle-assemble.html
@@ -4,8 +4,8 @@
     <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/three@0.147.0/build/three.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js" integrity="sha384-sG0Hv1tP1lZCk9KQmrIbY/XNwi+OY84GQqhMscbnsoBFqAz8KNCil1kvfL3Hbbk2" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js" integrity="sha384-vV17nr/rMaJqmeZkFUzXLpHdQ+ME5QHKdydaqqN+3Ga39RJlNrTatJxHwGV4ml2C" crossorigin="anonymous"></script>
     <style>
       * { margin: 0; padding: 0; box-sizing: border-box; }
       html, body { width: 1920px; height: 1080px; overflow: hidden; background: #05070b; }
@@ -118,170 +118,6 @@
     return { canvas: canvas, W: W, H: H, lines: lines.length, lineH: lineH, padY: padY, fontPx: fontPx };
   }
 
-  // ===========================================================================
-  // Effect 1 — code-3d-extrude: code on a lit, beveled slab that rotates to rest
-  // ===========================================================================
-  function fxExtrude(THREE, scene, camera, renderer, state, st, tl, dur) {
-    scene.background = new THREE.Color(0x05070b);
-    var code = drawCodeToCanvas(state, { fontPx: 38, lineH: 56, padX: 80, padY: 70, weight: 600 });
-    var tex = new THREE.CanvasTexture(code.canvas);
-    tex.minFilter = THREE.LinearFilter;
-    tex.magFilter = THREE.LinearFilter;
-    tex.generateMipmaps = false;
-
-    var aspect = code.W / code.H;
-    var slabH = 6.2;
-    var slabW = slabH * aspect;
-    var depth = 0.5;
-
-    // beveled slab: rounded extruded rectangle
-    var hw = slabW / 2;
-    var hh = slabH / 2;
-    var r = 0.18;
-    var shape = new THREE.Shape();
-    shape.moveTo(-hw + r, -hh);
-    shape.lineTo(hw - r, -hh);
-    shape.quadraticCurveTo(hw, -hh, hw, -hh + r);
-    shape.lineTo(hw, hh - r);
-    shape.quadraticCurveTo(hw, hh, hw - r, hh);
-    shape.lineTo(-hw + r, hh);
-    shape.quadraticCurveTo(-hw, hh, -hw, hh - r);
-    shape.lineTo(-hw, -hh + r);
-    shape.quadraticCurveTo(-hw, -hh, -hw + r, -hh);
-    var geo = new THREE.ExtrudeGeometry(shape, { depth: depth, bevelEnabled: true, bevelThickness: 0.12, bevelSize: 0.1, bevelSegments: 3, steps: 1 });
-    geo.center();
-    // UVs from ExtrudeGeometry don't map the texture nicely to the face; remap front-face UVs from XY bounds.
-    geo.computeBoundingBox();
-    var bb = geo.boundingBox;
-    var sizeX = bb.max.x - bb.min.x;
-    var sizeY = bb.max.y - bb.min.y;
-    var pos = geo.attributes.position;
-    var uv = geo.attributes.uv;
-    for (var vi = 0; vi < pos.count; vi++) {
-      uv.setXY(vi, (pos.getX(vi) - bb.min.x) / sizeX, (pos.getY(vi) - bb.min.y) / sizeY);
-    }
-    uv.needsUpdate = true;
-
-    // Face is an unlit "screen" — shows the exact vivid Shiki colors (no PBR/emissive wash).
-    // The 3D read comes from the lit, beveled EDGES + perspective, like a glowing monitor.
-    var faceMat = new THREE.MeshBasicMaterial({ map: tex });
-    var edgeMat = new THREE.MeshStandardMaterial({ color: 0x141d2b, roughness: 0.3, metalness: 0.4 });
-    // ExtrudeGeometry groups: 0 = front+back faces, 1 = sides. Front shows the code.
-    var slab = new THREE.Mesh(geo, [faceMat, edgeMat]);
-    scene.add(slab);
-
-    scene.add(new THREE.AmbientLight(0xffffff, 0.5));
-    var key = new THREE.DirectionalLight(0xbcd4ff, 1.25);
-    key.position.set(5, 7, 9);
-    scene.add(key);
-    var rim = new THREE.DirectionalLight(0x4fffa0, 0.45);
-    rim.position.set(-7, -3, 5);
-    scene.add(rim);
-
-    camera.position.set(0, 0, 10);
-
-    // fit camera distance so the WHOLE slab fits (width-limited for wide code), ~78% fill
-    var vfov = (camera.fov * Math.PI) / 180;
-    var screenAspect = 1920 / 1080;
-    var fitH = slabH / 2 / Math.tan(vfov / 2) / 0.78;
-    var fitW = slabW / 2 / (Math.tan(vfov / 2) * screenAspect) / 0.78;
-    var fitZ = Math.max(fitH, fitW);
-
-    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);
-    // gentle breathing drift at rest (subtle — stays readable)
-    tl.to(st, { rotY: 0.06, rotX: -0.02, duration: dur * 0.4, ease: "sine.inOut" }, dur * 0.6);
-
-    return function () {
-      slab.rotation.y = st.rotY;
-      slab.rotation.x = st.rotX;
-      camera.position.z = st.camZ;
-      camera.lookAt(0, 0, 0);
-      // boot loop's render() issues the single renderer.render() — don't double-render here
-    };
-  }
-
-  // ===========================================================================
-  // Effect 2 — code-shader-dissolve: code "compiles" out of GPU noise, holds crisp
-  // ===========================================================================
-  function fxDissolve(THREE, scene, camera, renderer, state, st, tl, dur, seed) {
-    scene.background = new THREE.Color(0x05070b);
-    var code = drawCodeToCanvas(state, { fontPx: 40, lineH: 60, padX: 90, padY: 80, weight: 600 });
-    var tex = new THREE.CanvasTexture(code.canvas);
-    tex.minFilter = THREE.LinearFilter;
-    tex.magFilter = THREE.LinearFilter;
-    tex.generateMipmaps = false;
-
-    var aspect = code.W / code.H;
-    var planeH = 6.6;
-    var planeW = planeH * aspect;
-
-    var uniforms = {
-      uTex: { value: tex },
-      uProgress: { value: 0 },
-      uSeed: { value: (seed || 1) * 13.37 },
-    };
-    var mat = new THREE.ShaderMaterial({
-      uniforms: uniforms,
-      transparent: true,
-      vertexShader: [
-        "varying vec2 vUv;",
-        "void main(){ vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0); }",
-      ].join("\n"),
-      fragmentShader: [
-        "precision highp float;",
-        "uniform sampler2D uTex;",
-        "uniform float uProgress;",
-        "uniform float uSeed;",
-        "varying vec2 vUv;",
-        "float hash(vec2 p){ p=fract(p*vec2(123.34,456.21)); p+=dot(p,p+45.32); return fract(p.x*p.y); }",
-        "float noise(vec2 p){ vec2 i=floor(p),f=fract(p); float a=hash(i),b=hash(i+vec2(1.,0.)),c=hash(i+vec2(0.,1.)),d=hash(i+vec2(1.,1.)); vec2 u=f*f*(3.-2.*f); return mix(mix(a,b,u.x),mix(c,d,u.x),u.y); }",
-        "void main(){",
-        "  vec2 uv = vUv;",
-        // multi-octave seeded noise field
-        "  float n = noise(uv*16.0+uSeed)*0.6 + noise(uv*48.0+uSeed*1.7)*0.3 + noise(uv*120.0+uSeed*2.3)*0.1;",
-        "  float edge = 0.12;",
-        "  float reveal = smoothstep(n-edge, n+edge, uProgress);", // 0 hidden -> 1 shown
-        // chromatic fringe strongest at the dissolving edge
-        "  float band = reveal*(1.0-reveal)*4.0;",
-        "  float off = band*0.010;",
-        "  float r = texture2D(uTex, uv+vec2(off,0.0)).r;",
-        "  float g = texture2D(uTex, uv).g;",
-        "  float b = texture2D(uTex, uv-vec2(off,0.0)).b;",
-        "  vec3 codeCol = vec3(r,g,b);",
-        // additive cyan edge glow along the dissolve front
-        "  vec3 glow = vec3(0.30,0.72,1.0) * band * 0.9;",
-        "  vec3 outc = codeCol*reveal + glow;",
-        "  float a = max(reveal, band*0.8);",
-        "  gl_FragColor = vec4(outc, a);",
-        "}",
-      ].join("\n"),
-    });
-
-    var plane = new THREE.Mesh(new THREE.PlaneGeometry(planeW, planeH), mat);
-    scene.add(plane);
-
-    camera.position.set(0, 0, 10);
-    var vfov = (camera.fov * Math.PI) / 180;
-    var screenAspect = 1920 / 1080;
-    var fitH = planeH / 2 / Math.tan(vfov / 2) / 0.82;
-    var fitW = planeW / 2 / (Math.tan(vfov / 2) * screenAspect) / 0.82;
-    camera.position.z = Math.max(fitH, fitW);
-    camera.lookAt(0, 0, 0);
-
-    // compile in, then hold crisp. Overshoot to 1.15 so even max-noise pixels
-    // (n up to ~1.0, edge 0.12) fully resolve — no leftover specks at rest.
-    tl.to(uniforms.uProgress, { value: 1.15, duration: dur * 0.62, ease: "power1.inOut" }, 0);
-
-    // uProgress is tweened by GSAP; the boot loop's render() draws once per frame.
-    return function () {};
-  }
-
-  // ===========================================================================
-  // Effect 3 — code-particle-assemble: GPU points scatter then fly to glyph pixels
-  // ===========================================================================
   function fxParticles(THREE, scene, camera, renderer, state, st, tl, dur, seed) {
     scene.background = new THREE.Color(0x05070b);
     var code = drawCodeToCanvas(state, { fontPx: 46, lineH: 70, padX: 70, padY: 64, weight: 700 });
@@ -393,12 +229,28 @@
   function buildEffect(THREE, scene, camera, renderer, spec, st, tl) {
     var state = T[spec.seq].states[0];
     var dur = spec.duration;
-    if (spec.effect === "extrude") return fxExtrude(THREE, scene, camera, renderer, state, st, tl, dur);
-    if (spec.effect === "dissolve") return fxDissolve(THREE, scene, camera, renderer, state, st, tl, dur, spec.seed);
     if (spec.effect === "particles") return fxParticles(THREE, scene, camera, renderer, state, st, tl, dur, spec.seed);
     return function () {};
   }
 
+  // Free GPU resources (renderer, geometries, materials, textures) on page teardown.
+  // One-shot renders exit per job so nothing leaks there; this guards long-lived
+  // Studio/player sessions that reload. Fires only on unload — never during capture.
+  function disposeGL(renderer, scene) {
+    scene.traverse(function (o) {
+      if (o.geometry && o.geometry.dispose) o.geometry.dispose();
+      var mats = o.material ? (Array.isArray(o.material) ? o.material : [o.material]) : [];
+      mats.forEach(function (m) {
+        if (m.map && m.map.dispose) m.map.dispose();
+        if (m.uniforms && m.uniforms.uTex && m.uniforms.uTex.value && m.uniforms.uTex.value.dispose) {
+          m.uniforms.uTex.value.dispose();
+        }
+        if (m.dispose) m.dispose();
+      });
+    });
+    if (renderer.dispose) renderer.dispose();
+  }
+
   function go() {
     var spec = window.__BLOCK;
     var root = document.getElementById("root");
@@ -427,6 +279,9 @@
       var dur = parseFloat(root.dataset.duration) || tl.duration();
       tl.to({}, { duration: dur }, 0); // pad to full composition length
       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 7000f8bc00..415d3f4b32 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/gsap@3.14.2/dist/gsap.min.js" integrity="sha384-sG0Hv1tP1lZCk9KQmrIbY/XNwi+OY84GQqhMscbnsoBFqAz8KNCil1kvfL3Hbbk2" crossorigin="anonymous"></script>
     <style>
       * { margin: 0; padding: 0; box-sizing: border-box; }
       html, body { width: 1920px; height: 1080px; overflow: hidden; background: #05070b; }
@@ -190,244 +190,6 @@
   // ---- single-scene effect builders (fade in, play, hold to end) -------------
   var FADE = 0.45;
 
-  function morph(tl, surface, states, start) {
-    var STEP = 1.2;
-    var HOLD = 1.0;
-    var t = start;
-    for (var s = 0; s < states.length - 1; s++) {
-      var parts = makeScene(surface, false);
-      var code = parts.code;
-      var fromEls = renderState(code, states[s]);
-      var fromR = rectsOf(fromEls);
-      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;
-      toEls.forEach(function (el, k) {
-        var fr = fromR.get(k);
-        var tr = toR.get(k);
-        if (fr) {
-          seg.fromTo(el, { x: fr.left - tr.left, y: fr.top - tr.top }, { x: 0, y: 0, duration: STEP, ease: "power2.inOut" }, 0);
-        } else {
-          seg.fromTo(el, { opacity: 0 }, { opacity: 1, duration: FD, ease: "power1.out" }, ENTER_AT);
-        }
-      });
-      var toKeys = new Set(toEls.keys());
-      var fromState = states[s];
-      for (var i = 0; i < fromState.tokens.length; i++) {
-        var tok = fromState.tokens[i];
-        if (tok.content === "\n" || toKeys.has(tok.key) || !fromR.has(tok.key)) continue;
-        var r = fromR.get(tok.key);
-        var span = document.createElement("span");
-        span.className = "tok";
-        span.textContent = tok.content;
-        span.style.position = "absolute";
-        span.style.left = r.left - base.left + "px";
-        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);
-      }
-      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);
-      if (!isLast) tl.to(parts.scene, { opacity: 0, duration: FADE, ease: "power1.in" }, segEnd - FADE);
-      tl.add(seg, segStart);
-      t = segEnd - FADE;
-    }
-  }
-
-  function flight(tl, surface, states, start) {
-    var FLY = 0.95;
-    var STAGGER = 0.26;
-    var GAP = 20;
-    var parts = makeScene(surface, false);
-    parts.code.remove();
-    var scene = parts.scene;
-    var target = document.createElement("div");
-    target.className = "flight-target";
-    scene.appendChild(target);
-    var W = surface.clientWidth;
-    var H = surface.clientHeight;
-
-    var blocks = states.map(function (st) {
-      var blk = document.createElement("div");
-      blk.className = "flight-block";
-      renderState(blk, st);
-      scene.appendChild(blk);
-      return blk;
-    });
-    var n = blocks.length;
-
-    // Pass 1: measure natural size, then make every chip the SAME width (symmetry).
-    var maxW = 0;
-    var chipH = 0;
-    blocks.forEach(function (blk) {
-      var r = blk.getBoundingClientRect();
-      if (r.width > maxW) maxW = r.width;
-      if (r.height > chipH) chipH = r.height;
-    });
-    blocks.forEach(function (blk) {
-      blk.style.width = maxW + "px";
-    });
-
-    // Pass 2: evenly-stacked, left-aligned, group centered in the surface.
-    var stackH = n * chipH + (n - 1) * GAP;
-    var destLeft = Math.round((W - maxW) / 2);
-    var topY = Math.round((H - stackH) / 2);
-    blocks.forEach(function (blk, i) {
-      var destY = topY + i * (chipH + GAP);
-      blk.style.left = destLeft + "px";
-      blk.style.top = destY + "px";
-      // fly straight in from the left to the shared left edge — clean, no skew
-      var srcX = destLeft - W * 0.32;
-      tl.fromTo(
-        blk,
-        { x: srcX - destLeft, opacity: 0, scale: 0.96 },
-        { x: 0, opacity: 1, scale: 1, duration: FLY, ease: "power3.out" },
-        start + FADE + i * STAGGER,
-      );
-    });
-
-    // Even-padded panel tightly wrapping the uniform stack.
-    var padX = 30;
-    var padY = 24;
-    target.style.left = destLeft - padX + "px";
-    target.style.top = topY - padY + "px";
-    target.style.width = maxW + padX * 2 + "px";
-    target.style.height = stackH + padY * 2 + "px";
-    var landAt = start + FADE + (n - 1) * STAGGER + FLY;
-    tl.set(scene, { opacity: 1 }, 0);
-    tl.to(target, { opacity: 1, duration: 0.5, ease: "power1.out" }, landAt - 0.5);
-  }
-
-  function typing(tl, surface, state, start) {
-    var PER = 0.028; // seconds per character — smooth, fast typewriter
-    var parts = makeScene(surface, true);
-    var code = parts.code;
-
-    // Per-CHARACTER render (granular reveal reads smoother than per-token pops).
-    code.textContent = "";
-    var line = document.createElement("div");
-    line.className = "line";
-    code.appendChild(line);
-    var chars = [];
-    for (var i = 0; i < state.tokens.length; i++) {
-      var t = state.tokens[i];
-      if (t.content === "\n") {
-        line = document.createElement("div");
-        line.className = "line";
-        code.appendChild(line);
-        continue;
-      }
-      for (var c = 0; c < t.content.length; c++) {
-        var span = document.createElement("span");
-        span.className = "tok";
-        span.textContent = t.content[c];
-        span.style.color = t.color;
-        if (t.fontStyle & 1) span.style.fontStyle = "italic";
-        if (t.fontStyle & 2) span.style.fontWeight = "700";
-        line.appendChild(span);
-        chars.push({ el: span, ws: t.content[c] === " " });
-      }
-    }
-    var last = code.lastChild;
-    if (last && last.className === "line" && last.children.length === 0) code.removeChild(last);
-
-    fillGutter(parts.gutter, code.querySelectorAll(".line").length);
-    var base = code.getBoundingClientRect();
-    var caret = document.createElement("div");
-    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);
-
-    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);
-    }
-    chars.forEach(function (c, i) {
-      var at = t0 + i * PER;
-      tl.set(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);
-      // caret glides at constant speed to each char's right edge (linear = no stop-start jitter)
-      var r = c.el.getBoundingClientRect();
-      tl.to(caret, { x: r.right - base.left, y: r.top - base.top, duration: PER, ease: "none" }, at);
-    });
-  }
-
-  function diff(tl, surface, states, start) {
-    var DEL = 0.55;
-    var ADD = 0.6;
-    var ops = lineDiff(splitLines(states[0]), splitLines(states[1]));
-    var parts = makeScene(surface, false);
-    var code = parts.code;
-    var delEls = [];
-    var addEls = [];
-    ops.forEach(function (op) {
-      var ln = document.createElement("div");
-      ln.className = "diff-line" + (op.type === "del" ? " diff-del" : op.type === "add" ? " diff-add" : "");
-      var sign = document.createElement("span");
-      sign.className = "diff-sign";
-      sign.textContent = op.type === "del" ? "- " : op.type === "add" ? "+ " : "  ";
-      ln.appendChild(sign);
-      op.line.tokens.forEach(function (t) {
-        var s = document.createElement("span");
-        s.className = "tok";
-        s.textContent = t.content;
-        s.style.color = t.color;
-        ln.appendChild(s);
-      });
-      code.appendChild(ln);
-      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);
-    var atDel = start + FADE + 0.3;
-    delEls.forEach(function (el, k) {
-      tl.fromTo(el, { height: 46, opacity: 1 }, { height: 0, opacity: 0, duration: DEL, ease: "power2.inOut" }, atDel + k * 0.08);
-    });
-    var atAdd = atDel + DEL + 0.15;
-    addEls.forEach(function (el, k) {
-      tl.set(el, { height: 0, opacity: 0 }, 0);
-      tl.fromTo(el, { height: 0, opacity: 0 }, { height: 46, opacity: 1, duration: ADD, ease: "power2.out" }, atAdd + k * 0.12);
-    });
-  }
-
-  function highlight(tl, surface, state, start, targetIdx) {
-    var SWEEP = 0.9;
-    var parts = makeScene(surface, true);
-    var code = parts.code;
-    renderState(code, state);
-    var lines = code.querySelectorAll(".line");
-    fillGutter(parts.gutter, lines.length);
-    var base = code.getBoundingClientRect();
-    var idx = Math.max(0, Math.min(lines.length - 1, targetIdx));
-    var lr = lines[idx].getBoundingClientRect();
-    var box = document.createElement("div");
-    box.className = "hl-box";
-    box.style.left = lr.left - base.left - 8 + "px";
-    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);
-    var at = start + FADE + 0.2;
-    tl.fromTo(box, { width: 0, opacity: 0 }, { width: lr.width + 18, opacity: 1, duration: SWEEP, ease: "power2.inOut" }, at);
-    for (var i = 0; i < lines.length; i++) {
-      if (i === idx) continue;
-      tl.fromTo(lines[i], { opacity: 1 }, { opacity: 0.45, duration: SWEEP, ease: "power2.inOut" }, at);
-    }
-  }
-
   function scroll(tl, surface, state, start, targetLine) {
     var SCROLL = 1.7;
     var parts = makeScene(surface, true);
@@ -463,12 +225,7 @@
   function buildEffect(tl, surface, spec) {
     var start = 0.45;
     var seq = T[spec.seq];
-    if (spec.effect === "morph") morph(tl, surface, seq.states, start);
-    else if (spec.effect === "flight") flight(tl, surface, seq.states, start);
-    else if (spec.effect === "typing") typing(tl, surface, seq.states[0], start);
-    else if (spec.effect === "diff") diff(tl, surface, seq.states, start);
-    else if (spec.effect === "highlight") highlight(tl, surface, seq.states[0], start, spec.line || 0);
-    else if (spec.effect === "scroll") scroll(tl, surface, seq.states[0], start, spec.line || 1);
+    if (spec.effect === "scroll") scroll(tl, surface, seq.states[0], start, spec.line || 1);
   }
 
   function go() {
diff --git a/registry/blocks/code-shader-dissolve/code-shader-dissolve.html b/registry/blocks/code-shader-dissolve/code-shader-dissolve.html
index 54f0baad5c..2a8b0b5d25 100644
--- a/registry/blocks/code-shader-dissolve/code-shader-dissolve.html
+++ b/registry/blocks/code-shader-dissolve/code-shader-dissolve.html
@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=1920, height=1080" />
     <title>Code Shader Dissolve</title>
-    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.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/gsap@3.14.2/dist/gsap.min.js" integrity="sha384-sG0Hv1tP1lZCk9KQmrIbY/XNwi+OY84GQqhMscbnsoBFqAz8KNCil1kvfL3Hbbk2" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js" integrity="sha384-vV17nr/rMaJqmeZkFUzXLpHdQ+ME5QHKdydaqqN+3Ga39RJlNrTatJxHwGV4ml2C" crossorigin="anonymous"></script>
     <style>
       * { margin: 0; padding: 0; box-sizing: border-box; }
       html, body { width: 1920px; height: 1080px; overflow: hidden; background: #05070b; }
@@ -118,94 +118,6 @@
     return { canvas: canvas, W: W, H: H, lines: lines.length, lineH: lineH, padY: padY, fontPx: fontPx };
   }
 
-  // ===========================================================================
-  // Effect 1 — code-3d-extrude: code on a lit, beveled slab that rotates to rest
-  // ===========================================================================
-  function fxExtrude(THREE, scene, camera, renderer, state, st, tl, dur) {
-    scene.background = new THREE.Color(0x05070b);
-    var code = drawCodeToCanvas(state, { fontPx: 38, lineH: 56, padX: 80, padY: 70, weight: 600 });
-    var tex = new THREE.CanvasTexture(code.canvas);
-    tex.minFilter = THREE.LinearFilter;
-    tex.magFilter = THREE.LinearFilter;
-    tex.generateMipmaps = false;
-
-    var aspect = code.W / code.H;
-    var slabH = 6.2;
-    var slabW = slabH * aspect;
-    var depth = 0.5;
-
-    // beveled slab: rounded extruded rectangle
-    var hw = slabW / 2;
-    var hh = slabH / 2;
-    var r = 0.18;
-    var shape = new THREE.Shape();
-    shape.moveTo(-hw + r, -hh);
-    shape.lineTo(hw - r, -hh);
-    shape.quadraticCurveTo(hw, -hh, hw, -hh + r);
-    shape.lineTo(hw, hh - r);
-    shape.quadraticCurveTo(hw, hh, hw - r, hh);
-    shape.lineTo(-hw + r, hh);
-    shape.quadraticCurveTo(-hw, hh, -hw, hh - r);
-    shape.lineTo(-hw, -hh + r);
-    shape.quadraticCurveTo(-hw, -hh, -hw + r, -hh);
-    var geo = new THREE.ExtrudeGeometry(shape, { depth: depth, bevelEnabled: true, bevelThickness: 0.12, bevelSize: 0.1, bevelSegments: 3, steps: 1 });
-    geo.center();
-    // UVs from ExtrudeGeometry don't map the texture nicely to the face; remap front-face UVs from XY bounds.
-    geo.computeBoundingBox();
-    var bb = geo.boundingBox;
-    var sizeX = bb.max.x - bb.min.x;
-    var sizeY = bb.max.y - bb.min.y;
-    var pos = geo.attributes.position;
-    var uv = geo.attributes.uv;
-    for (var vi = 0; vi < pos.count; vi++) {
-      uv.setXY(vi, (pos.getX(vi) - bb.min.x) / sizeX, (pos.getY(vi) - bb.min.y) / sizeY);
-    }
-    uv.needsUpdate = true;
-
-    // Face is an unlit "screen" — shows the exact vivid Shiki colors (no PBR/emissive wash).
-    // The 3D read comes from the lit, beveled EDGES + perspective, like a glowing monitor.
-    var faceMat = new THREE.MeshBasicMaterial({ map: tex });
-    var edgeMat = new THREE.MeshStandardMaterial({ color: 0x141d2b, roughness: 0.3, metalness: 0.4 });
-    // ExtrudeGeometry groups: 0 = front+back faces, 1 = sides. Front shows the code.
-    var slab = new THREE.Mesh(geo, [faceMat, edgeMat]);
-    scene.add(slab);
-
-    scene.add(new THREE.AmbientLight(0xffffff, 0.5));
-    var key = new THREE.DirectionalLight(0xbcd4ff, 1.25);
-    key.position.set(5, 7, 9);
-    scene.add(key);
-    var rim = new THREE.DirectionalLight(0x4fffa0, 0.45);
-    rim.position.set(-7, -3, 5);
-    scene.add(rim);
-
-    camera.position.set(0, 0, 10);
-
-    // fit camera distance so the WHOLE slab fits (width-limited for wide code), ~78% fill
-    var vfov = (camera.fov * Math.PI) / 180;
-    var screenAspect = 1920 / 1080;
-    var fitH = slabH / 2 / Math.tan(vfov / 2) / 0.78;
-    var fitW = slabW / 2 / (Math.tan(vfov / 2) * screenAspect) / 0.78;
-    var fitZ = Math.max(fitH, fitW);
-
-    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);
-    // gentle breathing drift at rest (subtle — stays readable)
-    tl.to(st, { rotY: 0.06, rotX: -0.02, duration: dur * 0.4, ease: "sine.inOut" }, dur * 0.6);
-
-    return function () {
-      slab.rotation.y = st.rotY;
-      slab.rotation.x = st.rotX;
-      camera.position.z = st.camZ;
-      camera.lookAt(0, 0, 0);
-      // boot loop's render() issues the single renderer.render() — don't double-render here
-    };
-  }
-
-  // ===========================================================================
-  // Effect 2 — code-shader-dissolve: code "compiles" out of GPU noise, holds crisp
-  // ===========================================================================
   function fxDissolve(THREE, scene, camera, renderer, state, st, tl, dur, seed) {
     scene.background = new THREE.Color(0x05070b);
     var code = drawCodeToCanvas(state, { fontPx: 40, lineH: 60, padX: 90, padY: 80, weight: 600 });
@@ -279,126 +191,32 @@
     return function () {};
   }
 
-  // ===========================================================================
-  // Effect 3 — code-particle-assemble: GPU points scatter then fly to glyph pixels
-  // ===========================================================================
-  function fxParticles(THREE, scene, camera, renderer, state, st, tl, dur, seed) {
-    scene.background = new THREE.Color(0x05070b);
-    var code = drawCodeToCanvas(state, { fontPx: 46, lineH: 70, padX: 70, padY: 64, weight: 700 });
-    var cw = code.W;
-    var ch = code.H;
-    var data = code.canvas.getContext("2d").getImageData(0, 0, cw, ch).data;
-    var rng = mulberry32(((seed || 1) * 2654435761) >>> 0);
-
-    var worldW = 13.0;
-    var worldH = worldW * (ch / cw);
-
-    // sample glyph pixels (brighter than the dark bg) on a fixed grid
-    var step = 2;
-    var tx = [];
-    var col = [];
-    for (var y = 0; y < ch; y += step) {
-      for (var x = 0; x < cw; x += step) {
-        var idx = (y * cw + x) * 4;
-        var r = data[idx];
-        var g = data[idx + 1];
-        var b = data[idx + 2];
-        if (r + g + b < 120) continue; // skip background
-        tx.push((x / cw - 0.5) * worldW, -(y / ch - 0.5) * worldH, 0);
-        col.push(r / 255, g / 255, b / 255);
-      }
-    }
-    var n = tx.length / 3;
-
-    var positions = new Float32Array(n * 3);
-    var aOrigin = new Float32Array(n * 3);
-    var aTarget = new Float32Array(tx);
-    var aColor = new Float32Array(col);
-    var aDelay = new Float32Array(n);
-    for (var i = 0; i < n; i++) {
-      var sx = (rng() * 2 - 1) * worldW * 1.15;
-      var sy = (rng() * 2 - 1) * worldH * 1.7;
-      var sz = (rng() * 2 - 1) * 9.0 - 2.0;
-      aOrigin[i * 3] = sx;
-      aOrigin[i * 3 + 1] = sy;
-      aOrigin[i * 3 + 2] = sz;
-      positions[i * 3] = sx;
-      positions[i * 3 + 1] = sy;
-      positions[i * 3 + 2] = sz;
-      aDelay[i] = rng();
-    }
-
-    var geo = new THREE.BufferGeometry();
-    geo.setAttribute("position", new THREE.BufferAttribute(positions, 3));
-    geo.setAttribute("aOrigin", new THREE.BufferAttribute(aOrigin, 3));
-    geo.setAttribute("aTarget", new THREE.BufferAttribute(aTarget, 3));
-    geo.setAttribute("aColor", new THREE.BufferAttribute(aColor, 3));
-    geo.setAttribute("aDelay", new THREE.BufferAttribute(aDelay, 1));
-
-    var uniforms = { uProgress: { value: 0 }, uSize: { value: 3.4 } };
-    var mat = new THREE.ShaderMaterial({
-      uniforms: uniforms,
-      transparent: true,
-      depthTest: false,
-      depthWrite: false,
-      blending: THREE.NormalBlending,
-      vertexShader: [
-        "attribute vec3 aOrigin; attribute vec3 aTarget; attribute vec3 aColor; attribute float aDelay;",
-        "uniform float uProgress; uniform float uSize;",
-        "varying vec3 vColor; varying float vP;",
-        "void main(){",
-        "  float span = 0.62;",
-        "  float p = clamp((uProgress - aDelay*(1.0-span)) / span, 0.0, 1.0);",
-        "  p = p*p*(3.0-2.0*p);",
-        "  vec3 pos = mix(aOrigin, aTarget, p);",
-        "  vec4 mv = modelViewMatrix * vec4(pos, 1.0);",
-        "  gl_Position = projectionMatrix * mv;",
-        "  gl_PointSize = uSize * (60.0 / -mv.z) * (0.45 + 0.55*p);",
-        "  vColor = aColor; vP = p;",
-        "}",
-      ].join("\n"),
-      fragmentShader: [
-        "precision highp float;",
-        "varying vec3 vColor; varying float vP;",
-        "void main(){",
-        "  vec2 d = gl_PointCoord - 0.5;",
-        "  float r2 = dot(d, d);",
-        "  if (r2 > 0.25) discard;",
-        "  float a = smoothstep(0.25, 0.02, r2);",
-        // brighter & whiter in flight, resolves to true color as it lands
-        "  vec3 c = mix(vColor + vec3(0.32)*(1.0-vP), vColor, vP);",
-        "  gl_FragColor = vec4(c, a * (0.7 + 0.3*vP));",
-        "}",
-      ].join("\n"),
-    });
-
-    var pts = new THREE.Points(geo, mat);
-    scene.add(pts);
-
-    camera.position.set(0, 0, 10);
-    var vfov = (camera.fov * Math.PI) / 180;
-    var sa = 1920 / 1080;
-    var fitH = worldH / 2 / Math.tan(vfov / 2) / 0.78;
-    var fitW = worldW / 2 / (Math.tan(vfov / 2) * sa) / 0.78;
-    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);
-
-    // uProgress is tweened by GSAP; the boot loop's render() draws once per frame.
-    return function () {};
-  }
-
   // ---- dispatch + boot ------------------------------------------------------
   function buildEffect(THREE, scene, camera, renderer, spec, st, tl) {
     var state = T[spec.seq].states[0];
     var dur = spec.duration;
-    if (spec.effect === "extrude") return fxExtrude(THREE, scene, camera, renderer, state, st, tl, dur);
     if (spec.effect === "dissolve") return fxDissolve(THREE, scene, camera, renderer, state, st, tl, dur, spec.seed);
-    if (spec.effect === "particles") return fxParticles(THREE, scene, camera, renderer, state, st, tl, dur, spec.seed);
     return function () {};
   }
 
+  // Free GPU resources (renderer, geometries, materials, textures) on page teardown.
+  // One-shot renders exit per job so nothing leaks there; this guards long-lived
+  // Studio/player sessions that reload. Fires only on unload — never during capture.
+  function disposeGL(renderer, scene) {
+    scene.traverse(function (o) {
+      if (o.geometry && o.geometry.dispose) o.geometry.dispose();
+      var mats = o.material ? (Array.isArray(o.material) ? o.material : [o.material]) : [];
+      mats.forEach(function (m) {
+        if (m.map && m.map.dispose) m.map.dispose();
+        if (m.uniforms && m.uniforms.uTex && m.uniforms.uTex.value && m.uniforms.uTex.value.dispose) {
+          m.uniforms.uTex.value.dispose();
+        }
+        if (m.dispose) m.dispose();
+      });
+    });
+    if (renderer.dispose) renderer.dispose();
+  }
+
   function go() {
     var spec = window.__BLOCK;
     var root = document.getElementById("root");
@@ -427,6 +245,9 @@
       var dur = parseFloat(root.dataset.duration) || tl.duration();
       tl.to({}, { duration: dur }, 0); // pad to full composition length
       render(); // paint frame 0
+      window.addEventListener("beforeunload", function () {
+        disposeGL(renderer, scene);
+      });
     });
   }
 
diff --git a/registry/blocks/code-snippet-flight/code-snippet-flight.html b/registry/blocks/code-snippet-flight/code-snippet-flight.html
index 915645ce90..655dcdf254 100644
--- a/registry/blocks/code-snippet-flight/code-snippet-flight.html
+++ b/registry/blocks/code-snippet-flight/code-snippet-flight.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=1920, height=1080" />
     <title>Code Snippet Flight</title>
-    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js" integrity="sha384-sG0Hv1tP1lZCk9KQmrIbY/XNwi+OY84GQqhMscbnsoBFqAz8KNCil1kvfL3Hbbk2" crossorigin="anonymous"></script>
     <style>
       * { margin: 0; padding: 0; box-sizing: border-box; }
       html, body { width: 1920px; height: 1080px; overflow: hidden; background: #05070b; }
@@ -190,57 +190,6 @@
   // ---- single-scene effect builders (fade in, play, hold to end) -------------
   var FADE = 0.45;
 
-  function morph(tl, surface, states, start) {
-    var STEP = 1.2;
-    var HOLD = 1.0;
-    var t = start;
-    for (var s = 0; s < states.length - 1; s++) {
-      var parts = makeScene(surface, false);
-      var code = parts.code;
-      var fromEls = renderState(code, states[s]);
-      var fromR = rectsOf(fromEls);
-      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;
-      toEls.forEach(function (el, k) {
-        var fr = fromR.get(k);
-        var tr = toR.get(k);
-        if (fr) {
-          seg.fromTo(el, { x: fr.left - tr.left, y: fr.top - tr.top }, { x: 0, y: 0, duration: STEP, ease: "power2.inOut" }, 0);
-        } else {
-          seg.fromTo(el, { opacity: 0 }, { opacity: 1, duration: FD, ease: "power1.out" }, ENTER_AT);
-        }
-      });
-      var toKeys = new Set(toEls.keys());
-      var fromState = states[s];
-      for (var i = 0; i < fromState.tokens.length; i++) {
-        var tok = fromState.tokens[i];
-        if (tok.content === "\n" || toKeys.has(tok.key) || !fromR.has(tok.key)) continue;
-        var r = fromR.get(tok.key);
-        var span = document.createElement("span");
-        span.className = "tok";
-        span.textContent = tok.content;
-        span.style.position = "absolute";
-        span.style.left = r.left - base.left + "px";
-        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);
-      }
-      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);
-      if (!isLast) tl.to(parts.scene, { opacity: 0, duration: FADE, ease: "power1.in" }, segEnd - FADE);
-      tl.add(seg, segStart);
-      t = segEnd - FADE;
-    }
-  }
-
   function flight(tl, surface, states, start) {
     var FLY = 0.95;
     var STAGGER = 0.26;
@@ -305,170 +254,10 @@
     tl.to(target, { opacity: 1, duration: 0.5, ease: "power1.out" }, landAt - 0.5);
   }
 
-  function typing(tl, surface, state, start) {
-    var PER = 0.028; // seconds per character — smooth, fast typewriter
-    var parts = makeScene(surface, true);
-    var code = parts.code;
-
-    // Per-CHARACTER render (granular reveal reads smoother than per-token pops).
-    code.textContent = "";
-    var line = document.createElement("div");
-    line.className = "line";
-    code.appendChild(line);
-    var chars = [];
-    for (var i = 0; i < state.tokens.length; i++) {
-      var t = state.tokens[i];
-      if (t.content === "\n") {
-        line = document.createElement("div");
-        line.className = "line";
-        code.appendChild(line);
-        continue;
-      }
-      for (var c = 0; c < t.content.length; c++) {
-        var span = document.createElement("span");
-        span.className = "tok";
-        span.textContent = t.content[c];
-        span.style.color = t.color;
-        if (t.fontStyle & 1) span.style.fontStyle = "italic";
-        if (t.fontStyle & 2) span.style.fontWeight = "700";
-        line.appendChild(span);
-        chars.push({ el: span, ws: t.content[c] === " " });
-      }
-    }
-    var last = code.lastChild;
-    if (last && last.className === "line" && last.children.length === 0) code.removeChild(last);
-
-    fillGutter(parts.gutter, code.querySelectorAll(".line").length);
-    var base = code.getBoundingClientRect();
-    var caret = document.createElement("div");
-    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);
-
-    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);
-    }
-    chars.forEach(function (c, i) {
-      var at = t0 + i * PER;
-      tl.set(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);
-      // caret glides at constant speed to each char's right edge (linear = no stop-start jitter)
-      var r = c.el.getBoundingClientRect();
-      tl.to(caret, { x: r.right - base.left, y: r.top - base.top, duration: PER, ease: "none" }, at);
-    });
-  }
-
-  function diff(tl, surface, states, start) {
-    var DEL = 0.55;
-    var ADD = 0.6;
-    var ops = lineDiff(splitLines(states[0]), splitLines(states[1]));
-    var parts = makeScene(surface, false);
-    var code = parts.code;
-    var delEls = [];
-    var addEls = [];
-    ops.forEach(function (op) {
-      var ln = document.createElement("div");
-      ln.className = "diff-line" + (op.type === "del" ? " diff-del" : op.type === "add" ? " diff-add" : "");
-      var sign = document.createElement("span");
-      sign.className = "diff-sign";
-      sign.textContent = op.type === "del" ? "- " : op.type === "add" ? "+ " : "  ";
-      ln.appendChild(sign);
-      op.line.tokens.forEach(function (t) {
-        var s = document.createElement("span");
-        s.className = "tok";
-        s.textContent = t.content;
-        s.style.color = t.color;
-        ln.appendChild(s);
-      });
-      code.appendChild(ln);
-      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);
-    var atDel = start + FADE + 0.3;
-    delEls.forEach(function (el, k) {
-      tl.fromTo(el, { height: 46, opacity: 1 }, { height: 0, opacity: 0, duration: DEL, ease: "power2.inOut" }, atDel + k * 0.08);
-    });
-    var atAdd = atDel + DEL + 0.15;
-    addEls.forEach(function (el, k) {
-      tl.set(el, { height: 0, opacity: 0 }, 0);
-      tl.fromTo(el, { height: 0, opacity: 0 }, { height: 46, opacity: 1, duration: ADD, ease: "power2.out" }, atAdd + k * 0.12);
-    });
-  }
-
-  function highlight(tl, surface, state, start, targetIdx) {
-    var SWEEP = 0.9;
-    var parts = makeScene(surface, true);
-    var code = parts.code;
-    renderState(code, state);
-    var lines = code.querySelectorAll(".line");
-    fillGutter(parts.gutter, lines.length);
-    var base = code.getBoundingClientRect();
-    var idx = Math.max(0, Math.min(lines.length - 1, targetIdx));
-    var lr = lines[idx].getBoundingClientRect();
-    var box = document.createElement("div");
-    box.className = "hl-box";
-    box.style.left = lr.left - base.left - 8 + "px";
-    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);
-    var at = start + FADE + 0.2;
-    tl.fromTo(box, { width: 0, opacity: 0 }, { width: lr.width + 18, opacity: 1, duration: SWEEP, ease: "power2.inOut" }, at);
-    for (var i = 0; i < lines.length; i++) {
-      if (i === idx) continue;
-      tl.fromTo(lines[i], { opacity: 1 }, { opacity: 0.45, duration: SWEEP, ease: "power2.inOut" }, at);
-    }
-  }
-
-  function scroll(tl, surface, state, start, targetLine) {
-    var SCROLL = 1.7;
-    var parts = makeScene(surface, true);
-    var code = parts.code;
-    renderState(code, state);
-    var lines = code.querySelectorAll(".line");
-    fillGutter(parts.gutter, lines.length);
-    var surfRect = surface.getBoundingClientRect();
-    var idx = Math.max(0, Math.min(lines.length - 1, targetLine - 1));
-    var lr = lines[idx].getBoundingClientRect();
-    var lineCenter = lr.top + lr.height / 2 - surfRect.top;
-    var dy = surfRect.height * 0.5 - lineCenter;
-    var box = document.createElement("div");
-    box.className = "hl-box";
-    box.style.left = lines[idx].offsetLeft - 8 + "px";
-    box.style.top = lines[idx].offsetTop - 1 + "px";
-    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);
-    var at = start + FADE + 0.35;
-    tl.fromTo([code, parts.gutter], { y: 0 }, { y: dy, duration: SCROLL, ease: "power2.inOut" }, at);
-    var arrAt = at + SCROLL;
-    for (var i = 0; i < lines.length; i++) {
-      if (i === idx) continue;
-      tl.fromTo(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);
-  }
-
   function buildEffect(tl, surface, spec) {
     var start = 0.45;
     var seq = T[spec.seq];
-    if (spec.effect === "morph") morph(tl, surface, seq.states, start);
-    else if (spec.effect === "flight") flight(tl, surface, seq.states, start);
-    else if (spec.effect === "typing") typing(tl, surface, seq.states[0], start);
-    else if (spec.effect === "diff") diff(tl, surface, seq.states, start);
-    else if (spec.effect === "highlight") highlight(tl, surface, seq.states[0], start, spec.line || 0);
-    else if (spec.effect === "scroll") scroll(tl, surface, seq.states[0], start, spec.line || 1);
+    if (spec.effect === "flight") flight(tl, surface, seq.states, start);
   }
 
   function go() {
diff --git a/registry/blocks/code-typing/code-typing.html b/registry/blocks/code-typing/code-typing.html
index 72f450f428..d5886f0328 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/gsap@3.14.2/dist/gsap.min.js" integrity="sha384-sG0Hv1tP1lZCk9KQmrIbY/XNwi+OY84GQqhMscbnsoBFqAz8KNCil1kvfL3Hbbk2" crossorigin="anonymous"></script>
     <style>
       * { margin: 0; padding: 0; box-sizing: border-box; }
       html, body { width: 1920px; height: 1080px; overflow: hidden; background: #05070b; }
@@ -190,121 +190,6 @@
   // ---- single-scene effect builders (fade in, play, hold to end) -------------
   var FADE = 0.45;
 
-  function morph(tl, surface, states, start) {
-    var STEP = 1.2;
-    var HOLD = 1.0;
-    var t = start;
-    for (var s = 0; s < states.length - 1; s++) {
-      var parts = makeScene(surface, false);
-      var code = parts.code;
-      var fromEls = renderState(code, states[s]);
-      var fromR = rectsOf(fromEls);
-      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;
-      toEls.forEach(function (el, k) {
-        var fr = fromR.get(k);
-        var tr = toR.get(k);
-        if (fr) {
-          seg.fromTo(el, { x: fr.left - tr.left, y: fr.top - tr.top }, { x: 0, y: 0, duration: STEP, ease: "power2.inOut" }, 0);
-        } else {
-          seg.fromTo(el, { opacity: 0 }, { opacity: 1, duration: FD, ease: "power1.out" }, ENTER_AT);
-        }
-      });
-      var toKeys = new Set(toEls.keys());
-      var fromState = states[s];
-      for (var i = 0; i < fromState.tokens.length; i++) {
-        var tok = fromState.tokens[i];
-        if (tok.content === "\n" || toKeys.has(tok.key) || !fromR.has(tok.key)) continue;
-        var r = fromR.get(tok.key);
-        var span = document.createElement("span");
-        span.className = "tok";
-        span.textContent = tok.content;
-        span.style.position = "absolute";
-        span.style.left = r.left - base.left + "px";
-        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);
-      }
-      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);
-      if (!isLast) tl.to(parts.scene, { opacity: 0, duration: FADE, ease: "power1.in" }, segEnd - FADE);
-      tl.add(seg, segStart);
-      t = segEnd - FADE;
-    }
-  }
-
-  function flight(tl, surface, states, start) {
-    var FLY = 0.95;
-    var STAGGER = 0.26;
-    var GAP = 20;
-    var parts = makeScene(surface, false);
-    parts.code.remove();
-    var scene = parts.scene;
-    var target = document.createElement("div");
-    target.className = "flight-target";
-    scene.appendChild(target);
-    var W = surface.clientWidth;
-    var H = surface.clientHeight;
-
-    var blocks = states.map(function (st) {
-      var blk = document.createElement("div");
-      blk.className = "flight-block";
-      renderState(blk, st);
-      scene.appendChild(blk);
-      return blk;
-    });
-    var n = blocks.length;
-
-    // Pass 1: measure natural size, then make every chip the SAME width (symmetry).
-    var maxW = 0;
-    var chipH = 0;
-    blocks.forEach(function (blk) {
-      var r = blk.getBoundingClientRect();
-      if (r.width > maxW) maxW = r.width;
-      if (r.height > chipH) chipH = r.height;
-    });
-    blocks.forEach(function (blk) {
-      blk.style.width = maxW + "px";
-    });
-
-    // Pass 2: evenly-stacked, left-aligned, group centered in the surface.
-    var stackH = n * chipH + (n - 1) * GAP;
-    var destLeft = Math.round((W - maxW) / 2);
-    var topY = Math.round((H - stackH) / 2);
-    blocks.forEach(function (blk, i) {
-      var destY = topY + i * (chipH + GAP);
-      blk.style.left = destLeft + "px";
-      blk.style.top = destY + "px";
-      // fly straight in from the left to the shared left edge — clean, no skew
-      var srcX = destLeft - W * 0.32;
-      tl.fromTo(
-        blk,
-        { x: srcX - destLeft, opacity: 0, scale: 0.96 },
-        { x: 0, opacity: 1, scale: 1, duration: FLY, ease: "power3.out" },
-        start + FADE + i * STAGGER,
-      );
-    });
-
-    // Even-padded panel tightly wrapping the uniform stack.
-    var padX = 30;
-    var padY = 24;
-    target.style.left = destLeft - padX + "px";
-    target.style.top = topY - padY + "px";
-    target.style.width = maxW + padX * 2 + "px";
-    target.style.height = stackH + padY * 2 + "px";
-    var landAt = start + FADE + (n - 1) * STAGGER + FLY;
-    tl.set(scene, { opacity: 1 }, 0);
-    tl.to(target, { opacity: 1, duration: 0.5, ease: "power1.out" }, landAt - 0.5);
-  }
-
   function typing(tl, surface, state, start) {
     var PER = 0.028; // seconds per character — smooth, fast typewriter
     var parts = makeScene(surface, true);
@@ -363,112 +248,10 @@
     });
   }
 
-  function diff(tl, surface, states, start) {
-    var DEL = 0.55;
-    var ADD = 0.6;
-    var ops = lineDiff(splitLines(states[0]), splitLines(states[1]));
-    var parts = makeScene(surface, false);
-    var code = parts.code;
-    var delEls = [];
-    var addEls = [];
-    ops.forEach(function (op) {
-      var ln = document.createElement("div");
-      ln.className = "diff-line" + (op.type === "del" ? " diff-del" : op.type === "add" ? " diff-add" : "");
-      var sign = document.createElement("span");
-      sign.className = "diff-sign";
-      sign.textContent = op.type === "del" ? "- " : op.type === "add" ? "+ " : "  ";
-      ln.appendChild(sign);
-      op.line.tokens.forEach(function (t) {
-        var s = document.createElement("span");
-        s.className = "tok";
-        s.textContent = t.content;
-        s.style.color = t.color;
-        ln.appendChild(s);
-      });
-      code.appendChild(ln);
-      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);
-    var atDel = start + FADE + 0.3;
-    delEls.forEach(function (el, k) {
-      tl.fromTo(el, { height: 46, opacity: 1 }, { height: 0, opacity: 0, duration: DEL, ease: "power2.inOut" }, atDel + k * 0.08);
-    });
-    var atAdd = atDel + DEL + 0.15;
-    addEls.forEach(function (el, k) {
-      tl.set(el, { height: 0, opacity: 0 }, 0);
-      tl.fromTo(el, { height: 0, opacity: 0 }, { height: 46, opacity: 1, duration: ADD, ease: "power2.out" }, atAdd + k * 0.12);
-    });
-  }
-
-  function highlight(tl, surface, state, start, targetIdx) {
-    var SWEEP = 0.9;
-    var parts = makeScene(surface, true);
-    var code = parts.code;
-    renderState(code, state);
-    var lines = code.querySelectorAll(".line");
-    fillGutter(parts.gutter, lines.length);
-    var base = code.getBoundingClientRect();
-    var idx = Math.max(0, Math.min(lines.length - 1, targetIdx));
-    var lr = lines[idx].getBoundingClientRect();
-    var box = document.createElement("div");
-    box.className = "hl-box";
-    box.style.left = lr.left - base.left - 8 + "px";
-    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);
-    var at = start + FADE + 0.2;
-    tl.fromTo(box, { width: 0, opacity: 0 }, { width: lr.width + 18, opacity: 1, duration: SWEEP, ease: "power2.inOut" }, at);
-    for (var i = 0; i < lines.length; i++) {
-      if (i === idx) continue;
-      tl.fromTo(lines[i], { opacity: 1 }, { opacity: 0.45, duration: SWEEP, ease: "power2.inOut" }, at);
-    }
-  }
-
-  function scroll(tl, surface, state, start, targetLine) {
-    var SCROLL = 1.7;
-    var parts = makeScene(surface, true);
-    var code = parts.code;
-    renderState(code, state);
-    var lines = code.querySelectorAll(".line");
-    fillGutter(parts.gutter, lines.length);
-    var surfRect = surface.getBoundingClientRect();
-    var idx = Math.max(0, Math.min(lines.length - 1, targetLine - 1));
-    var lr = lines[idx].getBoundingClientRect();
-    var lineCenter = lr.top + lr.height / 2 - surfRect.top;
-    var dy = surfRect.height * 0.5 - lineCenter;
-    var box = document.createElement("div");
-    box.className = "hl-box";
-    box.style.left = lines[idx].offsetLeft - 8 + "px";
-    box.style.top = lines[idx].offsetTop - 1 + "px";
-    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);
-    var at = start + FADE + 0.35;
-    tl.fromTo([code, parts.gutter], { y: 0 }, { y: dy, duration: SCROLL, ease: "power2.inOut" }, at);
-    var arrAt = at + SCROLL;
-    for (var i = 0; i < lines.length; i++) {
-      if (i === idx) continue;
-      tl.fromTo(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);
-  }
-
   function buildEffect(tl, surface, spec) {
     var start = 0.45;
     var seq = T[spec.seq];
-    if (spec.effect === "morph") morph(tl, surface, seq.states, start);
-    else if (spec.effect === "flight") flight(tl, surface, seq.states, start);
-    else if (spec.effect === "typing") typing(tl, surface, seq.states[0], start);
-    else if (spec.effect === "diff") diff(tl, surface, seq.states, start);
-    else if (spec.effect === "highlight") highlight(tl, surface, seq.states[0], start, spec.line || 0);
-    else if (spec.effect === "scroll") scroll(tl, surface, seq.states[0], start, spec.line || 1);
+    if (spec.effect === "typing") typing(tl, surface, seq.states[0], start);
   }
 
   function go() {

From b3b3f60683a964861e485096752279f97a4d23ec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Mon, 15 Jun 2026 20:10:06 -0400
Subject: [PATCH 6/7] chore(registry): drop SRI on vendor scripts to match
 catalog convention

The catalog's 88+ existing blocks load GSAP/Three from jsdelivr without
subresource integrity; adding it to only these 9 created an inconsistency and a
divergent failure mode (a hash mismatch in any render environment would break
only these blocks). Reverting to match convention. Render output unchanged.
---
 registry/blocks/code-3d-extrude/code-3d-extrude.html          | 4 ++--
 registry/blocks/code-diff/code-diff.html                      | 2 +-
 registry/blocks/code-highlight/code-highlight.html            | 2 +-
 registry/blocks/code-morph/code-morph.html                    | 2 +-
 .../blocks/code-particle-assemble/code-particle-assemble.html | 4 ++--
 registry/blocks/code-scroll/code-scroll.html                  | 2 +-
 .../blocks/code-shader-dissolve/code-shader-dissolve.html     | 4 ++--
 registry/blocks/code-snippet-flight/code-snippet-flight.html  | 2 +-
 registry/blocks/code-typing/code-typing.html                  | 2 +-
 9 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/registry/blocks/code-3d-extrude/code-3d-extrude.html b/registry/blocks/code-3d-extrude/code-3d-extrude.html
index fad9de2468..558cec1e90 100644
--- a/registry/blocks/code-3d-extrude/code-3d-extrude.html
+++ b/registry/blocks/code-3d-extrude/code-3d-extrude.html
@@ -4,8 +4,8 @@
     <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" integrity="sha384-sG0Hv1tP1lZCk9KQmrIbY/XNwi+OY84GQqhMscbnsoBFqAz8KNCil1kvfL3Hbbk2" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js" integrity="sha384-vV17nr/rMaJqmeZkFUzXLpHdQ+ME5QHKdydaqqN+3Ga39RJlNrTatJxHwGV4ml2C" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js"></script>
     <style>
       * { margin: 0; padding: 0; box-sizing: border-box; }
       html, body { width: 1920px; height: 1080px; overflow: hidden; background: #05070b; }
diff --git a/registry/blocks/code-diff/code-diff.html b/registry/blocks/code-diff/code-diff.html
index 67799a0704..240255e380 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" integrity="sha384-sG0Hv1tP1lZCk9KQmrIbY/XNwi+OY84GQqhMscbnsoBFqAz8KNCil1kvfL3Hbbk2" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
     <style>
       * { margin: 0; padding: 0; box-sizing: border-box; }
       html, body { width: 1920px; height: 1080px; overflow: hidden; background: #05070b; }
diff --git a/registry/blocks/code-highlight/code-highlight.html b/registry/blocks/code-highlight/code-highlight.html
index e2b62ffd43..c246e1d2e2 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" integrity="sha384-sG0Hv1tP1lZCk9KQmrIbY/XNwi+OY84GQqhMscbnsoBFqAz8KNCil1kvfL3Hbbk2" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
     <style>
       * { margin: 0; padding: 0; box-sizing: border-box; }
       html, body { width: 1920px; height: 1080px; overflow: hidden; background: #05070b; }
diff --git a/registry/blocks/code-morph/code-morph.html b/registry/blocks/code-morph/code-morph.html
index c472fc00e5..ae4693bd23 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" integrity="sha384-sG0Hv1tP1lZCk9KQmrIbY/XNwi+OY84GQqhMscbnsoBFqAz8KNCil1kvfL3Hbbk2" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
     <style>
       * { margin: 0; padding: 0; box-sizing: border-box; }
       html, body { width: 1920px; height: 1080px; overflow: hidden; background: #05070b; }
diff --git a/registry/blocks/code-particle-assemble/code-particle-assemble.html b/registry/blocks/code-particle-assemble/code-particle-assemble.html
index b37450466f..9b808fa6fb 100644
--- a/registry/blocks/code-particle-assemble/code-particle-assemble.html
+++ b/registry/blocks/code-particle-assemble/code-particle-assemble.html
@@ -4,8 +4,8 @@
     <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" integrity="sha384-sG0Hv1tP1lZCk9KQmrIbY/XNwi+OY84GQqhMscbnsoBFqAz8KNCil1kvfL3Hbbk2" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js" integrity="sha384-vV17nr/rMaJqmeZkFUzXLpHdQ+ME5QHKdydaqqN+3Ga39RJlNrTatJxHwGV4ml2C" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js"></script>
     <style>
       * { margin: 0; padding: 0; box-sizing: border-box; }
       html, body { width: 1920px; height: 1080px; overflow: hidden; background: #05070b; }
diff --git a/registry/blocks/code-scroll/code-scroll.html b/registry/blocks/code-scroll/code-scroll.html
index 415d3f4b32..c227d4ded3 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" integrity="sha384-sG0Hv1tP1lZCk9KQmrIbY/XNwi+OY84GQqhMscbnsoBFqAz8KNCil1kvfL3Hbbk2" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
     <style>
       * { margin: 0; padding: 0; box-sizing: border-box; }
       html, body { width: 1920px; height: 1080px; overflow: hidden; background: #05070b; }
diff --git a/registry/blocks/code-shader-dissolve/code-shader-dissolve.html b/registry/blocks/code-shader-dissolve/code-shader-dissolve.html
index 2a8b0b5d25..ab5373b5f1 100644
--- a/registry/blocks/code-shader-dissolve/code-shader-dissolve.html
+++ b/registry/blocks/code-shader-dissolve/code-shader-dissolve.html
@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=1920, height=1080" />
     <title>Code Shader Dissolve</title>
-    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js" integrity="sha384-sG0Hv1tP1lZCk9KQmrIbY/XNwi+OY84GQqhMscbnsoBFqAz8KNCil1kvfL3Hbbk2" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js" integrity="sha384-vV17nr/rMaJqmeZkFUzXLpHdQ+ME5QHKdydaqqN+3Ga39RJlNrTatJxHwGV4ml2C" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js"></script>
     <style>
       * { margin: 0; padding: 0; box-sizing: border-box; }
       html, body { width: 1920px; height: 1080px; overflow: hidden; background: #05070b; }
diff --git a/registry/blocks/code-snippet-flight/code-snippet-flight.html b/registry/blocks/code-snippet-flight/code-snippet-flight.html
index 655dcdf254..46eba07736 100644
--- a/registry/blocks/code-snippet-flight/code-snippet-flight.html
+++ b/registry/blocks/code-snippet-flight/code-snippet-flight.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=1920, height=1080" />
     <title>Code Snippet Flight</title>
-    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js" integrity="sha384-sG0Hv1tP1lZCk9KQmrIbY/XNwi+OY84GQqhMscbnsoBFqAz8KNCil1kvfL3Hbbk2" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
     <style>
       * { margin: 0; padding: 0; box-sizing: border-box; }
       html, body { width: 1920px; height: 1080px; overflow: hidden; background: #05070b; }
diff --git a/registry/blocks/code-typing/code-typing.html b/registry/blocks/code-typing/code-typing.html
index d5886f0328..a8e1ffa29f 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" integrity="sha384-sG0Hv1tP1lZCk9KQmrIbY/XNwi+OY84GQqhMscbnsoBFqAz8KNCil1kvfL3Hbbk2" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
     <style>
       * { margin: 0; padding: 0; box-sizing: border-box; }
       html, body { width: 1920px; height: 1080px; overflow: hidden; background: #05070b; }

From db17d4a603d381f411a657d7e9b8203f2de07438 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Mon, 15 Jun 2026 20:19:18 -0400
Subject: [PATCH 7/7] style(registry): oxfmt the generated code-animation
 blocks
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The regenerated blocks were raw generator output, which is not oxfmt-canonical and
failed CI's `oxfmt --check .` gate. Format them to match. Whitespace-only — render
output byte-identical (verified on a GLSL block and a DOM block).
---
 .../code-3d-extrude/code-3d-extrude.html      |  784 +++++---
 registry/blocks/code-diff/code-diff.html      |  970 ++++++++--
 .../blocks/code-highlight/code-highlight.html |  888 +++++++--
 registry/blocks/code-morph/code-morph.html    | 1380 ++++++++++---
 .../code-particle-assemble.html               |  673 ++++---
 registry/blocks/code-scroll/code-scroll.html  | 1709 +++++++++++++++--
 .../code-shader-dissolve.html                 |  701 +++++--
 .../code-snippet-flight.html                  |  847 +++++---
 registry/blocks/code-typing/code-typing.html  |  928 ++++++---
 9 files changed, 6907 insertions(+), 1973 deletions(-)

diff --git a/registry/blocks/code-3d-extrude/code-3d-extrude.html b/registry/blocks/code-3d-extrude/code-3d-extrude.html
index 558cec1e90..db6ba28ce4 100644
--- a/registry/blocks/code-3d-extrude/code-3d-extrude.html
+++ b/registry/blocks/code-3d-extrude/code-3d-extrude.html
@@ -7,10 +7,30 @@
     <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js"></script>
     <style>
-      * { margin: 0; padding: 0; box-sizing: border-box; }
-      html, body { width: 1920px; height: 1080px; overflow: hidden; background: #05070b; }
-      #root { position: relative; width: 1920px; height: 1080px; }
-      #gl { position: absolute; inset: 0; width: 1920px; height: 1080px; display: block; }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #05070b;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+      }
+      #gl {
+        position: absolute;
+        inset: 0;
+        width: 1920px;
+        height: 1080px;
+        display: block;
+      }
     </style>
   </head>
   <body>
@@ -25,245 +45,569 @@
       <canvas id="gl" width="1920" height="1080"></canvas>
     </div>
     <script>
-      window.__TOKENS = {"feature":{"lang":"js","theme":"github-dark","bg":"#24292e","fg":"#e1e4e8","states":[{"code":"async function loadConfig(path) {\n  const raw = await readFile(path, \"utf8\")\n  const config = JSON.parse(raw)\n  return validate(config)\n}","tokens":[{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-0","content":"async","color":"#F97583","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-1","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-2","content":"function","color":"#F97583","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-3","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-4","content":"loadConfig","color":"#B392F0","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-5","content":"(","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-6","content":"path","color":"#FFAB70","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-7","content":") {","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-8","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-9","content":"  ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-10","content":"const","color":"#F97583","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-11","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-12","content":"raw","color":"#79B8FF","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-13","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-14","content":"=","color":"#F97583","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-15","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-16","content":"await","color":"#F97583","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-17","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-18","content":"readFile","color":"#B392F0","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-19","content":"(path,","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-20","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-21","content":"\"utf8\"","color":"#9ECBFF","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-22","content":")","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-23","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-24","content":"  ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-25","content":"const","color":"#F97583","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-26","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-27","content":"config","color":"#79B8FF","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-28","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-29","content":"=","color":"#F97583","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-30","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-31","content":"JSON","color":"#79B8FF","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-32","content":".","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-33","content":"parse","color":"#B392F0","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-34","content":"(raw)","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-35","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-36","content":"  ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-37","content":"return","color":"#F97583","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-38","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-39","content":"validate","color":"#B392F0","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-40","content":"(config)","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-41","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-42","content":"}","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-43","content":"\n","color":"#e1e4e8","fontStyle":0}]}]}};
-      window.__BLOCK = {"id":"code-3d-extrude","effect":"extrude","seq":"feature","duration":8,"seed":7};
+      window.__TOKENS = {
+        feature: {
+          lang: "js",
+          theme: "github-dark",
+          bg: "#24292e",
+          fg: "#e1e4e8",
+          states: [
+            {
+              code: 'async function loadConfig(path) {\n  const raw = await readFile(path, "utf8")\n  const config = JSON.parse(raw)\n  return validate(config)\n}',
+              tokens: [
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-0",
+                  content: "async",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-1",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-2",
+                  content: "function",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-3",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-4",
+                  content: "loadConfig",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-5",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-6",
+                  content: "path",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-7",
+                  content: ") {",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-8",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-9",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-10",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-11",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-12",
+                  content: "raw",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-13",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-14",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-15",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-16",
+                  content: "await",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-17",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-18",
+                  content: "readFile",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-19",
+                  content: "(path,",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-20",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-21",
+                  content: '"utf8"',
+                  color: "#9ECBFF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-22",
+                  content: ")",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-23",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-24",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-25",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-26",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-27",
+                  content: "config",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-28",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-29",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-30",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-31",
+                  content: "JSON",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-32",
+                  content: ".",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-33",
+                  content: "parse",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-34",
+                  content: "(raw)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-35",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-36",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-37",
+                  content: "return",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-38",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-39",
+                  content: "validate",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-40",
+                  content: "(config)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-41",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-42",
+                  content: "}",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-43",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+              ],
+            },
+          ],
+        },
+      };
+      window.__BLOCK = {
+        id: "code-3d-extrude",
+        effect: "extrude",
+        seq: "feature",
+        duration: 8,
+        seed: 7,
+      };
     </script>
     <script>
-// hf-code-anim-gl.js — WebGL code-animation engine for the "crazy" Code Animations blocks.
-//
-// 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
-//   - 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
-//
-// Each block sets window.__BLOCK = { id, effect, seq, duration, seed } and includes this engine.
-(function () {
-  "use strict";
-  var T = window.__TOKENS || {};
+      // hf-code-anim-gl.js — WebGL code-animation engine for the "crazy" Code Animations blocks.
+      //
+      // 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
+      //   - 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
+      //
+      // Each block sets window.__BLOCK = { id, effect, seq, duration, seed } and includes this engine.
+      (function () {
+        "use strict";
+        var T = window.__TOKENS || {};
 
-  // ---- seeded PRNG (no Math.random) -----------------------------------------
-  function mulberry32(a) {
-    return function () {
-      a |= 0;
-      a = (a + 0x6d2b79f5) | 0;
-      var t = Math.imul(a ^ (a >>> 15), 1 | a);
-      t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
-      return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
-    };
-  }
-
-  // ---- split a token state into lines of {content,color} --------------------
-  function splitLines(state) {
-    var lines = [[]];
-    for (var i = 0; i < state.tokens.length; i++) {
-      var t = state.tokens[i];
-      if (t.content === "\n") {
-        lines.push([]);
-        continue;
-      }
-      lines[lines.length - 1].push(t);
-    }
-    while (lines.length && lines[lines.length - 1].length === 0) lines.pop();
-    return lines;
-  }
+        // ---- seeded PRNG (no Math.random) -----------------------------------------
+        function mulberry32(a) {
+          return function () {
+            a |= 0;
+            a = (a + 0x6d2b79f5) | 0;
+            var t = Math.imul(a ^ (a >>> 15), 1 | a);
+            t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+            return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+          };
+        }
 
-  // ---- THE BRIDGE: draw baked tokens to an offscreen 2D canvas ---------------
-  // Returns { canvas, W, H, lines, lineH, padY, fontPx } so effects can sample it.
-  function drawCodeToCanvas(state, opts) {
-    opts = opts || {};
-    var fontPx = opts.fontPx || 36;
-    var lineH = opts.lineH || 54;
-    var padX = opts.padX || 70;
-    var padY = opts.padY || 60;
-    var weight = opts.weight || 500;
-    var font = weight + " " + fontPx + 'px "JetBrains Mono", monospace';
+        // ---- split a token state into lines of {content,color} --------------------
+        function splitLines(state) {
+          var lines = [[]];
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              lines.push([]);
+              continue;
+            }
+            lines[lines.length - 1].push(t);
+          }
+          while (lines.length && lines[lines.length - 1].length === 0) lines.pop();
+          return lines;
+        }
 
-    var lines = splitLines(state);
-    var measure = document.createElement("canvas").getContext("2d");
-    measure.font = font;
-    var maxW = 0;
-    for (var i = 0; i < lines.length; i++) {
-      var w = 0;
-      for (var j = 0; j < lines[i].length; j++) w += measure.measureText(lines[i][j].content).width;
-      if (w > maxW) maxW = w;
-    }
-    var W = Math.max(2, Math.ceil(maxW + padX * 2));
-    var H = Math.max(2, Math.ceil(lines.length * lineH + padY * 2));
+        // ---- THE BRIDGE: draw baked tokens to an offscreen 2D canvas ---------------
+        // Returns { canvas, W, H, lines, lineH, padY, fontPx } so effects can sample it.
+        function drawCodeToCanvas(state, opts) {
+          opts = opts || {};
+          var fontPx = opts.fontPx || 36;
+          var lineH = opts.lineH || 54;
+          var padX = opts.padX || 70;
+          var padY = opts.padY || 60;
+          var weight = opts.weight || 500;
+          var font = weight + " " + fontPx + 'px "JetBrains Mono", monospace';
 
-    var canvas = document.createElement("canvas");
-    canvas.width = W;
-    canvas.height = H;
-    var ctx = canvas.getContext("2d");
-    if (opts.transparent) {
-      ctx.clearRect(0, 0, W, H);
-    } else {
-      ctx.fillStyle = opts.bg || "#0b0f17";
-      ctx.fillRect(0, 0, W, H);
-    }
-    ctx.textBaseline = "top";
-    ctx.font = font;
-    for (var li = 0; li < lines.length; li++) {
-      var x = padX;
-      var y = padY + li * lineH;
-      for (var k = 0; k < lines[li].length; k++) {
-        var tok = lines[li][k];
-        ctx.fillStyle = tok.color;
-        ctx.fillText(tok.content, x, y);
-        x += ctx.measureText(tok.content).width;
-      }
-    }
-    return { canvas: canvas, W: W, H: H, lines: lines.length, lineH: lineH, padY: padY, fontPx: fontPx };
-  }
+          var lines = splitLines(state);
+          var measure = document.createElement("canvas").getContext("2d");
+          measure.font = font;
+          var maxW = 0;
+          for (var i = 0; i < lines.length; i++) {
+            var w = 0;
+            for (var j = 0; j < lines[i].length; j++)
+              w += measure.measureText(lines[i][j].content).width;
+            if (w > maxW) maxW = w;
+          }
+          var W = Math.max(2, Math.ceil(maxW + padX * 2));
+          var H = Math.max(2, Math.ceil(lines.length * lineH + padY * 2));
 
-  function fxExtrude(THREE, scene, camera, renderer, state, st, tl, dur) {
-    scene.background = new THREE.Color(0x05070b);
-    var code = drawCodeToCanvas(state, { fontPx: 38, lineH: 56, padX: 80, padY: 70, weight: 600 });
-    var tex = new THREE.CanvasTexture(code.canvas);
-    tex.minFilter = THREE.LinearFilter;
-    tex.magFilter = THREE.LinearFilter;
-    tex.generateMipmaps = false;
+          var canvas = document.createElement("canvas");
+          canvas.width = W;
+          canvas.height = H;
+          var ctx = canvas.getContext("2d");
+          if (opts.transparent) {
+            ctx.clearRect(0, 0, W, H);
+          } else {
+            ctx.fillStyle = opts.bg || "#0b0f17";
+            ctx.fillRect(0, 0, W, H);
+          }
+          ctx.textBaseline = "top";
+          ctx.font = font;
+          for (var li = 0; li < lines.length; li++) {
+            var x = padX;
+            var y = padY + li * lineH;
+            for (var k = 0; k < lines[li].length; k++) {
+              var tok = lines[li][k];
+              ctx.fillStyle = tok.color;
+              ctx.fillText(tok.content, x, y);
+              x += ctx.measureText(tok.content).width;
+            }
+          }
+          return {
+            canvas: canvas,
+            W: W,
+            H: H,
+            lines: lines.length,
+            lineH: lineH,
+            padY: padY,
+            fontPx: fontPx,
+          };
+        }
 
-    var aspect = code.W / code.H;
-    var slabH = 6.2;
-    var slabW = slabH * aspect;
-    var depth = 0.5;
+        function fxExtrude(THREE, scene, camera, renderer, state, st, tl, dur) {
+          scene.background = new THREE.Color(0x05070b);
+          var code = drawCodeToCanvas(state, {
+            fontPx: 38,
+            lineH: 56,
+            padX: 80,
+            padY: 70,
+            weight: 600,
+          });
+          var tex = new THREE.CanvasTexture(code.canvas);
+          tex.minFilter = THREE.LinearFilter;
+          tex.magFilter = THREE.LinearFilter;
+          tex.generateMipmaps = false;
 
-    // beveled slab: rounded extruded rectangle
-    var hw = slabW / 2;
-    var hh = slabH / 2;
-    var r = 0.18;
-    var shape = new THREE.Shape();
-    shape.moveTo(-hw + r, -hh);
-    shape.lineTo(hw - r, -hh);
-    shape.quadraticCurveTo(hw, -hh, hw, -hh + r);
-    shape.lineTo(hw, hh - r);
-    shape.quadraticCurveTo(hw, hh, hw - r, hh);
-    shape.lineTo(-hw + r, hh);
-    shape.quadraticCurveTo(-hw, hh, -hw, hh - r);
-    shape.lineTo(-hw, -hh + r);
-    shape.quadraticCurveTo(-hw, -hh, -hw + r, -hh);
-    var geo = new THREE.ExtrudeGeometry(shape, { depth: depth, bevelEnabled: true, bevelThickness: 0.12, bevelSize: 0.1, bevelSegments: 3, steps: 1 });
-    geo.center();
-    // UVs from ExtrudeGeometry don't map the texture nicely to the face; remap front-face UVs from XY bounds.
-    geo.computeBoundingBox();
-    var bb = geo.boundingBox;
-    var sizeX = bb.max.x - bb.min.x;
-    var sizeY = bb.max.y - bb.min.y;
-    var pos = geo.attributes.position;
-    var uv = geo.attributes.uv;
-    for (var vi = 0; vi < pos.count; vi++) {
-      uv.setXY(vi, (pos.getX(vi) - bb.min.x) / sizeX, (pos.getY(vi) - bb.min.y) / sizeY);
-    }
-    uv.needsUpdate = true;
+          var aspect = code.W / code.H;
+          var slabH = 6.2;
+          var slabW = slabH * aspect;
+          var depth = 0.5;
 
-    // Face is an unlit "screen" — shows the exact vivid Shiki colors (no PBR/emissive wash).
-    // The 3D read comes from the lit, beveled EDGES + perspective, like a glowing monitor.
-    var faceMat = new THREE.MeshBasicMaterial({ map: tex });
-    var edgeMat = new THREE.MeshStandardMaterial({ color: 0x141d2b, roughness: 0.3, metalness: 0.4 });
-    // ExtrudeGeometry groups: 0 = front+back faces, 1 = sides. Front shows the code.
-    var slab = new THREE.Mesh(geo, [faceMat, edgeMat]);
-    scene.add(slab);
+          // beveled slab: rounded extruded rectangle
+          var hw = slabW / 2;
+          var hh = slabH / 2;
+          var r = 0.18;
+          var shape = new THREE.Shape();
+          shape.moveTo(-hw + r, -hh);
+          shape.lineTo(hw - r, -hh);
+          shape.quadraticCurveTo(hw, -hh, hw, -hh + r);
+          shape.lineTo(hw, hh - r);
+          shape.quadraticCurveTo(hw, hh, hw - r, hh);
+          shape.lineTo(-hw + r, hh);
+          shape.quadraticCurveTo(-hw, hh, -hw, hh - r);
+          shape.lineTo(-hw, -hh + r);
+          shape.quadraticCurveTo(-hw, -hh, -hw + r, -hh);
+          var geo = new THREE.ExtrudeGeometry(shape, {
+            depth: depth,
+            bevelEnabled: true,
+            bevelThickness: 0.12,
+            bevelSize: 0.1,
+            bevelSegments: 3,
+            steps: 1,
+          });
+          geo.center();
+          // UVs from ExtrudeGeometry don't map the texture nicely to the face; remap front-face UVs from XY bounds.
+          geo.computeBoundingBox();
+          var bb = geo.boundingBox;
+          var sizeX = bb.max.x - bb.min.x;
+          var sizeY = bb.max.y - bb.min.y;
+          var pos = geo.attributes.position;
+          var uv = geo.attributes.uv;
+          for (var vi = 0; vi < pos.count; vi++) {
+            uv.setXY(vi, (pos.getX(vi) - bb.min.x) / sizeX, (pos.getY(vi) - bb.min.y) / sizeY);
+          }
+          uv.needsUpdate = true;
 
-    scene.add(new THREE.AmbientLight(0xffffff, 0.5));
-    var key = new THREE.DirectionalLight(0xbcd4ff, 1.25);
-    key.position.set(5, 7, 9);
-    scene.add(key);
-    var rim = new THREE.DirectionalLight(0x4fffa0, 0.45);
-    rim.position.set(-7, -3, 5);
-    scene.add(rim);
+          // Face is an unlit "screen" — shows the exact vivid Shiki colors (no PBR/emissive wash).
+          // The 3D read comes from the lit, beveled EDGES + perspective, like a glowing monitor.
+          var faceMat = new THREE.MeshBasicMaterial({ map: tex });
+          var edgeMat = new THREE.MeshStandardMaterial({
+            color: 0x141d2b,
+            roughness: 0.3,
+            metalness: 0.4,
+          });
+          // ExtrudeGeometry groups: 0 = front+back faces, 1 = sides. Front shows the code.
+          var slab = new THREE.Mesh(geo, [faceMat, edgeMat]);
+          scene.add(slab);
 
-    camera.position.set(0, 0, 10);
+          scene.add(new THREE.AmbientLight(0xffffff, 0.5));
+          var key = new THREE.DirectionalLight(0xbcd4ff, 1.25);
+          key.position.set(5, 7, 9);
+          scene.add(key);
+          var rim = new THREE.DirectionalLight(0x4fffa0, 0.45);
+          rim.position.set(-7, -3, 5);
+          scene.add(rim);
 
-    // fit camera distance so the WHOLE slab fits (width-limited for wide code), ~78% fill
-    var vfov = (camera.fov * Math.PI) / 180;
-    var screenAspect = 1920 / 1080;
-    var fitH = slabH / 2 / Math.tan(vfov / 2) / 0.78;
-    var fitW = slabW / 2 / (Math.tan(vfov / 2) * screenAspect) / 0.78;
-    var fitZ = Math.max(fitH, fitW);
+          camera.position.set(0, 0, 10);
 
-    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);
-    // gentle breathing drift at rest (subtle — stays readable)
-    tl.to(st, { rotY: 0.06, rotX: -0.02, duration: dur * 0.4, ease: "sine.inOut" }, dur * 0.6);
+          // fit camera distance so the WHOLE slab fits (width-limited for wide code), ~78% fill
+          var vfov = (camera.fov * Math.PI) / 180;
+          var screenAspect = 1920 / 1080;
+          var fitH = slabH / 2 / Math.tan(vfov / 2) / 0.78;
+          var fitW = slabW / 2 / (Math.tan(vfov / 2) * screenAspect) / 0.78;
+          var fitZ = Math.max(fitH, fitW);
 
-    return function () {
-      slab.rotation.y = st.rotY;
-      slab.rotation.x = st.rotX;
-      camera.position.z = st.camZ;
-      camera.lookAt(0, 0, 0);
-      // boot loop's render() issues the single renderer.render() — don't double-render here
-    };
-  }
+          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);
+          // gentle breathing drift at rest (subtle — stays readable)
+          tl.to(
+            st,
+            { rotY: 0.06, rotX: -0.02, duration: dur * 0.4, ease: "sine.inOut" },
+            dur * 0.6,
+          );
 
-  // ---- dispatch + boot ------------------------------------------------------
-  function buildEffect(THREE, scene, camera, renderer, spec, st, tl) {
-    var state = T[spec.seq].states[0];
-    var dur = spec.duration;
-    if (spec.effect === "extrude") return fxExtrude(THREE, scene, camera, renderer, state, st, tl, dur);
-    return function () {};
-  }
+          return function () {
+            slab.rotation.y = st.rotY;
+            slab.rotation.x = st.rotX;
+            camera.position.z = st.camZ;
+            camera.lookAt(0, 0, 0);
+            // boot loop's render() issues the single renderer.render() — don't double-render here
+          };
+        }
 
-  // Free GPU resources (renderer, geometries, materials, textures) on page teardown.
-  // One-shot renders exit per job so nothing leaks there; this guards long-lived
-  // Studio/player sessions that reload. Fires only on unload — never during capture.
-  function disposeGL(renderer, scene) {
-    scene.traverse(function (o) {
-      if (o.geometry && o.geometry.dispose) o.geometry.dispose();
-      var mats = o.material ? (Array.isArray(o.material) ? o.material : [o.material]) : [];
-      mats.forEach(function (m) {
-        if (m.map && m.map.dispose) m.map.dispose();
-        if (m.uniforms && m.uniforms.uTex && m.uniforms.uTex.value && m.uniforms.uTex.value.dispose) {
-          m.uniforms.uTex.value.dispose();
+        // ---- dispatch + boot ------------------------------------------------------
+        function buildEffect(THREE, scene, camera, renderer, spec, st, tl) {
+          var state = T[spec.seq].states[0];
+          var dur = spec.duration;
+          if (spec.effect === "extrude")
+            return fxExtrude(THREE, scene, camera, renderer, state, st, tl, dur);
+          return function () {};
         }
-        if (m.dispose) m.dispose();
-      });
-    });
-    if (renderer.dispose) renderer.dispose();
-  }
 
-  function go() {
-    var spec = window.__BLOCK;
-    var root = document.getElementById("root");
-    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
+        // Free GPU resources (renderer, geometries, materials, textures) on page teardown.
+        // One-shot renders exit per job so nothing leaks there; this guards long-lived
+        // Studio/player sessions that reload. Fires only on unload — never during capture.
+        function disposeGL(renderer, scene) {
+          scene.traverse(function (o) {
+            if (o.geometry && o.geometry.dispose) o.geometry.dispose();
+            var mats = o.material ? (Array.isArray(o.material) ? o.material : [o.material]) : [];
+            mats.forEach(function (m) {
+              if (m.map && m.map.dispose) m.map.dispose();
+              if (
+                m.uniforms &&
+                m.uniforms.uTex &&
+                m.uniforms.uTex.value &&
+                m.uniforms.uTex.value.dispose
+              ) {
+                m.uniforms.uTex.value.dispose();
+              }
+              if (m.dispose) m.dispose();
+            });
+          });
+          if (renderer.dispose) renderer.dispose();
+        }
 
-    var THREE = window.THREE;
-    var renderer = new THREE.WebGLRenderer({ canvas: glcanvas, antialias: true, alpha: false, preserveDrawingBuffer: true });
-    renderer.setPixelRatio(1);
-    renderer.setSize(W, H, false);
-    var scene = new THREE.Scene();
-    var camera = new THREE.PerspectiveCamera(45, W / H, 0.1, 200);
-    var st = {};
+        function go() {
+          var spec = window.__BLOCK;
+          var root = document.getElementById("root");
+          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
 
-    document.fonts.ready.then(function () {
-      var renderFn = buildEffect(THREE, scene, camera, renderer, spec, st, tl);
-      function render() {
-        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
-      render(); // paint frame 0
-      window.addEventListener("beforeunload", function () {
-        disposeGL(renderer, scene);
-      });
-    });
-  }
+          var THREE = window.THREE;
+          var renderer = new THREE.WebGLRenderer({
+            canvas: glcanvas,
+            antialias: true,
+            alpha: false,
+            preserveDrawingBuffer: true,
+          });
+          renderer.setPixelRatio(1);
+          renderer.setSize(W, H, false);
+          var scene = new THREE.Scene();
+          var camera = new THREE.PerspectiveCamera(45, W / H, 0.1, 200);
+          var st = {};
 
-  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
-  else go();
-})();
+          document.fonts.ready.then(function () {
+            var renderFn = buildEffect(THREE, scene, camera, renderer, spec, st, tl);
+            function render() {
+              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
+            render(); // paint frame 0
+            window.addEventListener("beforeunload", function () {
+              disposeGL(renderer, scene);
+            });
+          });
+        }
 
+        if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
+        else go();
+      })();
     </script>
   </body>
 </html>
diff --git a/registry/blocks/code-diff/code-diff.html b/registry/blocks/code-diff/code-diff.html
index 240255e380..bf482a8779 100644
--- a/registry/blocks/code-diff/code-diff.html
+++ b/registry/blocks/code-diff/code-diff.html
@@ -6,37 +6,225 @@
     <title>Code Diff</title>
     <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
     <style>
-      * { margin: 0; padding: 0; box-sizing: border-box; }
-      html, body { width: 1920px; height: 1080px; overflow: hidden; background: #05070b; }
-      #root { position: relative; width: 1920px; height: 1080px; font-family: "JetBrains Mono", monospace; color: #e6edf3; }
-      .bg-field { position: absolute; inset: 0; background: radial-gradient(1200px 700px at 50% 18%, #0e1726 0%, #070b12 55%, #05070b 100%); }
-      .bg-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(88,166,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(88,166,255,0.05) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(1100px 620px at 50% 42%, #000 0%, transparent 78%); }
-      .bg-glow { position: absolute; width: 900px; height: 900px; border-radius: 50%; filter: blur(120px); opacity: 0.5; }
-      .bg-glow.a { background: #1f6feb55; left: -180px; top: -200px; }
-      .bg-glow.b { background: #2ea04355; right: -200px; bottom: -260px; }
-      .editor { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 1380px; height: 800px; background: #0b0f17; border: 1px solid #1d2733; border-radius: 16px; box-shadow: 0 40px 120px rgba(0,0,0,0.6), 0 2px 0 rgba(255,255,255,0.03) inset; overflow: hidden; display: flex; flex-direction: column; }
-      .titlebar { height: 56px; flex: 0 0 56px; display: flex; align-items: center; gap: 16px; padding: 0 22px; background: linear-gradient(#11161f, #0c111a); border-bottom: 1px solid #1b2430; }
-      .dots { display: flex; gap: 10px; }
-      .dot { width: 14px; height: 14px; border-radius: 50%; }
-      .dot.r { background: #ff5f57; } .dot.y { background: #febc2e; } .dot.g { background: #28c840; }
-      .filename { font-size: 19px; color: #8b98a9; letter-spacing: 0.2px; }
-      .filename .accent { color: #d6e2f0; }
-      .code-surface { position: relative; flex: 1 1 auto; overflow: hidden; }
-      .scene { position: absolute; inset: 0; opacity: 0; will-change: opacity; }
-      .code { position: absolute; top: 38px; left: 0; right: 0; padding: 0 44px 0 104px; font-size: 30px; line-height: 46px; font-variant-ligatures: none; tab-size: 2; }
-      .gutter { position: absolute; top: 38px; left: 0; width: 84px; padding-right: 18px; font-size: 30px; line-height: 46px; text-align: right; color: #828c9b; user-select: none; }
-      .ln { display: block; height: 46px; }
-      .line { display: block; min-height: 46px; white-space: pre; position: relative; z-index: 1; }
-      .tok { display: inline-block; white-space: pre; will-change: transform, opacity; }
-      .caret { position: absolute; top: 0; left: 0; width: 3px; height: 32px; margin-top: 6px; background: #58a6ff; border-radius: 1px; z-index: 3; }
-      .hl-box { position: absolute; background: rgba(88,166,255,0.16); border-left: 3px solid #58a6ff; border-radius: 6px; z-index: 0; overflow: hidden; }
-      .diff-line { display: block; min-height: 0; line-height: 46px; white-space: pre; position: relative; overflow: hidden; padding-left: 14px; }
-      .diff-sign { display: inline-block; width: 22px; color: #41506220; }
-      .diff-del { background: rgba(248,81,73,0.12); box-shadow: inset 3px 0 #f85149; }
-      .diff-add { background: rgba(63,185,80,0.12); box-shadow: inset 3px 0 #3fb950; }
-      .diff-del .diff-sign { color: #f85149; } .diff-add .diff-sign { color: #3fb950; }
-      .flight-block { position: absolute; white-space: pre; font-size: 27px; line-height: 40px; padding: 11px 22px; border-radius: 11px; background: #0f1722; border: 1px solid #233044; box-shadow: 0 16px 44px rgba(0,0,0,0.5); will-change: transform, opacity; }
-      .flight-target { position: absolute; border: 1.5px dashed #2a3a4f; border-radius: 14px; opacity: 0; }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #05070b;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        font-family: "JetBrains Mono", monospace;
+        color: #e6edf3;
+      }
+      .bg-field {
+        position: absolute;
+        inset: 0;
+        background: radial-gradient(1200px 700px at 50% 18%, #0e1726 0%, #070b12 55%, #05070b 100%);
+      }
+      .bg-grid {
+        position: absolute;
+        inset: 0;
+        background-image:
+          linear-gradient(rgba(88, 166, 255, 0.05) 1px, transparent 1px),
+          linear-gradient(90deg, rgba(88, 166, 255, 0.05) 1px, transparent 1px);
+        background-size: 64px 64px;
+        mask-image: radial-gradient(1100px 620px at 50% 42%, #000 0%, transparent 78%);
+      }
+      .bg-glow {
+        position: absolute;
+        width: 900px;
+        height: 900px;
+        border-radius: 50%;
+        filter: blur(120px);
+        opacity: 0.5;
+      }
+      .bg-glow.a {
+        background: #1f6feb55;
+        left: -180px;
+        top: -200px;
+      }
+      .bg-glow.b {
+        background: #2ea04355;
+        right: -200px;
+        bottom: -260px;
+      }
+      .editor {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 1380px;
+        height: 800px;
+        background: #0b0f17;
+        border: 1px solid #1d2733;
+        border-radius: 16px;
+        box-shadow:
+          0 40px 120px rgba(0, 0, 0, 0.6),
+          0 2px 0 rgba(255, 255, 255, 0.03) inset;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+      }
+      .titlebar {
+        height: 56px;
+        flex: 0 0 56px;
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        padding: 0 22px;
+        background: linear-gradient(#11161f, #0c111a);
+        border-bottom: 1px solid #1b2430;
+      }
+      .dots {
+        display: flex;
+        gap: 10px;
+      }
+      .dot {
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+      }
+      .dot.r {
+        background: #ff5f57;
+      }
+      .dot.y {
+        background: #febc2e;
+      }
+      .dot.g {
+        background: #28c840;
+      }
+      .filename {
+        font-size: 19px;
+        color: #8b98a9;
+        letter-spacing: 0.2px;
+      }
+      .filename .accent {
+        color: #d6e2f0;
+      }
+      .code-surface {
+        position: relative;
+        flex: 1 1 auto;
+        overflow: hidden;
+      }
+      .scene {
+        position: absolute;
+        inset: 0;
+        opacity: 0;
+        will-change: opacity;
+      }
+      .code {
+        position: absolute;
+        top: 38px;
+        left: 0;
+        right: 0;
+        padding: 0 44px 0 104px;
+        font-size: 30px;
+        line-height: 46px;
+        font-variant-ligatures: none;
+        tab-size: 2;
+      }
+      .gutter {
+        position: absolute;
+        top: 38px;
+        left: 0;
+        width: 84px;
+        padding-right: 18px;
+        font-size: 30px;
+        line-height: 46px;
+        text-align: right;
+        color: #828c9b;
+        user-select: none;
+      }
+      .ln {
+        display: block;
+        height: 46px;
+      }
+      .line {
+        display: block;
+        min-height: 46px;
+        white-space: pre;
+        position: relative;
+        z-index: 1;
+      }
+      .tok {
+        display: inline-block;
+        white-space: pre;
+        will-change: transform, opacity;
+      }
+      .caret {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 3px;
+        height: 32px;
+        margin-top: 6px;
+        background: #58a6ff;
+        border-radius: 1px;
+        z-index: 3;
+      }
+      .hl-box {
+        position: absolute;
+        background: rgba(88, 166, 255, 0.16);
+        border-left: 3px solid #58a6ff;
+        border-radius: 6px;
+        z-index: 0;
+        overflow: hidden;
+      }
+      .diff-line {
+        display: block;
+        min-height: 0;
+        line-height: 46px;
+        white-space: pre;
+        position: relative;
+        overflow: hidden;
+        padding-left: 14px;
+      }
+      .diff-sign {
+        display: inline-block;
+        width: 22px;
+        color: #41506220;
+      }
+      .diff-del {
+        background: rgba(248, 81, 73, 0.12);
+        box-shadow: inset 3px 0 #f85149;
+      }
+      .diff-add {
+        background: rgba(63, 185, 80, 0.12);
+        box-shadow: inset 3px 0 #3fb950;
+      }
+      .diff-del .diff-sign {
+        color: #f85149;
+      }
+      .diff-add .diff-sign {
+        color: #3fb950;
+      }
+      .flight-block {
+        position: absolute;
+        white-space: pre;
+        font-size: 27px;
+        line-height: 40px;
+        padding: 11px 22px;
+        border-radius: 11px;
+        background: #0f1722;
+        border: 1px solid #233044;
+        box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
+        will-change: transform, opacity;
+      }
+      .flight-target {
+        position: absolute;
+        border: 1.5px dashed #2a3a4f;
+        border-radius: 14px;
+        opacity: 0;
+      }
     </style>
   </head>
   <body>
@@ -54,206 +242,566 @@
       <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>
+          <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>
         <div class="code-surface" id="surface"></div>
       </div>
     </div>
     <script>
-      window.__TOKENS = {"diff":{"lang":"js","theme":"github-dark","bg":"#24292e","fg":"#e1e4e8","states":[{"code":"function greet(name) {\n  console.log(\"hi \" + name)\n}","tokens":[{"key":"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-0","content":"function","color":"#F97583","fontStyle":0},{"key":"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-1","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-2","content":"greet","color":"#B392F0","fontStyle":0},{"key":"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-3","content":"(","color":"#E1E4E8","fontStyle":0},{"key":"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-4","content":"name","color":"#FFAB70","fontStyle":0},{"key":"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-5","content":") {","color":"#E1E4E8","fontStyle":0},{"key":"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-6","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-7","content":"  ","color":"#e1e4e8","fontStyle":0},{"key":"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-8","content":"console.","color":"#E1E4E8","fontStyle":0},{"key":"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-9","content":"log","color":"#B392F0","fontStyle":0},{"key":"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-10","content":"(","color":"#E1E4E8","fontStyle":0},{"key":"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-11","content":"\"hi \"","color":"#9ECBFF","fontStyle":0},{"key":"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-12","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-13","content":"+","color":"#F97583","fontStyle":0},{"key":"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-14","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-15","content":"name)","color":"#E1E4E8","fontStyle":0},{"key":"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-16","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-17","content":"}","color":"#E1E4E8","fontStyle":0},{"key":"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-18","content":"\n","color":"#e1e4e8","fontStyle":0}]},{"code":"function greet(name, lang) {\n  const msg = translate(\"hi\", lang)\n  console.log(`${msg} ${name}`)\n}","tokens":[{"key":"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-0","content":"function","color":"#F97583","fontStyle":0},{"key":"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-1","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-2","content":"greet","color":"#B392F0","fontStyle":0},{"key":"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-3","content":"(","color":"#E1E4E8","fontStyle":0},{"key":"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-4","content":"name","color":"#FFAB70","fontStyle":0},{"key":"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-5","content":",","color":"#E1E4E8","fontStyle":0},{"key":"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-6","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-7","content":"lang","color":"#FFAB70","fontStyle":0},{"key":"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-5","content":") {","color":"#E1E4E8","fontStyle":0},{"key":"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-6","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-7","content":"  ","color":"#E1E4E8","fontStyle":0},{"key":"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-11","content":"const","color":"#F97583","fontStyle":0},{"key":"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-12","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-13","content":"msg","color":"#79B8FF","fontStyle":0},{"key":"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-14","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-15","content":"=","color":"#F97583","fontStyle":0},{"key":"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-16","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-17","content":"translate","color":"#B392F0","fontStyle":0},{"key":"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-10","content":"(","color":"#E1E4E8","fontStyle":0},{"key":"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-19","content":"\"hi\"","color":"#9ECBFF","fontStyle":0},{"key":"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-20","content":", lang)","color":"#E1E4E8","fontStyle":0},{"key":"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-21","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-22","content":"  ","color":"#e1e4e8","fontStyle":0},{"key":"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-23","content":"console.","color":"#E1E4E8","fontStyle":0},{"key":"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-9","content":"log","color":"#B392F0","fontStyle":0},{"key":"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-25","content":"(","color":"#E1E4E8","fontStyle":0},{"key":"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-26","content":"`${","color":"#9ECBFF","fontStyle":0},{"key":"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-27","content":"msg","color":"#E1E4E8","fontStyle":0},{"key":"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-28","content":"} ${","color":"#9ECBFF","fontStyle":0},{"key":"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-29","content":"name","color":"#E1E4E8","fontStyle":0},{"key":"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-30","content":"}`","color":"#9ECBFF","fontStyle":0},{"key":"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-31","content":")","color":"#E1E4E8","fontStyle":0},{"key":"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-16","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-17","content":"}","color":"#E1E4E8","fontStyle":0},{"key":"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-34","content":"\n","color":"#e1e4e8","fontStyle":0}]}]}};
-      window.__BLOCK = {"id":"code-diff","effect":"diff","seq":"diff","duration":6};
+      window.__TOKENS = {
+        diff: {
+          lang: "js",
+          theme: "github-dark",
+          bg: "#24292e",
+          fg: "#e1e4e8",
+          states: [
+            {
+              code: 'function greet(name) {\n  console.log("hi " + name)\n}',
+              tokens: [
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-0",
+                  content: "function",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-1",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-2",
+                  content: "greet",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-3",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-4",
+                  content: "name",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-5",
+                  content: ") {",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-6",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-7",
+                  content: "  ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-8",
+                  content: "console.",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-9",
+                  content: "log",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-10",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-11",
+                  content: '"hi "',
+                  color: "#9ECBFF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-12",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-13",
+                  content: "+",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-14",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-15",
+                  content: "name)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-16",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-17",
+                  content: "}",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-18",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+              ],
+            },
+            {
+              code: 'function greet(name, lang) {\n  const msg = translate("hi", lang)\n  console.log(`${msg} ${name}`)\n}',
+              tokens: [
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-0",
+                  content: "function",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-1",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-2",
+                  content: "greet",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-3",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-4",
+                  content: "name",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-5",
+                  content: ",",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-6",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-7",
+                  content: "lang",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-5",
+                  content: ") {",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-6",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-7",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-11",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-12",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-13",
+                  content: "msg",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-14",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-15",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-16",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-17",
+                  content: "translate",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-10",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-19",
+                  content: '"hi"',
+                  color: "#9ECBFF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-20",
+                  content: ", lang)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-21",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-22",
+                  content: "  ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-23",
+                  content: "console.",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-9",
+                  content: "log",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-25",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-26",
+                  content: "`${",
+                  color: "#9ECBFF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-27",
+                  content: "msg",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-28",
+                  content: "} ${",
+                  color: "#9ECBFF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-29",
+                  content: "name",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-30",
+                  content: "}`",
+                  color: "#9ECBFF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-31",
+                  content: ")",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-16",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-17",
+                  content: "}",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-34",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+              ],
+            },
+          ],
+        },
+      };
+      window.__BLOCK = { id: "code-diff", effect: "diff", seq: "diff", duration: 6 };
     </script>
     <script>
-// 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
-// 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].
-(function () {
-  "use strict";
-  var T = window.__TOKENS || {};
-
-  function lineDiv() {
-    var d = document.createElement("div");
-    d.className = "line";
-    return d;
-  }
+      // 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
+      // 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].
+      (function () {
+        "use strict";
+        var T = window.__TOKENS || {};
 
-  // Render a code state's keyed tokens into codeEl as lines of inline-block .tok spans.
-  function renderState(codeEl, state) {
-    codeEl.textContent = "";
-    var keyToEl = new Map();
-    var line = lineDiv();
-    codeEl.appendChild(line);
-    for (var i = 0; i < state.tokens.length; i++) {
-      var t = state.tokens[i];
-      if (t.content === "\n") {
-        line = lineDiv();
-        codeEl.appendChild(line);
-        continue;
-      }
-      var span = document.createElement("span");
-      span.className = "tok";
-      span.textContent = t.content;
-      span.style.color = t.color;
-      if (t.fontStyle & 1) span.style.fontStyle = "italic";
-      if (t.fontStyle & 2) span.style.fontWeight = "700";
-      line.appendChild(span);
-      keyToEl.set(t.key, span);
-    }
-    var last = codeEl.lastChild;
-    if (last && last.className === "line" && last.children.length === 0) codeEl.removeChild(last);
-    return keyToEl;
-  }
+        function lineDiv() {
+          var d = document.createElement("div");
+          d.className = "line";
+          return d;
+        }
 
-  function rectsOf(keyToEl) {
-    var m = new Map();
-    keyToEl.forEach(function (el, k) {
-      var r = el.getBoundingClientRect();
-      m.set(k, { left: r.left, top: r.top });
-    });
-    return m;
-  }
+        // Render a code state's keyed tokens into codeEl as lines of inline-block .tok spans.
+        function renderState(codeEl, state) {
+          codeEl.textContent = "";
+          var keyToEl = new Map();
+          var line = lineDiv();
+          codeEl.appendChild(line);
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              line = lineDiv();
+              codeEl.appendChild(line);
+              continue;
+            }
+            var span = document.createElement("span");
+            span.className = "tok";
+            span.textContent = t.content;
+            span.style.color = t.color;
+            if (t.fontStyle & 1) span.style.fontStyle = "italic";
+            if (t.fontStyle & 2) span.style.fontWeight = "700";
+            line.appendChild(span);
+            keyToEl.set(t.key, span);
+          }
+          var last = codeEl.lastChild;
+          if (last && last.className === "line" && last.children.length === 0)
+            codeEl.removeChild(last);
+          return keyToEl;
+        }
 
-  function makeScene(surface, withGutter) {
-    var scene = document.createElement("div");
-    scene.className = "scene";
-    if (withGutter) {
-      var g = document.createElement("div");
-      g.className = "gutter";
-      scene.appendChild(g);
-    }
-    var code = document.createElement("div");
-    code.className = "code";
-    scene.appendChild(code);
-    surface.appendChild(scene);
-    return { scene: scene, code: code, gutter: scene.querySelector(".gutter") };
-  }
+        function rectsOf(keyToEl) {
+          var m = new Map();
+          keyToEl.forEach(function (el, k) {
+            var r = el.getBoundingClientRect();
+            m.set(k, { left: r.left, top: r.top });
+          });
+          return m;
+        }
 
-  function fillGutter(g, n) {
-    var html = "";
-    for (var i = 1; i <= n; i++) html += '<span class="ln">' + i + "</span>";
-    g.innerHTML = html;
-  }
+        function makeScene(surface, withGutter) {
+          var scene = document.createElement("div");
+          scene.className = "scene";
+          if (withGutter) {
+            var g = document.createElement("div");
+            g.className = "gutter";
+            scene.appendChild(g);
+          }
+          var code = document.createElement("div");
+          code.className = "code";
+          scene.appendChild(code);
+          surface.appendChild(scene);
+          return { scene: scene, code: code, gutter: scene.querySelector(".gutter") };
+        }
 
-  function splitLines(state) {
-    var lines = [{ text: "", tokens: [] }];
-    for (var i = 0; i < state.tokens.length; i++) {
-      var t = state.tokens[i];
-      if (t.content === "\n") {
-        lines.push({ text: "", tokens: [] });
-        continue;
-      }
-      var cur = lines[lines.length - 1];
-      cur.tokens.push(t);
-      cur.text += t.content;
-    }
-    if (lines.length && lines[lines.length - 1].tokens.length === 0) lines.pop();
-    return lines;
-  }
+        function fillGutter(g, n) {
+          var html = "";
+          for (var i = 1; i <= n; i++) html += '<span class="ln">' + i + "</span>";
+          g.innerHTML = html;
+        }
 
-  function lineDiff(a, b) {
-    var n = a.length;
-    var m = b.length;
-    var dp = [];
-    for (var i = 0; i <= n; i++) dp.push(new Array(m + 1).fill(0));
-    for (var i = n - 1; i >= 0; i--) {
-      for (var j = m - 1; j >= 0; j--) {
-        dp[i][j] = a[i].text === b[j].text ? dp[i + 1][j + 1] + 1 : Math.max(dp[i + 1][j], dp[i][j + 1]);
-      }
-    }
-    var ops = [];
-    var i = 0;
-    var j = 0;
-    while (i < n && j < m) {
-      if (a[i].text === b[j].text) {
-        ops.push({ type: "same", line: b[j] });
-        i++;
-        j++;
-      } else if (dp[i + 1][j] >= dp[i][j + 1]) {
-        ops.push({ type: "del", line: a[i] });
-        i++;
-      } else {
-        ops.push({ type: "add", line: b[j] });
-        j++;
-      }
-    }
-    while (i < n) ops.push({ type: "del", line: a[i++] });
-    while (j < m) ops.push({ type: "add", line: b[j++] });
-    return ops;
-  }
+        function splitLines(state) {
+          var lines = [{ text: "", tokens: [] }];
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              lines.push({ text: "", tokens: [] });
+              continue;
+            }
+            var cur = lines[lines.length - 1];
+            cur.tokens.push(t);
+            cur.text += t.content;
+          }
+          if (lines.length && lines[lines.length - 1].tokens.length === 0) lines.pop();
+          return lines;
+        }
 
-  // ---- single-scene effect builders (fade in, play, hold to end) -------------
-  var FADE = 0.45;
+        function lineDiff(a, b) {
+          var n = a.length;
+          var m = b.length;
+          var dp = [];
+          for (var i = 0; i <= n; i++) dp.push(new Array(m + 1).fill(0));
+          for (var i = n - 1; i >= 0; i--) {
+            for (var j = m - 1; j >= 0; j--) {
+              dp[i][j] =
+                a[i].text === b[j].text
+                  ? dp[i + 1][j + 1] + 1
+                  : Math.max(dp[i + 1][j], dp[i][j + 1]);
+            }
+          }
+          var ops = [];
+          var i = 0;
+          var j = 0;
+          while (i < n && j < m) {
+            if (a[i].text === b[j].text) {
+              ops.push({ type: "same", line: b[j] });
+              i++;
+              j++;
+            } else if (dp[i + 1][j] >= dp[i][j + 1]) {
+              ops.push({ type: "del", line: a[i] });
+              i++;
+            } else {
+              ops.push({ type: "add", line: b[j] });
+              j++;
+            }
+          }
+          while (i < n) ops.push({ type: "del", line: a[i++] });
+          while (j < m) ops.push({ type: "add", line: b[j++] });
+          return ops;
+        }
 
-  function diff(tl, surface, states, start) {
-    var DEL = 0.55;
-    var ADD = 0.6;
-    var ops = lineDiff(splitLines(states[0]), splitLines(states[1]));
-    var parts = makeScene(surface, false);
-    var code = parts.code;
-    var delEls = [];
-    var addEls = [];
-    ops.forEach(function (op) {
-      var ln = document.createElement("div");
-      ln.className = "diff-line" + (op.type === "del" ? " diff-del" : op.type === "add" ? " diff-add" : "");
-      var sign = document.createElement("span");
-      sign.className = "diff-sign";
-      sign.textContent = op.type === "del" ? "- " : op.type === "add" ? "+ " : "  ";
-      ln.appendChild(sign);
-      op.line.tokens.forEach(function (t) {
-        var s = document.createElement("span");
-        s.className = "tok";
-        s.textContent = t.content;
-        s.style.color = t.color;
-        ln.appendChild(s);
-      });
-      code.appendChild(ln);
-      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);
-    var atDel = start + FADE + 0.3;
-    delEls.forEach(function (el, k) {
-      tl.fromTo(el, { height: 46, opacity: 1 }, { height: 0, opacity: 0, duration: DEL, ease: "power2.inOut" }, atDel + k * 0.08);
-    });
-    var atAdd = atDel + DEL + 0.15;
-    addEls.forEach(function (el, k) {
-      tl.set(el, { height: 0, opacity: 0 }, 0);
-      tl.fromTo(el, { height: 0, opacity: 0 }, { height: 46, opacity: 1, duration: ADD, ease: "power2.out" }, atAdd + k * 0.12);
-    });
-  }
+        // ---- single-scene effect builders (fade in, play, hold to end) -------------
+        var FADE = 0.45;
 
-  function buildEffect(tl, surface, spec) {
-    var start = 0.45;
-    var seq = T[spec.seq];
-    if (spec.effect === "diff") diff(tl, surface, seq.states, start);
-  }
+        function diff(tl, surface, states, start) {
+          var DEL = 0.55;
+          var ADD = 0.6;
+          var ops = lineDiff(splitLines(states[0]), splitLines(states[1]));
+          var parts = makeScene(surface, false);
+          var code = parts.code;
+          var delEls = [];
+          var addEls = [];
+          ops.forEach(function (op) {
+            var ln = document.createElement("div");
+            ln.className =
+              "diff-line" +
+              (op.type === "del" ? " diff-del" : op.type === "add" ? " diff-add" : "");
+            var sign = document.createElement("span");
+            sign.className = "diff-sign";
+            sign.textContent = op.type === "del" ? "- " : op.type === "add" ? "+ " : "  ";
+            ln.appendChild(sign);
+            op.line.tokens.forEach(function (t) {
+              var s = document.createElement("span");
+              s.className = "tok";
+              s.textContent = t.content;
+              s.style.color = t.color;
+              ln.appendChild(s);
+            });
+            code.appendChild(ln);
+            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);
+          var atDel = start + FADE + 0.3;
+          delEls.forEach(function (el, k) {
+            tl.fromTo(
+              el,
+              { height: 46, opacity: 1 },
+              { height: 0, opacity: 0, duration: DEL, ease: "power2.inOut" },
+              atDel + k * 0.08,
+            );
+          });
+          var atAdd = atDel + DEL + 0.15;
+          addEls.forEach(function (el, k) {
+            tl.set(el, { height: 0, opacity: 0 }, 0);
+            tl.fromTo(
+              el,
+              { height: 0, opacity: 0 },
+              { height: 46, opacity: 1, duration: ADD, ease: "power2.out" },
+              atAdd + k * 0.12,
+            );
+          });
+        }
 
-  function go() {
-    var spec = window.__BLOCK;
-    var surface = document.getElementById("surface");
-    var root = document.getElementById("root");
-    window.__timelines = window.__timelines || {};
-    var tl = gsap.timeline({ paused: true });
-    window.__timelines["code-diff"] = tl; // register synchronously
-    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
-    });
-  }
+        function buildEffect(tl, surface, spec) {
+          var start = 0.45;
+          var seq = T[spec.seq];
+          if (spec.effect === "diff") diff(tl, surface, seq.states, start);
+        }
 
-  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
-  else go();
-})();
+        function go() {
+          var spec = window.__BLOCK;
+          var surface = document.getElementById("surface");
+          var root = document.getElementById("root");
+          window.__timelines = window.__timelines || {};
+          var tl = gsap.timeline({ paused: true });
+          window.__timelines["code-diff"] = tl; // register synchronously
+          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
+          });
+        }
 
+        if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
+        else go();
+      })();
     </script>
   </body>
 </html>
diff --git a/registry/blocks/code-highlight/code-highlight.html b/registry/blocks/code-highlight/code-highlight.html
index c246e1d2e2..70f7b66a6c 100644
--- a/registry/blocks/code-highlight/code-highlight.html
+++ b/registry/blocks/code-highlight/code-highlight.html
@@ -6,37 +6,225 @@
     <title>Code Highlight Sweep</title>
     <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
     <style>
-      * { margin: 0; padding: 0; box-sizing: border-box; }
-      html, body { width: 1920px; height: 1080px; overflow: hidden; background: #05070b; }
-      #root { position: relative; width: 1920px; height: 1080px; font-family: "JetBrains Mono", monospace; color: #e6edf3; }
-      .bg-field { position: absolute; inset: 0; background: radial-gradient(1200px 700px at 50% 18%, #0e1726 0%, #070b12 55%, #05070b 100%); }
-      .bg-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(88,166,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(88,166,255,0.05) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(1100px 620px at 50% 42%, #000 0%, transparent 78%); }
-      .bg-glow { position: absolute; width: 900px; height: 900px; border-radius: 50%; filter: blur(120px); opacity: 0.5; }
-      .bg-glow.a { background: #1f6feb55; left: -180px; top: -200px; }
-      .bg-glow.b { background: #2ea04355; right: -200px; bottom: -260px; }
-      .editor { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 1380px; height: 800px; background: #0b0f17; border: 1px solid #1d2733; border-radius: 16px; box-shadow: 0 40px 120px rgba(0,0,0,0.6), 0 2px 0 rgba(255,255,255,0.03) inset; overflow: hidden; display: flex; flex-direction: column; }
-      .titlebar { height: 56px; flex: 0 0 56px; display: flex; align-items: center; gap: 16px; padding: 0 22px; background: linear-gradient(#11161f, #0c111a); border-bottom: 1px solid #1b2430; }
-      .dots { display: flex; gap: 10px; }
-      .dot { width: 14px; height: 14px; border-radius: 50%; }
-      .dot.r { background: #ff5f57; } .dot.y { background: #febc2e; } .dot.g { background: #28c840; }
-      .filename { font-size: 19px; color: #8b98a9; letter-spacing: 0.2px; }
-      .filename .accent { color: #d6e2f0; }
-      .code-surface { position: relative; flex: 1 1 auto; overflow: hidden; }
-      .scene { position: absolute; inset: 0; opacity: 0; will-change: opacity; }
-      .code { position: absolute; top: 38px; left: 0; right: 0; padding: 0 44px 0 104px; font-size: 30px; line-height: 46px; font-variant-ligatures: none; tab-size: 2; }
-      .gutter { position: absolute; top: 38px; left: 0; width: 84px; padding-right: 18px; font-size: 30px; line-height: 46px; text-align: right; color: #828c9b; user-select: none; }
-      .ln { display: block; height: 46px; }
-      .line { display: block; min-height: 46px; white-space: pre; position: relative; z-index: 1; }
-      .tok { display: inline-block; white-space: pre; will-change: transform, opacity; }
-      .caret { position: absolute; top: 0; left: 0; width: 3px; height: 32px; margin-top: 6px; background: #58a6ff; border-radius: 1px; z-index: 3; }
-      .hl-box { position: absolute; background: rgba(88,166,255,0.16); border-left: 3px solid #58a6ff; border-radius: 6px; z-index: 0; overflow: hidden; }
-      .diff-line { display: block; min-height: 0; line-height: 46px; white-space: pre; position: relative; overflow: hidden; padding-left: 14px; }
-      .diff-sign { display: inline-block; width: 22px; color: #41506220; }
-      .diff-del { background: rgba(248,81,73,0.12); box-shadow: inset 3px 0 #f85149; }
-      .diff-add { background: rgba(63,185,80,0.12); box-shadow: inset 3px 0 #3fb950; }
-      .diff-del .diff-sign { color: #f85149; } .diff-add .diff-sign { color: #3fb950; }
-      .flight-block { position: absolute; white-space: pre; font-size: 27px; line-height: 40px; padding: 11px 22px; border-radius: 11px; background: #0f1722; border: 1px solid #233044; box-shadow: 0 16px 44px rgba(0,0,0,0.5); will-change: transform, opacity; }
-      .flight-target { position: absolute; border: 1.5px dashed #2a3a4f; border-radius: 14px; opacity: 0; }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #05070b;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        font-family: "JetBrains Mono", monospace;
+        color: #e6edf3;
+      }
+      .bg-field {
+        position: absolute;
+        inset: 0;
+        background: radial-gradient(1200px 700px at 50% 18%, #0e1726 0%, #070b12 55%, #05070b 100%);
+      }
+      .bg-grid {
+        position: absolute;
+        inset: 0;
+        background-image:
+          linear-gradient(rgba(88, 166, 255, 0.05) 1px, transparent 1px),
+          linear-gradient(90deg, rgba(88, 166, 255, 0.05) 1px, transparent 1px);
+        background-size: 64px 64px;
+        mask-image: radial-gradient(1100px 620px at 50% 42%, #000 0%, transparent 78%);
+      }
+      .bg-glow {
+        position: absolute;
+        width: 900px;
+        height: 900px;
+        border-radius: 50%;
+        filter: blur(120px);
+        opacity: 0.5;
+      }
+      .bg-glow.a {
+        background: #1f6feb55;
+        left: -180px;
+        top: -200px;
+      }
+      .bg-glow.b {
+        background: #2ea04355;
+        right: -200px;
+        bottom: -260px;
+      }
+      .editor {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 1380px;
+        height: 800px;
+        background: #0b0f17;
+        border: 1px solid #1d2733;
+        border-radius: 16px;
+        box-shadow:
+          0 40px 120px rgba(0, 0, 0, 0.6),
+          0 2px 0 rgba(255, 255, 255, 0.03) inset;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+      }
+      .titlebar {
+        height: 56px;
+        flex: 0 0 56px;
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        padding: 0 22px;
+        background: linear-gradient(#11161f, #0c111a);
+        border-bottom: 1px solid #1b2430;
+      }
+      .dots {
+        display: flex;
+        gap: 10px;
+      }
+      .dot {
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+      }
+      .dot.r {
+        background: #ff5f57;
+      }
+      .dot.y {
+        background: #febc2e;
+      }
+      .dot.g {
+        background: #28c840;
+      }
+      .filename {
+        font-size: 19px;
+        color: #8b98a9;
+        letter-spacing: 0.2px;
+      }
+      .filename .accent {
+        color: #d6e2f0;
+      }
+      .code-surface {
+        position: relative;
+        flex: 1 1 auto;
+        overflow: hidden;
+      }
+      .scene {
+        position: absolute;
+        inset: 0;
+        opacity: 0;
+        will-change: opacity;
+      }
+      .code {
+        position: absolute;
+        top: 38px;
+        left: 0;
+        right: 0;
+        padding: 0 44px 0 104px;
+        font-size: 30px;
+        line-height: 46px;
+        font-variant-ligatures: none;
+        tab-size: 2;
+      }
+      .gutter {
+        position: absolute;
+        top: 38px;
+        left: 0;
+        width: 84px;
+        padding-right: 18px;
+        font-size: 30px;
+        line-height: 46px;
+        text-align: right;
+        color: #828c9b;
+        user-select: none;
+      }
+      .ln {
+        display: block;
+        height: 46px;
+      }
+      .line {
+        display: block;
+        min-height: 46px;
+        white-space: pre;
+        position: relative;
+        z-index: 1;
+      }
+      .tok {
+        display: inline-block;
+        white-space: pre;
+        will-change: transform, opacity;
+      }
+      .caret {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 3px;
+        height: 32px;
+        margin-top: 6px;
+        background: #58a6ff;
+        border-radius: 1px;
+        z-index: 3;
+      }
+      .hl-box {
+        position: absolute;
+        background: rgba(88, 166, 255, 0.16);
+        border-left: 3px solid #58a6ff;
+        border-radius: 6px;
+        z-index: 0;
+        overflow: hidden;
+      }
+      .diff-line {
+        display: block;
+        min-height: 0;
+        line-height: 46px;
+        white-space: pre;
+        position: relative;
+        overflow: hidden;
+        padding-left: 14px;
+      }
+      .diff-sign {
+        display: inline-block;
+        width: 22px;
+        color: #41506220;
+      }
+      .diff-del {
+        background: rgba(248, 81, 73, 0.12);
+        box-shadow: inset 3px 0 #f85149;
+      }
+      .diff-add {
+        background: rgba(63, 185, 80, 0.12);
+        box-shadow: inset 3px 0 #3fb950;
+      }
+      .diff-del .diff-sign {
+        color: #f85149;
+      }
+      .diff-add .diff-sign {
+        color: #3fb950;
+      }
+      .flight-block {
+        position: absolute;
+        white-space: pre;
+        font-size: 27px;
+        line-height: 40px;
+        padding: 11px 22px;
+        border-radius: 11px;
+        background: #0f1722;
+        border: 1px solid #233044;
+        box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
+        will-change: transform, opacity;
+      }
+      .flight-target {
+        position: absolute;
+        border: 1.5px dashed #2a3a4f;
+        border-radius: 14px;
+        opacity: 0;
+      }
     </style>
   </head>
   <body>
@@ -54,193 +242,495 @@
       <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>
-          <span class="filename"><span class="accent">loadConfig.js</span> — Code Highlight Sweep</span>
+          <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>
         <div class="code-surface" id="surface"></div>
       </div>
     </div>
     <script>
-      window.__TOKENS = {"feature":{"lang":"js","theme":"github-dark","bg":"#24292e","fg":"#e1e4e8","states":[{"code":"async function loadConfig(path) {\n  const raw = await readFile(path, \"utf8\")\n  const config = JSON.parse(raw)\n  return validate(config)\n}","tokens":[{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-0","content":"async","color":"#F97583","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-1","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-2","content":"function","color":"#F97583","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-3","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-4","content":"loadConfig","color":"#B392F0","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-5","content":"(","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-6","content":"path","color":"#FFAB70","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-7","content":") {","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-8","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-9","content":"  ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-10","content":"const","color":"#F97583","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-11","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-12","content":"raw","color":"#79B8FF","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-13","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-14","content":"=","color":"#F97583","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-15","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-16","content":"await","color":"#F97583","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-17","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-18","content":"readFile","color":"#B392F0","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-19","content":"(path,","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-20","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-21","content":"\"utf8\"","color":"#9ECBFF","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-22","content":")","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-23","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-24","content":"  ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-25","content":"const","color":"#F97583","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-26","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-27","content":"config","color":"#79B8FF","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-28","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-29","content":"=","color":"#F97583","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-30","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-31","content":"JSON","color":"#79B8FF","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-32","content":".","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-33","content":"parse","color":"#B392F0","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-34","content":"(raw)","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-35","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-36","content":"  ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-37","content":"return","color":"#F97583","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-38","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-39","content":"validate","color":"#B392F0","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-40","content":"(config)","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-41","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-42","content":"}","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-43","content":"\n","color":"#e1e4e8","fontStyle":0}]}]}};
-      window.__BLOCK = {"id":"code-highlight","effect":"highlight","seq":"feature","line":1,"duration":5};
+      window.__TOKENS = {
+        feature: {
+          lang: "js",
+          theme: "github-dark",
+          bg: "#24292e",
+          fg: "#e1e4e8",
+          states: [
+            {
+              code: 'async function loadConfig(path) {\n  const raw = await readFile(path, "utf8")\n  const config = JSON.parse(raw)\n  return validate(config)\n}',
+              tokens: [
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-0",
+                  content: "async",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-1",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-2",
+                  content: "function",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-3",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-4",
+                  content: "loadConfig",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-5",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-6",
+                  content: "path",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-7",
+                  content: ") {",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-8",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-9",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-10",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-11",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-12",
+                  content: "raw",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-13",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-14",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-15",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-16",
+                  content: "await",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-17",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-18",
+                  content: "readFile",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-19",
+                  content: "(path,",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-20",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-21",
+                  content: '"utf8"',
+                  color: "#9ECBFF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-22",
+                  content: ")",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-23",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-24",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-25",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-26",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-27",
+                  content: "config",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-28",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-29",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-30",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-31",
+                  content: "JSON",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-32",
+                  content: ".",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-33",
+                  content: "parse",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-34",
+                  content: "(raw)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-35",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-36",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-37",
+                  content: "return",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-38",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-39",
+                  content: "validate",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-40",
+                  content: "(config)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-41",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-42",
+                  content: "}",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-43",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+              ],
+            },
+          ],
+        },
+      };
+      window.__BLOCK = {
+        id: "code-highlight",
+        effect: "highlight",
+        seq: "feature",
+        line: 1,
+        duration: 5,
+      };
     </script>
     <script>
-// 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
-// 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].
-(function () {
-  "use strict";
-  var T = window.__TOKENS || {};
-
-  function lineDiv() {
-    var d = document.createElement("div");
-    d.className = "line";
-    return d;
-  }
+      // 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
+      // 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].
+      (function () {
+        "use strict";
+        var T = window.__TOKENS || {};
 
-  // Render a code state's keyed tokens into codeEl as lines of inline-block .tok spans.
-  function renderState(codeEl, state) {
-    codeEl.textContent = "";
-    var keyToEl = new Map();
-    var line = lineDiv();
-    codeEl.appendChild(line);
-    for (var i = 0; i < state.tokens.length; i++) {
-      var t = state.tokens[i];
-      if (t.content === "\n") {
-        line = lineDiv();
-        codeEl.appendChild(line);
-        continue;
-      }
-      var span = document.createElement("span");
-      span.className = "tok";
-      span.textContent = t.content;
-      span.style.color = t.color;
-      if (t.fontStyle & 1) span.style.fontStyle = "italic";
-      if (t.fontStyle & 2) span.style.fontWeight = "700";
-      line.appendChild(span);
-      keyToEl.set(t.key, span);
-    }
-    var last = codeEl.lastChild;
-    if (last && last.className === "line" && last.children.length === 0) codeEl.removeChild(last);
-    return keyToEl;
-  }
+        function lineDiv() {
+          var d = document.createElement("div");
+          d.className = "line";
+          return d;
+        }
 
-  function rectsOf(keyToEl) {
-    var m = new Map();
-    keyToEl.forEach(function (el, k) {
-      var r = el.getBoundingClientRect();
-      m.set(k, { left: r.left, top: r.top });
-    });
-    return m;
-  }
+        // Render a code state's keyed tokens into codeEl as lines of inline-block .tok spans.
+        function renderState(codeEl, state) {
+          codeEl.textContent = "";
+          var keyToEl = new Map();
+          var line = lineDiv();
+          codeEl.appendChild(line);
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              line = lineDiv();
+              codeEl.appendChild(line);
+              continue;
+            }
+            var span = document.createElement("span");
+            span.className = "tok";
+            span.textContent = t.content;
+            span.style.color = t.color;
+            if (t.fontStyle & 1) span.style.fontStyle = "italic";
+            if (t.fontStyle & 2) span.style.fontWeight = "700";
+            line.appendChild(span);
+            keyToEl.set(t.key, span);
+          }
+          var last = codeEl.lastChild;
+          if (last && last.className === "line" && last.children.length === 0)
+            codeEl.removeChild(last);
+          return keyToEl;
+        }
 
-  function makeScene(surface, withGutter) {
-    var scene = document.createElement("div");
-    scene.className = "scene";
-    if (withGutter) {
-      var g = document.createElement("div");
-      g.className = "gutter";
-      scene.appendChild(g);
-    }
-    var code = document.createElement("div");
-    code.className = "code";
-    scene.appendChild(code);
-    surface.appendChild(scene);
-    return { scene: scene, code: code, gutter: scene.querySelector(".gutter") };
-  }
+        function rectsOf(keyToEl) {
+          var m = new Map();
+          keyToEl.forEach(function (el, k) {
+            var r = el.getBoundingClientRect();
+            m.set(k, { left: r.left, top: r.top });
+          });
+          return m;
+        }
 
-  function fillGutter(g, n) {
-    var html = "";
-    for (var i = 1; i <= n; i++) html += '<span class="ln">' + i + "</span>";
-    g.innerHTML = html;
-  }
+        function makeScene(surface, withGutter) {
+          var scene = document.createElement("div");
+          scene.className = "scene";
+          if (withGutter) {
+            var g = document.createElement("div");
+            g.className = "gutter";
+            scene.appendChild(g);
+          }
+          var code = document.createElement("div");
+          code.className = "code";
+          scene.appendChild(code);
+          surface.appendChild(scene);
+          return { scene: scene, code: code, gutter: scene.querySelector(".gutter") };
+        }
 
-  function splitLines(state) {
-    var lines = [{ text: "", tokens: [] }];
-    for (var i = 0; i < state.tokens.length; i++) {
-      var t = state.tokens[i];
-      if (t.content === "\n") {
-        lines.push({ text: "", tokens: [] });
-        continue;
-      }
-      var cur = lines[lines.length - 1];
-      cur.tokens.push(t);
-      cur.text += t.content;
-    }
-    if (lines.length && lines[lines.length - 1].tokens.length === 0) lines.pop();
-    return lines;
-  }
+        function fillGutter(g, n) {
+          var html = "";
+          for (var i = 1; i <= n; i++) html += '<span class="ln">' + i + "</span>";
+          g.innerHTML = html;
+        }
 
-  function lineDiff(a, b) {
-    var n = a.length;
-    var m = b.length;
-    var dp = [];
-    for (var i = 0; i <= n; i++) dp.push(new Array(m + 1).fill(0));
-    for (var i = n - 1; i >= 0; i--) {
-      for (var j = m - 1; j >= 0; j--) {
-        dp[i][j] = a[i].text === b[j].text ? dp[i + 1][j + 1] + 1 : Math.max(dp[i + 1][j], dp[i][j + 1]);
-      }
-    }
-    var ops = [];
-    var i = 0;
-    var j = 0;
-    while (i < n && j < m) {
-      if (a[i].text === b[j].text) {
-        ops.push({ type: "same", line: b[j] });
-        i++;
-        j++;
-      } else if (dp[i + 1][j] >= dp[i][j + 1]) {
-        ops.push({ type: "del", line: a[i] });
-        i++;
-      } else {
-        ops.push({ type: "add", line: b[j] });
-        j++;
-      }
-    }
-    while (i < n) ops.push({ type: "del", line: a[i++] });
-    while (j < m) ops.push({ type: "add", line: b[j++] });
-    return ops;
-  }
+        function splitLines(state) {
+          var lines = [{ text: "", tokens: [] }];
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              lines.push({ text: "", tokens: [] });
+              continue;
+            }
+            var cur = lines[lines.length - 1];
+            cur.tokens.push(t);
+            cur.text += t.content;
+          }
+          if (lines.length && lines[lines.length - 1].tokens.length === 0) lines.pop();
+          return lines;
+        }
 
-  // ---- single-scene effect builders (fade in, play, hold to end) -------------
-  var FADE = 0.45;
+        function lineDiff(a, b) {
+          var n = a.length;
+          var m = b.length;
+          var dp = [];
+          for (var i = 0; i <= n; i++) dp.push(new Array(m + 1).fill(0));
+          for (var i = n - 1; i >= 0; i--) {
+            for (var j = m - 1; j >= 0; j--) {
+              dp[i][j] =
+                a[i].text === b[j].text
+                  ? dp[i + 1][j + 1] + 1
+                  : Math.max(dp[i + 1][j], dp[i][j + 1]);
+            }
+          }
+          var ops = [];
+          var i = 0;
+          var j = 0;
+          while (i < n && j < m) {
+            if (a[i].text === b[j].text) {
+              ops.push({ type: "same", line: b[j] });
+              i++;
+              j++;
+            } else if (dp[i + 1][j] >= dp[i][j + 1]) {
+              ops.push({ type: "del", line: a[i] });
+              i++;
+            } else {
+              ops.push({ type: "add", line: b[j] });
+              j++;
+            }
+          }
+          while (i < n) ops.push({ type: "del", line: a[i++] });
+          while (j < m) ops.push({ type: "add", line: b[j++] });
+          return ops;
+        }
 
-  function highlight(tl, surface, state, start, targetIdx) {
-    var SWEEP = 0.9;
-    var parts = makeScene(surface, true);
-    var code = parts.code;
-    renderState(code, state);
-    var lines = code.querySelectorAll(".line");
-    fillGutter(parts.gutter, lines.length);
-    var base = code.getBoundingClientRect();
-    var idx = Math.max(0, Math.min(lines.length - 1, targetIdx));
-    var lr = lines[idx].getBoundingClientRect();
-    var box = document.createElement("div");
-    box.className = "hl-box";
-    box.style.left = lr.left - base.left - 8 + "px";
-    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);
-    var at = start + FADE + 0.2;
-    tl.fromTo(box, { width: 0, opacity: 0 }, { width: lr.width + 18, opacity: 1, duration: SWEEP, ease: "power2.inOut" }, at);
-    for (var i = 0; i < lines.length; i++) {
-      if (i === idx) continue;
-      tl.fromTo(lines[i], { opacity: 1 }, { opacity: 0.45, duration: SWEEP, ease: "power2.inOut" }, at);
-    }
-  }
+        // ---- single-scene effect builders (fade in, play, hold to end) -------------
+        var FADE = 0.45;
 
-  function buildEffect(tl, surface, spec) {
-    var start = 0.45;
-    var seq = T[spec.seq];
-    if (spec.effect === "highlight") highlight(tl, surface, seq.states[0], start, spec.line || 0);
-  }
+        function highlight(tl, surface, state, start, targetIdx) {
+          var SWEEP = 0.9;
+          var parts = makeScene(surface, true);
+          var code = parts.code;
+          renderState(code, state);
+          var lines = code.querySelectorAll(".line");
+          fillGutter(parts.gutter, lines.length);
+          var base = code.getBoundingClientRect();
+          var idx = Math.max(0, Math.min(lines.length - 1, targetIdx));
+          var lr = lines[idx].getBoundingClientRect();
+          var box = document.createElement("div");
+          box.className = "hl-box";
+          box.style.left = lr.left - base.left - 8 + "px";
+          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);
+          var at = start + FADE + 0.2;
+          tl.fromTo(
+            box,
+            { width: 0, opacity: 0 },
+            { width: lr.width + 18, opacity: 1, duration: SWEEP, ease: "power2.inOut" },
+            at,
+          );
+          for (var i = 0; i < lines.length; i++) {
+            if (i === idx) continue;
+            tl.fromTo(
+              lines[i],
+              { opacity: 1 },
+              { opacity: 0.45, duration: SWEEP, ease: "power2.inOut" },
+              at,
+            );
+          }
+        }
 
-  function go() {
-    var spec = window.__BLOCK;
-    var surface = document.getElementById("surface");
-    var root = document.getElementById("root");
-    window.__timelines = window.__timelines || {};
-    var tl = gsap.timeline({ paused: true });
-    window.__timelines["code-highlight"] = tl; // register synchronously
-    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
-    });
-  }
+        function buildEffect(tl, surface, spec) {
+          var start = 0.45;
+          var seq = T[spec.seq];
+          if (spec.effect === "highlight")
+            highlight(tl, surface, seq.states[0], start, spec.line || 0);
+        }
 
-  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
-  else go();
-})();
+        function go() {
+          var spec = window.__BLOCK;
+          var surface = document.getElementById("surface");
+          var root = document.getElementById("root");
+          window.__timelines = window.__timelines || {};
+          var tl = gsap.timeline({ paused: true });
+          window.__timelines["code-highlight"] = tl; // register synchronously
+          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
+          });
+        }
 
+        if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
+        else go();
+      })();
     </script>
   </body>
 </html>
diff --git a/registry/blocks/code-morph/code-morph.html b/registry/blocks/code-morph/code-morph.html
index ae4693bd23..23d0b808bd 100644
--- a/registry/blocks/code-morph/code-morph.html
+++ b/registry/blocks/code-morph/code-morph.html
@@ -6,37 +6,225 @@
     <title>Code Morph</title>
     <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
     <style>
-      * { margin: 0; padding: 0; box-sizing: border-box; }
-      html, body { width: 1920px; height: 1080px; overflow: hidden; background: #05070b; }
-      #root { position: relative; width: 1920px; height: 1080px; font-family: "JetBrains Mono", monospace; color: #e6edf3; }
-      .bg-field { position: absolute; inset: 0; background: radial-gradient(1200px 700px at 50% 18%, #0e1726 0%, #070b12 55%, #05070b 100%); }
-      .bg-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(88,166,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(88,166,255,0.05) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(1100px 620px at 50% 42%, #000 0%, transparent 78%); }
-      .bg-glow { position: absolute; width: 900px; height: 900px; border-radius: 50%; filter: blur(120px); opacity: 0.5; }
-      .bg-glow.a { background: #1f6feb55; left: -180px; top: -200px; }
-      .bg-glow.b { background: #2ea04355; right: -200px; bottom: -260px; }
-      .editor { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 1380px; height: 800px; background: #0b0f17; border: 1px solid #1d2733; border-radius: 16px; box-shadow: 0 40px 120px rgba(0,0,0,0.6), 0 2px 0 rgba(255,255,255,0.03) inset; overflow: hidden; display: flex; flex-direction: column; }
-      .titlebar { height: 56px; flex: 0 0 56px; display: flex; align-items: center; gap: 16px; padding: 0 22px; background: linear-gradient(#11161f, #0c111a); border-bottom: 1px solid #1b2430; }
-      .dots { display: flex; gap: 10px; }
-      .dot { width: 14px; height: 14px; border-radius: 50%; }
-      .dot.r { background: #ff5f57; } .dot.y { background: #febc2e; } .dot.g { background: #28c840; }
-      .filename { font-size: 19px; color: #8b98a9; letter-spacing: 0.2px; }
-      .filename .accent { color: #d6e2f0; }
-      .code-surface { position: relative; flex: 1 1 auto; overflow: hidden; }
-      .scene { position: absolute; inset: 0; opacity: 0; will-change: opacity; }
-      .code { position: absolute; top: 38px; left: 0; right: 0; padding: 0 44px 0 104px; font-size: 30px; line-height: 46px; font-variant-ligatures: none; tab-size: 2; }
-      .gutter { position: absolute; top: 38px; left: 0; width: 84px; padding-right: 18px; font-size: 30px; line-height: 46px; text-align: right; color: #828c9b; user-select: none; }
-      .ln { display: block; height: 46px; }
-      .line { display: block; min-height: 46px; white-space: pre; position: relative; z-index: 1; }
-      .tok { display: inline-block; white-space: pre; will-change: transform, opacity; }
-      .caret { position: absolute; top: 0; left: 0; width: 3px; height: 32px; margin-top: 6px; background: #58a6ff; border-radius: 1px; z-index: 3; }
-      .hl-box { position: absolute; background: rgba(88,166,255,0.16); border-left: 3px solid #58a6ff; border-radius: 6px; z-index: 0; overflow: hidden; }
-      .diff-line { display: block; min-height: 0; line-height: 46px; white-space: pre; position: relative; overflow: hidden; padding-left: 14px; }
-      .diff-sign { display: inline-block; width: 22px; color: #41506220; }
-      .diff-del { background: rgba(248,81,73,0.12); box-shadow: inset 3px 0 #f85149; }
-      .diff-add { background: rgba(63,185,80,0.12); box-shadow: inset 3px 0 #3fb950; }
-      .diff-del .diff-sign { color: #f85149; } .diff-add .diff-sign { color: #3fb950; }
-      .flight-block { position: absolute; white-space: pre; font-size: 27px; line-height: 40px; padding: 11px 22px; border-radius: 11px; background: #0f1722; border: 1px solid #233044; box-shadow: 0 16px 44px rgba(0,0,0,0.5); will-change: transform, opacity; }
-      .flight-target { position: absolute; border: 1.5px dashed #2a3a4f; border-radius: 14px; opacity: 0; }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #05070b;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        font-family: "JetBrains Mono", monospace;
+        color: #e6edf3;
+      }
+      .bg-field {
+        position: absolute;
+        inset: 0;
+        background: radial-gradient(1200px 700px at 50% 18%, #0e1726 0%, #070b12 55%, #05070b 100%);
+      }
+      .bg-grid {
+        position: absolute;
+        inset: 0;
+        background-image:
+          linear-gradient(rgba(88, 166, 255, 0.05) 1px, transparent 1px),
+          linear-gradient(90deg, rgba(88, 166, 255, 0.05) 1px, transparent 1px);
+        background-size: 64px 64px;
+        mask-image: radial-gradient(1100px 620px at 50% 42%, #000 0%, transparent 78%);
+      }
+      .bg-glow {
+        position: absolute;
+        width: 900px;
+        height: 900px;
+        border-radius: 50%;
+        filter: blur(120px);
+        opacity: 0.5;
+      }
+      .bg-glow.a {
+        background: #1f6feb55;
+        left: -180px;
+        top: -200px;
+      }
+      .bg-glow.b {
+        background: #2ea04355;
+        right: -200px;
+        bottom: -260px;
+      }
+      .editor {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 1380px;
+        height: 800px;
+        background: #0b0f17;
+        border: 1px solid #1d2733;
+        border-radius: 16px;
+        box-shadow:
+          0 40px 120px rgba(0, 0, 0, 0.6),
+          0 2px 0 rgba(255, 255, 255, 0.03) inset;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+      }
+      .titlebar {
+        height: 56px;
+        flex: 0 0 56px;
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        padding: 0 22px;
+        background: linear-gradient(#11161f, #0c111a);
+        border-bottom: 1px solid #1b2430;
+      }
+      .dots {
+        display: flex;
+        gap: 10px;
+      }
+      .dot {
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+      }
+      .dot.r {
+        background: #ff5f57;
+      }
+      .dot.y {
+        background: #febc2e;
+      }
+      .dot.g {
+        background: #28c840;
+      }
+      .filename {
+        font-size: 19px;
+        color: #8b98a9;
+        letter-spacing: 0.2px;
+      }
+      .filename .accent {
+        color: #d6e2f0;
+      }
+      .code-surface {
+        position: relative;
+        flex: 1 1 auto;
+        overflow: hidden;
+      }
+      .scene {
+        position: absolute;
+        inset: 0;
+        opacity: 0;
+        will-change: opacity;
+      }
+      .code {
+        position: absolute;
+        top: 38px;
+        left: 0;
+        right: 0;
+        padding: 0 44px 0 104px;
+        font-size: 30px;
+        line-height: 46px;
+        font-variant-ligatures: none;
+        tab-size: 2;
+      }
+      .gutter {
+        position: absolute;
+        top: 38px;
+        left: 0;
+        width: 84px;
+        padding-right: 18px;
+        font-size: 30px;
+        line-height: 46px;
+        text-align: right;
+        color: #828c9b;
+        user-select: none;
+      }
+      .ln {
+        display: block;
+        height: 46px;
+      }
+      .line {
+        display: block;
+        min-height: 46px;
+        white-space: pre;
+        position: relative;
+        z-index: 1;
+      }
+      .tok {
+        display: inline-block;
+        white-space: pre;
+        will-change: transform, opacity;
+      }
+      .caret {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 3px;
+        height: 32px;
+        margin-top: 6px;
+        background: #58a6ff;
+        border-radius: 1px;
+        z-index: 3;
+      }
+      .hl-box {
+        position: absolute;
+        background: rgba(88, 166, 255, 0.16);
+        border-left: 3px solid #58a6ff;
+        border-radius: 6px;
+        z-index: 0;
+        overflow: hidden;
+      }
+      .diff-line {
+        display: block;
+        min-height: 0;
+        line-height: 46px;
+        white-space: pre;
+        position: relative;
+        overflow: hidden;
+        padding-left: 14px;
+      }
+      .diff-sign {
+        display: inline-block;
+        width: 22px;
+        color: #41506220;
+      }
+      .diff-del {
+        background: rgba(248, 81, 73, 0.12);
+        box-shadow: inset 3px 0 #f85149;
+      }
+      .diff-add {
+        background: rgba(63, 185, 80, 0.12);
+        box-shadow: inset 3px 0 #3fb950;
+      }
+      .diff-del .diff-sign {
+        color: #f85149;
+      }
+      .diff-add .diff-sign {
+        color: #3fb950;
+      }
+      .flight-block {
+        position: absolute;
+        white-space: pre;
+        font-size: 27px;
+        line-height: 40px;
+        padding: 11px 22px;
+        border-radius: 11px;
+        background: #0f1722;
+        border: 1px solid #233044;
+        box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
+        will-change: transform, opacity;
+      }
+      .flight-target {
+        position: absolute;
+        border: 1.5px dashed #2a3a4f;
+        border-radius: 14px;
+        opacity: 0;
+      }
     </style>
   </head>
   <body>
@@ -54,218 +242,966 @@
       <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>
+          <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>
         <div class="code-surface" id="surface"></div>
       </div>
     </div>
     <script>
-      window.__TOKENS = {"morph":{"lang":"js","theme":"github-dark","bg":"#24292e","fg":"#e1e4e8","states":[{"code":"function activeNames(users) {\n  const out = []\n  for (const u of users) {\n    if (u.active) {\n      out.push(u.name)\n    }\n  }\n  return out\n}","tokens":[{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-0","content":"function","color":"#F97583","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-1","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-2","content":"activeNames","color":"#B392F0","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-3","content":"(","color":"#E1E4E8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-4","content":"users","color":"#FFAB70","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-5","content":") {","color":"#E1E4E8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-6","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-7","content":"  ","color":"#E1E4E8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-8","content":"const","color":"#F97583","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-9","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-10","content":"out","color":"#79B8FF","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-11","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-12","content":"=","color":"#F97583","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-13","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-14","content":"[]","color":"#E1E4E8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-15","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-16","content":"  ","color":"#E1E4E8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-17","content":"for","color":"#F97583","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-18","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-19","content":"(","color":"#E1E4E8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-20","content":"const","color":"#F97583","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-21","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-22","content":"u","color":"#79B8FF","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-23","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-24","content":"of","color":"#F97583","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-25","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-26","content":"users) {","color":"#E1E4E8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-27","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-28","content":"    ","color":"#E1E4E8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-29","content":"if","color":"#F97583","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-30","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-31","content":"(u.active) {","color":"#E1E4E8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-32","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-33","content":"      ","color":"#e1e4e8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-34","content":"out.","color":"#E1E4E8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-35","content":"push","color":"#B392F0","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-36","content":"(u.name)","color":"#E1E4E8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-37","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-38","content":"    ","color":"#e1e4e8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-39","content":"}","color":"#E1E4E8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-40","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-41","content":"  ","color":"#e1e4e8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-42","content":"}","color":"#E1E4E8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-43","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-44","content":"  ","color":"#E1E4E8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-45","content":"return","color":"#F97583","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-46","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-47","content":"out","color":"#E1E4E8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-48","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-49","content":"}","color":"#E1E4E8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-50","content":"\n","color":"#e1e4e8","fontStyle":0}]},{"code":"function activeNames(users) {\n  return users\n    .filter((u) => u.active)\n    .map((u) => u.name)\n}","tokens":[{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-0","content":"function","color":"#F97583","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-1","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-2","content":"activeNames","color":"#B392F0","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-3","content":"(","color":"#E1E4E8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-4","content":"users","color":"#FFAB70","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-5","content":") {","color":"#E1E4E8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-6","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-7","content":"  ","color":"#E1E4E8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-45","content":"return","color":"#F97583","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-25","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-10","content":"users","color":"#E1E4E8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-27","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-28","content":"    ","color":"#e1e4e8","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-13","content":".","color":"#E1E4E8","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-14","content":"filter","color":"#B392F0","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-15","content":"((","color":"#E1E4E8","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-16","content":"u","color":"#FFAB70","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-17","content":")","color":"#E1E4E8","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-18","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-19","content":"=>","color":"#F97583","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-20","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-21","content":"u.active)","color":"#E1E4E8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-32","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-23","content":"    ","color":"#e1e4e8","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-24","content":".","color":"#E1E4E8","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-25","content":"map","color":"#B392F0","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-26","content":"((","color":"#E1E4E8","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-27","content":"u","color":"#FFAB70","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-28","content":")","color":"#E1E4E8","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-29","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-30","content":"=>","color":"#F97583","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-31","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-32","content":"u.name)","color":"#E1E4E8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-48","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-49","content":"}","color":"#E1E4E8","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-35","content":"\n","color":"#e1e4e8","fontStyle":0}]},{"code":"const activeNames = (users) =>\n  users.filter((u) => u.active).map((u) => u.name)","tokens":[{"key":"VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-0","content":"const","color":"#F97583","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-1","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-2","content":"activeNames","color":"#B392F0","fontStyle":0},{"key":"VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-3","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-4","content":"=","color":"#F97583","fontStyle":0},{"key":"VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-5","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-3","content":"(","color":"#E1E4E8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-4","content":"users","color":"#FFAB70","fontStyle":0},{"key":"VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-8","content":")","color":"#E1E4E8","fontStyle":0},{"key":"VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-9","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-10","content":"=>","color":"#F97583","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-6","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-7","content":"  ","color":"#e1e4e8","fontStyle":0},{"key":"VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-13","content":"users.","color":"#E1E4E8","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-14","content":"filter","color":"#B392F0","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-15","content":"((","color":"#E1E4E8","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-16","content":"u","color":"#FFAB70","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-17","content":")","color":"#E1E4E8","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-18","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-19","content":"=>","color":"#F97583","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-20","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-21","content":"u.active).","color":"#E1E4E8","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-25","content":"map","color":"#B392F0","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-26","content":"((","color":"#E1E4E8","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-27","content":"u","color":"#FFAB70","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-28","content":")","color":"#E1E4E8","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-29","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-30","content":"=>","color":"#F97583","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-31","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-32","content":"u.name)","color":"#E1E4E8","fontStyle":0},{"key":"VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-30","content":"\n","color":"#e1e4e8","fontStyle":0}]}]}};
-      window.__BLOCK = {"id":"code-morph","effect":"morph","seq":"morph","duration":7};
+      window.__TOKENS = {
+        morph: {
+          lang: "js",
+          theme: "github-dark",
+          bg: "#24292e",
+          fg: "#e1e4e8",
+          states: [
+            {
+              code: "function activeNames(users) {\n  const out = []\n  for (const u of users) {\n    if (u.active) {\n      out.push(u.name)\n    }\n  }\n  return out\n}",
+              tokens: [
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-0",
+                  content: "function",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-1",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-2",
+                  content: "activeNames",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-3",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-4",
+                  content: "users",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-5",
+                  content: ") {",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-6",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-7",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-8",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-9",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-10",
+                  content: "out",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-11",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-12",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-13",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-14",
+                  content: "[]",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-15",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-16",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-17",
+                  content: "for",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-18",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-19",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-20",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-21",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-22",
+                  content: "u",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-23",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-24",
+                  content: "of",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-25",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-26",
+                  content: "users) {",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-27",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-28",
+                  content: "    ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-29",
+                  content: "if",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-30",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-31",
+                  content: "(u.active) {",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-32",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-33",
+                  content: "      ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-34",
+                  content: "out.",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-35",
+                  content: "push",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-36",
+                  content: "(u.name)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-37",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-38",
+                  content: "    ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-39",
+                  content: "}",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-40",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-41",
+                  content: "  ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-42",
+                  content: "}",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-43",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-44",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-45",
+                  content: "return",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-46",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-47",
+                  content: "out",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-48",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-49",
+                  content: "}",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-50",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+              ],
+            },
+            {
+              code: "function activeNames(users) {\n  return users\n    .filter((u) => u.active)\n    .map((u) => u.name)\n}",
+              tokens: [
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-0",
+                  content: "function",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-1",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-2",
+                  content: "activeNames",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-3",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-4",
+                  content: "users",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-5",
+                  content: ") {",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-6",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-7",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-45",
+                  content: "return",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-25",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-10",
+                  content: "users",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-27",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-28",
+                  content: "    ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-13",
+                  content: ".",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-14",
+                  content: "filter",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-15",
+                  content: "((",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-16",
+                  content: "u",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-17",
+                  content: ")",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-18",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-19",
+                  content: "=>",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-20",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-21",
+                  content: "u.active)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-32",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-23",
+                  content: "    ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-24",
+                  content: ".",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-25",
+                  content: "map",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-26",
+                  content: "((",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-27",
+                  content: "u",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-28",
+                  content: ")",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-29",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-30",
+                  content: "=>",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-31",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-32",
+                  content: "u.name)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-48",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-49",
+                  content: "}",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-35",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+              ],
+            },
+            {
+              code: "const activeNames = (users) =>\n  users.filter((u) => u.active).map((u) => u.name)",
+              tokens: [
+                {
+                  key: "VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-0",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-1",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-2",
+                  content: "activeNames",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-3",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-4",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-5",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-3",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-4",
+                  content: "users",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-8",
+                  content: ")",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-9",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-10",
+                  content: "=>",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-6",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-7",
+                  content: "  ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-13",
+                  content: "users.",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-14",
+                  content: "filter",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-15",
+                  content: "((",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-16",
+                  content: "u",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-17",
+                  content: ")",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-18",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-19",
+                  content: "=>",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-20",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-21",
+                  content: "u.active).",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-25",
+                  content: "map",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-26",
+                  content: "((",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-27",
+                  content: "u",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-28",
+                  content: ")",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-29",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-30",
+                  content: "=>",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-31",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-32",
+                  content: "u.name)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-30",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+              ],
+            },
+          ],
+        },
+      };
+      window.__BLOCK = { id: "code-morph", effect: "morph", seq: "morph", duration: 7 };
     </script>
     <script>
-// 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
-// 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].
-(function () {
-  "use strict";
-  var T = window.__TOKENS || {};
+      // 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
+      // 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].
+      (function () {
+        "use strict";
+        var T = window.__TOKENS || {};
 
-  function lineDiv() {
-    var d = document.createElement("div");
-    d.className = "line";
-    return d;
-  }
+        function lineDiv() {
+          var d = document.createElement("div");
+          d.className = "line";
+          return d;
+        }
 
-  // Render a code state's keyed tokens into codeEl as lines of inline-block .tok spans.
-  function renderState(codeEl, state) {
-    codeEl.textContent = "";
-    var keyToEl = new Map();
-    var line = lineDiv();
-    codeEl.appendChild(line);
-    for (var i = 0; i < state.tokens.length; i++) {
-      var t = state.tokens[i];
-      if (t.content === "\n") {
-        line = lineDiv();
-        codeEl.appendChild(line);
-        continue;
-      }
-      var span = document.createElement("span");
-      span.className = "tok";
-      span.textContent = t.content;
-      span.style.color = t.color;
-      if (t.fontStyle & 1) span.style.fontStyle = "italic";
-      if (t.fontStyle & 2) span.style.fontWeight = "700";
-      line.appendChild(span);
-      keyToEl.set(t.key, span);
-    }
-    var last = codeEl.lastChild;
-    if (last && last.className === "line" && last.children.length === 0) codeEl.removeChild(last);
-    return keyToEl;
-  }
+        // Render a code state's keyed tokens into codeEl as lines of inline-block .tok spans.
+        function renderState(codeEl, state) {
+          codeEl.textContent = "";
+          var keyToEl = new Map();
+          var line = lineDiv();
+          codeEl.appendChild(line);
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              line = lineDiv();
+              codeEl.appendChild(line);
+              continue;
+            }
+            var span = document.createElement("span");
+            span.className = "tok";
+            span.textContent = t.content;
+            span.style.color = t.color;
+            if (t.fontStyle & 1) span.style.fontStyle = "italic";
+            if (t.fontStyle & 2) span.style.fontWeight = "700";
+            line.appendChild(span);
+            keyToEl.set(t.key, span);
+          }
+          var last = codeEl.lastChild;
+          if (last && last.className === "line" && last.children.length === 0)
+            codeEl.removeChild(last);
+          return keyToEl;
+        }
 
-  function rectsOf(keyToEl) {
-    var m = new Map();
-    keyToEl.forEach(function (el, k) {
-      var r = el.getBoundingClientRect();
-      m.set(k, { left: r.left, top: r.top });
-    });
-    return m;
-  }
+        function rectsOf(keyToEl) {
+          var m = new Map();
+          keyToEl.forEach(function (el, k) {
+            var r = el.getBoundingClientRect();
+            m.set(k, { left: r.left, top: r.top });
+          });
+          return m;
+        }
 
-  function makeScene(surface, withGutter) {
-    var scene = document.createElement("div");
-    scene.className = "scene";
-    if (withGutter) {
-      var g = document.createElement("div");
-      g.className = "gutter";
-      scene.appendChild(g);
-    }
-    var code = document.createElement("div");
-    code.className = "code";
-    scene.appendChild(code);
-    surface.appendChild(scene);
-    return { scene: scene, code: code, gutter: scene.querySelector(".gutter") };
-  }
+        function makeScene(surface, withGutter) {
+          var scene = document.createElement("div");
+          scene.className = "scene";
+          if (withGutter) {
+            var g = document.createElement("div");
+            g.className = "gutter";
+            scene.appendChild(g);
+          }
+          var code = document.createElement("div");
+          code.className = "code";
+          scene.appendChild(code);
+          surface.appendChild(scene);
+          return { scene: scene, code: code, gutter: scene.querySelector(".gutter") };
+        }
 
-  function fillGutter(g, n) {
-    var html = "";
-    for (var i = 1; i <= n; i++) html += '<span class="ln">' + i + "</span>";
-    g.innerHTML = html;
-  }
+        function fillGutter(g, n) {
+          var html = "";
+          for (var i = 1; i <= n; i++) html += '<span class="ln">' + i + "</span>";
+          g.innerHTML = html;
+        }
 
-  function splitLines(state) {
-    var lines = [{ text: "", tokens: [] }];
-    for (var i = 0; i < state.tokens.length; i++) {
-      var t = state.tokens[i];
-      if (t.content === "\n") {
-        lines.push({ text: "", tokens: [] });
-        continue;
-      }
-      var cur = lines[lines.length - 1];
-      cur.tokens.push(t);
-      cur.text += t.content;
-    }
-    if (lines.length && lines[lines.length - 1].tokens.length === 0) lines.pop();
-    return lines;
-  }
+        function splitLines(state) {
+          var lines = [{ text: "", tokens: [] }];
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              lines.push({ text: "", tokens: [] });
+              continue;
+            }
+            var cur = lines[lines.length - 1];
+            cur.tokens.push(t);
+            cur.text += t.content;
+          }
+          if (lines.length && lines[lines.length - 1].tokens.length === 0) lines.pop();
+          return lines;
+        }
 
-  function lineDiff(a, b) {
-    var n = a.length;
-    var m = b.length;
-    var dp = [];
-    for (var i = 0; i <= n; i++) dp.push(new Array(m + 1).fill(0));
-    for (var i = n - 1; i >= 0; i--) {
-      for (var j = m - 1; j >= 0; j--) {
-        dp[i][j] = a[i].text === b[j].text ? dp[i + 1][j + 1] + 1 : Math.max(dp[i + 1][j], dp[i][j + 1]);
-      }
-    }
-    var ops = [];
-    var i = 0;
-    var j = 0;
-    while (i < n && j < m) {
-      if (a[i].text === b[j].text) {
-        ops.push({ type: "same", line: b[j] });
-        i++;
-        j++;
-      } else if (dp[i + 1][j] >= dp[i][j + 1]) {
-        ops.push({ type: "del", line: a[i] });
-        i++;
-      } else {
-        ops.push({ type: "add", line: b[j] });
-        j++;
-      }
-    }
-    while (i < n) ops.push({ type: "del", line: a[i++] });
-    while (j < m) ops.push({ type: "add", line: b[j++] });
-    return ops;
-  }
+        function lineDiff(a, b) {
+          var n = a.length;
+          var m = b.length;
+          var dp = [];
+          for (var i = 0; i <= n; i++) dp.push(new Array(m + 1).fill(0));
+          for (var i = n - 1; i >= 0; i--) {
+            for (var j = m - 1; j >= 0; j--) {
+              dp[i][j] =
+                a[i].text === b[j].text
+                  ? dp[i + 1][j + 1] + 1
+                  : Math.max(dp[i + 1][j], dp[i][j + 1]);
+            }
+          }
+          var ops = [];
+          var i = 0;
+          var j = 0;
+          while (i < n && j < m) {
+            if (a[i].text === b[j].text) {
+              ops.push({ type: "same", line: b[j] });
+              i++;
+              j++;
+            } else if (dp[i + 1][j] >= dp[i][j + 1]) {
+              ops.push({ type: "del", line: a[i] });
+              i++;
+            } else {
+              ops.push({ type: "add", line: b[j] });
+              j++;
+            }
+          }
+          while (i < n) ops.push({ type: "del", line: a[i++] });
+          while (j < m) ops.push({ type: "add", line: b[j++] });
+          return ops;
+        }
 
-  // ---- single-scene effect builders (fade in, play, hold to end) -------------
-  var FADE = 0.45;
+        // ---- single-scene effect builders (fade in, play, hold to end) -------------
+        var FADE = 0.45;
 
-  function morph(tl, surface, states, start) {
-    var STEP = 1.2;
-    var HOLD = 1.0;
-    var t = start;
-    for (var s = 0; s < states.length - 1; s++) {
-      var parts = makeScene(surface, false);
-      var code = parts.code;
-      var fromEls = renderState(code, states[s]);
-      var fromR = rectsOf(fromEls);
-      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;
-      toEls.forEach(function (el, k) {
-        var fr = fromR.get(k);
-        var tr = toR.get(k);
-        if (fr) {
-          seg.fromTo(el, { x: fr.left - tr.left, y: fr.top - tr.top }, { x: 0, y: 0, duration: STEP, ease: "power2.inOut" }, 0);
-        } else {
-          seg.fromTo(el, { opacity: 0 }, { opacity: 1, duration: FD, ease: "power1.out" }, ENTER_AT);
+        function morph(tl, surface, states, start) {
+          var STEP = 1.2;
+          var HOLD = 1.0;
+          var t = start;
+          for (var s = 0; s < states.length - 1; s++) {
+            var parts = makeScene(surface, false);
+            var code = parts.code;
+            var fromEls = renderState(code, states[s]);
+            var fromR = rectsOf(fromEls);
+            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;
+            toEls.forEach(function (el, k) {
+              var fr = fromR.get(k);
+              var tr = toR.get(k);
+              if (fr) {
+                seg.fromTo(
+                  el,
+                  { x: fr.left - tr.left, y: fr.top - tr.top },
+                  { x: 0, y: 0, duration: STEP, ease: "power2.inOut" },
+                  0,
+                );
+              } else {
+                seg.fromTo(
+                  el,
+                  { opacity: 0 },
+                  { opacity: 1, duration: FD, ease: "power1.out" },
+                  ENTER_AT,
+                );
+              }
+            });
+            var toKeys = new Set(toEls.keys());
+            var fromState = states[s];
+            for (var i = 0; i < fromState.tokens.length; i++) {
+              var tok = fromState.tokens[i];
+              if (tok.content === "\n" || toKeys.has(tok.key) || !fromR.has(tok.key)) continue;
+              var r = fromR.get(tok.key);
+              var span = document.createElement("span");
+              span.className = "tok";
+              span.textContent = tok.content;
+              span.style.position = "absolute";
+              span.style.left = r.left - base.left + "px";
+              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);
+            }
+            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);
+            if (!isLast)
+              tl.to(parts.scene, { opacity: 0, duration: FADE, ease: "power1.in" }, segEnd - FADE);
+            tl.add(seg, segStart);
+            t = segEnd - FADE;
+          }
         }
-      });
-      var toKeys = new Set(toEls.keys());
-      var fromState = states[s];
-      for (var i = 0; i < fromState.tokens.length; i++) {
-        var tok = fromState.tokens[i];
-        if (tok.content === "\n" || toKeys.has(tok.key) || !fromR.has(tok.key)) continue;
-        var r = fromR.get(tok.key);
-        var span = document.createElement("span");
-        span.className = "tok";
-        span.textContent = tok.content;
-        span.style.position = "absolute";
-        span.style.left = r.left - base.left + "px";
-        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);
-      }
-      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);
-      if (!isLast) tl.to(parts.scene, { opacity: 0, duration: FADE, ease: "power1.in" }, segEnd - FADE);
-      tl.add(seg, segStart);
-      t = segEnd - FADE;
-    }
-  }
-
-  function buildEffect(tl, surface, spec) {
-    var start = 0.45;
-    var seq = T[spec.seq];
-    if (spec.effect === "morph") morph(tl, surface, seq.states, start);
-  }
 
-  function go() {
-    var spec = window.__BLOCK;
-    var surface = document.getElementById("surface");
-    var root = document.getElementById("root");
-    window.__timelines = window.__timelines || {};
-    var tl = gsap.timeline({ paused: true });
-    window.__timelines["code-morph"] = tl; // register synchronously
-    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
-    });
-  }
+        function buildEffect(tl, surface, spec) {
+          var start = 0.45;
+          var seq = T[spec.seq];
+          if (spec.effect === "morph") morph(tl, surface, seq.states, start);
+        }
 
-  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
-  else go();
-})();
+        function go() {
+          var spec = window.__BLOCK;
+          var surface = document.getElementById("surface");
+          var root = document.getElementById("root");
+          window.__timelines = window.__timelines || {};
+          var tl = gsap.timeline({ paused: true });
+          window.__timelines["code-morph"] = tl; // register synchronously
+          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
+          });
+        }
 
+        if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
+        else go();
+      })();
     </script>
   </body>
 </html>
diff --git a/registry/blocks/code-particle-assemble/code-particle-assemble.html b/registry/blocks/code-particle-assemble/code-particle-assemble.html
index 9b808fa6fb..5734fdab50 100644
--- a/registry/blocks/code-particle-assemble/code-particle-assemble.html
+++ b/registry/blocks/code-particle-assemble/code-particle-assemble.html
@@ -7,10 +7,30 @@
     <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js"></script>
     <style>
-      * { margin: 0; padding: 0; box-sizing: border-box; }
-      html, body { width: 1920px; height: 1080px; overflow: hidden; background: #05070b; }
-      #root { position: relative; width: 1920px; height: 1080px; }
-      #gl { position: absolute; inset: 0; width: 1920px; height: 1080px; display: block; }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #05070b;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+      }
+      #gl {
+        position: absolute;
+        inset: 0;
+        width: 1920px;
+        height: 1080px;
+        display: block;
+      }
     </style>
   </head>
   <body>
@@ -25,270 +45,435 @@
       <canvas id="gl" width="1920" height="1080"></canvas>
     </div>
     <script>
-      window.__TOKENS = {"assemble":{"lang":"js","theme":"github-dark","bg":"#24292e","fg":"#e1e4e8","states":[{"code":"const app = pipe(\n  parse,\n  optimize,\n  emit,\n)","tokens":[{"key":"AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-0","content":"const","color":"#F97583","fontStyle":0},{"key":"AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-1","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-2","content":"app","color":"#79B8FF","fontStyle":0},{"key":"AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-3","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-4","content":"=","color":"#F97583","fontStyle":0},{"key":"AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-5","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-6","content":"pipe","color":"#B392F0","fontStyle":0},{"key":"AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-7","content":"(","color":"#E1E4E8","fontStyle":0},{"key":"AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-8","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-9","content":"  ","color":"#e1e4e8","fontStyle":0},{"key":"AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-10","content":"parse,","color":"#E1E4E8","fontStyle":0},{"key":"AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-11","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-12","content":"  ","color":"#e1e4e8","fontStyle":0},{"key":"AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-13","content":"optimize,","color":"#E1E4E8","fontStyle":0},{"key":"AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-14","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-15","content":"  ","color":"#e1e4e8","fontStyle":0},{"key":"AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-16","content":"emit,","color":"#E1E4E8","fontStyle":0},{"key":"AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-17","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-18","content":")","color":"#E1E4E8","fontStyle":0},{"key":"AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-19","content":"\n","color":"#e1e4e8","fontStyle":0}]}]}};
-      window.__BLOCK = {"id":"code-particle-assemble","effect":"particles","seq":"assemble","duration":8,"seed":23};
+      window.__TOKENS = {
+        assemble: {
+          lang: "js",
+          theme: "github-dark",
+          bg: "#24292e",
+          fg: "#e1e4e8",
+          states: [
+            {
+              code: "const app = pipe(\n  parse,\n  optimize,\n  emit,\n)",
+              tokens: [
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-0",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-1",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-2",
+                  content: "app",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-3",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-4",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-5",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-6",
+                  content: "pipe",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-7",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-8",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-9",
+                  content: "  ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-10",
+                  content: "parse,",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-11",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-12",
+                  content: "  ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-13",
+                  content: "optimize,",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-14",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-15",
+                  content: "  ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-16",
+                  content: "emit,",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-17",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-18",
+                  content: ")",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-19",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+              ],
+            },
+          ],
+        },
+      };
+      window.__BLOCK = {
+        id: "code-particle-assemble",
+        effect: "particles",
+        seq: "assemble",
+        duration: 8,
+        seed: 23,
+      };
     </script>
     <script>
-// hf-code-anim-gl.js — WebGL code-animation engine for the "crazy" Code Animations blocks.
-//
-// 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
-//   - 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
-//
-// Each block sets window.__BLOCK = { id, effect, seq, duration, seed } and includes this engine.
-(function () {
-  "use strict";
-  var T = window.__TOKENS || {};
+      // hf-code-anim-gl.js — WebGL code-animation engine for the "crazy" Code Animations blocks.
+      //
+      // 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
+      //   - 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
+      //
+      // Each block sets window.__BLOCK = { id, effect, seq, duration, seed } and includes this engine.
+      (function () {
+        "use strict";
+        var T = window.__TOKENS || {};
 
-  // ---- seeded PRNG (no Math.random) -----------------------------------------
-  function mulberry32(a) {
-    return function () {
-      a |= 0;
-      a = (a + 0x6d2b79f5) | 0;
-      var t = Math.imul(a ^ (a >>> 15), 1 | a);
-      t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
-      return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
-    };
-  }
+        // ---- seeded PRNG (no Math.random) -----------------------------------------
+        function mulberry32(a) {
+          return function () {
+            a |= 0;
+            a = (a + 0x6d2b79f5) | 0;
+            var t = Math.imul(a ^ (a >>> 15), 1 | a);
+            t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+            return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+          };
+        }
 
-  // ---- split a token state into lines of {content,color} --------------------
-  function splitLines(state) {
-    var lines = [[]];
-    for (var i = 0; i < state.tokens.length; i++) {
-      var t = state.tokens[i];
-      if (t.content === "\n") {
-        lines.push([]);
-        continue;
-      }
-      lines[lines.length - 1].push(t);
-    }
-    while (lines.length && lines[lines.length - 1].length === 0) lines.pop();
-    return lines;
-  }
+        // ---- split a token state into lines of {content,color} --------------------
+        function splitLines(state) {
+          var lines = [[]];
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              lines.push([]);
+              continue;
+            }
+            lines[lines.length - 1].push(t);
+          }
+          while (lines.length && lines[lines.length - 1].length === 0) lines.pop();
+          return lines;
+        }
 
-  // ---- THE BRIDGE: draw baked tokens to an offscreen 2D canvas ---------------
-  // Returns { canvas, W, H, lines, lineH, padY, fontPx } so effects can sample it.
-  function drawCodeToCanvas(state, opts) {
-    opts = opts || {};
-    var fontPx = opts.fontPx || 36;
-    var lineH = opts.lineH || 54;
-    var padX = opts.padX || 70;
-    var padY = opts.padY || 60;
-    var weight = opts.weight || 500;
-    var font = weight + " " + fontPx + 'px "JetBrains Mono", monospace';
+        // ---- THE BRIDGE: draw baked tokens to an offscreen 2D canvas ---------------
+        // Returns { canvas, W, H, lines, lineH, padY, fontPx } so effects can sample it.
+        function drawCodeToCanvas(state, opts) {
+          opts = opts || {};
+          var fontPx = opts.fontPx || 36;
+          var lineH = opts.lineH || 54;
+          var padX = opts.padX || 70;
+          var padY = opts.padY || 60;
+          var weight = opts.weight || 500;
+          var font = weight + " " + fontPx + 'px "JetBrains Mono", monospace';
 
-    var lines = splitLines(state);
-    var measure = document.createElement("canvas").getContext("2d");
-    measure.font = font;
-    var maxW = 0;
-    for (var i = 0; i < lines.length; i++) {
-      var w = 0;
-      for (var j = 0; j < lines[i].length; j++) w += measure.measureText(lines[i][j].content).width;
-      if (w > maxW) maxW = w;
-    }
-    var W = Math.max(2, Math.ceil(maxW + padX * 2));
-    var H = Math.max(2, Math.ceil(lines.length * lineH + padY * 2));
+          var lines = splitLines(state);
+          var measure = document.createElement("canvas").getContext("2d");
+          measure.font = font;
+          var maxW = 0;
+          for (var i = 0; i < lines.length; i++) {
+            var w = 0;
+            for (var j = 0; j < lines[i].length; j++)
+              w += measure.measureText(lines[i][j].content).width;
+            if (w > maxW) maxW = w;
+          }
+          var W = Math.max(2, Math.ceil(maxW + padX * 2));
+          var H = Math.max(2, Math.ceil(lines.length * lineH + padY * 2));
 
-    var canvas = document.createElement("canvas");
-    canvas.width = W;
-    canvas.height = H;
-    var ctx = canvas.getContext("2d");
-    if (opts.transparent) {
-      ctx.clearRect(0, 0, W, H);
-    } else {
-      ctx.fillStyle = opts.bg || "#0b0f17";
-      ctx.fillRect(0, 0, W, H);
-    }
-    ctx.textBaseline = "top";
-    ctx.font = font;
-    for (var li = 0; li < lines.length; li++) {
-      var x = padX;
-      var y = padY + li * lineH;
-      for (var k = 0; k < lines[li].length; k++) {
-        var tok = lines[li][k];
-        ctx.fillStyle = tok.color;
-        ctx.fillText(tok.content, x, y);
-        x += ctx.measureText(tok.content).width;
-      }
-    }
-    return { canvas: canvas, W: W, H: H, lines: lines.length, lineH: lineH, padY: padY, fontPx: fontPx };
-  }
-
-  function fxParticles(THREE, scene, camera, renderer, state, st, tl, dur, seed) {
-    scene.background = new THREE.Color(0x05070b);
-    var code = drawCodeToCanvas(state, { fontPx: 46, lineH: 70, padX: 70, padY: 64, weight: 700 });
-    var cw = code.W;
-    var ch = code.H;
-    var data = code.canvas.getContext("2d").getImageData(0, 0, cw, ch).data;
-    var rng = mulberry32(((seed || 1) * 2654435761) >>> 0);
+          var canvas = document.createElement("canvas");
+          canvas.width = W;
+          canvas.height = H;
+          var ctx = canvas.getContext("2d");
+          if (opts.transparent) {
+            ctx.clearRect(0, 0, W, H);
+          } else {
+            ctx.fillStyle = opts.bg || "#0b0f17";
+            ctx.fillRect(0, 0, W, H);
+          }
+          ctx.textBaseline = "top";
+          ctx.font = font;
+          for (var li = 0; li < lines.length; li++) {
+            var x = padX;
+            var y = padY + li * lineH;
+            for (var k = 0; k < lines[li].length; k++) {
+              var tok = lines[li][k];
+              ctx.fillStyle = tok.color;
+              ctx.fillText(tok.content, x, y);
+              x += ctx.measureText(tok.content).width;
+            }
+          }
+          return {
+            canvas: canvas,
+            W: W,
+            H: H,
+            lines: lines.length,
+            lineH: lineH,
+            padY: padY,
+            fontPx: fontPx,
+          };
+        }
 
-    var worldW = 13.0;
-    var worldH = worldW * (ch / cw);
+        function fxParticles(THREE, scene, camera, renderer, state, st, tl, dur, seed) {
+          scene.background = new THREE.Color(0x05070b);
+          var code = drawCodeToCanvas(state, {
+            fontPx: 46,
+            lineH: 70,
+            padX: 70,
+            padY: 64,
+            weight: 700,
+          });
+          var cw = code.W;
+          var ch = code.H;
+          var data = code.canvas.getContext("2d").getImageData(0, 0, cw, ch).data;
+          var rng = mulberry32(((seed || 1) * 2654435761) >>> 0);
 
-    // sample glyph pixels (brighter than the dark bg) on a fixed grid
-    var step = 2;
-    var tx = [];
-    var col = [];
-    for (var y = 0; y < ch; y += step) {
-      for (var x = 0; x < cw; x += step) {
-        var idx = (y * cw + x) * 4;
-        var r = data[idx];
-        var g = data[idx + 1];
-        var b = data[idx + 2];
-        if (r + g + b < 120) continue; // skip background
-        tx.push((x / cw - 0.5) * worldW, -(y / ch - 0.5) * worldH, 0);
-        col.push(r / 255, g / 255, b / 255);
-      }
-    }
-    var n = tx.length / 3;
+          var worldW = 13.0;
+          var worldH = worldW * (ch / cw);
 
-    var positions = new Float32Array(n * 3);
-    var aOrigin = new Float32Array(n * 3);
-    var aTarget = new Float32Array(tx);
-    var aColor = new Float32Array(col);
-    var aDelay = new Float32Array(n);
-    for (var i = 0; i < n; i++) {
-      var sx = (rng() * 2 - 1) * worldW * 1.15;
-      var sy = (rng() * 2 - 1) * worldH * 1.7;
-      var sz = (rng() * 2 - 1) * 9.0 - 2.0;
-      aOrigin[i * 3] = sx;
-      aOrigin[i * 3 + 1] = sy;
-      aOrigin[i * 3 + 2] = sz;
-      positions[i * 3] = sx;
-      positions[i * 3 + 1] = sy;
-      positions[i * 3 + 2] = sz;
-      aDelay[i] = rng();
-    }
+          // sample glyph pixels (brighter than the dark bg) on a fixed grid
+          var step = 2;
+          var tx = [];
+          var col = [];
+          for (var y = 0; y < ch; y += step) {
+            for (var x = 0; x < cw; x += step) {
+              var idx = (y * cw + x) * 4;
+              var r = data[idx];
+              var g = data[idx + 1];
+              var b = data[idx + 2];
+              if (r + g + b < 120) continue; // skip background
+              tx.push((x / cw - 0.5) * worldW, -(y / ch - 0.5) * worldH, 0);
+              col.push(r / 255, g / 255, b / 255);
+            }
+          }
+          var n = tx.length / 3;
 
-    var geo = new THREE.BufferGeometry();
-    geo.setAttribute("position", new THREE.BufferAttribute(positions, 3));
-    geo.setAttribute("aOrigin", new THREE.BufferAttribute(aOrigin, 3));
-    geo.setAttribute("aTarget", new THREE.BufferAttribute(aTarget, 3));
-    geo.setAttribute("aColor", new THREE.BufferAttribute(aColor, 3));
-    geo.setAttribute("aDelay", new THREE.BufferAttribute(aDelay, 1));
+          var positions = new Float32Array(n * 3);
+          var aOrigin = new Float32Array(n * 3);
+          var aTarget = new Float32Array(tx);
+          var aColor = new Float32Array(col);
+          var aDelay = new Float32Array(n);
+          for (var i = 0; i < n; i++) {
+            var sx = (rng() * 2 - 1) * worldW * 1.15;
+            var sy = (rng() * 2 - 1) * worldH * 1.7;
+            var sz = (rng() * 2 - 1) * 9.0 - 2.0;
+            aOrigin[i * 3] = sx;
+            aOrigin[i * 3 + 1] = sy;
+            aOrigin[i * 3 + 2] = sz;
+            positions[i * 3] = sx;
+            positions[i * 3 + 1] = sy;
+            positions[i * 3 + 2] = sz;
+            aDelay[i] = rng();
+          }
 
-    var uniforms = { uProgress: { value: 0 }, uSize: { value: 3.4 } };
-    var mat = new THREE.ShaderMaterial({
-      uniforms: uniforms,
-      transparent: true,
-      depthTest: false,
-      depthWrite: false,
-      blending: THREE.NormalBlending,
-      vertexShader: [
-        "attribute vec3 aOrigin; attribute vec3 aTarget; attribute vec3 aColor; attribute float aDelay;",
-        "uniform float uProgress; uniform float uSize;",
-        "varying vec3 vColor; varying float vP;",
-        "void main(){",
-        "  float span = 0.62;",
-        "  float p = clamp((uProgress - aDelay*(1.0-span)) / span, 0.0, 1.0);",
-        "  p = p*p*(3.0-2.0*p);",
-        "  vec3 pos = mix(aOrigin, aTarget, p);",
-        "  vec4 mv = modelViewMatrix * vec4(pos, 1.0);",
-        "  gl_Position = projectionMatrix * mv;",
-        "  gl_PointSize = uSize * (60.0 / -mv.z) * (0.45 + 0.55*p);",
-        "  vColor = aColor; vP = p;",
-        "}",
-      ].join("\n"),
-      fragmentShader: [
-        "precision highp float;",
-        "varying vec3 vColor; varying float vP;",
-        "void main(){",
-        "  vec2 d = gl_PointCoord - 0.5;",
-        "  float r2 = dot(d, d);",
-        "  if (r2 > 0.25) discard;",
-        "  float a = smoothstep(0.25, 0.02, r2);",
-        // brighter & whiter in flight, resolves to true color as it lands
-        "  vec3 c = mix(vColor + vec3(0.32)*(1.0-vP), vColor, vP);",
-        "  gl_FragColor = vec4(c, a * (0.7 + 0.3*vP));",
-        "}",
-      ].join("\n"),
-    });
+          var geo = new THREE.BufferGeometry();
+          geo.setAttribute("position", new THREE.BufferAttribute(positions, 3));
+          geo.setAttribute("aOrigin", new THREE.BufferAttribute(aOrigin, 3));
+          geo.setAttribute("aTarget", new THREE.BufferAttribute(aTarget, 3));
+          geo.setAttribute("aColor", new THREE.BufferAttribute(aColor, 3));
+          geo.setAttribute("aDelay", new THREE.BufferAttribute(aDelay, 1));
 
-    var pts = new THREE.Points(geo, mat);
-    scene.add(pts);
+          var uniforms = { uProgress: { value: 0 }, uSize: { value: 3.4 } };
+          var mat = new THREE.ShaderMaterial({
+            uniforms: uniforms,
+            transparent: true,
+            depthTest: false,
+            depthWrite: false,
+            blending: THREE.NormalBlending,
+            vertexShader: [
+              "attribute vec3 aOrigin; attribute vec3 aTarget; attribute vec3 aColor; attribute float aDelay;",
+              "uniform float uProgress; uniform float uSize;",
+              "varying vec3 vColor; varying float vP;",
+              "void main(){",
+              "  float span = 0.62;",
+              "  float p = clamp((uProgress - aDelay*(1.0-span)) / span, 0.0, 1.0);",
+              "  p = p*p*(3.0-2.0*p);",
+              "  vec3 pos = mix(aOrigin, aTarget, p);",
+              "  vec4 mv = modelViewMatrix * vec4(pos, 1.0);",
+              "  gl_Position = projectionMatrix * mv;",
+              "  gl_PointSize = uSize * (60.0 / -mv.z) * (0.45 + 0.55*p);",
+              "  vColor = aColor; vP = p;",
+              "}",
+            ].join("\n"),
+            fragmentShader: [
+              "precision highp float;",
+              "varying vec3 vColor; varying float vP;",
+              "void main(){",
+              "  vec2 d = gl_PointCoord - 0.5;",
+              "  float r2 = dot(d, d);",
+              "  if (r2 > 0.25) discard;",
+              "  float a = smoothstep(0.25, 0.02, r2);",
+              // brighter & whiter in flight, resolves to true color as it lands
+              "  vec3 c = mix(vColor + vec3(0.32)*(1.0-vP), vColor, vP);",
+              "  gl_FragColor = vec4(c, a * (0.7 + 0.3*vP));",
+              "}",
+            ].join("\n"),
+          });
 
-    camera.position.set(0, 0, 10);
-    var vfov = (camera.fov * Math.PI) / 180;
-    var sa = 1920 / 1080;
-    var fitH = worldH / 2 / Math.tan(vfov / 2) / 0.78;
-    var fitW = worldW / 2 / (Math.tan(vfov / 2) * sa) / 0.78;
-    camera.position.z = Math.max(fitH, fitW);
-    camera.lookAt(0, 0, 0);
+          var pts = new THREE.Points(geo, mat);
+          scene.add(pts);
 
-    tl.to(uniforms.uProgress, { value: 1.0, duration: dur * 0.72, ease: "power2.out" }, 0);
+          camera.position.set(0, 0, 10);
+          var vfov = (camera.fov * Math.PI) / 180;
+          var sa = 1920 / 1080;
+          var fitH = worldH / 2 / Math.tan(vfov / 2) / 0.78;
+          var fitW = worldW / 2 / (Math.tan(vfov / 2) * sa) / 0.78;
+          camera.position.z = Math.max(fitH, fitW);
+          camera.lookAt(0, 0, 0);
 
-    // uProgress is tweened by GSAP; the boot loop's render() draws once per frame.
-    return function () {};
-  }
+          tl.to(uniforms.uProgress, { value: 1.0, duration: dur * 0.72, ease: "power2.out" }, 0);
 
-  // ---- dispatch + boot ------------------------------------------------------
-  function buildEffect(THREE, scene, camera, renderer, spec, st, tl) {
-    var state = T[spec.seq].states[0];
-    var dur = spec.duration;
-    if (spec.effect === "particles") return fxParticles(THREE, scene, camera, renderer, state, st, tl, dur, spec.seed);
-    return function () {};
-  }
+          // uProgress is tweened by GSAP; the boot loop's render() draws once per frame.
+          return function () {};
+        }
 
-  // Free GPU resources (renderer, geometries, materials, textures) on page teardown.
-  // One-shot renders exit per job so nothing leaks there; this guards long-lived
-  // Studio/player sessions that reload. Fires only on unload — never during capture.
-  function disposeGL(renderer, scene) {
-    scene.traverse(function (o) {
-      if (o.geometry && o.geometry.dispose) o.geometry.dispose();
-      var mats = o.material ? (Array.isArray(o.material) ? o.material : [o.material]) : [];
-      mats.forEach(function (m) {
-        if (m.map && m.map.dispose) m.map.dispose();
-        if (m.uniforms && m.uniforms.uTex && m.uniforms.uTex.value && m.uniforms.uTex.value.dispose) {
-          m.uniforms.uTex.value.dispose();
+        // ---- dispatch + boot ------------------------------------------------------
+        function buildEffect(THREE, scene, camera, renderer, spec, st, tl) {
+          var state = T[spec.seq].states[0];
+          var dur = spec.duration;
+          if (spec.effect === "particles")
+            return fxParticles(THREE, scene, camera, renderer, state, st, tl, dur, spec.seed);
+          return function () {};
         }
-        if (m.dispose) m.dispose();
-      });
-    });
-    if (renderer.dispose) renderer.dispose();
-  }
 
-  function go() {
-    var spec = window.__BLOCK;
-    var root = document.getElementById("root");
-    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
+        // Free GPU resources (renderer, geometries, materials, textures) on page teardown.
+        // One-shot renders exit per job so nothing leaks there; this guards long-lived
+        // Studio/player sessions that reload. Fires only on unload — never during capture.
+        function disposeGL(renderer, scene) {
+          scene.traverse(function (o) {
+            if (o.geometry && o.geometry.dispose) o.geometry.dispose();
+            var mats = o.material ? (Array.isArray(o.material) ? o.material : [o.material]) : [];
+            mats.forEach(function (m) {
+              if (m.map && m.map.dispose) m.map.dispose();
+              if (
+                m.uniforms &&
+                m.uniforms.uTex &&
+                m.uniforms.uTex.value &&
+                m.uniforms.uTex.value.dispose
+              ) {
+                m.uniforms.uTex.value.dispose();
+              }
+              if (m.dispose) m.dispose();
+            });
+          });
+          if (renderer.dispose) renderer.dispose();
+        }
 
-    var THREE = window.THREE;
-    var renderer = new THREE.WebGLRenderer({ canvas: glcanvas, antialias: true, alpha: false, preserveDrawingBuffer: true });
-    renderer.setPixelRatio(1);
-    renderer.setSize(W, H, false);
-    var scene = new THREE.Scene();
-    var camera = new THREE.PerspectiveCamera(45, W / H, 0.1, 200);
-    var st = {};
+        function go() {
+          var spec = window.__BLOCK;
+          var root = document.getElementById("root");
+          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
 
-    document.fonts.ready.then(function () {
-      var renderFn = buildEffect(THREE, scene, camera, renderer, spec, st, tl);
-      function render() {
-        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
-      render(); // paint frame 0
-      window.addEventListener("beforeunload", function () {
-        disposeGL(renderer, scene);
-      });
-    });
-  }
+          var THREE = window.THREE;
+          var renderer = new THREE.WebGLRenderer({
+            canvas: glcanvas,
+            antialias: true,
+            alpha: false,
+            preserveDrawingBuffer: true,
+          });
+          renderer.setPixelRatio(1);
+          renderer.setSize(W, H, false);
+          var scene = new THREE.Scene();
+          var camera = new THREE.PerspectiveCamera(45, W / H, 0.1, 200);
+          var st = {};
 
-  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
-  else go();
-})();
+          document.fonts.ready.then(function () {
+            var renderFn = buildEffect(THREE, scene, camera, renderer, spec, st, tl);
+            function render() {
+              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
+            render(); // paint frame 0
+            window.addEventListener("beforeunload", function () {
+              disposeGL(renderer, scene);
+            });
+          });
+        }
 
+        if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
+        else go();
+      })();
     </script>
   </body>
 </html>
diff --git a/registry/blocks/code-scroll/code-scroll.html b/registry/blocks/code-scroll/code-scroll.html
index c227d4ded3..1484f7c02f 100644
--- a/registry/blocks/code-scroll/code-scroll.html
+++ b/registry/blocks/code-scroll/code-scroll.html
@@ -6,37 +6,225 @@
     <title>Code Scroll To Line</title>
     <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
     <style>
-      * { margin: 0; padding: 0; box-sizing: border-box; }
-      html, body { width: 1920px; height: 1080px; overflow: hidden; background: #05070b; }
-      #root { position: relative; width: 1920px; height: 1080px; font-family: "JetBrains Mono", monospace; color: #e6edf3; }
-      .bg-field { position: absolute; inset: 0; background: radial-gradient(1200px 700px at 50% 18%, #0e1726 0%, #070b12 55%, #05070b 100%); }
-      .bg-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(88,166,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(88,166,255,0.05) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(1100px 620px at 50% 42%, #000 0%, transparent 78%); }
-      .bg-glow { position: absolute; width: 900px; height: 900px; border-radius: 50%; filter: blur(120px); opacity: 0.5; }
-      .bg-glow.a { background: #1f6feb55; left: -180px; top: -200px; }
-      .bg-glow.b { background: #2ea04355; right: -200px; bottom: -260px; }
-      .editor { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 1380px; height: 800px; background: #0b0f17; border: 1px solid #1d2733; border-radius: 16px; box-shadow: 0 40px 120px rgba(0,0,0,0.6), 0 2px 0 rgba(255,255,255,0.03) inset; overflow: hidden; display: flex; flex-direction: column; }
-      .titlebar { height: 56px; flex: 0 0 56px; display: flex; align-items: center; gap: 16px; padding: 0 22px; background: linear-gradient(#11161f, #0c111a); border-bottom: 1px solid #1b2430; }
-      .dots { display: flex; gap: 10px; }
-      .dot { width: 14px; height: 14px; border-radius: 50%; }
-      .dot.r { background: #ff5f57; } .dot.y { background: #febc2e; } .dot.g { background: #28c840; }
-      .filename { font-size: 19px; color: #8b98a9; letter-spacing: 0.2px; }
-      .filename .accent { color: #d6e2f0; }
-      .code-surface { position: relative; flex: 1 1 auto; overflow: hidden; }
-      .scene { position: absolute; inset: 0; opacity: 0; will-change: opacity; }
-      .code { position: absolute; top: 38px; left: 0; right: 0; padding: 0 44px 0 104px; font-size: 30px; line-height: 46px; font-variant-ligatures: none; tab-size: 2; }
-      .gutter { position: absolute; top: 38px; left: 0; width: 84px; padding-right: 18px; font-size: 30px; line-height: 46px; text-align: right; color: #828c9b; user-select: none; }
-      .ln { display: block; height: 46px; }
-      .line { display: block; min-height: 46px; white-space: pre; position: relative; z-index: 1; }
-      .tok { display: inline-block; white-space: pre; will-change: transform, opacity; }
-      .caret { position: absolute; top: 0; left: 0; width: 3px; height: 32px; margin-top: 6px; background: #58a6ff; border-radius: 1px; z-index: 3; }
-      .hl-box { position: absolute; background: rgba(88,166,255,0.16); border-left: 3px solid #58a6ff; border-radius: 6px; z-index: 0; overflow: hidden; }
-      .diff-line { display: block; min-height: 0; line-height: 46px; white-space: pre; position: relative; overflow: hidden; padding-left: 14px; }
-      .diff-sign { display: inline-block; width: 22px; color: #41506220; }
-      .diff-del { background: rgba(248,81,73,0.12); box-shadow: inset 3px 0 #f85149; }
-      .diff-add { background: rgba(63,185,80,0.12); box-shadow: inset 3px 0 #3fb950; }
-      .diff-del .diff-sign { color: #f85149; } .diff-add .diff-sign { color: #3fb950; }
-      .flight-block { position: absolute; white-space: pre; font-size: 27px; line-height: 40px; padding: 11px 22px; border-radius: 11px; background: #0f1722; border: 1px solid #233044; box-shadow: 0 16px 44px rgba(0,0,0,0.5); will-change: transform, opacity; }
-      .flight-target { position: absolute; border: 1.5px dashed #2a3a4f; border-radius: 14px; opacity: 0; }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #05070b;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        font-family: "JetBrains Mono", monospace;
+        color: #e6edf3;
+      }
+      .bg-field {
+        position: absolute;
+        inset: 0;
+        background: radial-gradient(1200px 700px at 50% 18%, #0e1726 0%, #070b12 55%, #05070b 100%);
+      }
+      .bg-grid {
+        position: absolute;
+        inset: 0;
+        background-image:
+          linear-gradient(rgba(88, 166, 255, 0.05) 1px, transparent 1px),
+          linear-gradient(90deg, rgba(88, 166, 255, 0.05) 1px, transparent 1px);
+        background-size: 64px 64px;
+        mask-image: radial-gradient(1100px 620px at 50% 42%, #000 0%, transparent 78%);
+      }
+      .bg-glow {
+        position: absolute;
+        width: 900px;
+        height: 900px;
+        border-radius: 50%;
+        filter: blur(120px);
+        opacity: 0.5;
+      }
+      .bg-glow.a {
+        background: #1f6feb55;
+        left: -180px;
+        top: -200px;
+      }
+      .bg-glow.b {
+        background: #2ea04355;
+        right: -200px;
+        bottom: -260px;
+      }
+      .editor {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 1380px;
+        height: 800px;
+        background: #0b0f17;
+        border: 1px solid #1d2733;
+        border-radius: 16px;
+        box-shadow:
+          0 40px 120px rgba(0, 0, 0, 0.6),
+          0 2px 0 rgba(255, 255, 255, 0.03) inset;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+      }
+      .titlebar {
+        height: 56px;
+        flex: 0 0 56px;
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        padding: 0 22px;
+        background: linear-gradient(#11161f, #0c111a);
+        border-bottom: 1px solid #1b2430;
+      }
+      .dots {
+        display: flex;
+        gap: 10px;
+      }
+      .dot {
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+      }
+      .dot.r {
+        background: #ff5f57;
+      }
+      .dot.y {
+        background: #febc2e;
+      }
+      .dot.g {
+        background: #28c840;
+      }
+      .filename {
+        font-size: 19px;
+        color: #8b98a9;
+        letter-spacing: 0.2px;
+      }
+      .filename .accent {
+        color: #d6e2f0;
+      }
+      .code-surface {
+        position: relative;
+        flex: 1 1 auto;
+        overflow: hidden;
+      }
+      .scene {
+        position: absolute;
+        inset: 0;
+        opacity: 0;
+        will-change: opacity;
+      }
+      .code {
+        position: absolute;
+        top: 38px;
+        left: 0;
+        right: 0;
+        padding: 0 44px 0 104px;
+        font-size: 30px;
+        line-height: 46px;
+        font-variant-ligatures: none;
+        tab-size: 2;
+      }
+      .gutter {
+        position: absolute;
+        top: 38px;
+        left: 0;
+        width: 84px;
+        padding-right: 18px;
+        font-size: 30px;
+        line-height: 46px;
+        text-align: right;
+        color: #828c9b;
+        user-select: none;
+      }
+      .ln {
+        display: block;
+        height: 46px;
+      }
+      .line {
+        display: block;
+        min-height: 46px;
+        white-space: pre;
+        position: relative;
+        z-index: 1;
+      }
+      .tok {
+        display: inline-block;
+        white-space: pre;
+        will-change: transform, opacity;
+      }
+      .caret {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 3px;
+        height: 32px;
+        margin-top: 6px;
+        background: #58a6ff;
+        border-radius: 1px;
+        z-index: 3;
+      }
+      .hl-box {
+        position: absolute;
+        background: rgba(88, 166, 255, 0.16);
+        border-left: 3px solid #58a6ff;
+        border-radius: 6px;
+        z-index: 0;
+        overflow: hidden;
+      }
+      .diff-line {
+        display: block;
+        min-height: 0;
+        line-height: 46px;
+        white-space: pre;
+        position: relative;
+        overflow: hidden;
+        padding-left: 14px;
+      }
+      .diff-sign {
+        display: inline-block;
+        width: 22px;
+        color: #41506220;
+      }
+      .diff-del {
+        background: rgba(248, 81, 73, 0.12);
+        box-shadow: inset 3px 0 #f85149;
+      }
+      .diff-add {
+        background: rgba(63, 185, 80, 0.12);
+        box-shadow: inset 3px 0 #3fb950;
+      }
+      .diff-del .diff-sign {
+        color: #f85149;
+      }
+      .diff-add .diff-sign {
+        color: #3fb950;
+      }
+      .flight-block {
+        position: absolute;
+        white-space: pre;
+        font-size: 27px;
+        line-height: 40px;
+        padding: 11px 22px;
+        border-radius: 11px;
+        background: #0f1722;
+        border: 1px solid #233044;
+        box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
+        will-change: transform, opacity;
+      }
+      .flight-target {
+        position: absolute;
+        border: 1.5px dashed #2a3a4f;
+        border-radius: 14px;
+        opacity: 0;
+      }
     </style>
   </head>
   <body>
@@ -54,199 +242,1310 @@
       <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>
-          <span class="filename"><span class="accent">fetchWithRetry.js</span> — Code Scroll To Line</span>
+          <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>
         <div class="code-surface" id="surface"></div>
       </div>
     </div>
     <script>
-      window.__TOKENS = {"scroll":{"lang":"js","theme":"github-dark","bg":"#24292e","fg":"#e1e4e8","states":[{"code":"import { createClient } from \"./client\"\nimport { logger } from \"./logger\"\n\nconst RETRIES = 3\n\nexport async function fetchWithRetry(url, opts = {}) {\n  const client = createClient(opts)\n  let lastError = null\n\n  for (let attempt = 1; attempt <= RETRIES; attempt++) {\n    try {\n      const res = await client.get(url)\n      if (res.ok) return res.body\n      lastError = new Error(\"bad status \" + res.status)\n    } catch (err) {\n      lastError = err\n      logger.warn(\"attempt \" + attempt + \" failed\")\n    }\n    await sleep(attempt * 250)\n  }\n\n  throw lastError\n}","tokens":[{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-0","content":"import","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-1","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-2","content":"{ createClient }","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-3","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-4","content":"from","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-5","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-6","content":"\"./client\"","color":"#9ECBFF","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-7","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-8","content":"import","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-9","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-10","content":"{ logger }","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-11","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-12","content":"from","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-13","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-14","content":"\"./logger\"","color":"#9ECBFF","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-15","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-16","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-17","content":"const","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-18","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-19","content":"RETRIES","color":"#79B8FF","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-20","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-21","content":"=","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-22","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-23","content":"3","color":"#79B8FF","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-24","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-25","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-26","content":"export","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-27","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-28","content":"async","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-29","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-30","content":"function","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-31","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-32","content":"fetchWithRetry","color":"#B392F0","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-33","content":"(","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-34","content":"url","color":"#FFAB70","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-35","content":",","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-36","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-37","content":"opts","color":"#FFAB70","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-38","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-39","content":"=","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-40","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-41","content":"{}) {","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-42","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-43","content":"  ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-44","content":"const","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-45","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-46","content":"client","color":"#79B8FF","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-47","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-48","content":"=","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-49","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-50","content":"createClient","color":"#B392F0","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-51","content":"(opts)","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-52","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-53","content":"  ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-54","content":"let","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-55","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-56","content":"lastError","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-57","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-58","content":"=","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-59","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-60","content":"null","color":"#79B8FF","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-61","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-62","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-63","content":"  ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-64","content":"for","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-65","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-66","content":"(","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-67","content":"let","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-68","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-69","content":"attempt","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-70","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-71","content":"=","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-72","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-73","content":"1","color":"#79B8FF","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-74","content":"; attempt","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-75","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-76","content":"<=","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-77","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-78","content":"RETRIES","color":"#79B8FF","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-79","content":"; attempt","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-80","content":"++","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-81","content":") {","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-82","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-83","content":"    ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-84","content":"try","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-85","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-86","content":"{","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-87","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-88","content":"      ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-89","content":"const","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-90","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-91","content":"res","color":"#79B8FF","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-92","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-93","content":"=","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-94","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-95","content":"await","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-96","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-97","content":"client.","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-98","content":"get","color":"#B392F0","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-99","content":"(url)","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-100","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-101","content":"      ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-102","content":"if","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-103","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-104","content":"(res.ok)","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-105","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-106","content":"return","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-107","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-108","content":"res.body","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-109","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-110","content":"      ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-111","content":"lastError","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-112","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-113","content":"=","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-114","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-115","content":"new","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-116","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-117","content":"Error","color":"#B392F0","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-118","content":"(","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-119","content":"\"bad status \"","color":"#9ECBFF","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-120","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-121","content":"+","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-122","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-123","content":"res.status)","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-124","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-125","content":"    ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-126","content":"}","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-127","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-128","content":"catch","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-129","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-130","content":"(err) {","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-131","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-132","content":"      ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-133","content":"lastError","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-134","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-135","content":"=","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-136","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-137","content":"err","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-138","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-139","content":"      ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-140","content":"logger.","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-141","content":"warn","color":"#B392F0","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-142","content":"(","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-143","content":"\"attempt \"","color":"#9ECBFF","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-144","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-145","content":"+","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-146","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-147","content":"attempt","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-148","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-149","content":"+","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-150","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-151","content":"\" failed\"","color":"#9ECBFF","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-152","content":")","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-153","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-154","content":"    ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-155","content":"}","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-156","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-157","content":"    ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-158","content":"await","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-159","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-160","content":"sleep","color":"#B392F0","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-161","content":"(attempt","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-162","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-163","content":"*","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-164","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-165","content":"250","color":"#79B8FF","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-166","content":")","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-167","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-168","content":"  ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-169","content":"}","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-170","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-171","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-172","content":"  ","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-173","content":"throw","color":"#F97583","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-174","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-175","content":"lastError","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-176","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-177","content":"}","color":"#E1E4E8","fontStyle":0},{"key":"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-178","content":"\n","color":"#e1e4e8","fontStyle":0}]}]}};
-      window.__BLOCK = {"id":"code-scroll","effect":"scroll","seq":"scroll","line":12,"duration":6};
+      window.__TOKENS = {
+        scroll: {
+          lang: "js",
+          theme: "github-dark",
+          bg: "#24292e",
+          fg: "#e1e4e8",
+          states: [
+            {
+              code: 'import { createClient } from "./client"\nimport { logger } from "./logger"\n\nconst RETRIES = 3\n\nexport async function fetchWithRetry(url, opts = {}) {\n  const client = createClient(opts)\n  let lastError = null\n\n  for (let attempt = 1; attempt <= RETRIES; attempt++) {\n    try {\n      const res = await client.get(url)\n      if (res.ok) return res.body\n      lastError = new Error("bad status " + res.status)\n    } catch (err) {\n      lastError = err\n      logger.warn("attempt " + attempt + " failed")\n    }\n    await sleep(attempt * 250)\n  }\n\n  throw lastError\n}',
+              tokens: [
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-0",
+                  content: "import",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-1",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-2",
+                  content: "{ createClient }",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-3",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-4",
+                  content: "from",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-5",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-6",
+                  content: '"./client"',
+                  color: "#9ECBFF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-7",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-8",
+                  content: "import",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-9",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-10",
+                  content: "{ logger }",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-11",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-12",
+                  content: "from",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-13",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-14",
+                  content: '"./logger"',
+                  color: "#9ECBFF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-15",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-16",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-17",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-18",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-19",
+                  content: "RETRIES",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-20",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-21",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-22",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-23",
+                  content: "3",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-24",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-25",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-26",
+                  content: "export",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-27",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-28",
+                  content: "async",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-29",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-30",
+                  content: "function",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-31",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-32",
+                  content: "fetchWithRetry",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-33",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-34",
+                  content: "url",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-35",
+                  content: ",",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-36",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-37",
+                  content: "opts",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-38",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-39",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-40",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-41",
+                  content: "{}) {",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-42",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-43",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-44",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-45",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-46",
+                  content: "client",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-47",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-48",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-49",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-50",
+                  content: "createClient",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-51",
+                  content: "(opts)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-52",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-53",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-54",
+                  content: "let",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-55",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-56",
+                  content: "lastError",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-57",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-58",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-59",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-60",
+                  content: "null",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-61",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-62",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-63",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-64",
+                  content: "for",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-65",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-66",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-67",
+                  content: "let",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-68",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-69",
+                  content: "attempt",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-70",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-71",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-72",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-73",
+                  content: "1",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-74",
+                  content: "; attempt",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-75",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-76",
+                  content: "<=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-77",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-78",
+                  content: "RETRIES",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-79",
+                  content: "; attempt",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-80",
+                  content: "++",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-81",
+                  content: ") {",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-82",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-83",
+                  content: "    ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-84",
+                  content: "try",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-85",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-86",
+                  content: "{",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-87",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-88",
+                  content: "      ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-89",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-90",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-91",
+                  content: "res",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-92",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-93",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-94",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-95",
+                  content: "await",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-96",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-97",
+                  content: "client.",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-98",
+                  content: "get",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-99",
+                  content: "(url)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-100",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-101",
+                  content: "      ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-102",
+                  content: "if",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-103",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-104",
+                  content: "(res.ok)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-105",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-106",
+                  content: "return",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-107",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-108",
+                  content: "res.body",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-109",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-110",
+                  content: "      ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-111",
+                  content: "lastError",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-112",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-113",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-114",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-115",
+                  content: "new",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-116",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-117",
+                  content: "Error",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-118",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-119",
+                  content: '"bad status "',
+                  color: "#9ECBFF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-120",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-121",
+                  content: "+",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-122",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-123",
+                  content: "res.status)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-124",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-125",
+                  content: "    ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-126",
+                  content: "}",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-127",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-128",
+                  content: "catch",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-129",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-130",
+                  content: "(err) {",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-131",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-132",
+                  content: "      ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-133",
+                  content: "lastError",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-134",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-135",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-136",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-137",
+                  content: "err",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-138",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-139",
+                  content: "      ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-140",
+                  content: "logger.",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-141",
+                  content: "warn",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-142",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-143",
+                  content: '"attempt "',
+                  color: "#9ECBFF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-144",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-145",
+                  content: "+",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-146",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-147",
+                  content: "attempt",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-148",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-149",
+                  content: "+",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-150",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-151",
+                  content: '" failed"',
+                  color: "#9ECBFF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-152",
+                  content: ")",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-153",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-154",
+                  content: "    ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-155",
+                  content: "}",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-156",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-157",
+                  content: "    ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-158",
+                  content: "await",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-159",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-160",
+                  content: "sleep",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-161",
+                  content: "(attempt",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-162",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-163",
+                  content: "*",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-164",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-165",
+                  content: "250",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-166",
+                  content: ")",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-167",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-168",
+                  content: "  ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-169",
+                  content: "}",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-170",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-171",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-172",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-173",
+                  content: "throw",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-174",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-175",
+                  content: "lastError",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-176",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-177",
+                  content: "}",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-178",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+              ],
+            },
+          ],
+        },
+      };
+      window.__BLOCK = {
+        id: "code-scroll",
+        effect: "scroll",
+        seq: "scroll",
+        line: 12,
+        duration: 6,
+      };
     </script>
     <script>
-// 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
-// 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].
-(function () {
-  "use strict";
-  var T = window.__TOKENS || {};
-
-  function lineDiv() {
-    var d = document.createElement("div");
-    d.className = "line";
-    return d;
-  }
+      // 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
+      // 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].
+      (function () {
+        "use strict";
+        var T = window.__TOKENS || {};
 
-  // Render a code state's keyed tokens into codeEl as lines of inline-block .tok spans.
-  function renderState(codeEl, state) {
-    codeEl.textContent = "";
-    var keyToEl = new Map();
-    var line = lineDiv();
-    codeEl.appendChild(line);
-    for (var i = 0; i < state.tokens.length; i++) {
-      var t = state.tokens[i];
-      if (t.content === "\n") {
-        line = lineDiv();
-        codeEl.appendChild(line);
-        continue;
-      }
-      var span = document.createElement("span");
-      span.className = "tok";
-      span.textContent = t.content;
-      span.style.color = t.color;
-      if (t.fontStyle & 1) span.style.fontStyle = "italic";
-      if (t.fontStyle & 2) span.style.fontWeight = "700";
-      line.appendChild(span);
-      keyToEl.set(t.key, span);
-    }
-    var last = codeEl.lastChild;
-    if (last && last.className === "line" && last.children.length === 0) codeEl.removeChild(last);
-    return keyToEl;
-  }
+        function lineDiv() {
+          var d = document.createElement("div");
+          d.className = "line";
+          return d;
+        }
 
-  function rectsOf(keyToEl) {
-    var m = new Map();
-    keyToEl.forEach(function (el, k) {
-      var r = el.getBoundingClientRect();
-      m.set(k, { left: r.left, top: r.top });
-    });
-    return m;
-  }
+        // Render a code state's keyed tokens into codeEl as lines of inline-block .tok spans.
+        function renderState(codeEl, state) {
+          codeEl.textContent = "";
+          var keyToEl = new Map();
+          var line = lineDiv();
+          codeEl.appendChild(line);
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              line = lineDiv();
+              codeEl.appendChild(line);
+              continue;
+            }
+            var span = document.createElement("span");
+            span.className = "tok";
+            span.textContent = t.content;
+            span.style.color = t.color;
+            if (t.fontStyle & 1) span.style.fontStyle = "italic";
+            if (t.fontStyle & 2) span.style.fontWeight = "700";
+            line.appendChild(span);
+            keyToEl.set(t.key, span);
+          }
+          var last = codeEl.lastChild;
+          if (last && last.className === "line" && last.children.length === 0)
+            codeEl.removeChild(last);
+          return keyToEl;
+        }
 
-  function makeScene(surface, withGutter) {
-    var scene = document.createElement("div");
-    scene.className = "scene";
-    if (withGutter) {
-      var g = document.createElement("div");
-      g.className = "gutter";
-      scene.appendChild(g);
-    }
-    var code = document.createElement("div");
-    code.className = "code";
-    scene.appendChild(code);
-    surface.appendChild(scene);
-    return { scene: scene, code: code, gutter: scene.querySelector(".gutter") };
-  }
+        function rectsOf(keyToEl) {
+          var m = new Map();
+          keyToEl.forEach(function (el, k) {
+            var r = el.getBoundingClientRect();
+            m.set(k, { left: r.left, top: r.top });
+          });
+          return m;
+        }
 
-  function fillGutter(g, n) {
-    var html = "";
-    for (var i = 1; i <= n; i++) html += '<span class="ln">' + i + "</span>";
-    g.innerHTML = html;
-  }
+        function makeScene(surface, withGutter) {
+          var scene = document.createElement("div");
+          scene.className = "scene";
+          if (withGutter) {
+            var g = document.createElement("div");
+            g.className = "gutter";
+            scene.appendChild(g);
+          }
+          var code = document.createElement("div");
+          code.className = "code";
+          scene.appendChild(code);
+          surface.appendChild(scene);
+          return { scene: scene, code: code, gutter: scene.querySelector(".gutter") };
+        }
 
-  function splitLines(state) {
-    var lines = [{ text: "", tokens: [] }];
-    for (var i = 0; i < state.tokens.length; i++) {
-      var t = state.tokens[i];
-      if (t.content === "\n") {
-        lines.push({ text: "", tokens: [] });
-        continue;
-      }
-      var cur = lines[lines.length - 1];
-      cur.tokens.push(t);
-      cur.text += t.content;
-    }
-    if (lines.length && lines[lines.length - 1].tokens.length === 0) lines.pop();
-    return lines;
-  }
+        function fillGutter(g, n) {
+          var html = "";
+          for (var i = 1; i <= n; i++) html += '<span class="ln">' + i + "</span>";
+          g.innerHTML = html;
+        }
 
-  function lineDiff(a, b) {
-    var n = a.length;
-    var m = b.length;
-    var dp = [];
-    for (var i = 0; i <= n; i++) dp.push(new Array(m + 1).fill(0));
-    for (var i = n - 1; i >= 0; i--) {
-      for (var j = m - 1; j >= 0; j--) {
-        dp[i][j] = a[i].text === b[j].text ? dp[i + 1][j + 1] + 1 : Math.max(dp[i + 1][j], dp[i][j + 1]);
-      }
-    }
-    var ops = [];
-    var i = 0;
-    var j = 0;
-    while (i < n && j < m) {
-      if (a[i].text === b[j].text) {
-        ops.push({ type: "same", line: b[j] });
-        i++;
-        j++;
-      } else if (dp[i + 1][j] >= dp[i][j + 1]) {
-        ops.push({ type: "del", line: a[i] });
-        i++;
-      } else {
-        ops.push({ type: "add", line: b[j] });
-        j++;
-      }
-    }
-    while (i < n) ops.push({ type: "del", line: a[i++] });
-    while (j < m) ops.push({ type: "add", line: b[j++] });
-    return ops;
-  }
+        function splitLines(state) {
+          var lines = [{ text: "", tokens: [] }];
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              lines.push({ text: "", tokens: [] });
+              continue;
+            }
+            var cur = lines[lines.length - 1];
+            cur.tokens.push(t);
+            cur.text += t.content;
+          }
+          if (lines.length && lines[lines.length - 1].tokens.length === 0) lines.pop();
+          return lines;
+        }
 
-  // ---- single-scene effect builders (fade in, play, hold to end) -------------
-  var FADE = 0.45;
+        function lineDiff(a, b) {
+          var n = a.length;
+          var m = b.length;
+          var dp = [];
+          for (var i = 0; i <= n; i++) dp.push(new Array(m + 1).fill(0));
+          for (var i = n - 1; i >= 0; i--) {
+            for (var j = m - 1; j >= 0; j--) {
+              dp[i][j] =
+                a[i].text === b[j].text
+                  ? dp[i + 1][j + 1] + 1
+                  : Math.max(dp[i + 1][j], dp[i][j + 1]);
+            }
+          }
+          var ops = [];
+          var i = 0;
+          var j = 0;
+          while (i < n && j < m) {
+            if (a[i].text === b[j].text) {
+              ops.push({ type: "same", line: b[j] });
+              i++;
+              j++;
+            } else if (dp[i + 1][j] >= dp[i][j + 1]) {
+              ops.push({ type: "del", line: a[i] });
+              i++;
+            } else {
+              ops.push({ type: "add", line: b[j] });
+              j++;
+            }
+          }
+          while (i < n) ops.push({ type: "del", line: a[i++] });
+          while (j < m) ops.push({ type: "add", line: b[j++] });
+          return ops;
+        }
 
-  function scroll(tl, surface, state, start, targetLine) {
-    var SCROLL = 1.7;
-    var parts = makeScene(surface, true);
-    var code = parts.code;
-    renderState(code, state);
-    var lines = code.querySelectorAll(".line");
-    fillGutter(parts.gutter, lines.length);
-    var surfRect = surface.getBoundingClientRect();
-    var idx = Math.max(0, Math.min(lines.length - 1, targetLine - 1));
-    var lr = lines[idx].getBoundingClientRect();
-    var lineCenter = lr.top + lr.height / 2 - surfRect.top;
-    var dy = surfRect.height * 0.5 - lineCenter;
-    var box = document.createElement("div");
-    box.className = "hl-box";
-    box.style.left = lines[idx].offsetLeft - 8 + "px";
-    box.style.top = lines[idx].offsetTop - 1 + "px";
-    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);
-    var at = start + FADE + 0.35;
-    tl.fromTo([code, parts.gutter], { y: 0 }, { y: dy, duration: SCROLL, ease: "power2.inOut" }, at);
-    var arrAt = at + SCROLL;
-    for (var i = 0; i < lines.length; i++) {
-      if (i === idx) continue;
-      tl.fromTo(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);
-  }
+        // ---- single-scene effect builders (fade in, play, hold to end) -------------
+        var FADE = 0.45;
 
-  function buildEffect(tl, surface, spec) {
-    var start = 0.45;
-    var seq = T[spec.seq];
-    if (spec.effect === "scroll") scroll(tl, surface, seq.states[0], start, spec.line || 1);
-  }
+        function scroll(tl, surface, state, start, targetLine) {
+          var SCROLL = 1.7;
+          var parts = makeScene(surface, true);
+          var code = parts.code;
+          renderState(code, state);
+          var lines = code.querySelectorAll(".line");
+          fillGutter(parts.gutter, lines.length);
+          var surfRect = surface.getBoundingClientRect();
+          var idx = Math.max(0, Math.min(lines.length - 1, targetLine - 1));
+          var lr = lines[idx].getBoundingClientRect();
+          var lineCenter = lr.top + lr.height / 2 - surfRect.top;
+          var dy = surfRect.height * 0.5 - lineCenter;
+          var box = document.createElement("div");
+          box.className = "hl-box";
+          box.style.left = lines[idx].offsetLeft - 8 + "px";
+          box.style.top = lines[idx].offsetTop - 1 + "px";
+          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);
+          var at = start + FADE + 0.35;
+          tl.fromTo(
+            [code, parts.gutter],
+            { y: 0 },
+            { y: dy, duration: SCROLL, ease: "power2.inOut" },
+            at,
+          );
+          var arrAt = at + SCROLL;
+          for (var i = 0; i < lines.length; i++) {
+            if (i === idx) continue;
+            tl.fromTo(
+              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);
+        }
 
-  function go() {
-    var spec = window.__BLOCK;
-    var surface = document.getElementById("surface");
-    var root = document.getElementById("root");
-    window.__timelines = window.__timelines || {};
-    var tl = gsap.timeline({ paused: true });
-    window.__timelines["code-scroll"] = tl; // register synchronously
-    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
-    });
-  }
+        function buildEffect(tl, surface, spec) {
+          var start = 0.45;
+          var seq = T[spec.seq];
+          if (spec.effect === "scroll") scroll(tl, surface, seq.states[0], start, spec.line || 1);
+        }
 
-  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
-  else go();
-})();
+        function go() {
+          var spec = window.__BLOCK;
+          var surface = document.getElementById("surface");
+          var root = document.getElementById("root");
+          window.__timelines = window.__timelines || {};
+          var tl = gsap.timeline({ paused: true });
+          window.__timelines["code-scroll"] = tl; // register synchronously
+          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
+          });
+        }
 
+        if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
+        else go();
+      })();
     </script>
   </body>
 </html>
diff --git a/registry/blocks/code-shader-dissolve/code-shader-dissolve.html b/registry/blocks/code-shader-dissolve/code-shader-dissolve.html
index ab5373b5f1..45a13c4343 100644
--- a/registry/blocks/code-shader-dissolve/code-shader-dissolve.html
+++ b/registry/blocks/code-shader-dissolve/code-shader-dissolve.html
@@ -7,10 +7,30 @@
     <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js"></script>
     <style>
-      * { margin: 0; padding: 0; box-sizing: border-box; }
-      html, body { width: 1920px; height: 1080px; overflow: hidden; background: #05070b; }
-      #root { position: relative; width: 1920px; height: 1080px; }
-      #gl { position: absolute; inset: 0; width: 1920px; height: 1080px; display: block; }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #05070b;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+      }
+      #gl {
+        position: absolute;
+        inset: 0;
+        width: 1920px;
+        height: 1080px;
+        display: block;
+      }
     </style>
   </head>
   <body>
@@ -25,236 +45,491 @@
       <canvas id="gl" width="1920" height="1080"></canvas>
     </div>
     <script>
-      window.__TOKENS = {"compile":{"lang":"js","theme":"github-dark","bg":"#24292e","fg":"#e1e4e8","states":[{"code":"function compile(src) {\n  const ast = parse(src)\n  const ir = optimize(ast)\n  return emit(ir)\n}","tokens":[{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-0","content":"function","color":"#F97583","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-1","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-2","content":"compile","color":"#B392F0","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-3","content":"(","color":"#E1E4E8","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-4","content":"src","color":"#FFAB70","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-5","content":") {","color":"#E1E4E8","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-6","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-7","content":"  ","color":"#E1E4E8","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-8","content":"const","color":"#F97583","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-9","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-10","content":"ast","color":"#79B8FF","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-11","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-12","content":"=","color":"#F97583","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-13","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-14","content":"parse","color":"#B392F0","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-15","content":"(src)","color":"#E1E4E8","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-16","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-17","content":"  ","color":"#E1E4E8","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-18","content":"const","color":"#F97583","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-19","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-20","content":"ir","color":"#79B8FF","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-21","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-22","content":"=","color":"#F97583","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-23","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-24","content":"optimize","color":"#B392F0","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-25","content":"(ast)","color":"#E1E4E8","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-26","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-27","content":"  ","color":"#E1E4E8","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-28","content":"return","color":"#F97583","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-29","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-30","content":"emit","color":"#B392F0","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-31","content":"(ir)","color":"#E1E4E8","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-32","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-33","content":"}","color":"#E1E4E8","fontStyle":0},{"key":"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-34","content":"\n","color":"#e1e4e8","fontStyle":0}]}]}};
-      window.__BLOCK = {"id":"code-shader-dissolve","effect":"dissolve","seq":"compile","duration":7,"seed":11};
+      window.__TOKENS = {
+        compile: {
+          lang: "js",
+          theme: "github-dark",
+          bg: "#24292e",
+          fg: "#e1e4e8",
+          states: [
+            {
+              code: "function compile(src) {\n  const ast = parse(src)\n  const ir = optimize(ast)\n  return emit(ir)\n}",
+              tokens: [
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-0",
+                  content: "function",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-1",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-2",
+                  content: "compile",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-3",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-4",
+                  content: "src",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-5",
+                  content: ") {",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-6",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-7",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-8",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-9",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-10",
+                  content: "ast",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-11",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-12",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-13",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-14",
+                  content: "parse",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-15",
+                  content: "(src)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-16",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-17",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-18",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-19",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-20",
+                  content: "ir",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-21",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-22",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-23",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-24",
+                  content: "optimize",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-25",
+                  content: "(ast)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-26",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-27",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-28",
+                  content: "return",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-29",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-30",
+                  content: "emit",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-31",
+                  content: "(ir)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-32",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-33",
+                  content: "}",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-34",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+              ],
+            },
+          ],
+        },
+      };
+      window.__BLOCK = {
+        id: "code-shader-dissolve",
+        effect: "dissolve",
+        seq: "compile",
+        duration: 7,
+        seed: 11,
+      };
     </script>
     <script>
-// hf-code-anim-gl.js — WebGL code-animation engine for the "crazy" Code Animations blocks.
-//
-// 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
-//   - 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
-//
-// Each block sets window.__BLOCK = { id, effect, seq, duration, seed } and includes this engine.
-(function () {
-  "use strict";
-  var T = window.__TOKENS || {};
+      // hf-code-anim-gl.js — WebGL code-animation engine for the "crazy" Code Animations blocks.
+      //
+      // 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
+      //   - 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
+      //
+      // Each block sets window.__BLOCK = { id, effect, seq, duration, seed } and includes this engine.
+      (function () {
+        "use strict";
+        var T = window.__TOKENS || {};
 
-  // ---- seeded PRNG (no Math.random) -----------------------------------------
-  function mulberry32(a) {
-    return function () {
-      a |= 0;
-      a = (a + 0x6d2b79f5) | 0;
-      var t = Math.imul(a ^ (a >>> 15), 1 | a);
-      t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
-      return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
-    };
-  }
-
-  // ---- split a token state into lines of {content,color} --------------------
-  function splitLines(state) {
-    var lines = [[]];
-    for (var i = 0; i < state.tokens.length; i++) {
-      var t = state.tokens[i];
-      if (t.content === "\n") {
-        lines.push([]);
-        continue;
-      }
-      lines[lines.length - 1].push(t);
-    }
-    while (lines.length && lines[lines.length - 1].length === 0) lines.pop();
-    return lines;
-  }
+        // ---- seeded PRNG (no Math.random) -----------------------------------------
+        function mulberry32(a) {
+          return function () {
+            a |= 0;
+            a = (a + 0x6d2b79f5) | 0;
+            var t = Math.imul(a ^ (a >>> 15), 1 | a);
+            t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+            return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+          };
+        }
 
-  // ---- THE BRIDGE: draw baked tokens to an offscreen 2D canvas ---------------
-  // Returns { canvas, W, H, lines, lineH, padY, fontPx } so effects can sample it.
-  function drawCodeToCanvas(state, opts) {
-    opts = opts || {};
-    var fontPx = opts.fontPx || 36;
-    var lineH = opts.lineH || 54;
-    var padX = opts.padX || 70;
-    var padY = opts.padY || 60;
-    var weight = opts.weight || 500;
-    var font = weight + " " + fontPx + 'px "JetBrains Mono", monospace';
+        // ---- split a token state into lines of {content,color} --------------------
+        function splitLines(state) {
+          var lines = [[]];
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              lines.push([]);
+              continue;
+            }
+            lines[lines.length - 1].push(t);
+          }
+          while (lines.length && lines[lines.length - 1].length === 0) lines.pop();
+          return lines;
+        }
 
-    var lines = splitLines(state);
-    var measure = document.createElement("canvas").getContext("2d");
-    measure.font = font;
-    var maxW = 0;
-    for (var i = 0; i < lines.length; i++) {
-      var w = 0;
-      for (var j = 0; j < lines[i].length; j++) w += measure.measureText(lines[i][j].content).width;
-      if (w > maxW) maxW = w;
-    }
-    var W = Math.max(2, Math.ceil(maxW + padX * 2));
-    var H = Math.max(2, Math.ceil(lines.length * lineH + padY * 2));
+        // ---- THE BRIDGE: draw baked tokens to an offscreen 2D canvas ---------------
+        // Returns { canvas, W, H, lines, lineH, padY, fontPx } so effects can sample it.
+        function drawCodeToCanvas(state, opts) {
+          opts = opts || {};
+          var fontPx = opts.fontPx || 36;
+          var lineH = opts.lineH || 54;
+          var padX = opts.padX || 70;
+          var padY = opts.padY || 60;
+          var weight = opts.weight || 500;
+          var font = weight + " " + fontPx + 'px "JetBrains Mono", monospace';
 
-    var canvas = document.createElement("canvas");
-    canvas.width = W;
-    canvas.height = H;
-    var ctx = canvas.getContext("2d");
-    if (opts.transparent) {
-      ctx.clearRect(0, 0, W, H);
-    } else {
-      ctx.fillStyle = opts.bg || "#0b0f17";
-      ctx.fillRect(0, 0, W, H);
-    }
-    ctx.textBaseline = "top";
-    ctx.font = font;
-    for (var li = 0; li < lines.length; li++) {
-      var x = padX;
-      var y = padY + li * lineH;
-      for (var k = 0; k < lines[li].length; k++) {
-        var tok = lines[li][k];
-        ctx.fillStyle = tok.color;
-        ctx.fillText(tok.content, x, y);
-        x += ctx.measureText(tok.content).width;
-      }
-    }
-    return { canvas: canvas, W: W, H: H, lines: lines.length, lineH: lineH, padY: padY, fontPx: fontPx };
-  }
+          var lines = splitLines(state);
+          var measure = document.createElement("canvas").getContext("2d");
+          measure.font = font;
+          var maxW = 0;
+          for (var i = 0; i < lines.length; i++) {
+            var w = 0;
+            for (var j = 0; j < lines[i].length; j++)
+              w += measure.measureText(lines[i][j].content).width;
+            if (w > maxW) maxW = w;
+          }
+          var W = Math.max(2, Math.ceil(maxW + padX * 2));
+          var H = Math.max(2, Math.ceil(lines.length * lineH + padY * 2));
 
-  function fxDissolve(THREE, scene, camera, renderer, state, st, tl, dur, seed) {
-    scene.background = new THREE.Color(0x05070b);
-    var code = drawCodeToCanvas(state, { fontPx: 40, lineH: 60, padX: 90, padY: 80, weight: 600 });
-    var tex = new THREE.CanvasTexture(code.canvas);
-    tex.minFilter = THREE.LinearFilter;
-    tex.magFilter = THREE.LinearFilter;
-    tex.generateMipmaps = false;
+          var canvas = document.createElement("canvas");
+          canvas.width = W;
+          canvas.height = H;
+          var ctx = canvas.getContext("2d");
+          if (opts.transparent) {
+            ctx.clearRect(0, 0, W, H);
+          } else {
+            ctx.fillStyle = opts.bg || "#0b0f17";
+            ctx.fillRect(0, 0, W, H);
+          }
+          ctx.textBaseline = "top";
+          ctx.font = font;
+          for (var li = 0; li < lines.length; li++) {
+            var x = padX;
+            var y = padY + li * lineH;
+            for (var k = 0; k < lines[li].length; k++) {
+              var tok = lines[li][k];
+              ctx.fillStyle = tok.color;
+              ctx.fillText(tok.content, x, y);
+              x += ctx.measureText(tok.content).width;
+            }
+          }
+          return {
+            canvas: canvas,
+            W: W,
+            H: H,
+            lines: lines.length,
+            lineH: lineH,
+            padY: padY,
+            fontPx: fontPx,
+          };
+        }
 
-    var aspect = code.W / code.H;
-    var planeH = 6.6;
-    var planeW = planeH * aspect;
+        function fxDissolve(THREE, scene, camera, renderer, state, st, tl, dur, seed) {
+          scene.background = new THREE.Color(0x05070b);
+          var code = drawCodeToCanvas(state, {
+            fontPx: 40,
+            lineH: 60,
+            padX: 90,
+            padY: 80,
+            weight: 600,
+          });
+          var tex = new THREE.CanvasTexture(code.canvas);
+          tex.minFilter = THREE.LinearFilter;
+          tex.magFilter = THREE.LinearFilter;
+          tex.generateMipmaps = false;
 
-    var uniforms = {
-      uTex: { value: tex },
-      uProgress: { value: 0 },
-      uSeed: { value: (seed || 1) * 13.37 },
-    };
-    var mat = new THREE.ShaderMaterial({
-      uniforms: uniforms,
-      transparent: true,
-      vertexShader: [
-        "varying vec2 vUv;",
-        "void main(){ vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0); }",
-      ].join("\n"),
-      fragmentShader: [
-        "precision highp float;",
-        "uniform sampler2D uTex;",
-        "uniform float uProgress;",
-        "uniform float uSeed;",
-        "varying vec2 vUv;",
-        "float hash(vec2 p){ p=fract(p*vec2(123.34,456.21)); p+=dot(p,p+45.32); return fract(p.x*p.y); }",
-        "float noise(vec2 p){ vec2 i=floor(p),f=fract(p); float a=hash(i),b=hash(i+vec2(1.,0.)),c=hash(i+vec2(0.,1.)),d=hash(i+vec2(1.,1.)); vec2 u=f*f*(3.-2.*f); return mix(mix(a,b,u.x),mix(c,d,u.x),u.y); }",
-        "void main(){",
-        "  vec2 uv = vUv;",
-        // multi-octave seeded noise field
-        "  float n = noise(uv*16.0+uSeed)*0.6 + noise(uv*48.0+uSeed*1.7)*0.3 + noise(uv*120.0+uSeed*2.3)*0.1;",
-        "  float edge = 0.12;",
-        "  float reveal = smoothstep(n-edge, n+edge, uProgress);", // 0 hidden -> 1 shown
-        // chromatic fringe strongest at the dissolving edge
-        "  float band = reveal*(1.0-reveal)*4.0;",
-        "  float off = band*0.010;",
-        "  float r = texture2D(uTex, uv+vec2(off,0.0)).r;",
-        "  float g = texture2D(uTex, uv).g;",
-        "  float b = texture2D(uTex, uv-vec2(off,0.0)).b;",
-        "  vec3 codeCol = vec3(r,g,b);",
-        // additive cyan edge glow along the dissolve front
-        "  vec3 glow = vec3(0.30,0.72,1.0) * band * 0.9;",
-        "  vec3 outc = codeCol*reveal + glow;",
-        "  float a = max(reveal, band*0.8);",
-        "  gl_FragColor = vec4(outc, a);",
-        "}",
-      ].join("\n"),
-    });
+          var aspect = code.W / code.H;
+          var planeH = 6.6;
+          var planeW = planeH * aspect;
 
-    var plane = new THREE.Mesh(new THREE.PlaneGeometry(planeW, planeH), mat);
-    scene.add(plane);
+          var uniforms = {
+            uTex: { value: tex },
+            uProgress: { value: 0 },
+            uSeed: { value: (seed || 1) * 13.37 },
+          };
+          var mat = new THREE.ShaderMaterial({
+            uniforms: uniforms,
+            transparent: true,
+            vertexShader: [
+              "varying vec2 vUv;",
+              "void main(){ vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0); }",
+            ].join("\n"),
+            fragmentShader: [
+              "precision highp float;",
+              "uniform sampler2D uTex;",
+              "uniform float uProgress;",
+              "uniform float uSeed;",
+              "varying vec2 vUv;",
+              "float hash(vec2 p){ p=fract(p*vec2(123.34,456.21)); p+=dot(p,p+45.32); return fract(p.x*p.y); }",
+              "float noise(vec2 p){ vec2 i=floor(p),f=fract(p); float a=hash(i),b=hash(i+vec2(1.,0.)),c=hash(i+vec2(0.,1.)),d=hash(i+vec2(1.,1.)); vec2 u=f*f*(3.-2.*f); return mix(mix(a,b,u.x),mix(c,d,u.x),u.y); }",
+              "void main(){",
+              "  vec2 uv = vUv;",
+              // multi-octave seeded noise field
+              "  float n = noise(uv*16.0+uSeed)*0.6 + noise(uv*48.0+uSeed*1.7)*0.3 + noise(uv*120.0+uSeed*2.3)*0.1;",
+              "  float edge = 0.12;",
+              "  float reveal = smoothstep(n-edge, n+edge, uProgress);", // 0 hidden -> 1 shown
+              // chromatic fringe strongest at the dissolving edge
+              "  float band = reveal*(1.0-reveal)*4.0;",
+              "  float off = band*0.010;",
+              "  float r = texture2D(uTex, uv+vec2(off,0.0)).r;",
+              "  float g = texture2D(uTex, uv).g;",
+              "  float b = texture2D(uTex, uv-vec2(off,0.0)).b;",
+              "  vec3 codeCol = vec3(r,g,b);",
+              // additive cyan edge glow along the dissolve front
+              "  vec3 glow = vec3(0.30,0.72,1.0) * band * 0.9;",
+              "  vec3 outc = codeCol*reveal + glow;",
+              "  float a = max(reveal, band*0.8);",
+              "  gl_FragColor = vec4(outc, a);",
+              "}",
+            ].join("\n"),
+          });
 
-    camera.position.set(0, 0, 10);
-    var vfov = (camera.fov * Math.PI) / 180;
-    var screenAspect = 1920 / 1080;
-    var fitH = planeH / 2 / Math.tan(vfov / 2) / 0.82;
-    var fitW = planeW / 2 / (Math.tan(vfov / 2) * screenAspect) / 0.82;
-    camera.position.z = Math.max(fitH, fitW);
-    camera.lookAt(0, 0, 0);
+          var plane = new THREE.Mesh(new THREE.PlaneGeometry(planeW, planeH), mat);
+          scene.add(plane);
 
-    // compile in, then hold crisp. Overshoot to 1.15 so even max-noise pixels
-    // (n up to ~1.0, edge 0.12) fully resolve — no leftover specks at rest.
-    tl.to(uniforms.uProgress, { value: 1.15, duration: dur * 0.62, ease: "power1.inOut" }, 0);
+          camera.position.set(0, 0, 10);
+          var vfov = (camera.fov * Math.PI) / 180;
+          var screenAspect = 1920 / 1080;
+          var fitH = planeH / 2 / Math.tan(vfov / 2) / 0.82;
+          var fitW = planeW / 2 / (Math.tan(vfov / 2) * screenAspect) / 0.82;
+          camera.position.z = Math.max(fitH, fitW);
+          camera.lookAt(0, 0, 0);
 
-    // uProgress is tweened by GSAP; the boot loop's render() draws once per frame.
-    return function () {};
-  }
+          // compile in, then hold crisp. Overshoot to 1.15 so even max-noise pixels
+          // (n up to ~1.0, edge 0.12) fully resolve — no leftover specks at rest.
+          tl.to(uniforms.uProgress, { value: 1.15, duration: dur * 0.62, ease: "power1.inOut" }, 0);
 
-  // ---- dispatch + boot ------------------------------------------------------
-  function buildEffect(THREE, scene, camera, renderer, spec, st, tl) {
-    var state = T[spec.seq].states[0];
-    var dur = spec.duration;
-    if (spec.effect === "dissolve") return fxDissolve(THREE, scene, camera, renderer, state, st, tl, dur, spec.seed);
-    return function () {};
-  }
+          // uProgress is tweened by GSAP; the boot loop's render() draws once per frame.
+          return function () {};
+        }
 
-  // Free GPU resources (renderer, geometries, materials, textures) on page teardown.
-  // One-shot renders exit per job so nothing leaks there; this guards long-lived
-  // Studio/player sessions that reload. Fires only on unload — never during capture.
-  function disposeGL(renderer, scene) {
-    scene.traverse(function (o) {
-      if (o.geometry && o.geometry.dispose) o.geometry.dispose();
-      var mats = o.material ? (Array.isArray(o.material) ? o.material : [o.material]) : [];
-      mats.forEach(function (m) {
-        if (m.map && m.map.dispose) m.map.dispose();
-        if (m.uniforms && m.uniforms.uTex && m.uniforms.uTex.value && m.uniforms.uTex.value.dispose) {
-          m.uniforms.uTex.value.dispose();
+        // ---- dispatch + boot ------------------------------------------------------
+        function buildEffect(THREE, scene, camera, renderer, spec, st, tl) {
+          var state = T[spec.seq].states[0];
+          var dur = spec.duration;
+          if (spec.effect === "dissolve")
+            return fxDissolve(THREE, scene, camera, renderer, state, st, tl, dur, spec.seed);
+          return function () {};
         }
-        if (m.dispose) m.dispose();
-      });
-    });
-    if (renderer.dispose) renderer.dispose();
-  }
 
-  function go() {
-    var spec = window.__BLOCK;
-    var root = document.getElementById("root");
-    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
+        // Free GPU resources (renderer, geometries, materials, textures) on page teardown.
+        // One-shot renders exit per job so nothing leaks there; this guards long-lived
+        // Studio/player sessions that reload. Fires only on unload — never during capture.
+        function disposeGL(renderer, scene) {
+          scene.traverse(function (o) {
+            if (o.geometry && o.geometry.dispose) o.geometry.dispose();
+            var mats = o.material ? (Array.isArray(o.material) ? o.material : [o.material]) : [];
+            mats.forEach(function (m) {
+              if (m.map && m.map.dispose) m.map.dispose();
+              if (
+                m.uniforms &&
+                m.uniforms.uTex &&
+                m.uniforms.uTex.value &&
+                m.uniforms.uTex.value.dispose
+              ) {
+                m.uniforms.uTex.value.dispose();
+              }
+              if (m.dispose) m.dispose();
+            });
+          });
+          if (renderer.dispose) renderer.dispose();
+        }
 
-    var THREE = window.THREE;
-    var renderer = new THREE.WebGLRenderer({ canvas: glcanvas, antialias: true, alpha: false, preserveDrawingBuffer: true });
-    renderer.setPixelRatio(1);
-    renderer.setSize(W, H, false);
-    var scene = new THREE.Scene();
-    var camera = new THREE.PerspectiveCamera(45, W / H, 0.1, 200);
-    var st = {};
+        function go() {
+          var spec = window.__BLOCK;
+          var root = document.getElementById("root");
+          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
 
-    document.fonts.ready.then(function () {
-      var renderFn = buildEffect(THREE, scene, camera, renderer, spec, st, tl);
-      function render() {
-        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
-      render(); // paint frame 0
-      window.addEventListener("beforeunload", function () {
-        disposeGL(renderer, scene);
-      });
-    });
-  }
+          var THREE = window.THREE;
+          var renderer = new THREE.WebGLRenderer({
+            canvas: glcanvas,
+            antialias: true,
+            alpha: false,
+            preserveDrawingBuffer: true,
+          });
+          renderer.setPixelRatio(1);
+          renderer.setSize(W, H, false);
+          var scene = new THREE.Scene();
+          var camera = new THREE.PerspectiveCamera(45, W / H, 0.1, 200);
+          var st = {};
 
-  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
-  else go();
-})();
+          document.fonts.ready.then(function () {
+            var renderFn = buildEffect(THREE, scene, camera, renderer, spec, st, tl);
+            function render() {
+              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
+            render(); // paint frame 0
+            window.addEventListener("beforeunload", function () {
+              disposeGL(renderer, scene);
+            });
+          });
+        }
 
+        if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
+        else go();
+      })();
     </script>
   </body>
 </html>
diff --git a/registry/blocks/code-snippet-flight/code-snippet-flight.html b/registry/blocks/code-snippet-flight/code-snippet-flight.html
index 46eba07736..25a700c3c7 100644
--- a/registry/blocks/code-snippet-flight/code-snippet-flight.html
+++ b/registry/blocks/code-snippet-flight/code-snippet-flight.html
@@ -6,37 +6,225 @@
     <title>Code Snippet Flight</title>
     <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
     <style>
-      * { margin: 0; padding: 0; box-sizing: border-box; }
-      html, body { width: 1920px; height: 1080px; overflow: hidden; background: #05070b; }
-      #root { position: relative; width: 1920px; height: 1080px; font-family: "JetBrains Mono", monospace; color: #e6edf3; }
-      .bg-field { position: absolute; inset: 0; background: radial-gradient(1200px 700px at 50% 18%, #0e1726 0%, #070b12 55%, #05070b 100%); }
-      .bg-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(88,166,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(88,166,255,0.05) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(1100px 620px at 50% 42%, #000 0%, transparent 78%); }
-      .bg-glow { position: absolute; width: 900px; height: 900px; border-radius: 50%; filter: blur(120px); opacity: 0.5; }
-      .bg-glow.a { background: #1f6feb55; left: -180px; top: -200px; }
-      .bg-glow.b { background: #2ea04355; right: -200px; bottom: -260px; }
-      .editor { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 1380px; height: 800px; background: #0b0f17; border: 1px solid #1d2733; border-radius: 16px; box-shadow: 0 40px 120px rgba(0,0,0,0.6), 0 2px 0 rgba(255,255,255,0.03) inset; overflow: hidden; display: flex; flex-direction: column; }
-      .titlebar { height: 56px; flex: 0 0 56px; display: flex; align-items: center; gap: 16px; padding: 0 22px; background: linear-gradient(#11161f, #0c111a); border-bottom: 1px solid #1b2430; }
-      .dots { display: flex; gap: 10px; }
-      .dot { width: 14px; height: 14px; border-radius: 50%; }
-      .dot.r { background: #ff5f57; } .dot.y { background: #febc2e; } .dot.g { background: #28c840; }
-      .filename { font-size: 19px; color: #8b98a9; letter-spacing: 0.2px; }
-      .filename .accent { color: #d6e2f0; }
-      .code-surface { position: relative; flex: 1 1 auto; overflow: hidden; }
-      .scene { position: absolute; inset: 0; opacity: 0; will-change: opacity; }
-      .code { position: absolute; top: 38px; left: 0; right: 0; padding: 0 44px 0 104px; font-size: 30px; line-height: 46px; font-variant-ligatures: none; tab-size: 2; }
-      .gutter { position: absolute; top: 38px; left: 0; width: 84px; padding-right: 18px; font-size: 30px; line-height: 46px; text-align: right; color: #828c9b; user-select: none; }
-      .ln { display: block; height: 46px; }
-      .line { display: block; min-height: 46px; white-space: pre; position: relative; z-index: 1; }
-      .tok { display: inline-block; white-space: pre; will-change: transform, opacity; }
-      .caret { position: absolute; top: 0; left: 0; width: 3px; height: 32px; margin-top: 6px; background: #58a6ff; border-radius: 1px; z-index: 3; }
-      .hl-box { position: absolute; background: rgba(88,166,255,0.16); border-left: 3px solid #58a6ff; border-radius: 6px; z-index: 0; overflow: hidden; }
-      .diff-line { display: block; min-height: 0; line-height: 46px; white-space: pre; position: relative; overflow: hidden; padding-left: 14px; }
-      .diff-sign { display: inline-block; width: 22px; color: #41506220; }
-      .diff-del { background: rgba(248,81,73,0.12); box-shadow: inset 3px 0 #f85149; }
-      .diff-add { background: rgba(63,185,80,0.12); box-shadow: inset 3px 0 #3fb950; }
-      .diff-del .diff-sign { color: #f85149; } .diff-add .diff-sign { color: #3fb950; }
-      .flight-block { position: absolute; white-space: pre; font-size: 27px; line-height: 40px; padding: 11px 22px; border-radius: 11px; background: #0f1722; border: 1px solid #233044; box-shadow: 0 16px 44px rgba(0,0,0,0.5); will-change: transform, opacity; }
-      .flight-target { position: absolute; border: 1.5px dashed #2a3a4f; border-radius: 14px; opacity: 0; }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #05070b;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        font-family: "JetBrains Mono", monospace;
+        color: #e6edf3;
+      }
+      .bg-field {
+        position: absolute;
+        inset: 0;
+        background: radial-gradient(1200px 700px at 50% 18%, #0e1726 0%, #070b12 55%, #05070b 100%);
+      }
+      .bg-grid {
+        position: absolute;
+        inset: 0;
+        background-image:
+          linear-gradient(rgba(88, 166, 255, 0.05) 1px, transparent 1px),
+          linear-gradient(90deg, rgba(88, 166, 255, 0.05) 1px, transparent 1px);
+        background-size: 64px 64px;
+        mask-image: radial-gradient(1100px 620px at 50% 42%, #000 0%, transparent 78%);
+      }
+      .bg-glow {
+        position: absolute;
+        width: 900px;
+        height: 900px;
+        border-radius: 50%;
+        filter: blur(120px);
+        opacity: 0.5;
+      }
+      .bg-glow.a {
+        background: #1f6feb55;
+        left: -180px;
+        top: -200px;
+      }
+      .bg-glow.b {
+        background: #2ea04355;
+        right: -200px;
+        bottom: -260px;
+      }
+      .editor {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 1380px;
+        height: 800px;
+        background: #0b0f17;
+        border: 1px solid #1d2733;
+        border-radius: 16px;
+        box-shadow:
+          0 40px 120px rgba(0, 0, 0, 0.6),
+          0 2px 0 rgba(255, 255, 255, 0.03) inset;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+      }
+      .titlebar {
+        height: 56px;
+        flex: 0 0 56px;
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        padding: 0 22px;
+        background: linear-gradient(#11161f, #0c111a);
+        border-bottom: 1px solid #1b2430;
+      }
+      .dots {
+        display: flex;
+        gap: 10px;
+      }
+      .dot {
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+      }
+      .dot.r {
+        background: #ff5f57;
+      }
+      .dot.y {
+        background: #febc2e;
+      }
+      .dot.g {
+        background: #28c840;
+      }
+      .filename {
+        font-size: 19px;
+        color: #8b98a9;
+        letter-spacing: 0.2px;
+      }
+      .filename .accent {
+        color: #d6e2f0;
+      }
+      .code-surface {
+        position: relative;
+        flex: 1 1 auto;
+        overflow: hidden;
+      }
+      .scene {
+        position: absolute;
+        inset: 0;
+        opacity: 0;
+        will-change: opacity;
+      }
+      .code {
+        position: absolute;
+        top: 38px;
+        left: 0;
+        right: 0;
+        padding: 0 44px 0 104px;
+        font-size: 30px;
+        line-height: 46px;
+        font-variant-ligatures: none;
+        tab-size: 2;
+      }
+      .gutter {
+        position: absolute;
+        top: 38px;
+        left: 0;
+        width: 84px;
+        padding-right: 18px;
+        font-size: 30px;
+        line-height: 46px;
+        text-align: right;
+        color: #828c9b;
+        user-select: none;
+      }
+      .ln {
+        display: block;
+        height: 46px;
+      }
+      .line {
+        display: block;
+        min-height: 46px;
+        white-space: pre;
+        position: relative;
+        z-index: 1;
+      }
+      .tok {
+        display: inline-block;
+        white-space: pre;
+        will-change: transform, opacity;
+      }
+      .caret {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 3px;
+        height: 32px;
+        margin-top: 6px;
+        background: #58a6ff;
+        border-radius: 1px;
+        z-index: 3;
+      }
+      .hl-box {
+        position: absolute;
+        background: rgba(88, 166, 255, 0.16);
+        border-left: 3px solid #58a6ff;
+        border-radius: 6px;
+        z-index: 0;
+        overflow: hidden;
+      }
+      .diff-line {
+        display: block;
+        min-height: 0;
+        line-height: 46px;
+        white-space: pre;
+        position: relative;
+        overflow: hidden;
+        padding-left: 14px;
+      }
+      .diff-sign {
+        display: inline-block;
+        width: 22px;
+        color: #41506220;
+      }
+      .diff-del {
+        background: rgba(248, 81, 73, 0.12);
+        box-shadow: inset 3px 0 #f85149;
+      }
+      .diff-add {
+        background: rgba(63, 185, 80, 0.12);
+        box-shadow: inset 3px 0 #3fb950;
+      }
+      .diff-del .diff-sign {
+        color: #f85149;
+      }
+      .diff-add .diff-sign {
+        color: #3fb950;
+      }
+      .flight-block {
+        position: absolute;
+        white-space: pre;
+        font-size: 27px;
+        line-height: 40px;
+        padding: 11px 22px;
+        border-radius: 11px;
+        background: #0f1722;
+        border: 1px solid #233044;
+        box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
+        will-change: transform, opacity;
+      }
+      .flight-target {
+        position: absolute;
+        border: 1.5px dashed #2a3a4f;
+        border-radius: 14px;
+        opacity: 0;
+      }
     </style>
   </head>
   <body>
@@ -54,231 +242,424 @@
       <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>
-          <span class="filename"><span class="accent">pipeline.js</span> — Code Snippet Flight</span>
+          <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>
         <div class="code-surface" id="surface"></div>
       </div>
     </div>
     <script>
-      window.__TOKENS = {"flight":{"lang":"js","theme":"github-dark","bg":"#24292e","fg":"#e1e4e8","states":[{"code":"const x = parse(input)","tokens":[{"key":"qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-0","content":"const","color":"#F97583","fontStyle":0},{"key":"qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-1","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-2","content":"x","color":"#79B8FF","fontStyle":0},{"key":"qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-3","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-4","content":"=","color":"#F97583","fontStyle":0},{"key":"qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-5","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-6","content":"parse","color":"#B392F0","fontStyle":0},{"key":"qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-7","content":"(input)","color":"#E1E4E8","fontStyle":0},{"key":"qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-8","content":"\n","color":"#e1e4e8","fontStyle":0}]},{"code":"const y = transform(x)","tokens":[{"key":"qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-0","content":"const","color":"#F97583","fontStyle":0},{"key":"qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-1","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"ulDeJnFQa2Vy-61y5zTTA7sNfq7d4aUawNMAxQ6sVgg-2","content":"y","color":"#79B8FF","fontStyle":0},{"key":"qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-3","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-4","content":"=","color":"#F97583","fontStyle":0},{"key":"qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-5","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"ulDeJnFQa2Vy-61y5zTTA7sNfq7d4aUawNMAxQ6sVgg-6","content":"transform","color":"#B392F0","fontStyle":0},{"key":"ulDeJnFQa2Vy-61y5zTTA7sNfq7d4aUawNMAxQ6sVgg-7","content":"(x)","color":"#E1E4E8","fontStyle":0},{"key":"ulDeJnFQa2Vy-61y5zTTA7sNfq7d4aUawNMAxQ6sVgg-8","content":"\n","color":"#e1e4e8","fontStyle":0}]},{"code":"const z = render(y)","tokens":[{"key":"qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-0","content":"const","color":"#F97583","fontStyle":0},{"key":"qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-1","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"wFuhzZNydG-3inU2s1h1gU8Kivya8CAP9gl9S4MBQj4-2","content":"z","color":"#79B8FF","fontStyle":0},{"key":"qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-3","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-4","content":"=","color":"#F97583","fontStyle":0},{"key":"qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-5","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"wFuhzZNydG-3inU2s1h1gU8Kivya8CAP9gl9S4MBQj4-6","content":"render","color":"#B392F0","fontStyle":0},{"key":"wFuhzZNydG-3inU2s1h1gU8Kivya8CAP9gl9S4MBQj4-7","content":"(y)","color":"#E1E4E8","fontStyle":0},{"key":"wFuhzZNydG-3inU2s1h1gU8Kivya8CAP9gl9S4MBQj4-8","content":"\n","color":"#e1e4e8","fontStyle":0}]}]}};
-      window.__BLOCK = {"id":"code-snippet-flight","effect":"flight","seq":"flight","duration":6};
+      window.__TOKENS = {
+        flight: {
+          lang: "js",
+          theme: "github-dark",
+          bg: "#24292e",
+          fg: "#e1e4e8",
+          states: [
+            {
+              code: "const x = parse(input)",
+              tokens: [
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-0",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-1",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-2",
+                  content: "x",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-3",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-4",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-5",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-6",
+                  content: "parse",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-7",
+                  content: "(input)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-8",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+              ],
+            },
+            {
+              code: "const y = transform(x)",
+              tokens: [
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-0",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-1",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "ulDeJnFQa2Vy-61y5zTTA7sNfq7d4aUawNMAxQ6sVgg-2",
+                  content: "y",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-3",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-4",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-5",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "ulDeJnFQa2Vy-61y5zTTA7sNfq7d4aUawNMAxQ6sVgg-6",
+                  content: "transform",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "ulDeJnFQa2Vy-61y5zTTA7sNfq7d4aUawNMAxQ6sVgg-7",
+                  content: "(x)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "ulDeJnFQa2Vy-61y5zTTA7sNfq7d4aUawNMAxQ6sVgg-8",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+              ],
+            },
+            {
+              code: "const z = render(y)",
+              tokens: [
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-0",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-1",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "wFuhzZNydG-3inU2s1h1gU8Kivya8CAP9gl9S4MBQj4-2",
+                  content: "z",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-3",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-4",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-5",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "wFuhzZNydG-3inU2s1h1gU8Kivya8CAP9gl9S4MBQj4-6",
+                  content: "render",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "wFuhzZNydG-3inU2s1h1gU8Kivya8CAP9gl9S4MBQj4-7",
+                  content: "(y)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "wFuhzZNydG-3inU2s1h1gU8Kivya8CAP9gl9S4MBQj4-8",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+              ],
+            },
+          ],
+        },
+      };
+      window.__BLOCK = { id: "code-snippet-flight", effect: "flight", seq: "flight", duration: 6 };
     </script>
     <script>
-// 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
-// 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].
-(function () {
-  "use strict";
-  var T = window.__TOKENS || {};
-
-  function lineDiv() {
-    var d = document.createElement("div");
-    d.className = "line";
-    return d;
-  }
+      // 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
+      // 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].
+      (function () {
+        "use strict";
+        var T = window.__TOKENS || {};
 
-  // Render a code state's keyed tokens into codeEl as lines of inline-block .tok spans.
-  function renderState(codeEl, state) {
-    codeEl.textContent = "";
-    var keyToEl = new Map();
-    var line = lineDiv();
-    codeEl.appendChild(line);
-    for (var i = 0; i < state.tokens.length; i++) {
-      var t = state.tokens[i];
-      if (t.content === "\n") {
-        line = lineDiv();
-        codeEl.appendChild(line);
-        continue;
-      }
-      var span = document.createElement("span");
-      span.className = "tok";
-      span.textContent = t.content;
-      span.style.color = t.color;
-      if (t.fontStyle & 1) span.style.fontStyle = "italic";
-      if (t.fontStyle & 2) span.style.fontWeight = "700";
-      line.appendChild(span);
-      keyToEl.set(t.key, span);
-    }
-    var last = codeEl.lastChild;
-    if (last && last.className === "line" && last.children.length === 0) codeEl.removeChild(last);
-    return keyToEl;
-  }
+        function lineDiv() {
+          var d = document.createElement("div");
+          d.className = "line";
+          return d;
+        }
 
-  function rectsOf(keyToEl) {
-    var m = new Map();
-    keyToEl.forEach(function (el, k) {
-      var r = el.getBoundingClientRect();
-      m.set(k, { left: r.left, top: r.top });
-    });
-    return m;
-  }
+        // Render a code state's keyed tokens into codeEl as lines of inline-block .tok spans.
+        function renderState(codeEl, state) {
+          codeEl.textContent = "";
+          var keyToEl = new Map();
+          var line = lineDiv();
+          codeEl.appendChild(line);
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              line = lineDiv();
+              codeEl.appendChild(line);
+              continue;
+            }
+            var span = document.createElement("span");
+            span.className = "tok";
+            span.textContent = t.content;
+            span.style.color = t.color;
+            if (t.fontStyle & 1) span.style.fontStyle = "italic";
+            if (t.fontStyle & 2) span.style.fontWeight = "700";
+            line.appendChild(span);
+            keyToEl.set(t.key, span);
+          }
+          var last = codeEl.lastChild;
+          if (last && last.className === "line" && last.children.length === 0)
+            codeEl.removeChild(last);
+          return keyToEl;
+        }
 
-  function makeScene(surface, withGutter) {
-    var scene = document.createElement("div");
-    scene.className = "scene";
-    if (withGutter) {
-      var g = document.createElement("div");
-      g.className = "gutter";
-      scene.appendChild(g);
-    }
-    var code = document.createElement("div");
-    code.className = "code";
-    scene.appendChild(code);
-    surface.appendChild(scene);
-    return { scene: scene, code: code, gutter: scene.querySelector(".gutter") };
-  }
+        function rectsOf(keyToEl) {
+          var m = new Map();
+          keyToEl.forEach(function (el, k) {
+            var r = el.getBoundingClientRect();
+            m.set(k, { left: r.left, top: r.top });
+          });
+          return m;
+        }
 
-  function fillGutter(g, n) {
-    var html = "";
-    for (var i = 1; i <= n; i++) html += '<span class="ln">' + i + "</span>";
-    g.innerHTML = html;
-  }
+        function makeScene(surface, withGutter) {
+          var scene = document.createElement("div");
+          scene.className = "scene";
+          if (withGutter) {
+            var g = document.createElement("div");
+            g.className = "gutter";
+            scene.appendChild(g);
+          }
+          var code = document.createElement("div");
+          code.className = "code";
+          scene.appendChild(code);
+          surface.appendChild(scene);
+          return { scene: scene, code: code, gutter: scene.querySelector(".gutter") };
+        }
 
-  function splitLines(state) {
-    var lines = [{ text: "", tokens: [] }];
-    for (var i = 0; i < state.tokens.length; i++) {
-      var t = state.tokens[i];
-      if (t.content === "\n") {
-        lines.push({ text: "", tokens: [] });
-        continue;
-      }
-      var cur = lines[lines.length - 1];
-      cur.tokens.push(t);
-      cur.text += t.content;
-    }
-    if (lines.length && lines[lines.length - 1].tokens.length === 0) lines.pop();
-    return lines;
-  }
+        function fillGutter(g, n) {
+          var html = "";
+          for (var i = 1; i <= n; i++) html += '<span class="ln">' + i + "</span>";
+          g.innerHTML = html;
+        }
 
-  function lineDiff(a, b) {
-    var n = a.length;
-    var m = b.length;
-    var dp = [];
-    for (var i = 0; i <= n; i++) dp.push(new Array(m + 1).fill(0));
-    for (var i = n - 1; i >= 0; i--) {
-      for (var j = m - 1; j >= 0; j--) {
-        dp[i][j] = a[i].text === b[j].text ? dp[i + 1][j + 1] + 1 : Math.max(dp[i + 1][j], dp[i][j + 1]);
-      }
-    }
-    var ops = [];
-    var i = 0;
-    var j = 0;
-    while (i < n && j < m) {
-      if (a[i].text === b[j].text) {
-        ops.push({ type: "same", line: b[j] });
-        i++;
-        j++;
-      } else if (dp[i + 1][j] >= dp[i][j + 1]) {
-        ops.push({ type: "del", line: a[i] });
-        i++;
-      } else {
-        ops.push({ type: "add", line: b[j] });
-        j++;
-      }
-    }
-    while (i < n) ops.push({ type: "del", line: a[i++] });
-    while (j < m) ops.push({ type: "add", line: b[j++] });
-    return ops;
-  }
+        function splitLines(state) {
+          var lines = [{ text: "", tokens: [] }];
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              lines.push({ text: "", tokens: [] });
+              continue;
+            }
+            var cur = lines[lines.length - 1];
+            cur.tokens.push(t);
+            cur.text += t.content;
+          }
+          if (lines.length && lines[lines.length - 1].tokens.length === 0) lines.pop();
+          return lines;
+        }
 
-  // ---- single-scene effect builders (fade in, play, hold to end) -------------
-  var FADE = 0.45;
+        function lineDiff(a, b) {
+          var n = a.length;
+          var m = b.length;
+          var dp = [];
+          for (var i = 0; i <= n; i++) dp.push(new Array(m + 1).fill(0));
+          for (var i = n - 1; i >= 0; i--) {
+            for (var j = m - 1; j >= 0; j--) {
+              dp[i][j] =
+                a[i].text === b[j].text
+                  ? dp[i + 1][j + 1] + 1
+                  : Math.max(dp[i + 1][j], dp[i][j + 1]);
+            }
+          }
+          var ops = [];
+          var i = 0;
+          var j = 0;
+          while (i < n && j < m) {
+            if (a[i].text === b[j].text) {
+              ops.push({ type: "same", line: b[j] });
+              i++;
+              j++;
+            } else if (dp[i + 1][j] >= dp[i][j + 1]) {
+              ops.push({ type: "del", line: a[i] });
+              i++;
+            } else {
+              ops.push({ type: "add", line: b[j] });
+              j++;
+            }
+          }
+          while (i < n) ops.push({ type: "del", line: a[i++] });
+          while (j < m) ops.push({ type: "add", line: b[j++] });
+          return ops;
+        }
 
-  function flight(tl, surface, states, start) {
-    var FLY = 0.95;
-    var STAGGER = 0.26;
-    var GAP = 20;
-    var parts = makeScene(surface, false);
-    parts.code.remove();
-    var scene = parts.scene;
-    var target = document.createElement("div");
-    target.className = "flight-target";
-    scene.appendChild(target);
-    var W = surface.clientWidth;
-    var H = surface.clientHeight;
+        // ---- single-scene effect builders (fade in, play, hold to end) -------------
+        var FADE = 0.45;
 
-    var blocks = states.map(function (st) {
-      var blk = document.createElement("div");
-      blk.className = "flight-block";
-      renderState(blk, st);
-      scene.appendChild(blk);
-      return blk;
-    });
-    var n = blocks.length;
+        function flight(tl, surface, states, start) {
+          var FLY = 0.95;
+          var STAGGER = 0.26;
+          var GAP = 20;
+          var parts = makeScene(surface, false);
+          parts.code.remove();
+          var scene = parts.scene;
+          var target = document.createElement("div");
+          target.className = "flight-target";
+          scene.appendChild(target);
+          var W = surface.clientWidth;
+          var H = surface.clientHeight;
 
-    // Pass 1: measure natural size, then make every chip the SAME width (symmetry).
-    var maxW = 0;
-    var chipH = 0;
-    blocks.forEach(function (blk) {
-      var r = blk.getBoundingClientRect();
-      if (r.width > maxW) maxW = r.width;
-      if (r.height > chipH) chipH = r.height;
-    });
-    blocks.forEach(function (blk) {
-      blk.style.width = maxW + "px";
-    });
+          var blocks = states.map(function (st) {
+            var blk = document.createElement("div");
+            blk.className = "flight-block";
+            renderState(blk, st);
+            scene.appendChild(blk);
+            return blk;
+          });
+          var n = blocks.length;
 
-    // Pass 2: evenly-stacked, left-aligned, group centered in the surface.
-    var stackH = n * chipH + (n - 1) * GAP;
-    var destLeft = Math.round((W - maxW) / 2);
-    var topY = Math.round((H - stackH) / 2);
-    blocks.forEach(function (blk, i) {
-      var destY = topY + i * (chipH + GAP);
-      blk.style.left = destLeft + "px";
-      blk.style.top = destY + "px";
-      // fly straight in from the left to the shared left edge — clean, no skew
-      var srcX = destLeft - W * 0.32;
-      tl.fromTo(
-        blk,
-        { x: srcX - destLeft, opacity: 0, scale: 0.96 },
-        { x: 0, opacity: 1, scale: 1, duration: FLY, ease: "power3.out" },
-        start + FADE + i * STAGGER,
-      );
-    });
+          // Pass 1: measure natural size, then make every chip the SAME width (symmetry).
+          var maxW = 0;
+          var chipH = 0;
+          blocks.forEach(function (blk) {
+            var r = blk.getBoundingClientRect();
+            if (r.width > maxW) maxW = r.width;
+            if (r.height > chipH) chipH = r.height;
+          });
+          blocks.forEach(function (blk) {
+            blk.style.width = maxW + "px";
+          });
 
-    // Even-padded panel tightly wrapping the uniform stack.
-    var padX = 30;
-    var padY = 24;
-    target.style.left = destLeft - padX + "px";
-    target.style.top = topY - padY + "px";
-    target.style.width = maxW + padX * 2 + "px";
-    target.style.height = stackH + padY * 2 + "px";
-    var landAt = start + FADE + (n - 1) * STAGGER + FLY;
-    tl.set(scene, { opacity: 1 }, 0);
-    tl.to(target, { opacity: 1, duration: 0.5, ease: "power1.out" }, landAt - 0.5);
-  }
+          // Pass 2: evenly-stacked, left-aligned, group centered in the surface.
+          var stackH = n * chipH + (n - 1) * GAP;
+          var destLeft = Math.round((W - maxW) / 2);
+          var topY = Math.round((H - stackH) / 2);
+          blocks.forEach(function (blk, i) {
+            var destY = topY + i * (chipH + GAP);
+            blk.style.left = destLeft + "px";
+            blk.style.top = destY + "px";
+            // fly straight in from the left to the shared left edge — clean, no skew
+            var srcX = destLeft - W * 0.32;
+            tl.fromTo(
+              blk,
+              { x: srcX - destLeft, opacity: 0, scale: 0.96 },
+              { x: 0, opacity: 1, scale: 1, duration: FLY, ease: "power3.out" },
+              start + FADE + i * STAGGER,
+            );
+          });
 
-  function buildEffect(tl, surface, spec) {
-    var start = 0.45;
-    var seq = T[spec.seq];
-    if (spec.effect === "flight") flight(tl, surface, seq.states, start);
-  }
+          // Even-padded panel tightly wrapping the uniform stack.
+          var padX = 30;
+          var padY = 24;
+          target.style.left = destLeft - padX + "px";
+          target.style.top = topY - padY + "px";
+          target.style.width = maxW + padX * 2 + "px";
+          target.style.height = stackH + padY * 2 + "px";
+          var landAt = start + FADE + (n - 1) * STAGGER + FLY;
+          tl.set(scene, { opacity: 1 }, 0);
+          tl.to(target, { opacity: 1, duration: 0.5, ease: "power1.out" }, landAt - 0.5);
+        }
 
-  function go() {
-    var spec = window.__BLOCK;
-    var surface = document.getElementById("surface");
-    var root = document.getElementById("root");
-    window.__timelines = window.__timelines || {};
-    var tl = gsap.timeline({ paused: true });
-    window.__timelines["code-snippet-flight"] = tl; // register synchronously
-    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
-    });
-  }
+        function buildEffect(tl, surface, spec) {
+          var start = 0.45;
+          var seq = T[spec.seq];
+          if (spec.effect === "flight") flight(tl, surface, seq.states, start);
+        }
 
-  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
-  else go();
-})();
+        function go() {
+          var spec = window.__BLOCK;
+          var surface = document.getElementById("surface");
+          var root = document.getElementById("root");
+          window.__timelines = window.__timelines || {};
+          var tl = gsap.timeline({ paused: true });
+          window.__timelines["code-snippet-flight"] = tl; // register synchronously
+          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
+          });
+        }
 
+        if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
+        else go();
+      })();
     </script>
   </body>
 </html>
diff --git a/registry/blocks/code-typing/code-typing.html b/registry/blocks/code-typing/code-typing.html
index a8e1ffa29f..62edf975e1 100644
--- a/registry/blocks/code-typing/code-typing.html
+++ b/registry/blocks/code-typing/code-typing.html
@@ -6,37 +6,225 @@
     <title>Code Typing</title>
     <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
     <style>
-      * { margin: 0; padding: 0; box-sizing: border-box; }
-      html, body { width: 1920px; height: 1080px; overflow: hidden; background: #05070b; }
-      #root { position: relative; width: 1920px; height: 1080px; font-family: "JetBrains Mono", monospace; color: #e6edf3; }
-      .bg-field { position: absolute; inset: 0; background: radial-gradient(1200px 700px at 50% 18%, #0e1726 0%, #070b12 55%, #05070b 100%); }
-      .bg-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(88,166,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(88,166,255,0.05) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(1100px 620px at 50% 42%, #000 0%, transparent 78%); }
-      .bg-glow { position: absolute; width: 900px; height: 900px; border-radius: 50%; filter: blur(120px); opacity: 0.5; }
-      .bg-glow.a { background: #1f6feb55; left: -180px; top: -200px; }
-      .bg-glow.b { background: #2ea04355; right: -200px; bottom: -260px; }
-      .editor { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 1380px; height: 800px; background: #0b0f17; border: 1px solid #1d2733; border-radius: 16px; box-shadow: 0 40px 120px rgba(0,0,0,0.6), 0 2px 0 rgba(255,255,255,0.03) inset; overflow: hidden; display: flex; flex-direction: column; }
-      .titlebar { height: 56px; flex: 0 0 56px; display: flex; align-items: center; gap: 16px; padding: 0 22px; background: linear-gradient(#11161f, #0c111a); border-bottom: 1px solid #1b2430; }
-      .dots { display: flex; gap: 10px; }
-      .dot { width: 14px; height: 14px; border-radius: 50%; }
-      .dot.r { background: #ff5f57; } .dot.y { background: #febc2e; } .dot.g { background: #28c840; }
-      .filename { font-size: 19px; color: #8b98a9; letter-spacing: 0.2px; }
-      .filename .accent { color: #d6e2f0; }
-      .code-surface { position: relative; flex: 1 1 auto; overflow: hidden; }
-      .scene { position: absolute; inset: 0; opacity: 0; will-change: opacity; }
-      .code { position: absolute; top: 38px; left: 0; right: 0; padding: 0 44px 0 104px; font-size: 30px; line-height: 46px; font-variant-ligatures: none; tab-size: 2; }
-      .gutter { position: absolute; top: 38px; left: 0; width: 84px; padding-right: 18px; font-size: 30px; line-height: 46px; text-align: right; color: #828c9b; user-select: none; }
-      .ln { display: block; height: 46px; }
-      .line { display: block; min-height: 46px; white-space: pre; position: relative; z-index: 1; }
-      .tok { display: inline-block; white-space: pre; will-change: transform, opacity; }
-      .caret { position: absolute; top: 0; left: 0; width: 3px; height: 32px; margin-top: 6px; background: #58a6ff; border-radius: 1px; z-index: 3; }
-      .hl-box { position: absolute; background: rgba(88,166,255,0.16); border-left: 3px solid #58a6ff; border-radius: 6px; z-index: 0; overflow: hidden; }
-      .diff-line { display: block; min-height: 0; line-height: 46px; white-space: pre; position: relative; overflow: hidden; padding-left: 14px; }
-      .diff-sign { display: inline-block; width: 22px; color: #41506220; }
-      .diff-del { background: rgba(248,81,73,0.12); box-shadow: inset 3px 0 #f85149; }
-      .diff-add { background: rgba(63,185,80,0.12); box-shadow: inset 3px 0 #3fb950; }
-      .diff-del .diff-sign { color: #f85149; } .diff-add .diff-sign { color: #3fb950; }
-      .flight-block { position: absolute; white-space: pre; font-size: 27px; line-height: 40px; padding: 11px 22px; border-radius: 11px; background: #0f1722; border: 1px solid #233044; box-shadow: 0 16px 44px rgba(0,0,0,0.5); will-change: transform, opacity; }
-      .flight-target { position: absolute; border: 1.5px dashed #2a3a4f; border-radius: 14px; opacity: 0; }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #05070b;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        font-family: "JetBrains Mono", monospace;
+        color: #e6edf3;
+      }
+      .bg-field {
+        position: absolute;
+        inset: 0;
+        background: radial-gradient(1200px 700px at 50% 18%, #0e1726 0%, #070b12 55%, #05070b 100%);
+      }
+      .bg-grid {
+        position: absolute;
+        inset: 0;
+        background-image:
+          linear-gradient(rgba(88, 166, 255, 0.05) 1px, transparent 1px),
+          linear-gradient(90deg, rgba(88, 166, 255, 0.05) 1px, transparent 1px);
+        background-size: 64px 64px;
+        mask-image: radial-gradient(1100px 620px at 50% 42%, #000 0%, transparent 78%);
+      }
+      .bg-glow {
+        position: absolute;
+        width: 900px;
+        height: 900px;
+        border-radius: 50%;
+        filter: blur(120px);
+        opacity: 0.5;
+      }
+      .bg-glow.a {
+        background: #1f6feb55;
+        left: -180px;
+        top: -200px;
+      }
+      .bg-glow.b {
+        background: #2ea04355;
+        right: -200px;
+        bottom: -260px;
+      }
+      .editor {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 1380px;
+        height: 800px;
+        background: #0b0f17;
+        border: 1px solid #1d2733;
+        border-radius: 16px;
+        box-shadow:
+          0 40px 120px rgba(0, 0, 0, 0.6),
+          0 2px 0 rgba(255, 255, 255, 0.03) inset;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+      }
+      .titlebar {
+        height: 56px;
+        flex: 0 0 56px;
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        padding: 0 22px;
+        background: linear-gradient(#11161f, #0c111a);
+        border-bottom: 1px solid #1b2430;
+      }
+      .dots {
+        display: flex;
+        gap: 10px;
+      }
+      .dot {
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+      }
+      .dot.r {
+        background: #ff5f57;
+      }
+      .dot.y {
+        background: #febc2e;
+      }
+      .dot.g {
+        background: #28c840;
+      }
+      .filename {
+        font-size: 19px;
+        color: #8b98a9;
+        letter-spacing: 0.2px;
+      }
+      .filename .accent {
+        color: #d6e2f0;
+      }
+      .code-surface {
+        position: relative;
+        flex: 1 1 auto;
+        overflow: hidden;
+      }
+      .scene {
+        position: absolute;
+        inset: 0;
+        opacity: 0;
+        will-change: opacity;
+      }
+      .code {
+        position: absolute;
+        top: 38px;
+        left: 0;
+        right: 0;
+        padding: 0 44px 0 104px;
+        font-size: 30px;
+        line-height: 46px;
+        font-variant-ligatures: none;
+        tab-size: 2;
+      }
+      .gutter {
+        position: absolute;
+        top: 38px;
+        left: 0;
+        width: 84px;
+        padding-right: 18px;
+        font-size: 30px;
+        line-height: 46px;
+        text-align: right;
+        color: #828c9b;
+        user-select: none;
+      }
+      .ln {
+        display: block;
+        height: 46px;
+      }
+      .line {
+        display: block;
+        min-height: 46px;
+        white-space: pre;
+        position: relative;
+        z-index: 1;
+      }
+      .tok {
+        display: inline-block;
+        white-space: pre;
+        will-change: transform, opacity;
+      }
+      .caret {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 3px;
+        height: 32px;
+        margin-top: 6px;
+        background: #58a6ff;
+        border-radius: 1px;
+        z-index: 3;
+      }
+      .hl-box {
+        position: absolute;
+        background: rgba(88, 166, 255, 0.16);
+        border-left: 3px solid #58a6ff;
+        border-radius: 6px;
+        z-index: 0;
+        overflow: hidden;
+      }
+      .diff-line {
+        display: block;
+        min-height: 0;
+        line-height: 46px;
+        white-space: pre;
+        position: relative;
+        overflow: hidden;
+        padding-left: 14px;
+      }
+      .diff-sign {
+        display: inline-block;
+        width: 22px;
+        color: #41506220;
+      }
+      .diff-del {
+        background: rgba(248, 81, 73, 0.12);
+        box-shadow: inset 3px 0 #f85149;
+      }
+      .diff-add {
+        background: rgba(63, 185, 80, 0.12);
+        box-shadow: inset 3px 0 #3fb950;
+      }
+      .diff-del .diff-sign {
+        color: #f85149;
+      }
+      .diff-add .diff-sign {
+        color: #3fb950;
+      }
+      .flight-block {
+        position: absolute;
+        white-space: pre;
+        font-size: 27px;
+        line-height: 40px;
+        padding: 11px 22px;
+        border-radius: 11px;
+        background: #0f1722;
+        border: 1px solid #233044;
+        box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
+        will-change: transform, opacity;
+      }
+      .flight-target {
+        position: absolute;
+        border: 1.5px dashed #2a3a4f;
+        border-radius: 14px;
+        opacity: 0;
+      }
     </style>
   </head>
   <body>
@@ -54,225 +242,513 @@
       <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>
+          <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>
         <div class="code-surface" id="surface"></div>
       </div>
     </div>
     <script>
-      window.__TOKENS = {"feature":{"lang":"js","theme":"github-dark","bg":"#24292e","fg":"#e1e4e8","states":[{"code":"async function loadConfig(path) {\n  const raw = await readFile(path, \"utf8\")\n  const config = JSON.parse(raw)\n  return validate(config)\n}","tokens":[{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-0","content":"async","color":"#F97583","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-1","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-2","content":"function","color":"#F97583","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-3","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-4","content":"loadConfig","color":"#B392F0","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-5","content":"(","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-6","content":"path","color":"#FFAB70","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-7","content":") {","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-8","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-9","content":"  ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-10","content":"const","color":"#F97583","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-11","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-12","content":"raw","color":"#79B8FF","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-13","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-14","content":"=","color":"#F97583","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-15","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-16","content":"await","color":"#F97583","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-17","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-18","content":"readFile","color":"#B392F0","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-19","content":"(path,","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-20","content":" ","color":"#e1e4e8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-21","content":"\"utf8\"","color":"#9ECBFF","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-22","content":")","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-23","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-24","content":"  ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-25","content":"const","color":"#F97583","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-26","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-27","content":"config","color":"#79B8FF","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-28","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-29","content":"=","color":"#F97583","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-30","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-31","content":"JSON","color":"#79B8FF","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-32","content":".","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-33","content":"parse","color":"#B392F0","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-34","content":"(raw)","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-35","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-36","content":"  ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-37","content":"return","color":"#F97583","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-38","content":" ","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-39","content":"validate","color":"#B392F0","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-40","content":"(config)","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-41","content":"\n","color":"#e1e4e8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-42","content":"}","color":"#E1E4E8","fontStyle":0},{"key":"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-43","content":"\n","color":"#e1e4e8","fontStyle":0}]}]}};
-      window.__BLOCK = {"id":"code-typing","effect":"typing","seq":"feature","duration":5};
+      window.__TOKENS = {
+        feature: {
+          lang: "js",
+          theme: "github-dark",
+          bg: "#24292e",
+          fg: "#e1e4e8",
+          states: [
+            {
+              code: 'async function loadConfig(path) {\n  const raw = await readFile(path, "utf8")\n  const config = JSON.parse(raw)\n  return validate(config)\n}',
+              tokens: [
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-0",
+                  content: "async",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-1",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-2",
+                  content: "function",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-3",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-4",
+                  content: "loadConfig",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-5",
+                  content: "(",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-6",
+                  content: "path",
+                  color: "#FFAB70",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-7",
+                  content: ") {",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-8",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-9",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-10",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-11",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-12",
+                  content: "raw",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-13",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-14",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-15",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-16",
+                  content: "await",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-17",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-18",
+                  content: "readFile",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-19",
+                  content: "(path,",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-20",
+                  content: " ",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-21",
+                  content: '"utf8"',
+                  color: "#9ECBFF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-22",
+                  content: ")",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-23",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-24",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-25",
+                  content: "const",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-26",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-27",
+                  content: "config",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-28",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-29",
+                  content: "=",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-30",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-31",
+                  content: "JSON",
+                  color: "#79B8FF",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-32",
+                  content: ".",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-33",
+                  content: "parse",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-34",
+                  content: "(raw)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-35",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-36",
+                  content: "  ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-37",
+                  content: "return",
+                  color: "#F97583",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-38",
+                  content: " ",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-39",
+                  content: "validate",
+                  color: "#B392F0",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-40",
+                  content: "(config)",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-41",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-42",
+                  content: "}",
+                  color: "#E1E4E8",
+                  fontStyle: 0,
+                },
+                {
+                  key: "SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-43",
+                  content: "\n",
+                  color: "#e1e4e8",
+                  fontStyle: 0,
+                },
+              ],
+            },
+          ],
+        },
+      };
+      window.__BLOCK = { id: "code-typing", effect: "typing", seq: "feature", duration: 5 };
     </script>
     <script>
-// 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
-// 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].
-(function () {
-  "use strict";
-  var T = window.__TOKENS || {};
-
-  function lineDiv() {
-    var d = document.createElement("div");
-    d.className = "line";
-    return d;
-  }
+      // 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
+      // 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].
+      (function () {
+        "use strict";
+        var T = window.__TOKENS || {};
 
-  // Render a code state's keyed tokens into codeEl as lines of inline-block .tok spans.
-  function renderState(codeEl, state) {
-    codeEl.textContent = "";
-    var keyToEl = new Map();
-    var line = lineDiv();
-    codeEl.appendChild(line);
-    for (var i = 0; i < state.tokens.length; i++) {
-      var t = state.tokens[i];
-      if (t.content === "\n") {
-        line = lineDiv();
-        codeEl.appendChild(line);
-        continue;
-      }
-      var span = document.createElement("span");
-      span.className = "tok";
-      span.textContent = t.content;
-      span.style.color = t.color;
-      if (t.fontStyle & 1) span.style.fontStyle = "italic";
-      if (t.fontStyle & 2) span.style.fontWeight = "700";
-      line.appendChild(span);
-      keyToEl.set(t.key, span);
-    }
-    var last = codeEl.lastChild;
-    if (last && last.className === "line" && last.children.length === 0) codeEl.removeChild(last);
-    return keyToEl;
-  }
+        function lineDiv() {
+          var d = document.createElement("div");
+          d.className = "line";
+          return d;
+        }
 
-  function rectsOf(keyToEl) {
-    var m = new Map();
-    keyToEl.forEach(function (el, k) {
-      var r = el.getBoundingClientRect();
-      m.set(k, { left: r.left, top: r.top });
-    });
-    return m;
-  }
+        // Render a code state's keyed tokens into codeEl as lines of inline-block .tok spans.
+        function renderState(codeEl, state) {
+          codeEl.textContent = "";
+          var keyToEl = new Map();
+          var line = lineDiv();
+          codeEl.appendChild(line);
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              line = lineDiv();
+              codeEl.appendChild(line);
+              continue;
+            }
+            var span = document.createElement("span");
+            span.className = "tok";
+            span.textContent = t.content;
+            span.style.color = t.color;
+            if (t.fontStyle & 1) span.style.fontStyle = "italic";
+            if (t.fontStyle & 2) span.style.fontWeight = "700";
+            line.appendChild(span);
+            keyToEl.set(t.key, span);
+          }
+          var last = codeEl.lastChild;
+          if (last && last.className === "line" && last.children.length === 0)
+            codeEl.removeChild(last);
+          return keyToEl;
+        }
 
-  function makeScene(surface, withGutter) {
-    var scene = document.createElement("div");
-    scene.className = "scene";
-    if (withGutter) {
-      var g = document.createElement("div");
-      g.className = "gutter";
-      scene.appendChild(g);
-    }
-    var code = document.createElement("div");
-    code.className = "code";
-    scene.appendChild(code);
-    surface.appendChild(scene);
-    return { scene: scene, code: code, gutter: scene.querySelector(".gutter") };
-  }
+        function rectsOf(keyToEl) {
+          var m = new Map();
+          keyToEl.forEach(function (el, k) {
+            var r = el.getBoundingClientRect();
+            m.set(k, { left: r.left, top: r.top });
+          });
+          return m;
+        }
 
-  function fillGutter(g, n) {
-    var html = "";
-    for (var i = 1; i <= n; i++) html += '<span class="ln">' + i + "</span>";
-    g.innerHTML = html;
-  }
+        function makeScene(surface, withGutter) {
+          var scene = document.createElement("div");
+          scene.className = "scene";
+          if (withGutter) {
+            var g = document.createElement("div");
+            g.className = "gutter";
+            scene.appendChild(g);
+          }
+          var code = document.createElement("div");
+          code.className = "code";
+          scene.appendChild(code);
+          surface.appendChild(scene);
+          return { scene: scene, code: code, gutter: scene.querySelector(".gutter") };
+        }
 
-  function splitLines(state) {
-    var lines = [{ text: "", tokens: [] }];
-    for (var i = 0; i < state.tokens.length; i++) {
-      var t = state.tokens[i];
-      if (t.content === "\n") {
-        lines.push({ text: "", tokens: [] });
-        continue;
-      }
-      var cur = lines[lines.length - 1];
-      cur.tokens.push(t);
-      cur.text += t.content;
-    }
-    if (lines.length && lines[lines.length - 1].tokens.length === 0) lines.pop();
-    return lines;
-  }
+        function fillGutter(g, n) {
+          var html = "";
+          for (var i = 1; i <= n; i++) html += '<span class="ln">' + i + "</span>";
+          g.innerHTML = html;
+        }
 
-  function lineDiff(a, b) {
-    var n = a.length;
-    var m = b.length;
-    var dp = [];
-    for (var i = 0; i <= n; i++) dp.push(new Array(m + 1).fill(0));
-    for (var i = n - 1; i >= 0; i--) {
-      for (var j = m - 1; j >= 0; j--) {
-        dp[i][j] = a[i].text === b[j].text ? dp[i + 1][j + 1] + 1 : Math.max(dp[i + 1][j], dp[i][j + 1]);
-      }
-    }
-    var ops = [];
-    var i = 0;
-    var j = 0;
-    while (i < n && j < m) {
-      if (a[i].text === b[j].text) {
-        ops.push({ type: "same", line: b[j] });
-        i++;
-        j++;
-      } else if (dp[i + 1][j] >= dp[i][j + 1]) {
-        ops.push({ type: "del", line: a[i] });
-        i++;
-      } else {
-        ops.push({ type: "add", line: b[j] });
-        j++;
-      }
-    }
-    while (i < n) ops.push({ type: "del", line: a[i++] });
-    while (j < m) ops.push({ type: "add", line: b[j++] });
-    return ops;
-  }
+        function splitLines(state) {
+          var lines = [{ text: "", tokens: [] }];
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              lines.push({ text: "", tokens: [] });
+              continue;
+            }
+            var cur = lines[lines.length - 1];
+            cur.tokens.push(t);
+            cur.text += t.content;
+          }
+          if (lines.length && lines[lines.length - 1].tokens.length === 0) lines.pop();
+          return lines;
+        }
 
-  // ---- single-scene effect builders (fade in, play, hold to end) -------------
-  var FADE = 0.45;
+        function lineDiff(a, b) {
+          var n = a.length;
+          var m = b.length;
+          var dp = [];
+          for (var i = 0; i <= n; i++) dp.push(new Array(m + 1).fill(0));
+          for (var i = n - 1; i >= 0; i--) {
+            for (var j = m - 1; j >= 0; j--) {
+              dp[i][j] =
+                a[i].text === b[j].text
+                  ? dp[i + 1][j + 1] + 1
+                  : Math.max(dp[i + 1][j], dp[i][j + 1]);
+            }
+          }
+          var ops = [];
+          var i = 0;
+          var j = 0;
+          while (i < n && j < m) {
+            if (a[i].text === b[j].text) {
+              ops.push({ type: "same", line: b[j] });
+              i++;
+              j++;
+            } else if (dp[i + 1][j] >= dp[i][j + 1]) {
+              ops.push({ type: "del", line: a[i] });
+              i++;
+            } else {
+              ops.push({ type: "add", line: b[j] });
+              j++;
+            }
+          }
+          while (i < n) ops.push({ type: "del", line: a[i++] });
+          while (j < m) ops.push({ type: "add", line: b[j++] });
+          return ops;
+        }
 
-  function typing(tl, surface, state, start) {
-    var PER = 0.028; // seconds per character — smooth, fast typewriter
-    var parts = makeScene(surface, true);
-    var code = parts.code;
+        // ---- single-scene effect builders (fade in, play, hold to end) -------------
+        var FADE = 0.45;
 
-    // Per-CHARACTER render (granular reveal reads smoother than per-token pops).
-    code.textContent = "";
-    var line = document.createElement("div");
-    line.className = "line";
-    code.appendChild(line);
-    var chars = [];
-    for (var i = 0; i < state.tokens.length; i++) {
-      var t = state.tokens[i];
-      if (t.content === "\n") {
-        line = document.createElement("div");
-        line.className = "line";
-        code.appendChild(line);
-        continue;
-      }
-      for (var c = 0; c < t.content.length; c++) {
-        var span = document.createElement("span");
-        span.className = "tok";
-        span.textContent = t.content[c];
-        span.style.color = t.color;
-        if (t.fontStyle & 1) span.style.fontStyle = "italic";
-        if (t.fontStyle & 2) span.style.fontWeight = "700";
-        line.appendChild(span);
-        chars.push({ el: span, ws: t.content[c] === " " });
-      }
-    }
-    var last = code.lastChild;
-    if (last && last.className === "line" && last.children.length === 0) code.removeChild(last);
+        function typing(tl, surface, state, start) {
+          var PER = 0.028; // seconds per character — smooth, fast typewriter
+          var parts = makeScene(surface, true);
+          var code = parts.code;
 
-    fillGutter(parts.gutter, code.querySelectorAll(".line").length);
-    var base = code.getBoundingClientRect();
-    var caret = document.createElement("div");
-    caret.className = "caret";
-    code.appendChild(caret);
+          // Per-CHARACTER render (granular reveal reads smoother than per-token pops).
+          code.textContent = "";
+          var line = document.createElement("div");
+          line.className = "line";
+          code.appendChild(line);
+          var chars = [];
+          for (var i = 0; i < state.tokens.length; i++) {
+            var t = state.tokens[i];
+            if (t.content === "\n") {
+              line = document.createElement("div");
+              line.className = "line";
+              code.appendChild(line);
+              continue;
+            }
+            for (var c = 0; c < t.content.length; c++) {
+              var span = document.createElement("span");
+              span.className = "tok";
+              span.textContent = t.content[c];
+              span.style.color = t.color;
+              if (t.fontStyle & 1) span.style.fontStyle = "italic";
+              if (t.fontStyle & 2) span.style.fontWeight = "700";
+              line.appendChild(span);
+              chars.push({ el: span, ws: t.content[c] === " " });
+            }
+          }
+          var last = code.lastChild;
+          if (last && last.className === "line" && last.children.length === 0)
+            code.removeChild(last);
 
-    tl.set(parts.scene, { opacity: 0 }, 0);
-    tl.to(parts.scene, { opacity: 1, duration: FADE, ease: "power1.out" }, start);
+          fillGutter(parts.gutter, code.querySelectorAll(".line").length);
+          var base = code.getBoundingClientRect();
+          var caret = document.createElement("div");
+          caret.className = "caret";
+          code.appendChild(caret);
 
-    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);
-    }
-    chars.forEach(function (c, i) {
-      var at = t0 + i * PER;
-      tl.set(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);
-      // caret glides at constant speed to each char's right edge (linear = no stop-start jitter)
-      var r = c.el.getBoundingClientRect();
-      tl.to(caret, { x: r.right - base.left, y: r.top - base.top, duration: PER, ease: "none" }, at);
-    });
-  }
+          tl.set(parts.scene, { opacity: 0 }, 0);
+          tl.to(parts.scene, { opacity: 1, duration: FADE, ease: "power1.out" }, start);
 
-  function buildEffect(tl, surface, spec) {
-    var start = 0.45;
-    var seq = T[spec.seq];
-    if (spec.effect === "typing") typing(tl, surface, seq.states[0], 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);
+          }
+          chars.forEach(function (c, i) {
+            var at = t0 + i * PER;
+            tl.set(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);
+            // caret glides at constant speed to each char's right edge (linear = no stop-start jitter)
+            var r = c.el.getBoundingClientRect();
+            tl.to(
+              caret,
+              { x: r.right - base.left, y: r.top - base.top, duration: PER, ease: "none" },
+              at,
+            );
+          });
+        }
 
-  function go() {
-    var spec = window.__BLOCK;
-    var surface = document.getElementById("surface");
-    var root = document.getElementById("root");
-    window.__timelines = window.__timelines || {};
-    var tl = gsap.timeline({ paused: true });
-    window.__timelines["code-typing"] = tl; // register synchronously
-    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
-    });
-  }
+        function buildEffect(tl, surface, spec) {
+          var start = 0.45;
+          var seq = T[spec.seq];
+          if (spec.effect === "typing") typing(tl, surface, seq.states[0], start);
+        }
 
-  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
-  else go();
-})();
+        function go() {
+          var spec = window.__BLOCK;
+          var surface = document.getElementById("surface");
+          var root = document.getElementById("root");
+          window.__timelines = window.__timelines || {};
+          var tl = gsap.timeline({ paused: true });
+          window.__timelines["code-typing"] = tl; // register synchronously
+          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
+          });
+        }
 
+        if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
+        else go();
+      })();
     </script>
   </body>
 </html>