Cosmic Background
betaDowel's orbital mark as a living sky: a glowing core, tilted orbits with a body riding each, and a seeded field of twinkling stars that leans toward the pointer.
- Effects & motion
- 2 files
- 1 npm package
- Accessibility notes
- Draws on a canvas
- See it in Backgrounds
pnpm dlx @dowel-ui/cli add cosmic-backgroundnpm packages installed: class-variance-authority.
import { CosmicBackground } from "@/components/ui/cosmic-background";Default
Full System
Subtle
Custom Palette
<CosmicBackground>
| Prop | Type | Default |
|---|---|---|
coreDraw the bright core the orbits turn about. Default true. | boolean | true |
densityStars per area; 1 is about one per 2,400 square pixels. Default 1. | number | 1 |
fade | "none" | "edges" | "bottom" | "none" |
glowStrength of the glow behind the core, 0–1. Default 0.7. | number | 0.7 |
interactiveLean the scene toward the pointer. Default true. | boolean | true |
orbitsHow many orbits to draw, 0–3. Default 2: the mark's own pair. | number | 2 |
originWhere the core sits. Default | CosmicBackgroundOrigin | "center" |
paletteAccent colours, cycled across the orbiting bodies and the tinted stars. Tokens or CSS colours. Default | readonly string[] | DEFAULT_PALETTE |
ringsDraw the orbit paths as faint rings. Default true. | boolean | true |
seedSeed for the star layout, so a page renders the same sky every time. Default 7. | number | 7 |
speedOrbit and twinkle speed multiplier. 0 parks the bodies. Default 1. | number | 1 |
starColorStar and orbit-ring colour: a token ( | string | "foreground" |
Plus every attribute of <div>.
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