title: Warp Background
description: A container component that applies a warp animation effect to its children
---

```vue
<template>
  <div class="w-full">
    <WarpBackground>
      <div class="mx-auto w-72 rounded-lg border bg-card shadow-sm">
        <div class="flex flex-col gap-2 p-4">
          <h3 class="text-xl font-semibold leading-none tracking-tight">
            Congratulations on Your Promotion!
          </h3>
          <p class="text-sm text-gray-500 dark:text-gray-400">
            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!
          </p>
        </div>
      </div>
    </WarpBackground>
  </div>
</template>

<script lang="ts" setup></script>

<style></style>

```

## Install using CLI

```vue
<InstallationCli component-id="warp-background" />
```

## Install Manually

Copy and paste the following code in the same folder

::code-group

:CodeViewerTab{label="WarpBackground.vue" language="vue" componentName="WarpBackground" type="ui" id="warp-background"}
:CodeViewerTab{filename="Beam.vue" language="vue" componentName="Beam" type="ui" id="warp-background"}

::

## API

| Prop Name      | Type     | Default                | Description                               |
| -------------- | -------- | ---------------------- | ----------------------------------------- |
| `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 in seconds |
| `beamDelayMin` | `number` | `0`                    | The minimum delay of the beams in seconds |
| `beamDuration` | `number` | `3`                    | The duration of the beams                 |
| `gridColor`    | `string` | `"hsl(var(--border))"` | The color of the grid lines               |

## Credits

- Credits to [Whbbit1999](https://github.com/Whbbit1999) for this component.
- Inspired and ported from [Magic UI WarpBackground](https://magicui.design/docs/components/warp-background).