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. There are no transforms and no layout work.
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. Unlike Flow Field, there is no visibilitychange listener
here, 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, and an intensity lerp. The
IntersectionObserver gate keeps the cost near zero 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. There are no transforms and no layout work.
- 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.
The soft disc trails 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. Unlike Flow Field, there is no visibilitychange listener
here, 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, and an intensity lerp. The
IntersectionObserver gate keeps the cost near zero off screen.
Motion Score
canvas paint2D canvas cell flicker each frame