airplane-icon

1import { forwardRef, useImperativeHandle, useCallback } from "react";
2import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
3import { motion, useAnimate } from "motion/react";
4 
5type CustomAnimation = {
6  airPlaneDuration: number;
7  windDuration: number;
8  exitDuration: number;
9};
10 
11const AirplaneIcon = forwardRef<
12  AnimatedIconHandle,
13  AnimatedIconProps & CustomAnimation
14>(
15  (
16    {
17      size = 24,
18      color = "currentColor",
19      strokeWidth = 2,
20      className = "",
21      airPlaneDuration = 0.3,
22      windDuration = 0.8,
23      exitDuration = 0.3,
24    },
25    ref,
26  ) => {
27    const [scope, animate] = useAnimate();
28 
29    const start = useCallback(async () => {
30      // Subtle vibration for the plane
31      animate(
32        ".airplane",
33        { x: [0, 0.5, 0], y: [0, -0.5, 0] },
34        { duration: airPlaneDuration },
35      );
36 
37      // Streak 1: Upper Wing (Top-right streak)
38      animate(
39        ".wind1",
40        {
41          x: -12,
42          y: 24,
43          opacity: 1,
44        },
45        { duration: windDuration, ease: "easeOut" },
46      );
47 
48      // Streak 2: Lower Wing (Middle-left streak)
49      animate(
50        ".wind2",
51        {
52          x: 0,
53          y: 26,
54          opacity: 1,
55        },
56        { duration: windDuration, ease: "easeOut", delay: 0.2 },
57      );
58    }, [animate, airPlaneDuration, windDuration]);
59 
60    const stop = useCallback(async () => {
61      animate(".airplane", { x: 0, y: 0 }, { duration: exitDuration });
62      animate(
63        ".wind1",
64        { opacity: 0, x: 12, y: -4 },
65        { duration: exitDuration },
66      );
67      animate(
68        ".wind2",
69        { opacity: 0, x: 26, y: 8 },
70        { duration: exitDuration },
71      );
72    }, [animate, exitDuration]);
73 
74    useImperativeHandle(
75      ref,
76      () => ({
77        startAnimation: start,
78        stopAnimation: stop,
79      }),
80      [start, stop],
81    );
82 
83    return (
84      <motion.svg
85        ref={scope}
86        xmlns="http://www.w3.org/2000/svg"
87        width={size}
88        height={size}
89        viewBox="0 0 24 24"
90        fill="none"
91        stroke={color}
92        strokeWidth={strokeWidth}
93        strokeLinecap="round"
94        strokeLinejoin="round"
95        className={`cursor-pointer ${className}`}
96        onHoverStart={start}
97        onHoverEnd={stop}
98      >
99        <motion.path
100          className="airplane"
101// … truncated