Backgrounds

Animated Grid Pattern

A faint lattice with squares that light up at random.

The Animated Grid Pattern draws a dashed grid as a single SVG pattern, then scatters a handful of squares across the same lattice. Each square pulses on its own delay, so the surface never looks like it is running one loop.

Squares are placed on the grid's own coordinates, which means a pulse always lands inside a cell instead of straddling a stroke. The layout is rebuilt whenever the container resizes.

Usage

Animated Grid

Squares light up at random across a faint lattice

<template>
  <div class="relative h-64 w-full overflow-hidden rounded-xl border border-default bg-default">
    <MAnimatedGridPattern
      :num-squares="40"
      :duration="4"
      class="[mask-image:radial-gradient(320px_circle_at_center,white,transparent)]"
    />
    <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">
        Animated Grid
      </h3>
      <p class="max-w-xs text-sm text-muted">
        Squares light up at random across a faint lattice
      </p>
    </div>
  </div>
</template>

Examples

Customize

Color

Duration4

Height40

Max Opacity0.5

Num Squares50

Stroke Dasharray0

Width40

X-1

Y-1

Props

Prop	Type	Default	Description
`width`	`number`	`40`	Cell width, in pixels.
`height`	`number`	`40`	Cell height, in pixels.
`numSquares`	`number`	`50`	How many squares to scatter across the grid. Capped at the number of cells that fit.
`duration`	`number`	`4`	Seconds for one pulse of a square.
`maxOpacity`	`number`	`0.5`	Ceiling for a square's opacity.
`color`	`string`	`'var(--ui-border)'`	Colour of the grid and the twinkling squares.
`strokeDasharray`	`string`	`'0'`	Dash pattern for the grid strokes. `'0'` draws solid lines.
`x`	`number`	`-1`	Horizontal offset of the pattern origin.
`y`	`number`	`-1`	Vertical offset of the pattern origin.
`class`	`string`	`''`	CSS classes to apply to the `<svg>`. The element is absolutely positioned, 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.animatedGridPattern in app.config.ts.

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

Slot	Props	Description
`root`	-	`animated-grid-pattern pointer-events-none absolute inset-0 h-full w-full`
`grid`	-	`fill-transparent`
`squares`	-	`overflow-visible`
`square`	-	`animated-grid-pattern-square`

Edit this pageorReport an issue

Animated Background

Animated background that follows interactive elements.

Animated Spotlight

Animated spotlight effect with customizable gradients and movement.