Signature / Moleculestable

Retro Grid

CSS perspective grid with scrolling lines for retro-futuristic backgrounds.

@glinui/uiComponent: retro-grid

Installation$

pnpm add @glinui/ui @glinui/tokens

Registry$

pnpm dlx @glinui/cli@latest add retro-grid

Usage$

Place inside a relative container with overflow-hidden. The grid uses CSS perspective with repeating-linear-gradient to create a vanishing-point tile effect.

Basic$

Retro Grid

TSX

1import { RetroGrid } from "@glinui/ui"
2
3export function RetroGridDemo() {
4return (
5  <div className="relative flex h-64 w-full items-center justify-center overflow-hidden rounded-xl border border-neutral-200 bg-white dark:border-neutral-800 dark:bg-neutral-950">
6    <span className="relative z-10 text-3xl font-bold">Retro Grid</span>
7    <RetroGrid />
8  </div>
9)
10}

Examples$

Custom Angle$

45°

TSX

1import { RetroGrid } from "@glinui/ui"
2
3export function RetroGridAngleDemo() {
4return (
5  <div className="relative flex h-64 w-full items-center justify-center overflow-hidden rounded-xl border border-neutral-200 bg-white dark:border-neutral-800 dark:bg-neutral-950">
6    <span className="relative z-10 text-3xl font-bold">45°</span>
7    <RetroGrid angle={45} />
8  </div>
9)
10}

Custom Color and Cell Size$

Custom Grid

TSX

1import { RetroGrid } from "@glinui/ui"
2
3export function RetroGridColorDemo() {
4return (
5  <div className="relative flex h-64 w-full items-center justify-center overflow-hidden rounded-xl border border-neutral-200 bg-indigo-950">
6    <span className="relative z-10 text-2xl font-bold text-indigo-200">Custom Grid</span>
7    <RetroGrid lineColor="#818cf8" lineOpacity={0.5} cellSize={80} />
8  </div>
9)
10}

Accessibility$

The grid element is marked aria-hidden="true" — invisible to assistive technologies.
Purely decorative; carries no semantic meaning.

Reduced Motion$

The perspective scroll animation is paused via motion-reduce:animate-none and motion-reduce:[animation-play-state:paused]. The static grid remains visible so the layout is unaffected.

API Reference$

Prop	Type	Required	Default	Description
`angle`	`number`	No	`65`	Perspective angle in degrees
`cellSize`	`number`	No	`60`	Grid cell size in px
`lineColor`	`string`	No	`-`	Grid line color
`lineOpacity`	`number`	No	`0.3`	Grid line opacity (0-1)

Source$

TSX

1import { RetroGrid } from "@glinui/ui"

packages/ui/src/components/retro-grid.tsx

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/retro-grid.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-02-19T17:59:28.468Z · Full index: /docs/api-metadata

Primary Props Type

RetroGridProps

`RetroGridProps`

Prop	Type	Required	Default	Description
`angle`	`number`	No	`65`	Perspective angle in degrees
`cellSize`	`number`	No	`60`	Grid cell size in px
`lineColor`	`string`	No	`-`	Grid line color
`lineOpacity`	`number`	No	`0.3`	Grid line opacity (0-1)