127 Components
Grid Horizon
BackgroundsPure CSS 3D perspective synthwave horizon using `perspective(320px) rotateX(64deg)` and `background-position-y` animation for an endless wireframe road effect.
Grid Horizon · rotateX(64deg)
Perspective Grid Horizon
Pure CSS perspective(320px) plane tilted at 64° with an endless background-position-y loop and a scanline horizon sun.
Pure CSS 3D Transform · Endless Loop · 0 JS Per-Frame Cost
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:lucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/grid-horizon.json"
Props
TypeScript props supported by <GridHorizon />.
| Prop | Type | Default | Description |
|---|---|---|---|
| speed | number | 1 | Scroll velocity multiplier for the grid road. |
| gridColor | string | "rgba(236, 72, 153, 0.55)" | CSS color string for the perspective grid lines. |
| sunColor | string | "#F97316" | Core color of the horizon sun. |
| gridSize | number | 44 | Grid tile size in pixels. |
| showSun | boolean | true | Toggles the segmented synthwave sun on the horizon. |
| children | React.ReactNode | — | Optional foreground content rendered above the horizon. |
| className | string | — | Additional Tailwind CSS classes for the container. |
Key Features
- Uses CSS `perspective(320px)` and `rotateX(64deg)` to project a 2D repeating grid into a 3D infinite plane.
- Segmented scanline sun orb and glowing horizon divider line.
- Includes Synthwave, Cyber, and Mono theme switcher pills in the default preview.
Keyboard & Accessibility
- Marks decorative 3D grid and sun layers with `aria-hidden='true'`.
- High-contrast foreground text with drop-shadow separation.
- Theme switcher buttons are keyboard focusable.