A sun rising behind the curved edge of a planet: the atmosphere rim brightens, a lens streak spreads along the horizon and the stars fade. Loops or rises once and holds.
A new day for your data
npx shadcn@latest add https://hyperblur.dev/r/bg-horizon-rise.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bg-horizon-rise.tsx.
import { BgHorizonRise } from "@/components/hyperblur/bg-horizon-rise"
<div className="relative h-96"><BgHorizonRise><h1>A new day for your data</h1></BgHorizonRise></div>| Prop | Type | Default | Description |
|---|---|---|---|
| color | string | "#ffd3a1" | Sun and rim light color. |
| accent | string | "#2f7bff" | Atmosphere color around the rim. |
| background | string | "#03040a" | Space color. |
| horizon | number | 72 | Height of the horizon from the top, in percent (30 to 92). |
| stars | number | 60 | Number of stars, up to 200. |
| loop | boolean | true | Rises and sets in a loop. Set false to rise once and hold. |
| speed | number | 1 | Speed multiplier for the sunrise. |
| children | ReactNode | Content rendered above the background. | |
| className | string | "" | Extra classes for the root element. |