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.
Hero Section
Steeper Angle
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 — Northern-lights multi-layer gradient animation.
- AnimatedGridPattern — SVG grid with individually lit cells.