Cloth Simulation
Grab a corner and watch the fabric fall and swing.
AdvancedWeb appCreative12–26hAI-buildable 3/5no setup
A grid of points connected by distance constraints, solved iteratively with Verlet integration. Pin some corners, drag it around, tear it. Very little code produces something that feels physical, and stability tuning is the entire craft.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 7
- A grid of particles connected by distance constraints
- Verlet integration with gravity
- Corners can be pinned and unpinned
- Dragging a point moves the cloth realistically
- Constraints can be torn by pulling hard enough
- Wind can be applied with adjustable strength
- The simulation stays stable rather than exploding
The interesting part
- Constraint solving iterations trading stability against performance
- Preventing the simulation from becoming unstable at large timesteps
- Fixed timestep accumulation independent of frame rate
Once it works
- Add collision with a sphere
- Add a textured render rather than wireframe
- Add self-collision
Suggested stack
reacttypescripttailwindcanvas-api