Starfield Galaxy
A parallax starfield galaxy background with cursor interaction, drawing layered stars and nebula bands on canvas 2D.
Multiple parallax starfield layers stacked on canvas 2D: the stars twinkle and drift, the nebula bands pulse slowly, and as the cursor moves each layer shifts by a different amount according to its depth, creating a sense of deep space.
Loading preview…
npx shadcn@latest add https://webberui.com/r/starfield-galaxy.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
220
1
<StarfieldGalaxy />
Installation
npx shadcn@latest add https://webberui.com/r/starfield-galaxy.jsonOr, once registries are configured in components.json, install it as @webberui/starfield-galaxy.
Usage
import { StarfieldGalaxy } from "@/components/ui/starfield-galaxy";
<StarfieldGalaxy className="h-[340px] w-full">
<div className="relative z-10 flex h-full items-center justify-center">
<h3 className="text-3xl font-bold text-white">Deep Space</h3>
</div>
</StarfieldGalaxy>The container needs a height of its own (for example h-[340px]), and foreground content is layered above the starfield with relative z-10.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
starCount | number | 220 | Total number of stars, distributed evenly across the three parallax layers |
starColors | string[] | White / blue / gold / cyan | Pool of star colors, picked at random per star |
nebulaColors | string[] | Indigo / magenta / cyan | Colors of the three nebula bands |
nebula | boolean | true | Whether the nebula bands are drawn |
speed | number | 1 | Starfield drift speed multiplier |
interactive | boolean | true | Cursor parallax interaction (touch has no effect) |
background | string | #05060f | Base color (the canvas clear color) |
children | ReactNode | — | Foreground content layered above the starfield |
className | string | — | Container styling (height, corner radius, and so on) |
Accessibility
- When the user has "reduce motion" enabled at the system level, only a single static starfield is drawn and the animation loop is stopped
- The canvas is marked
aria-hidden— decorative only, so it does not interfere with assistive technology - Cursor parallax applies to mouse pointers only; touch and keyboard operation are unaffected