The Starry Sky component creates a premium, high-performance animated starfield using Three.js. It renders multiple parallax layers of twinkling stars, realistic 4-point glint lens flares on the brightest stars, a rich background cosmic nebula glow, and smooth eased mouse-driven parallax movement.
Preview
Usage
Installation
$ pnpm dlx shadcn add https://klarden.vercel.app/r/starry-sky.json
Basic Example
import { StarrySky } from "@/components/starry-sky";
export default function App() {
return (
<div className="relative w-full h-[600px] bg-black">
<StarrySky
speed={1.0}
starDensity={1.2}
glowIntensity={1.0}
nebulaIntensity={0.6}
interactive={true}
className="absolute inset-0 w-full h-full"
/>
<div className="relative z-10 flex items-center justify-center h-full text-white">
<h1 className="text-4xl font-extrabold tracking-tight">Deep Space</h1>
</div>
</div>
);
}
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
speed | number | 1 | Multiplier for the twinkling animation speed. |
starDensity | number | 1 | Density factor for the generated stars. Higher values increase the visibility of stars. |
glowIntensity | number | 1 | Brightness multiplier for the 4-point lens flares (glints) on the brightest stars. |
nebulaIntensity | number | 0.5 | Intensity/opacity of the background multi-layered cosmic nebula cloud glow. |
interactive | boolean | true | Enables smooth eased parallax shift responsive to mouse coordinate movement. |
opacity | number | 1 | Canvas opacity value (0-1) to blend with underlying layouts. |
className | string | — | Additional CSS classes for the container element. |
children | ReactNode | — | Overlay layout content to be rendered on top of the starfield. |