Spring-mesh surface that stretches under the pointer and settles back with damped physics.
Every prop is wired to the controls underneath. Move the pointer across the sheet to stretch it, or switch Interaction to Drag and pull it.
| Prop | Type | Default | Description |
|---|---|---|---|
image | string | '' | Optional image URL to warp. When empty, a color gradient surface is rendered instead. |
color1 | string | #5227FF | Top color of the gradient surface. |
color2 | string | #B19EEF | Bottom color of the gradient surface. |
showGrid | boolean | true | Draw the mesh lattice over the surface. |
gridDensity | number | 20 | Number of lattice cells across the sheet. |
gridOpacity | number | 0.28 | Opacity of the lattice lines. |
gridColor | string | #ffffff | Color of the lattice lines. |
highlight | string | #ffffff | Specular highlight color used by the shading. |
borderRadius | number | 25 | Corner radius of the sheet in pixels. |
stiffness | number | 0.05 | How hard the mesh springs back to flat. Higher settles faster. |
damping | number | 0.2 | How quickly wobbles die out. Higher damping settles faster with fewer oscillations. |
grabRadius | number | 0.6 | How much of the sheet the pointer grabs (fraction of the surface). |
pull | number | 0.4 | How far the surface stretches toward the pointer. |
wobble | number | 5 | Neighbor coupling. higher spreads the deformation into more visible ripples. |
tilt | number | 14 | Perspective tilt of the sheet in degrees. |
shading | number | 0.5 | Fake lighting strength that gives the warp depth. Keep above 0 to read the deformation. |
resolution | number | 25 | Mesh grid density (nodes per side). |
interaction | "hover" | "drag" | "hover" | Whether the mesh reacts to hover or only while dragging. |
enabled | boolean | true | Enables or disables the pointer interaction. |
Keyboard shortcuts and ARIA behavior.