A pixel grid that breathes, in one canvas loop

I like effects where the code is way simpler than the result. This is one of them, from Alex Krasikau: a grid of pixels that shimmer like static, but contained in a circle that breathes in and out.

The whole idea

One canvas, a grid of about 100×100 squares, and an array of opacities. Every few frames, grab a random slice of cells (~20% of them) and set each to a random opacity. The rest keep whatever they had. That's already convincing static.

const updates = Math.floor(count * 0.2);
for (let i = 0; i < updates; i++) {
  const idx = (Math.random() * count) | 0;
  op[idx] = Math.random() * 0.6 + 0.2;
}

The breathing circle

The thing that lifts it from "noise" to "alive" is a mask. A radius oscillates on a sine wave, and when a cell is chosen it only lights up if it falls inside that radius. Outside, it snaps to zero:

const radius = baseR + amp * Math.sin(frame * 0.01);
op[idx] = dx * dx + dy * dy <= radius * radius
  ? Math.random() * 0.6 + 0.2
  : 0;

Because the radius grows and shrinks, the static swells out and pulls back in. No easing curves, no particle system, just Math.sin deciding who's allowed to glow.

Porting notes

The original draws black pixels on white. I made the color a prop and defaulted it to a light grey so it works on a dark page, scaled the canvas for device pixel ratio so the squares don't blur, and had it render a single still frame when prefers-reduced-motion is set. I also pulled the circle test out into a shape prop, so the same pulsing mask can be a square, diamond, ring, or full field. Each one is a one-line distance check (Euclidean for the circle, Chebyshev for the square, Manhattan for the diamond), which is a tidy reminder that "which pixels are inside" is just a choice of how you measure distance.

Full credit to Alex Krasikau. Grab the component on the Dynamic Pixel Grid page.

Read the full writeup at https://seangeng.com/writing/a-dynamic-pixel-grid.md and implement it in my project. It covers: A pixel grid that breathes, in one canvas loop. Alex Krasikau's dynamic pixel grid, ported to a themeable canvas component. A field of pixels flickers random opacities inside a circle whose radius pulses on a sine wave. Requirements: - Follow the technique/approach exactly as described in the writeup. - Adapt names, colors, and styling to my project's existing conventions. - If it's a component, make it reusable with sensible props and TypeScript types. - Keep it accessible: semantic HTML, keyboard support, and respect prefers-reduced-motion. - When done, tell me which files you created or changed and how to use it.

The whole idea

The breathing circle

Porting notes

Ask your agent to implement this

The whole idea

The breathing circle

Porting notes