127 Components
Topographic Ripple Surface
BackgroundsConcentric contour ring background where pointer movement warps isolines with graduated spring mass and clicks emit a radial ripple.
Topographic IsolinesMove cursor to warp • Click to ripple
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/topographic-ripple-surface.json"
Props
TypeScript props supported by <TopographicRippleSurface />.
| Prop | Type | Default | Description |
|---|---|---|---|
| ringCount | number | 6 | Number of concentric topographic contour rings. |
| stiffness | number | 220 | Base spring stiffness coefficient for the innermost contour ring. |
| damping | number | 20 | Base spring damping coefficient for contour displacement. |
Key Features
- Graduated spring stiffness and mass per contour ring so inner isolines track tightly while outer rings trail organically.
- Click-triggered radial shockwave that ripples outward across all concentric rings.
- Zero React state re-renders during continuous pointer movement.
Keyboard & Accessibility
- All decorative contour rings are marked aria-hidden='true'.
- Locks contour rings in concentric alignment and disables shockwave scaling when prefers-reduced-motion is active.
- Maintains high foreground contrast with a frosted backdrop container.