āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/magicuidesign/magicui/components/warp-background ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
npx shadcn@latest add @magicui/warp-background
<Step>Copy and paste the following code into your project.</Step>
<ComponentSource name="warp-background" /><Step>Update the import paths to match your project setup.</Step>
</Steps> </TabsContent> </Tabs>import { WarpBackground } from "@/components/ui/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>
| 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 |
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā