Tearable cloth simulation with real Verlet integration physics. A fabric grid hangs from pinned points with gravity and wind — grab it with your mouse, drag it around, throw it with momentum. Pull hard enough and the constraints snap, ripping the cloth apart. Fabric changes color under stress — blue when relaxed, red when stretched near tearing point. Triangle-mesh rendering with per-face normal shading. Configurable grid size, gravity, wind, damping, stiffness, tear threshold, and colors. Zero external dependencies.
import { Component as Cloth } from "@/components/ui/cloth-simulation";
export default function Demo() {
return (
<div className="flex min-h-screen flex-col items-center justify-center bg-[#030712] p-8 gap-8">
<div className="w-full max-w-5xl">
<div className="text-center mb-12">
<h2 className="text-2xl font-bold tracking-tight text-white mb-2">
Cloth Simulation
</h2>
<p className="text-sm text-neutral-400 max-w-lg mx-auto">
Verlet integration with constraint solving. Grab the fabric,
drag it around, throw it. Pull hard enough and it tears apart.
Pure canvas physics.
</p>
</div>
{/* Main showcase — tearable */}
<div className="rounded-2xl border border-white/10 overflow-hidden bg-black">
<Cloth
className="w-full h-[500px]"
cols={55}
rows={30}
spacing={9}
gravity={750}
wind={20}
tearable={true}
tearDistance={2.0}
damping={0.98}
iterations={5}
/>
</div>
<p className="text-[11px] text-white/30 mt-3 text-center">
Click and drag to grab. Pull hard to tear. Fabric changes color under stress.
</p>
</div>
</div>
);
}