127 Components
Constellation Mesh Field
BackgroundsInteractive SVG vertex constellation surface that dynamically tethers proximity edges to the pointer with spring-scaled nodes.
Constellation GraphSweep cursor to tether proximity edges
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-mesh-field.json"
Props
TypeScript props supported by <ConstellationMeshField />.
| Prop | Type | Default | Description |
|---|---|---|---|
| connectRadius | number | 130 | Maximum Euclidean distance in viewBox units to connect pointer edges. |
| children | React.ReactNode | — | Optional foreground content rendered above the constellation mesh. |
Key Features
- Crisp vector SVG constellation lattice that scales cleanly to any container resolution.
- Real-time Euclidean distance culling that draws opacity-graded edges between the pointer and nearby vertices.
- Spring-inflated vertex radii when captured within the pointer's connection radius.
Keyboard & Accessibility
- Decorative SVG graph layer is marked aria-hidden='true'.
- Disables dynamic edge tethering when prefers-reduced-motion is enabled.
- Maintains high foreground text contrast inside a translucent HUD card.