diff --git a/docs/catalog/blocks/halftone-field.mdx b/docs/catalog/blocks/halftone-field.mdx
new file mode 100644
index 0000000000..c7fb58309b
--- /dev/null
+++ b/docs/catalog/blocks/halftone-field.mdx
@@ -0,0 +1,59 @@
+---
+title: "Halftone Field"
+description: "A full-bleed halftone light field: a grid of dots whose size and colour track a slow flowing simplex-noise field, so broad bands of light sweep across a mostly-black frame like a giant LED wall showing a plasma. Built to run under type."
+---
+
+<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/halftone-field.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/halftone-field.png" autoPlay muted loop playsInline />
+
+## Install
+
+```bash Terminal
+npx hyperframes add halftone-field
+```
+
+That writes one file: `compositions/halftone-field.html`.
+
+## Add it to your video
+
+It runs for 10 seconds at 1920×1080. Paste this into your composition:
+
+```html index.html
+<div
+  data-composition-id="halftone-field"
+  data-composition-src="compositions/halftone-field.html"
+  data-start="0"
+  data-duration="10"
+  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) for the rest.
+
+## Change how it looks
+
+Set these CSS variables on the block:
+
+- `--frequency` — Field frequency (1 = broad swells, 10 = fine mottle). Defaults to `2`.
+- `--speed` — Flow speed (0 freezes the field). Defaults to `5`.
+- `--cellsize` — Cell size (dot pitch, 1 = 6px, 100 = 60px). Defaults to `54`.
+- `--gamma` — Gamma: midtone crush, the whole look. Low values flatten it to an even grey dot field. Defaults to `12`.
+- `--palettebias` — Palette bias: floor under every dot's size and palette position. 0 lets the darks go fully black. Defaults to `2`.
+- `--palette1` — Palette stop 1 (lows). Defaults to `#00AAFF`.
+- `--palette2` — Palette stop 2. Defaults to `#C2FF67`.
+- `--palette3` — Palette stop 3. Defaults to `#6600FF`.
+- `--palette4` — Palette stop 4 (crests). Defaults to `#000000`.
+- `--background` — Background. Defaults to `#000000`.
+- `--quantize` — Quantise to 30fps for a stepped LED-wall look. Defaults to `false`. Options: `false`, `true`.
+
+{/* hf:generated-footer */}
+
+Tagged `webgl` `shader` `background` `texture` `halftone`.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/docs.json b/docs/docs.json
index c51c359780..072595b0ef 100644
--- a/docs/docs.json
+++ b/docs/docs.json
@@ -456,6 +456,7 @@
               "catalog/blocks/camcorder-hud",
               "catalog/blocks/flowchart",
               "catalog/blocks/flowchart-vertical",
+              "catalog/blocks/halftone-field",
               "catalog/blocks/hw-frame",
               "catalog/blocks/hw-path-text",
               "catalog/blocks/hw-pipeline",
diff --git a/docs/public/catalog-index.json b/docs/public/catalog-index.json
index 8255b52d5e..a220701b70 100644
--- a/docs/public/catalog-index.json
+++ b/docs/public/catalog-index.json
@@ -973,6 +973,21 @@
     "href": "/catalog/components/grid-pixelate-wipe",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/grid-pixelate-wipe.png"
   },
