Introducing Magic UI Pro - 50+ blocks and templates to build beautiful landing pages in minutes.


Docs
Blur In

Blur In

An animated text component that blurs in the text.

Blur In

Installation

npx shadcn@latest add "https://magicui.design/r/blur-in"

Props

PropTypeDescriptionDefault
classNamestringThe class name to be applied to the component
durationnumberDurations (seconds) for the animation1
wordstringThe word to be animated
variantobjectCustom animation variants for motion componenthidden: { filter: "blur(10px)", opacity: 0 }, visible: { filter: "blur(0px)", opacity: 1 }