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

PropTypeDescriptionDefault
childrenReact.ReactNodeThe content to be put inside the warp animation-
perspectivenumberThe perspective of the warp animation100
beamsPerSidenumberThe number of beams per side3
beamSizenumberThe size of the beams5
beamDelayMaxnumberThe maximum delay of the beams3
beamDelayMinnumberThe minimum delay of the beams0
beamDurationnumberThe duration of the beams3
gridColorstringThe color of the grid lines"hsl(var(--border))"