Stars Background
betaA deep night sky behind content: three parallax layers of individually twinkling stars drift at their own speeds, with the odd shooting star.
- Effects & motion
- 2 files
- 1 npm package
- Accessibility notes
- Draws on a canvas
- See it in Backgrounds
Loading the example…
pnpm dlx @dowel-ui/cli add stars-backgroundnpm packages installed: class-variance-authority.
import { StarsBackground } from "@/components/ui/stars-background";Default
Brand Card
Inverted
Still
<StarsBackground>
| Prop | Type | Default |
|---|---|---|
colorStar colour: a token ( | string | "foreground" |
densityStars per area; 1 is about one per 1,600 square pixels. Default 1. | number | 1 |
fade | "none" | "edges" | "bottom" | "none" |
interactiveLean the layers toward the pointer. Default true. | boolean | true |
seedSeed for the star layout, so a page renders the same sky every time. Default 1. | number | 1 |
shootingStarsLet a shooting star cross every few seconds. Default true. | boolean | true |
speedDrift speed multiplier. 0 holds the sky still while it still twinkles. Default 1. | number | 1 |
Plus every attribute of <div>.
The sky is pure decoration: the canvas is aria-hidden and ignores the pointer, and children render above it in their own layer, so headings, links and buttons placed inside keep their roles, focus order and hit areas. The pointer parallax is an optional flourish that needs no input to make sense and is tracked on the root without capturing events. The loop pauses off-screen and in hidden tabs; under reduced motion (or a --motion-scale near zero) it draws one still frame — the same sky at rest, with no shooting stars and no parallax. Star colour is a theme token, so contrast with overlaid text is the theme's; keep text on a solid or blurred surface where the sky is dense.
7/7
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — does not apply
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes