Introducing Magic UI Pro - 50+ blocks and templates to build beautiful landing pages in minutes.


Docs
Warp Background

Warp Background

A container component that applies a warp animation effect to its children

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

npx shadcn@latest add "https://magicui.design/r/warp-background"

Props

PropTypeDefaultDescription
childrenReact.ReactNode-The content to be put inside the warp animation
perspectivenumber100The perspective of the warp animation
beamsPerSidenumber3The number of beams per side
beamSizenumber5The size of the beams
beamDelayMaxnumber3The maximum delay of the beams
beamDelayMinnumber0The minimum delay of the beams
beamDurationnumber3The duration of the beams
gridColorstring"hsl(var(--border))"The color of the grid lines