Backgrounds

Retro Grid

A tilted grid plane that scrolls towards the horizon.

The Retro Grid lays a grid on a plane rotated in 3D space and scrolls it towards the viewer. The perspective does the work: the cells near the horizon crowd together while the ones up close spread out.

It is a decorative background, so it ignores pointer events and expects a parent with a height.

Usage

Retro Grid

A tilted plane that scrolls towards the horizon

<template>
  <div class="relative h-72 w-full overflow-hidden rounded-xl border border-default bg-default">
    <MRetroGrid />
    <div class="relative z-10 flex h-full flex-col items-center justify-center gap-2 text-center">
      <h3 class="text-3xl font-bold text-highlighted">
        Retro Grid
      </h3>
      <p class="max-w-xs text-sm text-muted">
        A tilted plane that scrolls towards the horizon
      </p>
    </div>
  </div>
</template>

Examples

Customize

Angle65

Cell Size60

Color

Fade

Opacity0.6

Speed3

Props

Prop	Type	Default	Description
`angle`	`number`	`65`	Tilt of the plane, in degrees. Lower values lay the grid flatter against the screen.
`cellSize`	`number`	`60`	Distance between grid lines, in pixels.
`speed`	`number`	`3`	Seconds for the grid to travel one cell towards the viewer. Lower is faster.
`color`	`string`	`'var(--ui-border)'`	Colour of the grid lines. Any CSS colour works.
`opacity`	`number`	`0.6`	Opacity of the grid lines.
`fade`	`boolean`	`true`	Fade the grid out towards the horizon. Turn it off for a hard edge.
`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.retroGrid in app.config.ts.

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

Slot	Props	Description
`root`	-	`retro-grid pointer-events-none absolute inset-0 h-full w-full overflow-hidden`
`tilt`	-	`retro-grid-tilt absolute inset-0`
`plane`	-	`retro-grid-plane absolute`
`fade`	-	`pointer-events-none absolute inset-0`

Edit this pageorReport an issue

Particles

A drifting field of dots that scatters away from the pointer.

Shooting Stars

Animated shooting stars effect with customizable colors, speed, and timing.