"use client"; import { forwardRef, useCallback, useImperativeHandle, useRef } from "react"; import { motion, useAnimate } from "motion/react"; import type { AnimatedIconHandle, AnimatedIconProps } from "./types"; const ArrowDown01Icon = forwardRef( ( { size = 40, className = "", color = "currentColor", strokeWidth = 2 }, ref, ) => { const [scope, animate] = useAnimate(); const isAnimatingRef = useRef(false); const swapDistance = 9; const swapEase: [number, number, number, number] = [0.22, 1, 0.36, 1]; const start = useCallback(async () => { if (isAnimatingRef.current) return; isAnimatingRef.current = true; await animate( ".arrow-core, .zero, .one-path, .one-base", { opacity: 0, pathLength: 0, filter: "blur(0.8px)" }, { duration: 0 }, ); // Reset for clean replay. await animate(".number-layer", { scale: 0.985 }, { duration: 0 }); await animate(".zero, .one", { x: 0, y: 0 }, { duration: 0 }); await animate( ".arrow-core", { opacity: [0.18, 1], pathLength: [0, 1], filter: ["blur(0.8px)", "blur(0px)"], }, { duration: 0.42, ease: swapEase }, ); await animate( ".zero, .one-path, .one-base", { opacity: [0, 1], pathLength: [0, 1], filter: ["blur(0.8px)", "blur(0px)"], }, { duration: 0.34, ease: "easeOut", delay: (i) => i * 0.04, }, ); // Simultaneous cross-over swap with lateral drift + fade blend. await Promise.all([ animate( ".zero", { y: [0, swapDistance * 0.62, swapDistance + 1.2, swapDistance], x: [0, -0.6, -0.3, 0], opacity: [1, 0.88, 0.82, 0.9], }, { duration: 0.44, ease: swapEase, times: [0, 0.45, 0.78, 1] }, ), animate( ".one", { y: [0, -swapDistance * 0.62, -swapDistance - 1.2, -swapDistance], x: [0, 0.6, 0.3, 0], opacity: [1, 0.88, 0.82, 0.9], }, { duration: 0.44, ease: swapEase, times: [0, 0.45, 0.78, 1] }, ), ]); animate( ".number-layer", { scale: [0.985, 1.02, 1], y: [0, -0.2, 0] }, { duration: 0.26, ease: "easeOut" }, ); while (isAnimatingRef.current) { await animate( ".arrow-core", { opacity: [1, 0.72, 1] }, { duration: 0.8, ease: "easeInOut" }, ); if (!isAnimatingRef.current) break; await new Promise((resolve) => setTimeout(resolve, 500)); } }, [animate]); const stop = useCallback(() => { isAnimatingRef.current = false; animate(".zero, .one", { x: 0, y: 0, opacity: 1 }, { duration: 0.24, ease: "easeInOut" }); animate(".number-layer", { scale: 1 }, { duration: 0.2, ease: "easeOut" }); animate( ".arrow-core, .zero, .one-path, .one-base", { opacity: 1, pathLength: 1, filter: "blur(0px)" }, { duration: 0.2, ease: "easeOut" }, ); }, [animate]); useImperativeHandle( ref, () => ({ startAnimation: start, stopAnimation: stop, }), [start, stop], ); return ( ); }, ); ArrowDown01Icon.displayName = "ArrowDown01Icon"; export default ArrowDown01Icon;

Arrow Down 0 1 Icon

Installation