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 |