> ## Documentation Index
> Fetch the complete documentation index at: /llms.txt
> Use this file to discover all available pages before exploring further.

# 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 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 Particle Assemble**

```html code-particle-assemble.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 });

          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);
            });
            window.__timelines[spec.id] = 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>
```

Copy npx hyperframes add code-particle-assemble to the clipboard

That writes one file: `compositions/code-particle-assemble.html`.

## Add it to your video

It runs for 8 seconds at 1920×1080. Paste this into your composition:

```html index.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>
```

Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes.md) for the rest.

{/* hf:generated-footer */}

Tagged `code` `code-animation` `particles` `gpu` `webgl` `developer`.

## Related topics

* [Browse the complete Catalog](/catalog.md)
* [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks.md)
* [Put blocks together into one video](/concepts/compositions.md)
