Backgrounds

Flickering Grid

A canvas of squares that keeps re-rolling its own opacity.

The Flickering Grid paints a lattice of squares on a canvas and re-rolls a share of their opacities on every tick. Because it draws to a canvas rather than to thousands of DOM nodes, it stays cheap enough to sit behind a whole page.

It stops drawing while scrolled out of view, and paints a single still frame when the visitor has asked for reduced motion.

Usage

Flickering Grid

A canvas of squares that keeps re-rolling its own opacity

<template>
  <div class="relative h-64 w-full overflow-hidden rounded-xl border border-default bg-default">
    <MFlickeringGrid
      class="absolute inset-0"
      :square-size="4"
      :grid-gap="6"
      :flicker-chance="0.3"
      color="#6b7280"
    />
    <div class="relative z-10 flex h-full flex-col items-center justify-center gap-2 text-center">
      <h3 class="text-2xl font-bold text-highlighted">
        Flickering Grid
      </h3>
      <p class="max-w-xs text-sm text-muted">
        A canvas of squares that keeps re-rolling its own opacity
      </p>
    </div>
  </div>
</template>

Examples

Customize

Color

Flicker Chance0.3

Grid Gap6

Fps15

Max Opacity0.3

Square Size4

Props

Prop	Type	Default	Description
`color`	`string`	`'#6b7280'`	Colour of the squares. Accepts `#rgb`, `#rrggbb` or a bare `r, g, b` triple.
`squareSize`	`number`	`4`	Side length of a square, in pixels.
`gridGap`	`number`	`6`	Gap between squares, in pixels.
`maxOpacity`	`number`	`0.3`	Ceiling for a square's opacity. A square is re-rolled somewhere between zero and this value.
`flickerChance`	`number`	`0.3`	Chance per tick that any one square re-rolls its opacity. `1` re-rolls the whole grid every tick.
`fps`	`number`	`15`	Cap on redraws per second. The flicker still reads well below `60`, and a lower cap costs less.
`class`	`string`	`''`	CSS classes to apply to the container. The container fills its parent, so give the parent a height.

UI

This component's theme exposes the slots below. Override any of them per instance with the ui prop, or app-wide under ui.flickeringGrid in app.config.ts.

Prop	Type	Default	Description
`ui`	`object`	-	Per-slot classes merged over the theme defaults.

Slot	Props	Description
`root`	-	`relative h-full w-full overflow-hidden`
`canvas`	-	`pointer-events-none absolute inset-0 h-full w-full`

Edit this pageorReport an issue

Dotted Glow Background

Animated dotted background with glowing effects and customizable colors.

Interactive Grid Pattern

A grid of cells that lights up under the pointer.