'use client'; import type { Variants } from 'motion/react'; import { motion, useAnimation } from 'motion/react'; import type { HTMLAttributes } from 'react'; import { forwardRef, useId } from 'react'; import { useIconAnimation } from '@/lib/use-icon-animation'; import { cn } from '@/lib/utils'; export interface MailSend01IconHandle { startAnimation: () => void; stopAnimation: () => void; } interface MailSend01IconProps extends HTMLAttributes { size?: number; } const SEND_ARROW = 'M22 17.5L14 17.5M22 17.5C22 16.7998 20.0057 15.4915 19.5 15M22 17.5C22 18.2002 20.0057 19.5085 19.5 20'; const SEND_DURATION = 0.92; const SEND_TIMES = [ 0, 0.07, 0.14, 0.22, 0.32, 0.43, 0.5, 0.54, 0.62, 0.71, 0.8, 0.88, 0.95, 1, ]; const BODY_TIMES = [0, 0.08, 0.16, 0.26, 0.38, 0.5, 0.62, 0.72, 0.82, 0.9, 0.96, 1]; // The envelope recoils as the arrow launches and settles. const bodyVariants: Variants = { normal: { transform: 'translateY(0px) scaleX(1) scaleY(1)' }, animate: { transform: [ 'translateY(0px) scaleX(1) scaleY(1)', 'translateY(0px) scaleX(1) scaleY(1)', 'translateY(0.12px) scaleX(1.006) scaleY(0.994)', 'translateY(0.28px) scaleX(1.018) scaleY(0.982)', 'translateY(0.5px) scaleX(1.035) scaleY(0.958)', 'translateY(0.2px) scaleX(1.014) scaleY(0.986)', 'translateY(-0.36px) scaleX(0.985) scaleY(1.022)', 'translateY(0.14px) scaleX(1.008) scaleY(0.994)', 'translateY(0px) scaleX(1) scaleY(1)', 'translateY(0px) scaleX(1) scaleY(1)', 'translateY(0px) scaleX(1) scaleY(1)', 'translateY(0px) scaleX(1) scaleY(1)', ], transition: { duration: SEND_DURATION, ease: 'linear', times: BODY_TIMES }, }, }; // The arrow pulls back, tips, and accelerates beyond the right edge. A second // full arrow follows the same route out of the envelope's open side. const departingArrowVariants: Variants = { normal: { transform: 'translateX(0px) rotate(0deg)' }, animate: { transform: [ 'translateX(0px) rotate(0deg)', 'translateX(-0.6px) rotate(2.2deg)', 'translateX(-0.2px) rotate(1.2deg)', 'translateX(1.4px) rotate(-1deg)', 'translateX(4.3px) rotate(-3.2deg)', 'translateX(9.4px) rotate(-5.5deg)', 'translateX(16px) rotate(-5deg)', 'translateX(23px) rotate(-3.5deg)', 'translateX(28px) rotate(-2deg)', 'translateX(28px) rotate(-2deg)', 'translateX(28px) rotate(-2deg)', 'translateX(28px) rotate(-2deg)', 'translateX(28px) rotate(-2deg)', 'translateX(28px) rotate(-2deg)', ], transition: { duration: SEND_DURATION, ease: 'linear', times: SEND_TIMES }, }, }; const arrivingArrowVariants: Variants = { normal: { transform: 'translateX(-28px) rotate(-6deg)' }, animate: { transform: [ 'translateX(-28px) rotate(-6deg)', 'translateX(-28px) rotate(-6deg)', 'translateX(-28px) rotate(-6deg)', 'translateX(-28px) rotate(-6deg)', 'translateX(-28px) rotate(-6deg)', 'translateX(-28px) rotate(-6deg)', 'translateX(-28px) rotate(-6deg)', 'translateX(-23px) rotate(-6deg)', 'translateX(-16px) rotate(-5deg)', 'translateX(-9.8px) rotate(-4deg)', 'translateX(-4.7px) rotate(-2.5deg)', 'translateX(-1.4px) rotate(-0.8deg)', 'translateX(-0.2px) rotate(0.8deg)', 'translateX(0px) rotate(0deg)', ], transition: { duration: SEND_DURATION, ease: 'linear', times: SEND_TIMES }, }, }; const generatedGeometryVariants: Variants = { normal: { visibility: 'hidden', transition: { duration: 0 } }, animate: { visibility: 'visible', transition: { duration: 0 } }, }; // Temporary launch trails grow behind the arrow, move back to the left, and // clear before the replacement arrives. const trailVariants: Variants = { normal: { pathLength: 0, pathOffset: 0, visibility: 'hidden' }, animate: (i: number) => ({ pathLength: [0, 0.25, 1, 0.34, 0, 0], pathOffset: [0, 0, 0, 0.66, 1, 1], visibility: ['hidden', 'visible', 'visible', 'hidden'], transition: { duration: 0.38, delay: 0.06 + i * 0.028, ease: 'linear', times: [0, 0.14, 0.34, 0.58, 0.8, 1], // Hide the trail before it shrinks to a round-cap dot. visibility: { duration: 0.38, delay: 0.06 + i * 0.028, ease: 'linear', times: [0, 0.14, 0.69, 0.7] }, }, }), }; const MailSend01Icon = forwardRef( ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => { const controls = useAnimation(); const arrowWindowId = useId(); const arrivalWindowId = useId(); const { handleMouseEnter, handleMouseLeave } = useIconAnimation({ controls, loops: false, onMouseEnter, onMouseLeave, ref, }); return (

); } ); MailSend01Icon.displayName = 'MailSend01Icon'; export { MailSend01Icon };