> ## Documentation Index > Fetch the complete documentation index at: /llms.txt > Use this file to discover all available pages before exploring further. # Halftone Field > 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. # Halftone Field 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. **Halftone Field** ```html halftone-field.html Halftone Field
``` Copy npx hyperframes add halftone-field to the clipboard 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
``` 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. ## 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`. ## Variables Every one of these has a default, so the piece works untouched. Set the ones you want to change on the element: | Variable | Default | Accepts | What it does | | - | - | - | - | | `frequency` | `2` | 1 to 10, step 0.1 | | | `speed` | `5` | 0 to 10, step 0.1 | | | `cellSize` | `54` | 1 to 100, step 1 | | | `gamma` | `12` | 1 to 20, step 0.1 | | | `paletteBias` | `2` | 0 to 20, step 0.5 | | | `palette1` | `#00AAFF` | color | | | `palette2` | `#C2FF67` | color | | | `palette3` | `#6600FF` | color | | | `palette4` | `#000000` | color | | | `background` | `#000000` | color | | | `quantize` | `false` | boolean | | Set them with `data-variable-values` on the element that mounts it. These are the defaults, so this behaves exactly like the preview above until you change one: ```html wrap
``` {/* hf:generated-footer */} Tagged `webgl` `shader` `background` `texture` `halftone`. ## 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)