Introduction

flag-cloth maps an image onto a simulated cloth grid. Its custom Verlet/PBD solver connects every particle with structural, shear, and bend constraints. Wind applies pressure to triangles, pointer dragging moves particles, and native WebGL2 renders the result.

It has zero runtime dependencies. React is an optional peer dependency only for the React entry point.

Why this exists

There was no focused web library that combined Verlet cloth simulation with a simple way to place an image on the result. The usual alternatives were to build the solver yourself, combine Three.js with a general physics engine, or animate a subdivided plane with sine waves.

flag-cloth packages that specific effect into a lightweight API. Give it an image and a container; it handles the connected-particle simulation, wind, rendering, resizing, and pointer interaction. The result can be used for flags, banners, and other image-based cloth effects without bringing a scene framework or physics engine into the application.

Start here

• Install the package
• Create your first flag
• Choose attachment points
• Size the React canvas
• Check every option and default
• Understand simulation resolution
• Tune performance