127 Components
Heart Burst Button
ButtonsInstagram and Twitter-style like button featuring an elastic scale-pop spring, expanding shockwave ring, radial multi-colored particle confetti sparks, and double-tap card preview.
Instagram Heart Burst ButtonConfetti & Shockwave
Elastic pop spring, expanding shockwave ring, radial particles, and photo double-tap
P
pulse.ui
Kyoto, Japan
Double tap anywhere to like
Cherry blossoms blooming along the Philosopher's Path at dawn.
1,248 likes
pulse.ui Spring physics make tactile consumer interactions irresistible.
Standalone Interactive Button
Confetti Sparkle Theme:
Button Size:
State: Unliked (1248 total)
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/heart-burst-button.json"
Props
TypeScript props supported by <HeartBurstButton />.
| Prop | Type | Default | Description |
|---|---|---|---|
| initialLiked | boolean | false | Initial liked state of the button. |
| initialCount | number | 1420 | Initial numerical like counter value. |
| size | "sm" | "md" | "lg" | "xl" | "md" | Size scale of the heart button icon and padding. |
| theme | "instagram" | "crimson" | "violet" | "gold" | "instagram" | Color palette used for the heart fill, shockwave, and confetti particles. |
| onToggle | (liked: boolean, count: number) => void | — | Callback triggered whenever the like status changes. |
| className | string | — | Optional custom CSS classes for the container wrapper. |
Key Features
- Elastic scale-pop spring animation on heart icon with subtle rotational tilt.
- Expanding shockwave outline ring that dissipates smoothly on trigger.
- Radial burst of 12 multi-color confetti particles with staggered trajectories and fades.
- Animated live number roll for like count using AnimatePresence.
- Interactive photo canvas supporting double-click/double-tap to burst a large floating heart.
- Configurable color themes (Instagram sunset, Crimson, Violet, Gold) and button sizes.
Keyboard & Accessibility
- Uses semantic HTML button with reactive aria-label ('Like post' / 'Unlike post').
- Clear visual focus ring for keyboard navigation.
- Gracefully handles prefers-reduced-motion without breaking functionality.