React

Define el tamaño del canvas, actualiza props y accede a la instancia mediante una ref.

Vista previaArrastra la tela

Viento 7.0

Turbulencia 0.34

Cuadrícula X 32

Radio de arrastre 1

Banner.tsx

import { FlagCloth, type FlagClothInstance } from 'flag-cloth/react';
import { useRef } from 'react';

export function Banner() {
  const flagRef = useRef<FlagClothInstance | null>(null);

  return (
    <FlagCloth
      ref={flagRef}
      texture="/my-flag.webp"
      canvasWidth="100%"
      canvasHeight={520}
      width={3}
      height={2}
      segments={{ x: 32, y: 20 }}
      attachment="left"
      wind={{
        strength: 7.0,
        turbulence: 0.34,
      }}
      interaction={{
        enabled: true,
        dragRadius: 1,
      }}
    />
  );
}