PaceUI

Intro
Agents
Crafts
Charts
Motion
PreviousNext

Heart Burst

An engaging like button that fires a kinetic particle explosion of multi-scale floating hearts and expanding energy shockwaves.

When to use

  • Social media like buttons, bookmarking actions, and favorite triggers.
  • Gamifying user engagement and micro-rewards with celebratory feedback.
  • Multi-tap particle pooling that naturally scales down additional burst counts.

When not to use

  • Standard form checkmark checkboxes or simple toggles.
  • Enterprise data tables where subtle interactions are preferred.

API Reference

HeartBurstProps

PropTypeDefaultDescription
likedboolean—Controlled liked toggle state.
defaultLikedbooleanfalseInitial default liked state.
onLikedChange(liked: boolean) => void—Callback fired whenever the liked state changes.
burstCountnumber14Number of mini heart particles emitted on the initial tap.
classNamestring—Additional CSS class names.

Motion

  • Shockwave ring expands from scale 0.5 to 1.9 with custom ease [0.16, 1, 0.3, 1].
  • Randomized trigonometric trajectories scattering mini hearts between 52px and 118px radius.
  • Central heart button bounces with a three-point pop sequence (scale: [0.6, 1.15, 1]).