Quick start

Vanilla TypeScript

Give the container a real size, then pass it to createFlagCloth.

<div id="flag" style="width: 720px; height: 480px"></div>

import { createFlagCloth } from 'flag-cloth';

const flag = createFlagCloth({
  container: document.querySelector<HTMLElement>('#flag')!,
  texture: '/my-flag.webp',
  width: 3,
  height: 2,
  segments: { x: 32, y: 20 },
  attachment: 'left',
  wind: {
    direction: [1, 0.08, 0.18],
    strength: 7,
    turbulence: 0.35,
  },
  interaction: { enabled: true, dragRadius: 1 },
});

await flag.ready;

The instance starts automatically. Call pause(), resume(), reset(), setWind(), setTexture(), or destroy() as needed.

width and height above describe the cloth in simulation units. The canvas uses the CSS size of #flag. See Attachments and pinning for partial edges and custom grid coordinates, or React for canvasWidth and canvasHeight props.

React

Import the React entry point. canvasWidth and canvasHeight size the canvas container; width and height still describe the simulated cloth.

import { FlagCloth } from 'flag-cloth/react';

export function Banner() {
  return (
    <FlagCloth
      texture="/my-flag.webp"
      canvasWidth="100%"
      canvasHeight={480}
      width={3}
      height={2}
      segments={{ x: 32, y: 20 }}
      attachment="left"
      wind={{
        direction: [1, 0.08, 0.18],
        strength: 7,
        turbulence: 0.35,
      }}
      interaction={{ enabled: true, dragRadius: 1 }}
    />
  );
}

The component creates the core instance when it mounts, updates mutable options when props change, and destroys the instance when it unmounts. Use a ref when you need imperative methods such as reset() or setTexture().

Vanilla cleanup

Always call destroy() when the owning view is removed. It cancels animation, disconnects observers, removes pointer and visibility listeners, and releases WebGL resources.