Multiple flags

Compare instance count, simulation resolution, and renderer presets.

Live previewDrag the cloth

Flags 4

Grid X 32

Renderer preset

FlagGrid.tsx

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

const flags = Array.from({ length: 4 });

export function FlagGrid() {
  return (
    <div className="flag-grid">
      {flags.map((_, index) => (
        <FlagCloth
          key={index}
          texture="/my-flag.webp"
          canvasWidth="100%"
          canvasHeight={320}
          segments={{ x: 32, y: 20 }}
          renderer={{ preset: 'performance' }}
          visibility={{
            pauseWhenOffscreen: true,
            pauseWhenDocumentHidden: true,
          }}
        />
      ))}
    </div>
  );
}