Liquid Fill Button
liquid-fill-button
- release
- 420ms
- curve
- cubic-bezier(0.34, 1.4, 0.64, 1)
React + Tailwind · shadcn registry
effects for
React and Tailwind.
Twelve of them. One file each. No dependencies. Installable with the shadcn CLI.
Built for landing pages, not dashboards.
Buttons
04 / 04Magnetic Button
magnetic-button
- track
- 120ms
- release
- 420ms
- curve
- cubic-bezier(0.34, 1.4, 0.64, 1)
Border Trace Button
border-trace-button
- release
- 400ms
- curve
- ease
Scramble Button
scramble-button
- arrival
- 700ms
- curve
- linear
Cards
04 / 04Spotlight Card
spotlight-card
- track
- 140ms
- release
- 420ms
- curve
- cubic-bezier(0.34, 1.4, 0.64, 1)
Tilt Card
tilt-card
- track
- 120ms
- release
- 420ms
- curve
- cubic-bezier(0.34, 1.4, 0.64, 1)
Reveal Card
reveal-card
- release
- 420ms
- curve
- cubic-bezier(0.34, 1.4, 0.64, 1)
Chase Border Card
chase-border-card
- release
- 420ms
- curve
- cubic-bezier(0.23, 1, 0.32, 1)
Text & links
04 / 04Stagger Text
stagger-text
- stagger
- 35ms
- release
- 420ms
- curve
- cubic-bezier(0.34, 1.4, 0.64, 1)
Draw Underline
draw-underline
- release
- 380ms
- curve
- cubic-bezier(0.23, 1, 0.32, 1)
Blur Swap Link
blur-swap-link
- lead
- 150ms
- release
- 640ms
- curve
- cubic-bezier(0.23, 1, 0.32, 1)
Slide Marquee Link
slide-marquee-link
- release
- 400ms
- curve
- cubic-bezier(0.23, 1, 0.32, 1)