Cloth Button

NewPremium

Button surface simulates fabric using verlet integration physics. Cursor pushes dents into the cloth mesh.

buttonsphysicsclothverletfabricinteractive

Installation

Terminalbash

npx motioncraft add cloth-button

Usage

cloth-button.tsxtsx

import { ClothButton } from "@/components/buttons/premium-buttons";

<ClothButton meshColor="rgba(99, 102, 241, 0.5)">
  Touch Me
</ClothButton>

Props

Prop	Type	Default	Description
children*	ReactNode	—	Button content
meshColor	string	rgba(255, 255, 255, 0.4)	Mesh line color
className	string	—	Additional CSS classes
onClick	() => void	—	Click handler

Related Components

Thermal Button

New

Button visually 'heats up' the longer you hover. Color shifts from cool blue to hot red with glow and shimmer effects.

Momentum Button

New

Button maintains physics inertia after cursor leaves. Flick the cursor across it and watch it continue moving with realistic momentum and spring-back.

Shader Distortion Button

New

WebGL-powered button with GPU-computed water-warp distortion on hover. Real-time ripple displacement mapping.

Ink Bleed Button

New

Click triggers organic watercolor-like ink bleeding from the click point. Canvas-based fluid simulation with sub-drop spawning.