import { forwardRef, useImperativeHandle, useCallback } from "react"; import type { AnimatedIconHandle, AnimatedIconProps } from "./types"; import { motion, useAnimate } from "motion/react"; const TrophyIcon = forwardRef( ( { size = 24, color = "currentColor", strokeWidth = 2, className = "" }, ref, ) => { const [scope, animate] = useAnimate(); const start = useCallback(async () => { // Victory Lift and Tilt animate( ".trophy-group", { y: [0, -4, -4, 0], rotate: [0, -10, 10, 0], }, { duration: 0.8, ease: "easeOut", times: [0, 0.4, 0.7, 1], }, ); // Confetti Burst const confettiSequences = [ { selector: ".confetti-1", x: [0, -12], y: [0, -15], rotate: [0, 140] }, { selector: ".confetti-2", x: [0, -5], y: [0, -18], rotate: [0, -100] }, { selector: ".confetti-3", x: [0, 5], y: [0, -18], rotate: [0, 120] }, { selector: ".confetti-4", x: [0, 12], y: [0, -15], rotate: [0, -140] }, ]; confettiSequences.forEach((conf) => { animate( conf.selector, { x: conf.x, y: conf.y, rotate: conf.rotate, opacity: [0, 1, 0], scale: [0, 1, 0.5], }, { duration: 0.8, ease: "easeOut", delay: 0.1, }, ); }); }, [animate]); const stop = useCallback(() => { animate(".trophy-group", { y: 0, rotate: 0 }, { duration: 0.3 }); animate( ".confetti-1, .confetti-2, .confetti-3, .confetti-4", { opacity: 0, scale: 0 }, { duration: 0.2 }, ); }, [animate]); useImperativeHandle(ref, () => ({ startAnimation: start, stopAnimation: stop, })); return ( {/* Handles */} {/* Base */} {/* Cup Body */} {/* Confetti Pieces */} ); }, ); TrophyIcon.displayName = "TrophyIcon"; export default TrophyIcon;

trophy-icon

Installation