We are live on DevHunt: tool of the week contest

check it out

Blur Fade

Fades and un-blurs text or components on scroll.

Preview

Interactive Preview

Welcome to the future.

Seamlessly animate elements as they enter the viewport

Installation

Usage

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

export default function Demo() {
  return (
    <BlurFade delay={0.25} inView>
      <h2 className="text-3xl font-bold tracking-tighter">
        Hello World
      </h2>
    </BlurFade>
  )
}

Props

PropTypeDefault
delaynumber0
durationnumber0.5
inViewbooleanfalse
blurstring8px