# RetroGrid

Source: https://lumeo.nativ.sh/components/retro-grid

# RetroGrid

Perspective-projected grid floor with a subtle scroll animation. The synthwave staple — great for landing pages, hero sections, and 404 pages.

## When to Use

-   Synthwave / cyberpunk hero sections.
-   404 pages and empty states with a dramatic floor effect.
-   Product launch pages that need a retro-futuristic vibe.

Preview Code

Default Grid

Hero Section

Copy Code

Preview Code

Steeper Angle

Steeper Angle

Copy Code

## API Reference

### RetroGrid

Property

Type

Default

Description

Angle

int

65

Perspective tilt angle in degrees. Higher = more dramatic floor effect.

CellSize

int

60

Size of each grid cell in pixels.

GridColor

string

"var(--color-foreground)"

CSS color of the grid lines.

Opacity

double

0.2

Grid line opacity 0–1.

ChildContent

RenderFragment?

null

Content rendered above the grid.

## Related Components

-   [AuroraBackground](/components/aurora-background) — Northern-lights multi-layer gradient animation.
-   [AnimatedGridPattern](/components/animated-grid-pattern) — SVG grid with individually lit cells.