127 Components
Floating Compass Nav
NavigationViewport-anchored floating navigation pod that snaps elastically across four corner quadrants (NW, NE, SW, SE) via spring layout projection.
QUADRANT_ANCHOR // SE
Click any corner marker or directional button to snap pod
SE
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/floating-compass-nav.json"
Props
TypeScript props supported by <FloatingCompassNav />.
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultQuadrant | "NW" | "NE" | "SW" | "SE" | "SE" | Initial corner quadrant where the navigation pod is anchored. |
| stiffness | number | 300 | Spring stiffness coefficient for cross-viewport corner snapping. |
| damping | number | 24 | Spring damping coefficient controlling corner arrival bounce. |
Key Features
- Four-corner magnetic quadrant snapping (NW, NE, SW, SE) powered by Framer Motion layout projection.
- On-pod directional quadrant buttons plus dashed corner anchor targets.
- Configurable Hooke's Law stiffness and damping for travel trajectory.
Keyboard & Accessibility
- Every corner anchor target and directional button includes a descriptive aria-label.
- Fully operable via Tab and Enter/Space keys without requiring drag gestures.
- Snaps instantaneously across quadrants when prefers-reduced-motion is active.