Blur Fade

Viewport-triggered entrance animation: blurs out then fades in smoothly. Zero dependencies, respects prefers-reduced-motion.

Blur Fade In

Content reveals smoothly from blur

Code

import { BlurFade } from "@/components/ui/blur-fade"

export default function Example() {
  return (
    <BlurFade delay={0}>
      <h1 className="text-4xl font-bold">Blur Fade In</h1>
    </BlurFade>
  )
}

Installation

$npx particleui-cli add blur-fade

Usage

TSX

import { BlurFade } from "@/components/ui/blur-fade"

export default function Example() {
  return (
    <BlurFade delay={0}>
      <h1 className="text-4xl font-bold">Blur Fade In</h1>
    </BlurFade>
  )
}

Props

Prop	Type	Default	Required
children	React.ReactNode	—	yes
delay	number	`0`	no
duration	number	`600`	no
className	string	—	no

Details

Source filecomponents/ui/blur-fade.tsx

Typeui

Categorieslayout, particles

npm dependencies

Registry deps

Claude skill—