import { forwardRef, useImperativeHandle, useRef } from "react"; import type { AnimatedIconHandle, AnimatedIconProps, IconEasing, } from "./types"; import { motion, useAnimate } from "motion/react"; type CustomStyleProps = { stiffness?: number; damping?: number; durationY?: number; durationX?: number; ease?: IconEasing; }; const AlarmClockPlusIcon = forwardRef< AnimatedIconHandle, AnimatedIconProps & CustomStyleProps >( ( { size = 24, color = "currentColor", strokeWidth = 2, className = "", stiffness = 200, damping = 25, durationY = 0.2, durationX = 0.3, ease = "linear", ...props }, ref, ) => { const [scope, animate] = useAnimate(); const animationControls = useRef>>([]); const start = async () => { animationControls.current.forEach((control) => control.stop()); animationControls.current = []; animationControls.current.push( animate( ".clock", { y: -1.5, x: [-1, 1, -1, 1, -1, 0], }, { y: { duration: durationY, type: "spring", stiffness: stiffness, damping: damping, }, x: { duration: durationX, repeat: Infinity, ease: ease }, }, ), ); animationControls.current.push( animate( ".bells", { y: -2.5, x: [-2, 2, -2, 2, -2, 0], }, { y: { duration: durationY, type: "spring", stiffness: stiffness, damping: damping, }, x: { duration: durationX, repeat: Infinity, ease: ease }, }, ), ); await animate( ".plus", { scale: [1, 1.2, 1] }, { duration: durationY, ease: "easeOut" }, ); }; const stop = () => { animationControls.current.forEach((control) => control.stop()); animationControls.current = []; animate(".clock", { y: 0, x: 0 }, { duration: durationY * 2 }); animate(".bells", { y: 0, x: 0 }, { duration: durationY * 2 }); }; useImperativeHandle(ref, () => { return { startAnimation: start, stopAnimation: stop, }; }); // 🖱 hover logic (only when NOT controlled) const handleHoverStart = () => { start(); }; const handleHoverEnd = () => { stop(); }; return ( ); }, ); AlarmClockPlusIcon.displayName = "AlarmClockPlusIcon"; export default AlarmClockPlusIcon;

alarm-clock-plus-icon

Installation