Warp Background

PreviewCode

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!

@/demos/WarpBackgroundDemo.tsx

import { Card, CardContent, CardDescription, CardTitle } from '@/components/ui/card'
import { WarpBackground } from '@/registry/magicui/warp-background'

export function WarpBackgroundDemo() {
  return (
    <WarpBackground>
      <Card class="w-80">
        <CardContent class="flex flex-col gap-2 p-4">
          <CardTitle>Congratulations on Your Promotion!</CardTitle>
          <CardDescription>
            Your hard work and dedication have paid off. We&apos;re thrilled to
            see you take this next step in your career. Keep up the fantastic
            work!
          </CardDescription>
        </CardContent>
      </Card>
    </WarpBackground>
  )
}

Installation

pnpm

pnpm dlx shadcn@latest add @magicui-solid/warp-background

bun

bunx shadcn@latest add @magicui-solid/warp-background

yarn

yarn dlx shadcn@latest add @magicui-solid/warp-background

npm

npx shadcn@latest add @magicui-solid/warp-background

Import

import { WarpBackground } from '@/components/magicui/warp-background'

Usage

<WarpBackground>
  <div class="w-80">
    <p>Warp Background</p>
    <p>This is a component that creates a warp background effect.</p>
  </div>
</WarpBackground>

Props

Name	Type	Default	Description
children	JSX.Element	-	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			The color of the grid lines

Original:

magicui.design/docs/components/warp-background