Starfield

A field of softly twinkling stars, generated from a seed so server and client match.

Night shift

Installation

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

React
import Starfield from "@/components/fx/starfield"

<Starfield className="px-8 py-28"><h2>Night shift</h2></Starfield>

Stars are aria-hidden and ignore pointer events.
Pauses offscreen; `paused` stops it on demand.
prefers-reduced-motion: reduce (or data-rad-fx-motion="reduce" on an ancestor) keeps the stars, without twinkling.

Prop	Type	Default	Description
count	number	90	Number of stars.
color	string	'#e2e8f0'	Star colour.
seed	number	7	Change for a different, stable sky.
paused	boolean	false	Stop the animation. It also pauses itself offscreen.
...props	ComponentProps<'div'>	—	Passed to the root div; children render above the effect.