Vanilla TypeScript

Create, update, and clean up a cloth instance without a framework.

Live previewDrag the cloth

Wind 7.0

Turbulence 0.34

Grid X 32

Drag radius 1

main.ts

import { createFlagCloth } from 'flag-cloth';

const container = document.querySelector<HTMLElement>('#flag');
if (!container) throw new Error('Missing #flag container');

const flag = createFlagCloth({
  container,
  texture: '/my-flag.webp',
  width: 3,
  height: 2,
  segments: { x: 32, y: 20 },
  attachment: 'left',
  wind: {
    strength: 7.0,
    turbulence: 0.34,
  },
  interaction: {
    enabled: true,
    dragRadius: 1,
  },
});

await flag.ready;

// Call this when the owning view is removed.
flag.destroy();