Components
Loading preview...
Blur fade in and out animation. Used to smoothly fade in and out content.
npx shadcn@latest add https://21st.dev/r/dillionverma/blur-fadeimport { BlurFade } from "@/components/ui/blur-fade"
export function BlurFadeTextDemo() {
return (
<section id="header">
<BlurFade delay={0.25} inView>
<h2 className="text-3xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none">
Hello World 👋
</h2>
</BlurFade>
<BlurFade delay={0.25 * 2} inView>
<span className="text-xl text-pretty tracking-tighter sm:text-3xl xl:text-4xl/none">
Nice to meet you
</span>
</BlurFade>
</section>
)
}