import { forwardRef, useImperativeHandle, useCallback } from "react"; import type { AnimatedIconHandle, AnimatedIconProps } from "./types"; import { motion, useAnimate } from "motion/react"; const UsersGroupIcon = forwardRef( ( { size = 24, color = "currentColor", strokeWidth = 2, className = "" }, ref, ) => { const [scope, animate] = useAnimate(); const start = useCallback(async () => { // Center user bounces animate( ".user-center", { y: -2, scale: 1.05, }, { duration: 0.25, ease: "easeOut", }, ); // Left user moves slightly left animate( ".user-left", { x: -1, scale: 1.02, }, { duration: 0.3, ease: "easeOut", delay: 0.05, }, ); // Right user moves slightly right animate( ".user-right", { x: 1, scale: 1.02, }, { duration: 0.3, ease: "easeOut", delay: 0.05, }, ); }, [animate]); const stop = useCallback(async () => { animate( ".user-center", { x: 0, y: 0, scale: 1, }, { duration: 0.25, ease: "easeInOut", }, ); animate( ".user-left", { x: 0, y: 0, scale: 1, }, { duration: 0.25, ease: "easeInOut", }, ); animate( ".user-right", { x: 0, y: 0, scale: 1, }, { duration: 0.25, ease: "easeInOut", }, ); }, [animate]); useImperativeHandle(ref, () => ({ startAnimation: start, stopAnimation: stop, })); return ( {/* Center user */} {/* Right user */} {/* Left user */} ); }, ); UsersGroupIcon.displayName = "UsersGroupIcon"; export default UsersGroupIcon;

users-group-icon

Installation