Gravity Stars Background
betaDrifting particles the pointer bends like a gravity well: they fall into orbit, are slung out glowing when it leaves, and a click sends a shockwave.
- 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 gravity-stars-backgroundnpm packages installed: class-variance-authority.
import { GravityStarsBackground } from "@/components/ui/gravity-stars-background";Default
Constellation
Dust
<GravityStarsBackground>
| Prop | Type | Default |
|---|---|---|
colorParticle colour: a token or any CSS colour. Default | string | "foreground" |
connectionsJoin nearby particles with faint lines. Default true. | boolean | true |
densityParticles per area; 1 is about one per 5,000 square pixels. Default 1. | number | 1 |
fade | "none" | "edges" | "none" |
glowColorColour of the glow and trails of fast particles, and of shockwaves. Default | string | "primary" |
interactiveThe pointer acts as a gravity well and a click sends a shockwave. Default true. | boolean | true |
linkDistanceDistance in CSS pixels under which two particles are joined. Default 110. | number | 110 |
seedSeed for the particle layout. Default 1. | number | 1 |
Plus every attribute of <div>.
The field is decoration: the canvas is aria-hidden and ignores the pointer, and children render above it in their own layer with their roles, focus order and hit areas intact. The gravity well and shockwave are optional pointer flourishes tracked on the root without capturing or cancelling events, so nothing depends on them and no keyboard equivalent is needed. A lifted finger releases the well, since touch has no hover. The loop pauses off-screen and in hidden tabs; under reduced motion (or a --motion-scale near zero) it draws one still frame of the field and its links, and the pointer and clicks do nothing.
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