Getting Started
Components
Device Mocks
Special Effects
Animations
Text Animations
Buttons
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!
import {
Card,
CardContent,
CardDescription,
CardTitle,
} from "@/components/ui/card";
import { WarpBackground } from "@/registry/magicui/warp-background";
export function ExampleComponentDemo() {
return (
<WarpBackground>
<Card className="w-80">
<CardContent className="flex flex-col gap-2 p-4">
<CardTitle>Congratulations on Your Promotion!</CardTitle>
<CardDescription>
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!
</CardDescription>
</CardContent>
</Card>
</WarpBackground>
);
}
Installation
pnpm dlx shadcn@latest add @magicui/warp-background
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 |
Limited Time Offer
Ship Faster with Magic UI ProMagic UI Pro
Stop building from scratch.
Get 8 production-ready templates and 50+ premium components that your users will love.
✓
Next.js 15 + TypeScript ready✓
Copy, paste, customize in minutes✓
Save 100+ hours of development