Warp Background
A container component that applies a warp animation effect to its children
Install using CLI
Install Manually
Copy and paste the following code in the same folder
API
| Prop Name | Type | Default | Description |
|---|---|---|---|
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 in seconds |
beamDelayMin | number | 0 | The minimum delay of the beams in seconds |
beamDuration | number | 3 | The duration of the beams |
gridColor | string | "hsl(var(--border))" | The color of the grid lines |
Credits
- Credits to Whbbit1999 for this component.
- Inspired and ported from Magic UI WarpBackground.