"use client"; import { useRef, useState } from "react"; import NumberFlow from "@number-flow/react"; import { motion } from "framer-motion"; const CircleAnimation = () => { const CIRCLE_RADIUS = 20; return ( ); }; // Burst animation with particles const BurstAnimation = () => { // Colors for particles with from/to transitions const colorPairs = [ { from: "#9EC9F5", to: "#9ED8C6" }, { from: "#91D3F7", to: "#9AE4CF" }, { from: "#DC93CF", to: "#E3D36B" }, { from: "#CF8EEF", to: "#CBEB98" }, { from: "#87E9C6", to: "#1FCC93" }, { from: "#A7ECD0", to: "#9AE4CF" }, { from: "#87E9C6", to: "#A635D9" }, { from: "#D58EB3", to: "#E0B6F5" }, { from: "#F48BA2", to: "#CF8EEF" }, { from: "#91D3F7", to: "#A635D9" }, { from: "#CF8EEF", to: "#CBEB98" }, { from: "#87E9C6", to: "#A635D9" }, { from: "#9EC9F5", to: "#9ED8C6" }, { from: "#91D3F7", to: "#9AE4CF" }, ]; return (

{colorPairs.map((colors, index) => ( ))}

); }; const BURST_RADIUS = 32; const START_RADIUS = 4; const PATH_SCALE_FACTOR = 0.8; // Particle component for burst animation const Particle = ({ fromColor, toColor, index, totalParticles, }: { fromColor: string; toColor: string; index: number; totalParticles: number; }) => { // Calculate angle based on index with 45 degree offset const angle = (index / totalParticles) * 360 + 45; const radians = (angle * Math.PI) / 180; // Add randomness to the burst distance (±15%) const randomFactor = 0.85 + Math.random() * 0.3; const burstDistance = BURST_RADIUS * randomFactor; // Randomize duration between 500-700ms const duration = 500 + Math.random() * 200; // Calculate the degree shift (13 degrees in radians) const degreeShift = (13 * Math.PI) / 180; return ( ); }; export const LikeButton = () => { const [likeCount, setLikeCount] = useState(0); const [isLiked, setIsLiked] = useState(false); const [isAnimating, setIsAnimating] = useState(false); const iconButtonRef = useRef(null); const toggleLike = () => { if (isLiked) { setLikeCount(likeCount - 1); setIsLiked(false); } else { setLikeCount(likeCount + 1); setIsLiked(true); setIsAnimating(true); } }; return ( ); };

Like Button

Category

Author

Packages

As seen on