Star Background
Canvas 2D starfield background. Configurable star count, twinkle speed, and color. Suited for hero sections or page backgrounds with optional overlay content.
Stars
Install
Use Open-UI CLI or Shadcn CLI to install the component.
Open-UI CLI
Shadcn CLI
Usage
| Prop | Default | Description | Type |
|---|---|---|---|
| starCount | 200 | Number of stars to render in the canvas. | number |
| twinkleSpeed | 0.002 | Speed of the twinkle animation (0 to disable). | number |
| starColor | "255, 255, 255" | Star color as RGB comma-separated string (e.g. "255, 255, 255"). | string |
| backgroundColor | "transparent" | Background color of the canvas (CSS color). | string |
| className | — | Additional CSS class for the canvas element. | string |
| containerClassName | — | Additional CSS class for the outer container. | string |
| children | — | Optional overlay content rendered above the starfield. | ReactNode |
| style | — | Inline CSS styles for the root container. | CSSProperties |