Sunburst

Rays fanning out from a point, turning very slowly.

Golden hour

Installation

bash
npx shadcn@latest add https://www.rad-ui.com/r/sunburst.json

React
import Sunburst from "@/components/fx/sunburst"

<Sunburst className="px-8 py-24">
    <h2>Your content</h2>
</Sunburst>

Sunrise

React
<Sunburst origin="50% 100%">…</Sunburst>

The effect layer is aria-hidden and ignores pointer events; only children are exposed.
Pauses offscreen; `paused` stops it on demand (wire it to a visible control if it runs behind reading content).
prefers-reduced-motion: reduce (or data-rad-fx-motion="reduce" on an ancestor) stops the rotation.

Prop	Type	Default	Description
color	string	amber, 14%	Ray colour.
rays	number	18	Number of rays.
origin	string	'50% 50%'	Where the rays come from, as "x y".
speed	number	60	Seconds per turn.
paused	boolean	false	Stop the animation. It also pauses offscreen.
...props	ComponentProps<'div'>	—	Passed to the root div; children render above.