Horizon Grid
A synthwave scene for heroes: an endless neon grid floor racing toward a striped sun setting behind the horizon. Day and night palettes follow the theme. Pure CSS.
Installation
Full Setup guideInstall the component automatically via Shadcn CLI.
npx shadcn@latest add https://www.grettech.com/api/registry/horizon-gridOther Examples
Full Bleed Hero
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | Content shown over the scene. |
sky | [string, string] | Pastel pink by day, deep violet by night (follows the theme) | Sky gradient from the top to the horizon. |
ground | string | "#fdf4ff" light, "#05010f" dark | Ground colour below the horizon. |
sun | [string, string, string] | ["#fde68a", "#fb7185", "#c026d3"] | Sun gradient, top to bottom. |
gridColor | string | "#c026d3" light, "#e879f9" dark | Colour of the grid lines and the horizon glow. |
horizon | number | 58 | Horizon height in % from the top. |
speed | number | 0.8 | Seconds for the grid to move one cell; lower is faster. |
cellSize | number | 56 | Grid cell size in px. |
showSun | boolean | true | Shows the sun. |
className | string | - | Extra classes for the scene. |
...props | React.HTMLAttributes<HTMLDivElement> | - | Any other attributes, passed to the scene. |