brand-midjourney-icon

1import { forwardRef, useImperativeHandle, useCallback } from "react";
2import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
3import { motion, useAnimate } from "motion/react";
4 
5const BrandMidJourneyIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
6  (
7    { size = 24, color = "currentColor", strokeWidth = 0.75, className = "" },
8    ref,
9  ) => {
10    const [scope, animate] = useAnimate();
11 
12    const start = useCallback(() => {
13      // Boat rocking on the waves
14      animate(
15        ".midjourney-sails",
16        {
17          rotate: [0, 2, -2, 0],
18          y: [0, -0.5, 0.5, 0],
19        },
20        { duration: 2, repeat: Infinity, ease: "easeInOut" },
21      );
22 
23      // Waves undulating
24      animate(
25        ".midjourney-waves",
26        {
27          y: [0, 0.5, -0.5, 0],
28          scaleY: [1, 0.98, 1.02, 1],
29        },
30        { duration: 1.5, repeat: Infinity, ease: "easeInOut" },
31      );
32    }, [animate]);
33 
34    const stop = useCallback(() => {
35      animate(".midjourney-sails", { rotate: 0, y: 0 }, { duration: 0.3 });
36      animate(".midjourney-waves", { y: 0, scaleY: 1 }, { duration: 0.3 });
37    }, [animate]);
38 
39    useImperativeHandle(ref, () => ({
40      startAnimation: start,
41      stopAnimation: stop,
42    }));
43 
44    return (
45      <motion.svg
46        ref={scope}
47        width={size}
48        height={size}
49        viewBox="0 0 24 24"
50        fill="none"
51        className={className}
52        xmlns="http://www.w3.org/2000/svg"
53        onHoverStart={start}
54        onHoverEnd={stop}
55      >
56        <title>Midjourney</title>
57 
58        {/* Boat with sails */}
59        <motion.g
60          className="midjourney-sails"
61          style={{ transformBox: "fill-box", transformOrigin: "center bottom" }}
62        >
63          <path
64            fill={color}
65            stroke={color}
66            strokeWidth={strokeWidth}
67            strokeLinejoin="round"
68// … truncated