import { forwardRef, useImperativeHandle, useCallback } from "react"; import type { AnimatedIconHandle, AnimatedIconProps } from "./types"; import { motion, useAnimate } from "motion/react"; const RosetteDiscountIcon = forwardRef( ( { size = 24, color = "currentColor", strokeWidth = 2, className = "" }, ref, ) => { const [scope, animate] = useAnimate(); const start = useCallback(async () => { // 1. Rotate and scale the rosette badge animate( ".rosette-badge", { rotate: [0, -8, 8, 0], scale: [1, 1.08, 1], }, { duration: 0.6, ease: "easeInOut", }, ); // 2. Pulse the discount dots animate( ".discount-dot", { scale: [1, 1.5, 1], opacity: [1, 0.6, 1], }, { duration: 0.5, ease: "easeInOut", }, ); // 3. Draw the diagonal discount line await animate( ".discount-line", { pathLength: [0, 1], opacity: [0, 1], }, { duration: 0.4, ease: "easeOut", }, ); // 4. Subtle settle animate( ".rosette-badge", { scale: [1, 0.97, 1], }, { duration: 0.25, ease: "easeOut", }, ); }, [animate]); const stop = useCallback(() => { // Reset only relevant properties for each element // REMOVED pathLength reset for badge to ensure solid stroke animate(".rosette-badge", { rotate: 0, scale: 1 }, { duration: 0.2 }); animate(".discount-dot", { scale: 1, opacity: 1 }, { duration: 0.2 }); animate( ".discount-line", { pathLength: 1, opacity: 1 }, { duration: 0.2 }, ); }, [animate]); useImperativeHandle(ref, () => ({ startAnimation: start, stopAnimation: stop, })); return ( ); }, ); RosetteDiscountIcon.displayName = "RosetteDiscountIcon"; export default RosetteDiscountIcon;

rosette-discount-icon

Installation