Congratulations on Your Promotion!
Your hard work and dedication have paid off. We're thrilled to see you take this next step in your career. Keep up the fantastic work!
Installation
Usage
import { WarpBackground } from "@/components/magicui/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>Props
| 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 |