127 Components
Constellation Map
BackgroundsAstronomical SVG star chart plotting authentic geometries for Orion, Cassiopeia, Ursa Major, Cygnus, and Lyra over a celestial Right Ascension and Declination coordinate grid with animated stroke-dashoffset line tracing.
Celestial Coordinates
Constellation Map
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/constellation-map.json"
Props
TypeScript props supported by <ConstellationMap />.
| Prop | Type | Default | Description |
|---|---|---|---|
| lineColor | string | "#38BDF8" | Stroke color for constellation edges and celestial grid lines. |
| starColor | string | "#F8FAFC" | Fill color for primary constellation star nodes and field stars. |
| drawSpeed | number | 1.0 | Speed multiplier for the constellation line-drawing animation. |
| showGrid | boolean | true | Renders Right Ascension meridians, Declination parallels, and the ecliptic arc. |
| showLabels | boolean | true | Displays constellation headers, Bayer designations, and star names. |
| children | React.ReactNode | — | Optional foreground overlay content. |
| className | string | — | Additional Tailwind CSS classes for the container. |
Key Features
- Authentic stellar coordinates and Bayer designations for Orion, Cassiopeia, Ursa Major, Cygnus, and Lyra.
- Staggered SVG pathLength vector animation over a toggleable Right Ascension / Declination grid.
- Interactive star nodes displaying apparent visual magnitude and Bayer designation telemetry on hover.
Keyboard & Accessibility
- Semantic SVG chart includes an aria-label while background field stars are marked aria-hidden='true'.
- Interactive HUD toggles support full keyboard navigation and clear active state indicators.