Getting Started
Components
Special Effects
Animations
Text Animations
Backgrounds
import { WarpBackground } from "@/components/ui/warp-background"<WarpBackground>
  <div className="w-80">
    <p>Warp Background</p>
    <p>This is a component that creates a warp background effect.</p>
  </div>
</WarpBackground>| Prop | Type | Default | Description | 
|---|---|---|---|
| children | React.ReactNode | - | The content to be put inside the warp animation | 
| perspective | number | 100 | The perspective of the warp animation | 
| beamsPerSide | number | 3 | The number of beams per side | 
| beamSize | number | 5 | The size of the beams | 
| beamDelayMax | number | 3 | The maximum delay of the beams | 
| beamDelayMin | number | 0 | The minimum delay of the beams | 
| beamDuration | number | 3 | The duration of the beams | 
| gridColor | string | "var(--border)" | The color of the grid lines |