title: Box Reveal
description: An animated box reveal effect with customizable colors, duration, and delay.
---

```vue
<template>
  <div class="size-full max-w-lg items-center justify-center overflow-hidden p-8">
    <BoxReveal color="#E1251B">
      <p class="text-[3.5rem] font-semibold">Inspira UI<span class="text-[#E1251B]">.</span></p>
    </BoxReveal>

    <BoxReveal
      color="#E1251B"
      :duration="0.8"
    >
      <h2 class="mt-[.5rem] text-[1rem]">
        Beautiful components for
        <span class="text-[#E1251B]">Vue &amp; Nuxt.</span>
      </h2>
    </BoxReveal>

    <BoxReveal
      color="#E1251B"
      :duration="1"
    >
      <div class="mt-6">
        <p>
          -&gt; Free and open-source animated components built with
          <span class="font-semibold text-[#E1251B]"> Vue/Nuxt</span>,
          <span class="font-semibold text-[#E1251B]"> Typescript</span>,
          <span class="font-semibold text-[#E1251B]"> Tailwind CSS</span>, and
          <span class="font-semibold text-[#E1251B]"> motion-v</span>
          . <br />
          -&gt; 100% open-source, and customizable. <br />
        </p>
      </div>
    </BoxReveal>
  </div>
</template>

```

## 通过 CLI 安装

```vue
<InstallationCli component-id="box-reveal" />
```

## 手动安装

复制并粘贴以下代码：

```vue
<template>
  <div :class="cn('relative', $props.class)">
    <Motion
      :initial="initialMainVariants"
      :while-in-view="visibleMainVariants"
      :transition="{
        duration: props.duration,
        delay: props.delay * 2,
      }"
    >
      <slot />
    </Motion>
    <Motion
      class="box-background absolute inset-0 z-20"
      :initial="initialSlideVariants"
      :while-in-view="visibleSlideVariants"
      :transition="{
        duration: props.duration,
        ease: 'easeIn',
        delay: props.delay,
      }"
    ></Motion>
  </div>
</template>

<script lang="ts" setup>
import { Motion } from "motion-v";
import type { HTMLAttributes } from "vue";
import { cn } from "@/lib/utils";

interface BoxRevealProps {
  color?: string;
  duration?: number;
  class?: HTMLAttributes["class"];
  delay?: number;
}

const props = withDefaults(defineProps<BoxRevealProps>(), {
  color: "#5046e6",
  duration: 0.5,
  delay: 0.25,
});

// Motion variants
const initialMainVariants = { opacity: 0, y: 25 };
const visibleMainVariants = {
  opacity: 1,
  y: 0,
};

const initialSlideVariants = { left: "0%" };
const visibleSlideVariants = {
  left: "100%",
};
</script>

<style scoped>
.box-background {
  background: v-bind(color);
}
</style>

```

## API

| Prop 名称  | 类型     | 默认值      | 描述                                                 |
| ---------- | -------- | ----------- | ---------------------------------------------------- |
| `color`    | `string` | `"#5046e6"` | Background color of the reveal box.                  |
| `duration` | `number` | `0.5`       | Duration of the reveal animation in seconds.         |
| `delay`    | `number` | `0.25`      | Delay before the reveal animation starts in seconds. |
| `class`    | `string` | `""`        | Additional CSS classes for custom styling.           |

## 功能特性

- **Box Reveal Animation**: Creates a sliding box reveal effect with smooth transitions.
- **Customizable Animation**: Control the animation timing with the `duration` and `delay` props.
- **Slot-Based Content**: Supports default slot content that appears once the reveal animation completes.
- **Custom Background Color**: Easily customize the box's background color using the `color` prop.

## 感谢

- Ported from [Magic UI Box Reveal](https://magicui.design/docs/components/box-reveal).