component

Flag

A cloth flag on a pole; the cloth ripples per-frame, pinned at the luff. Thin pole collider.

⌖ Explore the library in 3D →

Add it

npx @runek/cli add flag

Pulls @react-three/fiber@^9.6.1, @react-three/rapier@^2.2.0, @runek/core@^0.13.0, three@^0.184.0.

Use it

import { Flag } from './runek/Flag'

<Flag position={[0, 0, 0]} />

Props

export interface FlagProps extends WorldComponentProps {
  /** Pole height, in units. */
  poleHeight?: number
  /** Flag width away from the pole (the fly), in units. */
  fly?: number
  /** Flag height (the drop), in units. */
  drop?: number
  /** Ripple speed. */
  waveSpeed?: number
  /** Ripple depth as a fraction of the fly. */
  waveAmplitude?: number
  /** Cloth color; defaults to the world palette's `fabric`. */
  color?: string
  /** Pole color; defaults to the palette's `wood`. */
  poleColor?: string
}

Registry manifest

Browse the whole catalog in the gallery →.