title: Blur Reveal
description: A component to smoothly blur fade in content.
---

```vue
<template>
  <ClientOnly>
    <BlurReveal
      :delay="0.2"
      :duration="0.75"
      class="p-8"
    >
      <h2 class="text-3xl font-bold tracking-tighter xl:text-6xl/none sm:text-5xl">Hey there 👋</h2>
      <span class="text-pretty text-xl tracking-tighter xl:text-4xl/none sm:text-3xl">
        How is it going?
      </span>
    </BlurReveal>
  </ClientOnly>
</template>

```

::alert{type="warning"}
This component uses the `nuxt-only` syntax with the `<ClientOnly>`. If you are not using Nuxt, you can simply remove it.
::

## 通过 CLI 安装

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

## 手动安装

复制并粘贴以下代码：

```vue
<template>
  <div
    ref="container"
    :class="props.class"
  >
    <Motion
      v-for="(child, index) in children"
      :key="index"
      ref="childElements"
      as="div"
      :initial="getInitial()"
      :while-in-view="getAnimate()"
      :transition="{
        duration: props.duration,
        easing: 'easeInOut',
        delay: props.delay * index,
      }"
    >
      <component :is="child" />
    </Motion>
  </div>
</template>

<script setup lang="ts">
import { Motion } from "motion-v";
import { ref, onMounted, watchEffect, useSlots } from "vue";

interface Props {
  duration?: number;
  delay?: number;
  blur?: string;
  yOffset?: number;
  class?: string;
}

const props = withDefaults(defineProps<Props>(), {
  duration: 1,
  delay: 2,
  blur: "20px",
  yOffset: 20,
});

const container = ref(null);
const childElements = ref([]);
const slots = useSlots();

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const children = ref<any>([]);

onMounted(() => {
  // This will reactively capture all content provided in the default slot
  watchEffect(() => {
    children.value = slots.default ? slots.default() : [];
  });
});

function getInitial() {
  return {
    opacity: 0,
    filter: `blur(${props.blur})`,
    y: props.yOffset,
  };
}

function getAnimate() {
  return {
    opacity: 1,
    filter: `blur(0px)`,
    y: 0,
  };
}
</script>

```

## API

| Prop 名称  | 类型     | 默认值 | 描述                                                                         |
| ---------- | -------- | ------ | ---------------------------------------------------------------------------- |
| `duration` | `number` | `1`    | Duration of the blur fade in animation.                                      |
| `delay`    | `number` | `1`    | Delay between child components to reveal                                     |
| `blur`     | `string` | `10px` | Amount of blur to apply to the child components.                             |
| `yOffset`  | `number` | `20`   | Specifies the vertical offset distance (yOffset) for the entrance animation. |

## 感谢

- Credits to [Magic UI](https://magicui.design/docs/components/blur-fade) for this fantastic component.