import { forwardRef, useImperativeHandle, useCallback } from "react"; import type { AnimatedIconHandle, AnimatedIconProps } from "./types"; import { motion, useAnimate } from "motion/react"; const GamepadIcon = forwardRef( ( { size = 24, color = "currentColor", strokeWidth = 2, className = "" }, ref, ) => { const [scope, animate] = useAnimate(); const start = useCallback(() => { // Body scale pulse animate( scope.current, { scale: 1.05 }, { duration: 0.2, ease: "easeOut" }, ); // D-pad shake animate( ".gamepad-dpad", { x: [0, -0.5, 0.5, -0.5, 0], y: [0, 0.5, -0.5, 0.5, 0], }, { duration: 0.4, repeat: Infinity, ease: "linear" }, ); // Buttons alternate pulse animate( ".gamepad-dot-1", { opacity: [1, 0.4, 1], scale: [1, 1.2, 1] }, { duration: 0.6, repeat: Infinity, ease: "easeInOut" }, ); animate( ".gamepad-dot-2", { opacity: [1, 0.4, 1], scale: [1, 1.2, 1] }, { duration: 0.6, repeat: Infinity, ease: "easeInOut", delay: 0.3 }, ); }, [animate, scope]); const stop = useCallback(() => { animate(scope.current, { scale: 1 }, { duration: 0.2 }); animate(".gamepad-dpad", { x: 0, y: 0 }, { duration: 0.2 }); animate(".gamepad-dot-1", { opacity: 1, scale: 1 }, { duration: 0.2 }); animate(".gamepad-dot-2", { opacity: 1, scale: 1 }, { duration: 0.2 }); }, [animate, scope]); useImperativeHandle(ref, () => ({ startAnimation: start, stopAnimation: stop, })); return ( {/* Body */} {/* D-pad Group */} {/* Buttons */} ); }, ); GamepadIcon.displayName = "GamepadIcon"; export default GamepadIcon;

gamepad-icon

Installation