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
sync/hyperframes-codegen-df972e70
hyperframes/docs/catalog/blocks/code-particle-assemble.mdx
T
Miguel Ángel d7688f9943 fix(docs): load the player from latest, not a pinned minor (#3320) 
* fix(docs): load the player from latest, not a pinned minor

The catalog pages pinned the player CDN URL to a minor line, and that pin
sat one line behind after the last release. Every page kept rendering, on
the older build, so nothing surfaced it: the only symptom was that a fix
published to npm never appeared on the docs.

The generator derived its pin from the player's package.json, which is
correct only if every page is regenerated on the release that moves it.
That is the step that did not happen, and it has to happen across 175
generated pages plus three hand-written files for the pin to be true.

A version carried in step across 178 places will be stale, and stale here
is silent. Ask for latest instead and there is nothing to carry.

This costs the ability to hold the docs back from a bad player release.
Paid deliberately: the pin did not buy that either, it only delayed the
good releases too.

A test asserts no pinned version comes back, and fails if it stops finding
the references at all, so it cannot pass by matching nothing.

* refactor(scripts): list tracked files instead of walking the tree

The pin guard hand-rolled a recursive directory walk with its own skip
list and size cap, which the audit flagged: helpers living in a test file
earn no coverage, so their complexity lands straight on the CRAP score.

git already knows which files to read, and ignores node_modules and build
output for us, so one call replaces the walker and both findings go away.
2026-08-17 21:11:12 -04:00

526 lines
19 KiB
Plaintext
Raw Permalink Blame History

---
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."
---
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-particle-assemble 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@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-particle-assemble.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-particle-assemble.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add code-particle-assemble" item="code-particle-assemble" />
That writes one file: `compositions/code-particle-assemble.html`.
## Source
<Accordion title={`code-particle-assemble.html`}>
```html
<!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,
};
}
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 === "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");
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
window.addEventListener("beforeunload", function () {
disposeGL(renderer, scene);
});
});
}
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-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>
```
{/* hf:generated-footer */}
Tagged `code` `code-animation` `particles` `gpu` `webgl` `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