Shader Distortion Button
NewPremiumWebGL-powered button with GPU-computed water-warp distortion on hover. Real-time ripple displacement mapping.
buttonswebglshaderdistortionhovergpu
Installation
Terminalbash
npx motioncraft add shader-distortion-buttonUsage
shader-distortion-button.tsxtsx
import { ShaderDistortionButton } from "@/components/buttons/premium-buttons";
<ShaderDistortionButton intensity={0.04}>
Explore
</ShaderDistortionButton>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children* | ReactNode | — | Button content |
| intensity | number | 0.03 | Distortion strength |
| className | string | — | Additional CSS classes |
| onClick | () => void | — | Click handler |
Related Components
Sticker Peel Button
NewButton lifts off the page like a sticker being peeled. 3D perspective with shadow underneath and corner curl.
Ink Bleed Button
NewClick triggers organic watercolor-like ink bleeding from the click point. Canvas-based fluid simulation with sub-drop spawning.
Cloth Button
NewButton surface simulates fabric using verlet integration physics. Cursor pushes dents into the cloth mesh.
Portal Button
NewClick tears open a spiraling vortex/wormhole from the click point. Organic distorted rings with center glow.