Animated Like Button with Burst Effect
A polished React like button with burst particles, ripple circle, spring heart animation, and smooth number transitions using Framer Motion and NumberFlow.
ButtonReactFramer MotionNumberFlow
CSSshadcn
Manual
Create a file and paste the following code into it.
src/index-demo.tsx
1
2
3
4
5
6
7
8
9
import { LikeButton } from "@/components/ui/like-button";
export default function Demo() {
return (
<div className="flex h-dvh w-full items-center justify-center">
<LikeButton initialCount={24} />
</div>
);
}Update the import paths to match your project setup.