Sunset
A synthwave sun whose slits drift down and widen, behind rim-lit mountains. Lines up with Retro Grid.
New in 1.7.
Midnight Drive, on tape Friday
Nine tracks, all at 118 BPM. 300 cassettes, then it's streaming only.
Installation
npx shadcn@latest add https://neonkit.heyaadi.com/r/sunset.jsonUsage
import { RetroGrid } from "@/components/ui/retro-grid"
import { Sunset } from "@/components/ui/sunset"
<section className="relative overflow-hidden bg-[#05060a]">
<Sunset line={false} />
<RetroGrid />
<h1 className="relative">Midnight Drive, on tape Friday</h1>
</section>Examples
Colors
The top of the sun is always near white; the color takes over toward the horizon, like a real low sun.
Without mountains
mountains={false} and a low horizon leave the bare disc with its slits drifting down, widening as they go.
On its own
With its own horizon line and a shadow at the front for the copy.
API reference
A layer that fills the nearest positioned parent. The disc is a small canvas; sky, halo, mountains and horizon are static CSS and SVG. Accepts native div attributes.
| Prop | Type | Default |
|---|---|---|
color | NeonColorColor of the sun's lower half, the ridges and the horizon. | inherited |
horizon | numberWhere the horizon sits, as a fraction of the height from the top. 0.5 lines up with Retro Grid. | 0.5 |
size | numberSun diameter as a fraction of the height, capped at 68% of the width. | 0.62 |
slits | numberSlits cut across the lower half of the sun. | 7 |
speed | numberSpeed multiplier for the slits. 0 holds still. | 1 |
mountains | booleanTwo ridges in front of the sun, the far one rim-lit. | true |
seed | numberSame seed, same mountains. Generated without randomness, so server and client match. | 3 |
line | booleanThe bright line along the horizon. Turn it off under a Retro Grid, which draws its own. | true |
Accessibility
- Decorative: rendered with aria-hidden and pointer-events: none.
- Slits are real cut-outs, so the halo and whatever is behind the layer show through them.
- Only the disc animates, and only while it's on screen and the tab is visible. Under prefers-reduced-motion the slits hold still.