BlurReveal

Animates content from a blurred, faded state into sharp focus. Use it for hero sections, feature grids, and scroll-triggered reveals.

Interactive Demo

Click replay to run the animation again. Each card uses a different blur amount and delay.

Usage

import { BlurReveal } from "@mantleui/react/motion";

<BlurReveal blur={25} duration={0.9} delay={0.15}>
  <h2>Sharp focus</h2>
  <p>Content fades from blurred to crisp.</p>
</BlurReveal>

Props