'use client'; import type { Variants } from 'motion/react'; import { motion, useAnimation } from 'motion/react'; import type { HTMLAttributes } from 'react'; import { forwardRef } from 'react'; import { useIconAnimation } from '@/lib/use-icon-animation'; import { cn } from '@/lib/utils'; export interface VolumeOffIconHandle { startAnimation: () => void; stopAnimation: () => void; } interface VolumeOffIconProps extends HTMLAttributes { size?: number; } const SPEAKER_TOP_CONTINUATION = 'M7.96 7.96C8.44 7.58 9.5 6.5 10 6'; const SPEAKER_MOUTH_CONTINUATION = 'M14 14V9.5'; // Slash off, as in the eye, headphone and notification off icons: the slash // leaves to the bottom right, the speaker heals across its two breaks, then a // fresh slash comes back from the top left and the breaks reopen behind it. const OFF_DURATION = 1.12; const OFF_TIMES = [ 0, 0.05, 0.1, 0.16, 0.24, 0.34, 0.44, 0.56, 0.68, 0.76, 0.82, 0.87, 0.92, 0.97, 1, ]; const departingSlashVariants: Variants = { normal: { transform: 'translate(0px, 0px)', transition: { duration: 0.18, ease: [0.23, 1, 0.32, 1] }, }, animate: { transform: [ 'translate(0px, 0px)', 'translate(0.8px, 0.8px)', 'translate(4px, 4px)', 'translate(24px, 24px)', 'translate(24px, 24px)', 'translate(24px, 24px)', 'translate(24px, 24px)', 'translate(24px, 24px)', 'translate(24px, 24px)', 'translate(24px, 24px)', 'translate(24px, 24px)', 'translate(24px, 24px)', 'translate(24px, 24px)', 'translate(24px, 24px)', 'translate(24px, 24px)', ], transition: { duration: OFF_DURATION, ease: 'linear', times: OFF_TIMES }, }, }; // A zero-length stroke with round caps draws a dot, so each continuation is // only visible while it has length. const LEADING_LENGTH = [0, 0, 0, 0.12, 0.62, 1, 1, 1, 1, 1, 0.62, 0.2, 0, 0, 0]; const TRAILING_LENGTH = [0, 0, 0, 0, 0.25, 0.7, 1, 1, 1, 1, 1, 1, 0.8, 0.3, 0]; const visibleWhileDrawn = (lengths: number[]) => lengths.map((value) => (value > 0 ? 'visible' : 'hidden')); const leadingContinuationVariants: Variants = { normal: { pathLength: 0, visibility: 'hidden', transition: { duration: 0.18, ease: [0.23, 1, 0.32, 1] }, }, animate: { pathLength: LEADING_LENGTH, visibility: visibleWhileDrawn(LEADING_LENGTH), transition: { duration: OFF_DURATION, ease: 'linear', times: OFF_TIMES }, }, }; const trailingContinuationVariants: Variants = { normal: { pathLength: 0, visibility: 'hidden', transition: { duration: 0.18, ease: [0.23, 1, 0.32, 1] }, }, animate: { pathLength: TRAILING_LENGTH, visibility: visibleWhileDrawn(TRAILING_LENGTH), transition: { duration: OFF_DURATION, ease: 'linear', times: OFF_TIMES }, }, }; const arrivingSlashVariants: Variants = { normal: { transform: 'translate(-24px, -24px)', transition: { duration: 0.18, ease: [0.23, 1, 0.32, 1] }, }, animate: { transform: [ 'translate(-24px, -24px)', 'translate(-24px, -24px)', 'translate(-24px, -24px)', 'translate(-24px, -24px)', 'translate(-24px, -24px)', 'translate(-24px, -24px)', 'translate(-24px, -24px)', 'translate(-24px, -24px)', 'translate(-24px, -24px)', 'translate(-24px, -24px)', 'translate(-18px, -18px)', 'translate(-9px, -9px)', 'translate(-3px, -3px)', 'translate(-0.6px, -0.6px)', 'translate(0px, 0px)', ], transition: { duration: OFF_DURATION, ease: 'linear', times: OFF_TIMES }, }, }; const generatedGeometryVariants: Variants = { normal: { visibility: 'hidden', transition: { duration: 0 } }, animate: { visibility: 'visible', transition: { duration: 0 } }, }; const VolumeOffIcon = forwardRef( ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => { const controls = useAnimation(); const { handleMouseEnter, handleMouseLeave } = useIconAnimation({ controls, loops: false, onMouseEnter, onMouseLeave, ref, }); return (

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