Retro Grid

A grid floor in perspective that slides toward the horizon.

Retro Grid

Installation#

pnpm dlx shadcn@latest add @balick/retro-grid

Or pass the full URL: https://ui.balick.me/r/retro-grid.json

Usage#

import { RetroGrid } from "@/components/ui/retro-grid"

export function Hero() {
  return (
    <section className="relative overflow-hidden">
      <RetroGrid />
      <h1 className="relative">Back to the future</h1>
    </section>
  )
}

Props#

Prop	Type	Default	Description
`angle` Tilt of the floor, in degrees.	`number`	65	Tilt of the floor, in degrees.
`cellSize` Size of a cell, in pixels.	`number`	60	Size of a cell, in pixels.
`duration` Time a line takes to move one cell, as a CSS time.	`string`	"1.2s"	Time a line takes to move one cell, as a CSS time.