Inicio rápido

TypeScript sin framework

Asigna un tamaño real al contenedor y pásalo a 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;

La instancia comienza automáticamente. Utiliza pause(), resume(), reset(), setWind(), setTexture() o destroy() cuando lo necesites.

Los valores width y height describen la tela en unidades de simulación. El canvas usa el tamaño CSS de #flag. Consulta Sujeciones y puntos fijos para fijar partes de un borde o coordenadas concretas, y React para conocer canvasWidth y canvasHeight.

React

Importa el punto de entrada de React. canvasWidth y canvasHeight definen el tamaño del contenedor; width y height siguen describiendo la tela simulada.

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 }}
    />
  );
}

El componente crea la instancia principal al montarse, actualiza las opciones mutables cuando cambian las props y destruye la instancia al desmontarse. Usa una ref cuando necesites métodos como reset() o setTexture().

Limpieza en la API vanilla

Llama siempre a destroy() cuando elimines la vista propietaria. Este método cancela la animación, desconecta los observadores, elimina los listeners del puntero y de visibilidad, y libera los recursos de WebGL.