ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-01 19:42:03 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
9734578e6065d6dec8993c4e30a978263c3eaa8b
hyperframes/docs/catalog/blocks/code-scroll.mdx
T
Miguel Ángel 9734578e60 feat(registry): bring back the video-primitive moves (#3169) 
Restores the 208 catalog items reverted after their previews 404'd in
production, this time on the payload mechanism rather than the .html files
that caused the outage.

The generator no longer writes a preview document to docs/public. That writer,
and the machinery under it, existed only to produce files the docs host
discards, so it is gone rather than bypassed. Items now embed the composition
itself via a payload, which is what the previous change already does for the
items that were already in the catalog.

The variables explorer is parked, not restored: it drove its preview through
the same unpublished .html path, so it would have shown an empty frame. Items
that declare variables get the live player plus the static variables table, and
reconnecting the explorer to payloads is a follow-up.
2026-08-10 18:46:03 -04:00

1607 lines
54 KiB
Plaintext
Raw Blame History

---
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."
---
import { InstallCommand } from "/snippets/install-command.jsx";
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="code-scroll preview"
loading="lazy"
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-scroll.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-scroll.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add code-scroll" />
That writes one file: `compositions/code-scroll.html`.
## Source
<Accordion title={`code-scroll.html`}>
```html
<!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 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 === "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 });
// Build inside fonts.ready (glyph metrics must be final), then register.
// Register ONLY after the timeline is fully built: the runtime's
// sub-composition readiness gate treats "key present" as "ready" and
// nests the child once. An empty timeline registered before this build
// would be nested empty and never re-nested → blank render when used as
// a sub-composition. See the contract in engine frameCapture.ts.
document.fonts.ready.then(function () {
tl.from("#editor", { opacity: 0, scale: 0.985, duration: 0.5, ease: "power2.out" }, 0);
buildEffect(tl, surface, spec);
var dur = parseFloat(root.dataset.duration) || tl.duration();
tl.to({}, { duration: dur }, 0); // pad to full composition length
window.__timelines["code-scroll"] = tl; // register AFTER setup completes
if (typeof window.__hfForceTimelineRebind === "function") {
window.__hfForceTimelineRebind(); // re-nest now that we are populated
}
});
}
if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
else go();
})();
</script>
</body>
</html>
```
</Accordion>
## 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>
```
{/* hf:generated-footer */}
Tagged `code` `code-animation` `scroll` `developer`.
## Related topics
- [Browse the complete Catalog](/catalog)
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
- [Build a richer composition](/go-further)
Reference in New Issue View Git Blame Copy Permalink