Blur

An entrance that brings elements into focus on load or when they scroll into view.

delay

initialBlur

blur

<script setup lang="ts">
import { RepeatIcon } from '@hugeicons/core-free-icons'
import { HugeiconsIcon } from '@hugeicons/vue'
import { Blurs } from '@animate-ui/vue/primitives/effects/blur'
import { ref } from 'vue'
import { Button } from '@/components/ui/button'

withDefaults(
  defineProps<{
    delay?: number | string,
    initialBlur?: number | string,
    blur?: number | string
  }>(),
  { delay: 0, initialBlur: 10, blur: 0 },
)

const ITEMS = ['Design', 'Build', 'Ship']
const run = ref(0)
</script>

<template>
  <div class="flex flex-col items-center gap-6">
    <div :key="`${run}-${delay}-${initialBlur}-${blur}`" class="flex gap-3">
      <Blurs
        :hold-delay="100"
          :delay="Number(delay)"
          :initial-blur="Number(initialBlur)"
          :blur="Number(blur)"
      >
        <div
          v-for="item in ITEMS"
          :key="item"
          class="flex h-20 w-24 items-center justify-center rounded-xl bg-accent text-sm font-medium"
        >
          {{ item }}
        </div>
      </Blurs>
    </div>
    <Button variant="outline" size="sm" @click="run++">
      <HugeiconsIcon :icon="RepeatIcon" :stroke-width="2" />
      Replay
    </Button>
  </div>
</template>

Installation

npm install @animate-ui/vue motion-v

pnpm add @animate-ui/vue motion-v

yarn add @animate-ui/vue motion-v

bun add @animate-ui/vue motion-v

Usage

<script setup lang="ts">
import { Blur, Blurs } from '@animate-ui/vue/primitives/effects/blur';
import Card from './Card.vue';
</script>

<template>
  <Blur>
    <h1>Animated primitives for Vue</h1>
  </Blur>
  <!-- Staggered: each child starts 100ms after the previous one. -->
  <Blurs :hold-delay="100">
    <Card />
    <Card />
    <Card />
  </Blurs>
</template>

With as-child, the animation is applied to your element instead of a wrapping div.

Animation

The element sharpens from initial-blur to blur on a spring (stiffness 200, damping 20): about 250ms from 10px to sharp.
Under reduced motion, it still comes into focus: a blur doesn't move anything.
in-view waits for the element to scroll into view, once by default.
<AnimateUIProvider :tempo> paces the default spring.

API Reference

Prop	Type	Default
`as-child?`	`boolean`	`false`
`initial-blur?`	`number`	`10`
`blur?`	`number`	`0`
`delay?`	`number`	`0`
`transition?`	`Transition`	`{ type: 'spring', stiffness: 200, damping: 20 }`
`in-view?`	`boolean`	`false`
`in-view-once?`	`boolean`	`true`
`in-view-margin?`	`string`	`'0px'`
`...props?`	`HTMLMotionProps<'div'>`	-

Blurs

Wraps each child in a Blur, delaying each one a little more than the previous.

Prop	Type	Default
`#default`	`slot`	-
`hold-delay?`	`number`	`0`
`...props?`	`BlurProps`	-

Blur

InstallationCopy Anchor Link

UsageCopy Anchor Link

AnimationCopy Anchor Link

API ReferenceCopy Anchor Link

BlurCopy Anchor Link

BlursCopy Anchor Link

Installation

Usage

Animation

API Reference

Blur

Blurs