+  {
+    "name": "halftone-field",
+    "type": "block",
+    "title": "Halftone Field",
+    "description": "A full-bleed halftone light field: a grid of dots whose size and colour track a slow flowing simplex-noise field, so broad bands of light sweep across a mostly-black frame like a giant LED wall showing a plasma. Built to run under type.",
+    "tags": [
+      "webgl",
+      "shader",
+      "background",
+      "texture",
+      "halftone"
+    ],
+    "href": "/catalog/blocks/halftone-field",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/halftone-field.png"
+  },
   {
     "name": "hw-arrow",
     "type": "component",
diff --git a/registry/blocks/halftone-field/halftone-field.html b/registry/blocks/halftone-field/halftone-field.html
new file mode 100644
index 0000000000..c67d807449
--- /dev/null
+++ b/registry/blocks/halftone-field/halftone-field.html
@@ -0,0 +1,378 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Halftone Field</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #000;
+        overflow: hidden;
+      }
+      #hlf-root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #hlf-backdrop {
+        position: absolute;
+        inset: 0;
+        background: #000000;
+      }
+      #hlf-canvas {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="hlf-root"
+      data-composition-id="halftone-field"
+      data-root="true"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="10"
+      data-composition-variables='[
+        {"id":"frequency","type":"number","label":"Field frequency","default":2,"min":1,"max":10,"step":0.1},
+        {"id":"speed","type":"number","label":"Flow speed","default":5,"min":0,"max":10,"step":0.1},
+        {"id":"cellSize","type":"number","label":"Cell size","default":54,"min":1,"max":100,"step":1},
+        {"id":"gamma","type":"number","label":"Gamma (midtone crush)","default":12,"min":1,"max":20,"step":0.1},
+        {"id":"paletteBias","type":"number","label":"Palette bias","default":2,"min":0,"max":20,"step":0.5},
+        {"id":"palette1","type":"color","label":"Palette stop 1 (lows)","default":"#00AAFF"},
+        {"id":"palette2","type":"color","label":"Palette stop 2","default":"#C2FF67"},
+        {"id":"palette3","type":"color","label":"Palette stop 3","default":"#6600FF"},
+        {"id":"palette4","type":"color","label":"Palette stop 4 (crests)","default":"#000000"},
+        {"id":"background","type":"color","label":"Background","default":"#000000"},
+        {"id":"quantize","type":"boolean","label":"Quantise to 30fps (stepped)","default":false}
+      ]'
+    >
+      <div id="hlf-backdrop"></div>
+      <canvas id="hlf-canvas" width="1920" height="1080"></canvas>
+
+      <!-- Driver clip: gives HyperFrames a timed element to own on track 0. -->
+      <div
+        id="hlf-drv"
+        class="clip"
+        data-start="0"
+        data-duration="10"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+
+    <script>
+      (function () {
+        var DUR = 10;
+        var W = 1920;
+        var H = 1080;
+
+        var V = (window.__hyperframes && window.__hyperframes.getVariables()) || {};
+        var CS = getComputedStyle(document.getElementById("hlf-root"));
+
+        // The runtime defines every declared variable as `--<id>` on the root,
+        // so a host stylesheet can override one there too. Read the custom
+        // property first, fall back to the declared value when it is unset.
+        function raw(id) {
+          var css = CS.getPropertyValue("--" + id.toLowerCase()).trim();
+          return css !== "" ? css : V[id];
+        }
+        function num(id, fallback) {
+          var n = parseFloat(raw(id));
+          return isFinite(n) ? n : fallback;
+        }
+        function bool(id) {
+          var v = raw(id);
+          return v === true || /^(true|1|on|yes)$/i.test(String(v));
+        }
+        // #RGB / #RRGGBB -> [r, g, b] in 0..1. Anything else falls back.
+        function rgb(id, fallback) {
+          var s = String(raw(id) || "").trim();
+          var m = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(s);
+          if (!m) s = fallback;
+          else s = "#" + m[1];
+          var hex = s.slice(1);
+          if (hex.length === 3) {
+            hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+          }
+          var n = parseInt(hex, 16);
+          return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255];
+        }
+        // The reference exposes 1-10 / 1-100 / 1-20 dials and maps them onto
+        // the ranges the shader actually wants.
+        function mapLinear(x, a1, a2, b1, b2) {
+          return b1 + ((x - a1) * (b2 - b1)) / (a2 - a1);
+        }
+
+        var FREQ = mapLinear(num("frequency", 2), 1, 10, 0.3, 6);
+        var SPEED = num("speed", 5) * 0.05;
+        var CELL = mapLinear(num("cellSize", 54), 1, 100, 6, 60);
+        var GAMMA = mapLinear(num("gamma", 12), 1, 20, 0.5, 8);
+        var BIAS = num("paletteBias", 2) * 0.05;
+        var PAL = [
+          rgb("palette1", "#00AAFF"),
+          rgb("palette2", "#C2FF67"),
+          rgb("palette3", "#6600FF"),
+          rgb("palette4", "#000000"),
+        ];
+        var BG = rgb("background", "#000000");
+        var QUANTIZE = bool("quantize");
+
+        document.getElementById("hlf-backdrop").style.background =
+          "rgb(" +
+          BG.map(function (c) {
+            return Math.round(c * 255);
+          }).join(",") +
+          ")";
+
+        var canvas = document.getElementById("hlf-canvas");
+        var gl =
+          canvas.getContext("webgl", {
+            alpha: false,
+            antialias: false,
+            depth: false,
+            stencil: false,
+            preserveDrawingBuffer: true,
+            powerPreference: "high-performance",
+          }) ||
+          canvas.getContext("experimental-webgl", {
+            alpha: false,
+            preserveDrawingBuffer: true,
+          });
+
+        var VERT = "attribute vec2 aPos;\nvoid main() { gl_Position = vec4(aPos, 0.0, 1.0); }";
+
+        // Single pass. The reference renders the colour field into a target and
+        // samples it at each cell centre, but the field is analytic, so
+        // evaluating it at the cell centre here is the same value without the
+        // round trip through a texture.
+        var FRAG = `
+precision highp float;
+uniform vec2 uRes;
+uniform float uTime;
+uniform float uFreq;
+uniform float uSpeed;
+uniform float uCell;
+uniform float uGamma;
+uniform float uBias;
+uniform vec3 uPal0;
+uniform vec3 uPal1;
+uniform vec3 uPal2;
+uniform vec3 uPal3;
+uniform vec3 uBg;
+
+// 3D simplex noise — Ashima Arts / Stefan Gustavson (MIT).
+vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
+vec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
+vec4 permute(vec4 x) { return mod289(((x * 34.0) + 1.0) * x); }
+vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }
+
+float snoise(vec3 v) {
+  const vec2 C = vec2(1.0 / 6.0, 1.0 / 3.0);
+  const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);
+
+  vec3 i = floor(v + dot(v, C.yyy));
+  vec3 x0 = v - i + dot(i, C.xxx);
+
+  vec3 g = step(x0.yzx, x0.xyz);
+  vec3 l = 1.0 - g;
+  vec3 i1 = min(g.xyz, l.zxy);
+  vec3 i2 = max(g.xyz, l.zxy);
+
+  vec3 x1 = x0 - i1 + C.xxx;
+  vec3 x2 = x0 - i2 + C.yyy;
+  vec3 x3 = x0 - D.yyy;
+
+  i = mod289(i);
+  vec4 p = permute(permute(permute(
+      i.z + vec4(0.0, i1.z, i2.z, 1.0)) +
+      i.y + vec4(0.0, i1.y, i2.y, 1.0)) +
+      i.x + vec4(0.0, i1.x, i2.x, 1.0));
+
+  float n_ = 0.142857142857;
+  vec3 ns = n_ * D.wyz - D.xzx;
+
+  vec4 j = p - 49.0 * floor(p * ns.z * ns.z);
+
+  vec4 x_ = floor(j * ns.z);
+  vec4 y_ = floor(j - 7.0 * x_);
+
+  vec4 x = x_ * ns.x + ns.yyyy;
+  vec4 y = y_ * ns.x + ns.yyyy;
+  vec4 h = 1.0 - abs(x) - abs(y);
+
+  vec4 b0 = vec4(x.xy, y.xy);
+  vec4 b1 = vec4(x.zw, y.zw);
+
+  vec4 s0 = floor(b0) * 2.0 + 1.0;
+  vec4 s1 = floor(b1) * 2.0 + 1.0;
+  vec4 sh = -step(h, vec4(0.0));
+
+  vec4 a0 = b0.xzyw + s0.xzyw * sh.xxyy;
+  vec4 a1 = b1.xzyw + s1.xzyw * sh.zzww;
+
+  vec3 p0 = vec3(a0.xy, h.x);
+  vec3 p1 = vec3(a0.zw, h.y);
+  vec3 p2 = vec3(a1.xy, h.z);
+  vec3 p3 = vec3(a1.zw, h.w);
+
+  vec4 norm = taylorInvSqrt(vec4(dot(p0, p0), dot(p1, p1), dot(p2, p2), dot(p3, p3)));
+  p0 *= norm.x;
+  p1 *= norm.y;
+  p2 *= norm.z;
+  p3 *= norm.w;
+
+  vec4 m = max(0.6 - vec4(dot(x0, x0), dot(x1, x1), dot(x2, x2), dot(x3, x3)), 0.0);
+  m = m * m;
+  return 42.0 * dot(m * m, vec4(dot(p0, x0), dot(p1, x1), dot(p2, x2), dot(p3, x3)));
+}
+
+// Full-saturation, full-value HSV: only the hue ramp survives.
+vec3 hue2rgb(float h) {
+  return clamp(abs(mod(h * 6.0 + vec3(0.0, 4.0, 2.0), 6.0) - 3.0) - 1.0, 0.0, 1.0);
+}
+
+// Piecewise-linear ramp across the four palette stops.
+vec3 ramp(float v) {
+  float x = clamp(v, 0.0, 1.0) * 3.0;
+  vec3 c = mix(uPal0, uPal1, clamp(x, 0.0, 1.0));
+  c = mix(c, uPal2, clamp(x - 1.0, 0.0, 1.0));
+  c = mix(c, uPal3, clamp(x - 2.0, 0.0, 1.0));
+  return c;
+}
+
+void main() {
+  // One sample per cell, taken at the cell centre.
+  vec2 cell = floor(gl_FragCoord.xy / uCell);
+  vec2 centre = (cell + 0.5) * uCell;
+
+  vec2 st = centre / uRes;
+  st.x *= uRes.x / uRes.y;
+
+  float hue = abs(snoise(vec3(st * uFreq, uTime * uSpeed)));
+  vec3 field = hue2rgb(hue);
+
+  // The gamma is the whole look: it crushes the midtones so most of the frame
+  // stays background and only the crests of the field open up.
+  float gray = pow(dot(field, vec3(0.2126, 0.7152, 0.0722)), uGamma);
+  float v = clamp(gray + uBias, 0.0, 1.0);
+
+  float radius = v * 0.5 * uCell;
+  float d = length(gl_FragCoord.xy - centre);
+  float mask = 1.0 - smoothstep(radius - 1.0, radius + 1.0, d);
+
+  gl_FragColor = vec4(mix(uBg, ramp(v), mask), 1.0);
+}
+`;
+
+        var uni = {};
+        var ready = false;
+
+        function compile(type, src) {
+          var sh = gl.createShader(type);
+          gl.shaderSource(sh, src);
+          gl.compileShader(sh);
+          if (!gl.getShaderParameter(sh, gl.COMPILE_STATUS)) {
+            throw new Error("halftone-field shader: " + gl.getShaderInfoLog(sh));
+          }
+          return sh;
+        }
+
+        if (gl) {
+          var prog = gl.createProgram();
+          gl.attachShader(prog, compile(gl.VERTEX_SHADER, VERT));
+          gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, FRAG));
+          gl.linkProgram(prog);
+          if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
+            throw new Error("halftone-field link: " + gl.getProgramInfoLog(prog));
+          }
+          gl.useProgram(prog);
+
+          var buf = gl.createBuffer();
+          gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+          gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
+          var loc = gl.getAttribLocation(prog, "aPos");
+          gl.enableVertexAttribArray(loc);
+          gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0);
+
+          [
+            "uRes",
+            "uTime",
+            "uFreq",
+            "uSpeed",
+            "uCell",
+            "uGamma",
+            "uBias",
+            "uPal0",
+            "uPal1",
+            "uPal2",
+            "uPal3",
+            "uBg",
+          ].forEach(function (n) {
+            uni[n] = gl.getUniformLocation(prog, n);
+          });
+
+          gl.viewport(0, 0, W, H);
+          gl.uniform2f(uni.uRes, W, H);
+          gl.uniform1f(uni.uFreq, FREQ);
+          gl.uniform1f(uni.uSpeed, SPEED);
+          gl.uniform1f(uni.uCell, CELL);
+          gl.uniform1f(uni.uGamma, GAMMA);
+          gl.uniform1f(uni.uBias, BIAS);
+          gl.uniform3f(uni.uPal0, PAL[0][0], PAL[0][1], PAL[0][2]);
+          gl.uniform3f(uni.uPal1, PAL[1][0], PAL[1][1], PAL[1][2]);
+          gl.uniform3f(uni.uPal2, PAL[2][0], PAL[2][1], PAL[2][2]);
+          gl.uniform3f(uni.uPal3, PAL[3][0], PAL[3][1], PAL[3][2]);
+          gl.uniform3f(uni.uBg, BG[0], BG[1], BG[2]);
+          ready = true;
+        }
+
+        // Every frame is computed from t alone — the field is a closed-form
+        // function of position and time. No accumulator, no clock, no PRNG.
+        // `quantize` snaps t to a 30fps grid for the stepped LED-wall look.
+        function draw(t) {
+          if (!ready) return;
+          gl.uniform1f(uni.uTime, QUANTIZE ? Math.floor(t * 30) / 30 : t);
+          gl.drawArrays(gl.TRIANGLES, 0, 3);
+          gl.flush();
+        }
+
+        window.__timelines = window.__timelines || {};
+        var tl = gsap.timeline({ paused: true });
+
+        // The canvas is repainted from a property SETTER, not from onUpdate:
+        // gsap's seek(t) suppresses events by default, so an onUpdate callback
+        // silently never fires on a scrub and the canvas freezes on frame 0.
+        // Tweened values are always written during render, suppressed or not,
+        // so this fires on every seek — and hands us the frame time directly.
+        var driver = { _t: 0 };
+        Object.defineProperty(driver, "t", {
+          get: function () {
+            return this._t;
+          },
+          set: function (v) {
+            this._t = v;
+            draw(v);
+          },
+        });
+        tl.to(driver, { t: DUR, duration: DUR, ease: "none" }, 0);
+        window.__timelines["halftone-field"] = tl;
+
+        draw(0);
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/halftone-field/registry-item.json b/registry/blocks/halftone-field/registry-item.json
new file mode 100644
index 0000000000..dd329ccc07
--- /dev/null
+++ b/registry/blocks/halftone-field/registry-item.json
@@ -0,0 +1,108 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "halftone-field",
+  "type": "hyperframes:block",
+  "title": "Halftone Field",
+  "description": "A full-bleed halftone light field: a grid of dots whose size and colour track a slow flowing simplex-noise field, so broad bands of light sweep across a mostly-black frame like a giant LED wall showing a plasma. Built to run under type.",
+  "stability": "experimental",
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 10,
+  "tags": ["webgl", "shader", "background", "texture", "halftone"],
+  "files": [
+    {
+      "path": "halftone-field.html",
+      "target": "compositions/halftone-field.html",
+      "type": "hyperframes:composition"
+    }
+  ],
+  "params": [
+    {
+      "key": "--frequency",
+      "label": "Field frequency (1 = broad swells, 10 = fine mottle)",
+      "type": "number",
+      "default": "2",
+      "min": 1,
+      "max": 10,
+      "step": 0.1
+    },
+    {
+      "key": "--speed",
+      "label": "Flow speed (0 freezes the field)",
+      "type": "number",
+      "default": "5",
+      "min": 0,
+      "max": 10,
+      "step": 0.1
+    },
+    {
+      "key": "--cellsize",
+      "label": "Cell size (dot pitch, 1 = 6px, 100 = 60px)",
+      "type": "number",
+      "default": "54",
+      "min": 1,
+      "max": 100,
+      "step": 1
+    },
+    {
+      "key": "--gamma",
+      "label": "Gamma: midtone crush, the whole look. Low values flatten it to an even grey dot field",
+      "type": "number",
+      "default": "12",
+      "min": 1,
+      "max": 20,
+      "step": 0.1
+    },
+    {
+      "key": "--palettebias",
+      "label": "Palette bias: floor under every dot's size and palette position. 0 lets the darks go fully black",
+      "type": "number",
+      "default": "2",
+      "min": 0,
+      "max": 20,
+      "step": 0.5
+    },
+    {
+      "key": "--palette1",
+      "label": "Palette stop 1 (lows)",
+      "type": "color",
+      "default": "#00AAFF"
+    },
+    {
+      "key": "--palette2",
+      "label": "Palette stop 2",
+      "type": "color",
+      "default": "#C2FF67"
+    },
+    {
+      "key": "--palette3",
+      "label": "Palette stop 3",
+      "type": "color",
+      "default": "#6600FF"
+    },
+    {
+      "key": "--palette4",
+      "label": "Palette stop 4 (crests)",
+      "type": "color",
+      "default": "#000000"
+    },
+    {
+      "key": "--background",
+      "label": "Background",
+      "type": "color",
+      "default": "#000000"
+    },
+    {
+      "key": "--quantize",
+      "label": "Quantise to 30fps for a stepped LED-wall look",
+      "type": "select",
+      "default": "false",
+      "options": [
+        { "label": "Smooth", "value": "false" },
+        { "label": "Stepped 30fps", "value": "true" }
+      ]
+    }
+  ]
+}
diff --git a/registry/registry.json b/registry/registry.json
index bff47f2948..18b03b4ab9 100644
--- a/registry/registry.json
+++ b/registry/registry.json
@@ -706,6 +706,10 @@
     {
       "name": "beat-freeze-cut",
       "type": "hyperframes:block"
+    },
+    {
+      "name": "halftone-field",
+      "type": "hyperframes:block"
     }
   ]
 }