import { forwardRef, useImperativeHandle, useCallback, useRef } from "react"; import type { AnimatedIconHandle, AnimatedIconProps } from "./types"; import { motion, useAnimate } from "motion/react"; const FilterIcon = forwardRef( ( { size = 24, color = "currentColor", strokeWidth = 2, className = "" }, ref, ) => { const [scope, animate] = useAnimate(); const isAnimatingRef = useRef(false); const start = useCallback(async () => { if (isAnimatingRef.current) return; isAnimatingRef.current = true; // Filtering Loop while (isAnimatingRef.current) { // 1. Swarm of Input Particles (8-10 entering) const inParticles = Array.from({ length: 8 }).map( (_, i) => `.p-in-${i}`, ); inParticles.forEach((selector, i) => { animate( selector, { y: [-4, 8], opacity: [0, 1, 0], scale: [0.3, 0.8, 0.3] }, { duration: 0.8, delay: i * 0.1, ease: "easeIn" }, ); }); // 2. Wait for "processing" await new Promise((resolve) => setTimeout(resolve, 600)); if (!isAnimatingRef.current) break; // 3. Output Particles (2 emerge from bottom) const outParticles = [".p-out-1", ".p-out-2"]; // Sync Neck Pump with output animate( ".funnel", { scale: [1, 1.1, 1], strokeWidth: [strokeWidth, strokeWidth + 0.8, strokeWidth], }, { duration: 0.4, ease: "backOut" }, ); outParticles.forEach((selector, i) => { animate( selector, { y: [14, 22], opacity: [0, 1, 0], scale: [0.5, 1, 0.5] }, { duration: 0.6, delay: i * 0.2, ease: "easeOut" }, ); }); await new Promise((resolve) => setTimeout(resolve, 1000)); if (!isAnimatingRef.current) break; } }, [animate, strokeWidth]); const stop = useCallback(() => { isAnimatingRef.current = false; animate( ".funnel", { rotate: 0, scale: 1, strokeWidth }, { duration: 0.3 }, ); animate( "[class^='p-in'], [class^='p-out']", { opacity: 0 }, { duration: 0.3 }, ); }, [animate, strokeWidth]); useImperativeHandle(ref, () => ({ startAnimation: start, stopAnimation: stop, })); return ( {/* Input Swarm (8 Particles) */} {/* Output Stream (2 Filtered Particles) */} ); }, ); FilterIcon.displayName = "FilterIcon"; export default FilterIcon;

Filter

At a glance

Related icons

Installation