Premium & Brand

Flickering Grid

Server Component

A grid of cells that independently flicker.

Import

tsx

import { FlickeringGrid } from "@cronus-ui/ui";

bash

npx cronus-ui add flickering-grid

Examples

Signal grid

Cells flicker on independent, index-derived timings so SSR and the client match. Reduced-motion visitors get a still, faint grid.

Signal

tsx

<FlickeringGrid className="grid min-h-56 place-items-center rounded-2xl border border-border bg-surface-raised">
  <p className="font-display text-2xl text-fg">Signal</p>
</FlickeringGrid>

API Reference

Generated from the component's exported types.

FlickeringGridProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`ref`	`Ref<HTMLDivElement>`	—	—
`columns`	`number`	`16`	Number of columns in the grid.
`rows`	`number`	`10`	Number of rows in the grid.