From 633721e0ced4547ec0cb49ea68becb70fa39b406 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Sat, 8 Aug 2026 16:21:01 +0000
Subject: [PATCH] feat(registry): add the halftone-field texture block

A grid of dots whose size and colour track a flowing noise field, so broad
diagonal ridges sweep across a mostly-black frame. The catalog has no
texture register at all, and this is a background that runs under type
without competing with it.

Closed form by construction: the field is a pure function of position and
time, so the whole port is uTime = frame / fps. No accumulator, no PRNG,
no history. Direct seek, stepped playback and a repeat run all hash
identically.

One pass rather than the reference's two. Its first pass is analytic, so
evaluating the noise at each cell centre returns exactly what a texture
fetch would; the render target only earns its place if the field ever
becomes something that cannot be evaluated closed form.

Two defaults depart from the reference, and its own arithmetic is why. At
paletteBias 10 the bias is 0.5, and since the gamma curve lands in
[0, 0.70], the value driving both radius and colour is pinned to [0.5, 1].
That puts a hard floor under every dot so nothing can reach black, and
narrows the palette window so the first colour stop is unreachable. It
renders as a flat evenly-lit lattice. Every formula and mapping is kept
verbatim; only paletteBias and frequency move, and both are one slider
from the reference values.
---
 docs/catalog/blocks/halftone-field.mdx        |  59 +++
 docs/docs.json                                |   1 +
 docs/public/catalog-index.json                |  15 +
 .../blocks/halftone-field/halftone-field.html | 378 ++++++++++++++++++
 .../blocks/halftone-field/registry-item.json  | 108 +++++
 registry/registry.json                        |   4 +
 6 files changed, 565 insertions(+)
 create mode 100644 docs/catalog/blocks/halftone-field.mdx
 create mode 100644 registry/blocks/halftone-field/halftone-field.html
 create mode 100644 registry/blocks/halftone-field/registry-item.json

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"
     }
   ]
 }