Browse components
Elastic Mesh
A wireframe mesh that stretches around the cursor like cloth and springs back; click to send a shockwave.
Elastic Mesh
Installation
npx shadcn@latest add @glint-ui/elastic-meshFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/elastic-mesh.json
Usage
import { ElasticMesh } from "@/components/ui/elastic-mesh";
<div className="relative h-96">
<ElasticMesh spacing={34} />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| spacing | number | 34 | Px between mesh points. |
| radius | number | 170 | Px radius the cursor bends. |
| strength | number | 1 | Cursor force multiplier. |
| stiffness | number | 0.05 | Pull back toward rest. Higher = snappier. |
| damping | number | 0.88 | Velocity kept per frame. Higher = wobblier. |
| mode | "push" | "pull" | "push" | Push the mesh away from the cursor or pull it in. |
| lineColor | string | "#34343c" | Idle line color. |
| activeColor | string | "#c6ff3d" | Color of stretched lines. |
| className | string | — | Extra classes for the root element. |