"use client"; import React, { forwardRef, useImperativeHandle, useRef } from "react"; import { motion, useAnimation, Variants } from "motion/react"; import type { AnimatedIconProps, AnimatedIconHandle } from "./types"; const CoinBitcoinFilledIcon = forwardRef( ({ size = 24, className = "", animate: shouldAnimate = true }, ref) => { const controls = useAnimation(); const animationRef = useRef(null); const startAnimation = async () => { if (animationRef.current) { clearTimeout(animationRef.current); } await controls.start("animate"); }; const stopAnimation = () => { if (animationRef.current) { clearTimeout(animationRef.current); animationRef.current = null; } controls.stop(); controls.set("initial"); }; useImperativeHandle(ref, () => ({ startAnimation, stopAnimation, })); // Rotation effect (coin spinning) const containerVariants: Variants = { initial: { rotateY: 0, scale: 1, transition: { duration: 0.4, ease: "easeInOut", }, }, animate: { rotateY: 360, scale: [1, 1.1, 1], transition: { duration: 0.4, ease: "easeInOut", }, }, }; const glowVariants: Variants = { initial: { opacity: 0.12, scale: 1 }, animate: { opacity: [0.12, 0.45, 0.12], scale: [1, 1.15, 1], transition: { duration: 0.4, ease: "easeInOut", }, }, }; const pathVariants: Variants = { initial: { opacity: 1 }, animate: { opacity: [1, 0.85, 1], transition: { duration: 0.4, ease: "easeInOut", }, }, }; return (

{ if (shouldAnimate) controls.start("animate"); }} onMouseLeave={() => { if (shouldAnimate) controls.start("initial"); }} > {/* Glow effect */}

); }, ); CoinBitcoinFilledIcon.displayName = "CoinBitcoinFilledIcon"; export default CoinBitcoinFilledIcon;

Installation

Installation Locked

coin-bitcoin-filled-icon