"use client"; import React, { forwardRef, useImperativeHandle, useRef } from "react"; import { motion, useAnimation, Variants } from "motion/react"; import type { AnimatedIconProps, AnimatedIconHandle } from "./types"; const BrandSolanaIcon = 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, })); // Flowing gradient with staggered path movements const path1Variants: Variants = { initial: { x: 0, opacity: 1 }, animate: { x: [0, 3, 0], opacity: [1, 0.8, 1], transition: { duration: 2, ease: "easeInOut", times: [0, 0.5, 1], }, }, }; const path2Variants: Variants = { initial: { x: 0, opacity: 1 }, animate: { x: [0, -3, 0], opacity: [1, 0.8, 1], transition: { duration: 2, ease: "easeInOut", times: [0, 0.5, 1], delay: 0.3, }, }, }; const path3Variants: Variants = { initial: { x: 0, opacity: 1 }, animate: { x: [0, 3, 0], opacity: [1, 0.8, 1], transition: { duration: 2, ease: "easeInOut", times: [0, 0.5, 1], delay: 0.6, }, }, }; const gradientVariants: Variants = { initial: {}, animate: { transition: { duration: 2, }, }, }; return ( ); }, ); BrandSolanaIcon.displayName = "BrandSolanaIcon"; export default BrandSolanaIcon;

Installation

Installation Locked

solana-icon