DEV Community

Sharath Prabhal
Sharath Prabhal

Posted on

Building a bubble heart counter in React using Framer Motion

I started off wanting to write an extensive step-by-step tutorial on how to build a bubble heart counter. But, Framer Motion turned out to be so simple that I decided to just post my code below. Hit me up @SharathPrabhal if you have any questions or want me to write a post on other animations patterns.

function HeartComponent() {
  const [floatingHearts, setFloatingHearts] = useState<JSX.Element[]>([]);
  return (
      className="relative rounded-full text-5xl inline-block p-2 cursor-pointer"
      onClick={() => {
            className="absolute top-0 z-50"
              y: -150,
              opacity: 0,
              scale: 1.75,
              x: [0, randomNumber(-150, 150)],
            transition={{ duration: 2 }}
                color: randomColor({
                  luminosity: 'bright',
      <HeartIcon />

Top comments (0)