"use client"; import { forwardRef, useCallback, useImperativeHandle, useRef } from "react"; import { motion, useAnimate } from "motion/react"; import type { AnimatedIconHandle, AnimatedIconProps } from "./types"; const PassportIcon = 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; // Reset so reveal replays cleanly on each hover. await animate( ".passport-shell, .passport-line, .globe, .flap", { opacity: 1, pathLength: 0 }, { duration: 0 }, ); await animate( ".passport-group", { scale: 0.985, rotate: 0, y: 0 }, { duration: 0 }, ); await animate(".flap", { x: -1.2 }, { duration: 0 }); // Cover first. await animate( ".passport-shell, .passport-line", { pathLength: [0, 1], }, { duration: 0.48, ease: [0.22, 1, 0.36, 1] }, ); // Flap glides in with its own fade. await animate( ".flap", { x: [-1.2, 0.4, 0], pathLength: [0, 1], }, { duration: 0.36, ease: "easeOut" }, ); // Globe appears in a staged draw. await animate( ".globe", { pathLength: [0, 1] }, { duration: 0.55, ease: "easeInOut", delay: (i) => i * 0.07, }, ); // Subtle settle. animate( ".passport-group", { scale: [0.985, 1.02, 1], rotate: [0, -0.8, 0.25, 0] }, { duration: 0.32, ease: "easeOut" }, ); // Hover loop: gentle float/tilt (keeps strokes crisp). while (isAnimatingRef.current) { await animate( ".passport-group", { y: [0, -0.45, 0], rotate: [0, -0.6, 0] }, { duration: 1.05, ease: "easeInOut" }, ); if (!isAnimatingRef.current) break; await new Promise((resolve) => setTimeout(resolve, 500)); } }, [animate]); const stop = useCallback(() => { isAnimatingRef.current = false; animate( ".passport-group", { scale: 1, rotate: 0, y: 0 }, { duration: 0.2, ease: "easeOut" }, ); animate( ".passport-shell, .passport-line, .globe, .flap", { opacity: 1, pathLength: 1 }, { duration: 0.22, ease: "easeOut" }, ); animate(".flap", { x: 0 }, { duration: 0.2, ease: "easeOut" }); }, [animate]); useImperativeHandle( ref, () => ({ startAnimation: start, stopAnimation: stop, }), [start, stop], ); return ( ); }, ); PassportIcon.displayName = "PassportIcon"; export default PassportIcon;

Passport Icon

Installation