wehub-resource-sync
85453da49f
CodeQL / Analyze (javascript-typescript) (push) Waiting to run
Docs / Validate docs (push) Waiting to run
CodeQL / Analyze (actions) (push) Waiting to run
CodeQL / Analyze (python) (push) Waiting to run
Sync skills to ClawHub / Publish changed skills (push) Waiting to run
regression / regression-shards (style-16-prod style-9-prod style-17-prod iframe-render-compat variables-prod mp4-h265-sdr, shard-4) (push) Has been cancelled
regression / regression-shards (style-4-prod style-11-prod style-2-prod animejs-adapter typegpu-adapter parallel-capture-regression, shard-5) (push) Has been cancelled
regression / regression-shards (style-7-prod style-8-prod style-10-prod css-spinner-render-compat webm-transparency mp4-h264-sdr webm-vp9, shard-3) (push) Has been cancelled
regression / regression-shards (sub-composition-video style-18-prod raf-ball-render-compat font-variant-numeric sub-comp-t0 sub-comp-id-selector, shard-7) (push) Has been cancelled
Windows render verification / Detect changes (push) Has been cancelled
Windows render verification / Preflight (lint + format) (push) Has been cancelled
Windows render verification / Render on windows-latest (push) Has been cancelled
Windows render verification / Tests on windows-latest (push) Has been cancelled
CI / Detect changes (push) Has been cancelled
CI / Build (push) Has been cancelled
CI / Lint (push) Has been cancelled
CI / Fallow audit (push) Has been cancelled
CI / Format (push) Has been cancelled
CI / Typecheck (push) Has been cancelled
CI / Test (push) Has been cancelled
CI / Producer: integration tests (push) Has been cancelled
CI / Producer: unit tests (push) Has been cancelled
CI / File size check (push) Has been cancelled
CI / Test: skills (push) Has been cancelled
CI / Skills: manifest in sync (push) Has been cancelled
CI / CLI: npx shim (macos-latest) (push) Has been cancelled
CI / CLI: npx shim (ubuntu-latest) (push) Has been cancelled
CI / CLI: npx shim (windows-latest) (push) Has been cancelled
CI / SDK: unit + contract + smoke (push) Has been cancelled
CI / Test: runtime contract (push) Has been cancelled
CI / Studio: load smoke (push) Has been cancelled
CI / Smoke: global install (push) Has been cancelled
CI / CLI smoke (required) (push) Has been cancelled
CI / Semantic PR title (push) Has been cancelled
Player perf / Detect changes (push) Has been cancelled
Player perf / Preflight (lint + format) (push) Has been cancelled
Player perf / player-perf (push) Has been cancelled
Player perf / Perf: drift (push) Has been cancelled
Player perf / Perf: fps (push) Has been cancelled
Player perf / Perf: parity (push) Has been cancelled
Player perf / Perf: scrub (push) Has been cancelled
Player perf / Perf: load (push) Has been cancelled
preview-regression / Detect changes (push) Has been cancelled
preview-regression / Preflight (lint + format) (push) Has been cancelled
preview-regression / Preview parity (push) Has been cancelled
preview-regression / preview-regression (push) Has been cancelled
regression / regression (push) Has been cancelled
regression / Detect changes (push) Has been cancelled
regression / Preflight (lint + format) (push) Has been cancelled
regression / regression-shards (hdr-regression style-5-prod style-3-prod mov-prores, shard-1) (push) Has been cancelled
regression / regression-shards (overlay-montage-prod style-12-prod chat missing-host-comp-id png-sequence portrait-edge-bleed, shard-6) (push) Has been cancelled
regression / regression-shards (style-13-prod style-6-prod vignelli-stacking gsap-letters-render-compat audio-mux-parity, shard-8) (push) Has been cancelled
regression / regression-shards (style-15-prod hdr-hlg-regression style-1-prod many-cuts vfr-screen-recording render-symlinked-assets, shard-2) (push) Has been cancelled
666 lines
21 KiB
HTML
Vendored
666 lines
21 KiB
HTML
Vendored
<!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 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 buildEffect(tl, surface, spec) {
|
|
var start = 0.45;
|
|
var seq = T[spec.seq];
|
|
if (spec.effect === "flight") flight(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-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>
|