127 Components
Starry Night
BackgroundsCanvas 2D night sky rendering 100 to 350 depth-layered stars that twinkle via independent sine-wave phases and shift smoothly on pointer move.
Starry Night · 200 Stars
Deep Space Starfield
Move your cursor to experience multi-plane depth parallax while each star oscillates on an independent sine-wave phase.
Canvas 2D · Sine-Wave Alpha · 3D Depth Parallax
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:lucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/starry-night.json"
Props
TypeScript props supported by <StarryNight />.
| Prop | Type | Default | Description |
|---|---|---|---|
| density | number | 200 | Number of stars drawn on the canvas (40 to 400). |
| twinkle | boolean | true | Modulates star alpha over time with a sine wave per star. |
| parallax | number | 24 | Maximum pixel shift on pointer movement. |
| children | React.ReactNode | — | Optional foreground content rendered above the starfield. |
| className | string | — | Additional Tailwind CSS classes for the container. |
Key Features
- Draws 100 to 350 stars with randomized depth, radius, and sine-wave twinkle frequency.
- Smoothly interpolates pointer coordinates for multi-layer depth parallax.
- Includes a live Twinkle toggle button in the default preview.
Keyboard & Accessibility
- Marks the `<canvas>` element with `aria-hidden='true'`.
- High-contrast white text over the deep navy night sky gradient.
- Interactive Twinkle toggle button is keyboard accessible.