Backgrounds

Blinking grid pattern

Blinking grid pattern: A hairline square grid where scattered cells fade up and back down, each hopping to a fresh cell when its blink ends.

Fleet status

1,204 nodes checked in this minute

Each cell drifts to a new coordinate the moment its blink ends, so the board never repeats a beat.

50 cells live4.0s cycle40px gridsolid lines

Using Blinking grid pattern

Blinking grid pattern uses the wide preview frame with a light/dark theme setting.

Customize the preview

These controls are passed to the demo. Defaults and limits describe the preview; consult the implementation for its full prop API.

Control	Type	Default	Preview limits
`cellSize`	`number`	`40`	From 16 to 96; step 2
`litCells`	`number`	`50`	From 5 to 120; step 5
`accent`	`color`	`#38BDF8`	No additional limit in the metadata.
`maxOpacity`	`number`	`0.5`	From 0.05 to 1; step 0.05
`duration`	`number`	`4`	From 1 to 10; step 0.5
`dashed`	`boolean`	`false`	No additional limit in the metadata.

Which frameworks are available for Blinking grid pattern?

Blinking grid pattern is available for React, Vue, Svelte, Astro, HTML. The live preview uses React; the source observations below apply to index.tsx. Check the selected port before relying on the same interactions.

What does Blinking grid pattern depend on?

The React metadata lists these npm dependencies beyond React: clsx.

What accessibility details are visible in Blinking grid pattern?

The React source for Blinking grid pattern includes: attributes and handlers (aria-hidden). These are source observations. Verify accessible names, focus order and keyboard behavior in the composed page.

How does Blinking grid pattern handle reduced motion?

Blinking grid pattern reads the motion preference in its React source through matchMedia(prefers-reduced-motion). Check the full implementation, shared styles and selected port with reduced motion enabled; these observations do not establish that every animation stops.

Connect your agent

Related open components

Still of the Honeycomb lattice component, a Fieldbook UI component in Backgrounds.

1708Honeycomb latticeBackgroundsA honeycomb of outlined hexagons tiling a container, with shared edges drawn only once so every seam stays a single hairline.

Still of the Bar wave matrix component, a Fieldbook UI component in Backgrounds.

2112Bar wave matrixBackgroundsA grid of short bars where each bar slides along its own track, and the phase offset from row to row turns the whole grid into a travelling wave.

Still of the Drifting Light Beams component, a Fieldbook UI component in Backgrounds.

1688Drifting Light BeamsBackgroundsTall tilted bars of light drift upward at different speeds and blur together into a slowly shifting haze.

Still of the Firework burst canvas component, a Fieldbook UI component in Backgrounds.

1691Firework burst canvasBackgroundsShells launch from the bottom edge, arc up trailing a streak, then burst into sparks that fall away under gravity.

Still of the Flickering square mesh component, a Fieldbook UI component in Backgrounds.

1694Flickering square meshBackgroundsA canvas mesh of small squares where random cells jump to a new brightness every frame, giving a restless static that never repeats.

Still of the Grain Flicker component, a Fieldbook UI component in Backgrounds.

1972Grain FlickerBackgroundsA grain layer that redraws itself every few frames, so flat backgrounds get the restless flicker of a running projector instead of a fixed texture.