Components / Backgrounds / Bitmap Noise

Bitmap Noise

A dithered field with no input at all. Two fBm tiles pan past each other on different headings, and the interference makes patches form and dissolve in place rather than slide across as one sheet.

Usage

import BitmapNoise from '@/components/bitmap-noise'

<BitmapNoise
  scale={2}
  speed={0.4}
  patch={0.42}
  dither="bayer8"
/>

Installation

npx shadcn@latest add https://morphiq.prathampatel.design/r/bitmap-noise.json

Model

(v) => String(v.dither).startsWith("bayer") ? "out = level(tone + (M(x, y)/n² − ½)/levels)" : v.dither === "none" ? "out = round(tone · (levels − 1)) / (levels − 1)" : "e = tone − out;  e spreads to unvisited neighbours by the kernel’s weights"

M the Bayer matrix, n its size · error diffusion carries each cell’s rounding error forward, so tone is conserved over area

Props

Property	Type	Default	Description
`cell`	`number`	`4`	Pixels per cell. Smaller is finer and costs more per frame.
`levels`	`number`	`2`	Tone steps. 2 is one-bit; higher posterises.
`dither`	`DitherKernel`	`'bayer8'`	—
`ditherAmount`	`number`	`1`	0 passes the tone through untouched, 1 applies the kernel in full.
`serpentine`	`boolean`	`true`	Alternate scan direction. Error-diffusion kernels only.
`contrast`	`number`	`1`	—
`brightness`	`number`	`0`	—
`invert`	`boolean`	`false`	—
`warp`	`number`	`0`	Flow-field shear, in cells.
`cursorRadius`	`number`	`160`	Reach of the pointer's influence, in px.
`cursorStrength`	`number`	`0`	Outward push at the centre of that reach, in px.
`cursorLift`	`number`	`0`	Luminance added at the centre of that reach.
`color`	`string`	`'#e8e4dc'`	—
`background`	`string \| null`	`'#0a0b0e'`	`null` renders transparent.
`paused`	`boolean`	`false`	Stops the frame loop without unmounting.
`respectReducedMotion`	`boolean`	`true`	Honour `prefers-reduced-motion`, and keep honouring it if it changes.
`fullscreen`	`boolean`	`false`	Position the field to the viewport rather than its container.
`scale`	`number`	`2`	Patch size, in cells. Bigger is blobbier.
`speed`	`number`	`0.4`	Drift rate. 0 freezes the field.
`patch`	`number`	`0.42`	0 is a smooth gradient, 1 is hard islands.
`density`	`number`	`0.36`	Fraction of the field that ends up lit.
`drift`	`number`	`0`	Constant lateral push on the second layer.