Anatomy of Pixel Grid
How stochastic flicker, a smoothstep cursor reveal, and intensity lerping turn a canvas of squares into an automatic field or a spotlight.
↓Scroll to step through it
The lattice
PixelGrid is a canvas lattice of tiny squares. In auto mode they flicker
on a probability clock; in interactive mode a soft spotlight reveals them
under the cursor. Defaults favor the spotlight (interactive={true},
cursorReveal="hidden").
Each cell is a filled rect. Opacity is the only animated channel — no transforms, no layout.
Flicker probability
In auto mode (or inside the spotlight), each second a square re-rolls with probability scaled by frame delta:
That keeps the field alive without a fixed phase on every cell.
Smoothstep reveal
Interactive mode tracks the pointer and eases an intensity toward a
target (1 while over the surface, 0 on leave):
cursorReveal picks the baseline outside the disc:
| Mode | Baseline |
|---|---|
"hidden" | 0 — pure spotlight |
"dim" | maxOpacity * 0.18 — faint field always visible |
Default radius is 120. Reduced motion stops the rAF and paints one still
frame.
ResizeObserver (when width/height are unset) and IntersectionObserver
gate the loop. There is no visibilitychange listener here — unlike Flow
Field — so keep that in mind if you leave a tab open on a huge grid.
The result
Move across the stage — squares bloom under the pointer.
Probability flicker, smoothstep falloff, intensity lerp. A spotlight that costs almost nothing when it is off screen.
- Cell
- squareSize=4 · gridGap=6
- Cap
- maxOpacity=0.3
- Mode
- interactive or auto flicker
squareSize = 4gridGap = 6maxOpacity = 0.3// color defaults to --foreground, re-probed on theme changeAnatomy of Pixel Grid
How stochastic flicker, a smoothstep cursor reveal, and intensity lerping turn a canvas of squares into an automatic field or a spotlight.
- Cell
- squareSize=4 · gridGap=6
- Cap
- maxOpacity=0.3
- Mode
- interactive or auto flicker
squareSize = 4gridGap = 6maxOpacity = 0.3// color defaults to --foreground, re-probed on theme changeThe lattice
PixelGrid is a canvas lattice of tiny squares. In auto mode they flicker
on a probability clock; in interactive mode a soft spotlight reveals them
under the cursor. Defaults favor the spotlight (interactive={true},
cursorReveal="hidden").
Each cell is a filled rect. Opacity is the only animated channel — no transforms, no layout.
- Chance
- flickerChance=0.3 / second
- Draw
- opacity re-rolled when triggered
// P(re-roll) ≈ flickerChance * dt (default flickerChance = 0.3 / s)if (Math.random() < flickerChance * dt) {opacity = Math.random() * maxOpacity;}Flicker probability
In auto mode (or inside the spotlight), each second a square re-rolls with probability scaled by frame delta:
That keeps the field alive without a fixed phase on every cell.
Watch the soft disc trail the ring — that lag is intensity catching up at min(dt×8, 1). Edge softness is smoothstep t²(3−2t).
- Hidden
- baseline off — cells only under the disc
- Falloff
- interactionRadius=120 · smoothstep edge
pointer.intensity +=(pointer.target - pointer.intensity) * Math.min(dt * 8, 1);const t = /* 0..1 distance falloff inside interactionRadius */;const reveal =t * t * (3 - 2 * t) * interactionStrength * pointer.intensity;// smoothstep — soft edge, not a hard discSmoothstep reveal
Interactive mode tracks the pointer and eases an intensity toward a
target (1 while over the surface, 0 on leave):
cursorReveal picks the baseline outside the disc:
| Mode | Baseline |
|---|---|
"hidden" | 0 — pure spotlight |
"dim" | maxOpacity * 0.18 — faint field always visible |
Default radius is 120. Reduced motion stops the rAF and paints one still
frame.
ResizeObserver (when width/height are unset) and IntersectionObserver
gate the loop. There is no visibilitychange listener here — unlike Flow
Field — so keep that in mind if you leave a tab open on a huge grid.
The result
Move across the stage — squares bloom under the pointer.
Probability flicker, smoothstep falloff, intensity lerp. A spotlight that costs almost nothing when it is off screen.
Motion Score
canvas paint2D canvas cell flicker each frame