Star on GitHub0

BubbleUpButton

BubbleUpButton Component

The BubbleUpButton component provides an interactive button with a fluid "bubble-up" animation effect when hovered. It creates an engaging user experience with minimal effort.

Features

  • Engaging hover animation with bubble-up effect.
  • Customizable animation controls through motion props.
  • Lightweight and reusable.
  • Preserves text legibility during animation using mix-blend-difference.
  • Built with Framer Motion for smooth animations.
Loading component preview...

Source code

Props

PropertyTypeDefaultDescription
children
ReactNode
'Hover me!'
The content to be displayed inside the button.
motionControls
MotionConfigProps
{ transition: { type: 'spring', stiffness: 200, damping: 40 } }
Custom Framer Motion configuration to control the animation behavior.
className
string
undefined
Additional CSS classes for the button element. These will be merged with the component's default classes using the cn utility.
...props
ButtonHTMLAttributes<HTMLButtonElement>
undefined
All standard button HTML attributes are supported.