Leave a star on GitHub! ⭐


Docs
Hover Up Button

Hover Up Button

An animated text component that blurs in the text.

Component hoverupdemo not found in registry.

Installation

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

Copy and paste the following code into your project.

Update the import paths to match your project setup.

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 }