"use client"; import { cn } from "@/lib/utils"; import type { Variants } from "motion/react"; import { LazyMotion, domMin, m, useAnimation, useReducedMotion, } from "motion/react"; import { forwardRef, useCallback, useImperativeHandle, useRef, type HTMLAttributes, } from "react"; export interface BlocksIconHandle { startAnimation: () => void; stopAnimation: () => void; } interface BlocksIconProps extends Omit< HTMLAttributes, | "color" | "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd" | "onAnimationIteration" > { size?: number; duration?: number; isAnimated?: boolean; color?: string; } const BlocksIcon = forwardRef( ( { onMouseEnter, onMouseLeave, className, size = 24, duration = 1, isAnimated = true, color, ...props }, ref, ) => { const controls = useAnimation(); const reduced = useReducedMotion(); const isControlled = useRef(false); useImperativeHandle(ref, () => { isControlled.current = true; return { startAnimation: () => reduced ? controls.start("normal") : controls.start("animate"), stopAnimation: () => controls.start("normal"), }; }); const handleEnter = useCallback( (e?: React.MouseEvent) => { if (!isAnimated || reduced) return; if (!isControlled.current) controls.start("animate"); else onMouseEnter?.(e as any); }, [controls, reduced, isAnimated, onMouseEnter], ); const handleLeave = useCallback( (e?: React.MouseEvent) => { if (!isControlled.current) controls.start("normal"); else onMouseLeave?.(e as any); }, [controls, onMouseLeave], ); const svgVariants: Variants = { normal: { rotate: 0, scale: 1 }, animate: { rotate: [0, -2, 2, 0], scale: [1, 1.05, 0.95, 1], transition: { duration: 1 * duration, ease: [0.42, 0, 0.58, 1], repeat: 0, }, }, }; const pathVariants: Variants = { normal: { pathLength: 1, opacity: 1 }, animate: { pathLength: [0, 1], opacity: [0.5, 1], transition: { duration: 0.8 * duration, ease: [0.42, 0, 0.58, 1], repeat: 0, }, }, }; const rectVariants: Variants = { normal: { scale: 1 }, animate: { scale: [1, 1.2, 0.9, 1], transition: { duration: 1 * duration, ease: [0.42, 0, 0.58, 1], repeat: 0, }, }, }; return ( ); }, ); BlocksIcon.displayName = "BlocksIcon"; export { BlocksIcon };

Blocks Icon

Installation