127 Components
Gravity Well Portal
MotionMulti-node gravitational field stage where spring-tethered telemetry badges warp toward or repel from the pointer with polarity inversion.
Move cursor to warp nodes • Click to invert polarity
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/gravity-well-portal.json"
Props
TypeScript props supported by <GravityWellPortal />.
| Prop | Type | Default | Description |
|---|---|---|---|
| pullRadius | number | 180 | Gravitational influence radius in pixels around the cursor. |
| pullStrength | number | 0.55 | Peak attraction or repulsion displacement factor (0.1 to 0.9). |
| stiffness | number | 240 | Hooke's Law spring stiffness coefficient for node tethers. |
| damping | number | 20 | Spring damping coefficient controlling node oscillation decay. |
Key Features
- Simultaneous 2D vector field attraction and repulsion across 6 spring-tethered telemetry nodes.
- Click or keyboard toggle to invert field polarity between gravitational pull and radial repulsion.
- Zero React state re-renders during pointer movement via Framer Motion useTransform.
Keyboard & Accessibility
- Provides a keyboard-focusable polarity toggle button announcing Attract and Repel states.
- Marks decorative orbital rings and floating telemetry badges with aria-hidden='true'.
- Locks all orbital nodes at their anchor coordinates when prefers-reduced-motion is enabled.