animations

BlurReveal

Animates children with a blur-to-sharp + fade reveal on mount or viewport entry.

v1.0.0react >=18next >=14tailwind >=4motion >=12

entrancescrollblurfocusrevealsharp

Preview

Loading preview...

Props

Prop	Type	Default	Description
`children*`	`ReactNode`	`—`	Content to animate
`blurAmount`	`number`	`12`	Initial blur amount in pixels
`delay`	`number`	`—`	Custom delay in milliseconds
`triggerOnView`	`boolean`	`true`	Animate when element enters viewport
`viewThreshold`	`number`	`0.2`	Fraction of element visible before triggering
`once`	`boolean`	`true`	Only animate once
`className`	`string`	`—`	Additional Tailwind classes

Slots

Slot	Type	Required	Description
`children`	`ReactNode`	Yes	Content to reveal from blur

Layout

Display: block

Responsive: No

Wraps children in an animated div with blur + opacity transition.

Examples

Basic usage

<BlurReveal>
  <h1 className="text-6xl font-bold">Welcome</h1>
</BlurReveal>

Dramatic blur

<BlurReveal blurAmount={24}>
  <img src="/hero.jpg" alt="Hero" className="w-full rounded-xl" />
</BlurReveal>

Subtle with delay

<BlurReveal blurAmount={6} delay={200}>
  <p className="text-lg text-neutral-400">Gently comes into focus</p>
</BlurReveal>

AI Usage Hint

Use BlurReveal for a dramatic focus-pulling effect. Content starts blurred and sharpens into view. Great for hero images, featured content, or creating depth-of-field effects. Adjust 'blurAmount' (default 12px) for intensity — lower for subtle, higher for dramatic. Pair with background components like GradientMesh for atmospheric reveals.

Works Well With

StaggerGroupFadeUpGradientMesh