Like Burst

Component 34

About

An animated like button with a heart-burst spark effect and optimistic count updates for social feeds.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Like Burst to your project and fits it to your theme.

Code

How Like Burst is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { LikeBurst } from "@/components/ui/like-burst";
import type { LikeBurstHandle } from "@/components/ui/like-burst";
import { useEffect, useRef, useState } from "react";

export default function LikeBurstDemo() {
  const ref = useRef<LikeBurstHandle>(null);
  const [liked, setLiked] = useState(false);

  useEffect(() => {
    if (!liked) return;
    const back = setTimeout(() => ref.current?.toggle(), 1500);
    return () => clearTimeout(back);
  }, [liked]);

  return (
    <div className="flex justify-center">
      <LikeBurst ref={ref} initialCount={128} onToggle={setLiked} />
    </div>
  );
}