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.

Installation

npx shadcn@latest add @sona-ui/bubble-up-button

Usage


export default function BubbleUpButtonExample() {
  return <BubbleUpButton>Hover me!</BubbleUpButton>;
}

Props

Property	Type	Default	Description
`children`	`ReactNode`	`—`	Content to display inside the button
`motionControls`	`MotionConfigProps`	`—`	Motion configuration for animations
`className`	`string`	`—`	Additional CSS classes