Obseri.

Turn volatile pixel signals into monitored sources, verifiable waves, searchable memory, and repeatable shader workflows.

/ 01 — Features

Pixels that
actually feel.

Built on top of ogl — a tiny WebGL library. The whole component is one file, one dependency, zero configuration.

Bayer dithering

Classic 8×8 ordered dither. Quantizes color into a crunchy retro palette.

Mouse reactive

Cursor pushes the wave field with soft, smoothed falloff. Feels alive.

GPU-cheap

Single full-screen triangle, one fragment shader. Runs at 60fps on a toaster.

/ 02 — Props

Nine knobs.

Prop	Default	What it does
waveSpeed	0.05	Speed of wave animation.
waveFrequency	3	Frequency of the wave pattern.
waveAmplitude	0.3	Amplitude of the wave pattern.
waveColor	[0.5, 0.5, 0.5]	RGB color for the waves (0–1).
colorNum	4	Colors in the dither palette.
pixelSize	2	Pixel size for the retro effect.
disableAnimation	false	Freeze the wave field.
enableMouseInteraction	true	Cursor pushes the field.
mouseRadius	1	Radius of the cursor influence.

/ 03 — Install

Three lines.

1. add the dependency

bun add ogl

2. import

import Dither from "@/components/Dither";

3. use

<div className="relative w-full h-[600px]">
  <Dither
    waveColor={[0.5, 0.5, 0.5]}
    mouseRadius={0.3}
    colorNum={4}
    waveAmplitude={0.3}
    waveFrequency={3}
    waveSpeed={0.05}
  />
</div>