Originals
Surface tension
Items behave like drops sitting on a surface. Bring the pointer close and they lean toward it; between two neighbours a meniscus forms and they fuse into one shape; a droplet follows your pointer and merges with whatever it touches.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { SurfaceTension } from '@vizzele/react';
<SurfaceTension className="chips" reach={90}>
<button>Springs</button>
<button>Inertia</button>
<button>Glass</button>
</SurfaceTension>Props
| Prop | Type | Default | Description |
|---|---|---|---|
reach | number | 90 | Distance (px) at which drops start reaching. |
droplet | number | 16 | Radius of the pointer droplet (0 = off). |
itemSelector | string | — | Which descendants are drops (default: children). |
Accessibility
- The liquid layer is decorative and sits behind the items; the items keep their roles and focus.
- Reduced motion: drops stay still, no droplet or necks.