Zero dependencies · native WebGL2
A focused TypeScript library for flags with connected-particle physics.
Playground
Try it here.
Adjust the wind and turbulence, switch renderer profiles, or drag the cloth directly.
Grab any unpinned point.
14 kB gzipped core
Vanilla TypeScript or React.
The same dependency-free solver is available through both entry points.
Read the quick startimport { createFlagCloth } from 'flag-cloth';
const flag = createFlagCloth({
container: document.querySelector('#flag'),
texture: '/signal.webp',
segments: { x: 32, y: 20 },
attachment: 'left',
wind: { strength: 7, turbulence: .35 },
interaction: { enabled: true },
});Verlet integration
See the solver at work.
Wind moves the particles while structural, shear, and bend constraints hold the grid together. Change the attachment, adjust wind velocity, or drag any free point.
Drag any white particle
flag-cloth