apple-brand-logo

1"use client";
2 
3import { forwardRef, useImperativeHandle } from "react";
4import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
5import { motion, useAnimate } from "motion/react";
6 
7const AppleBrandLogo = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
8  (
9    { size = 24, color = "currentColor", strokeWidth = 2, className = "" },
10    ref,
11  ) => {
12    const [scope, animate] = useAnimate();
13 
14    const start = async () => {
15      animate(
16        ".apple-leaf",
17        {
18          rotate: [0, -15, 10, -5, 0],
19          scale: [1, 1.1, 1],
20        },
21        {
22          duration: 0.6,
23          ease: "easeInOut",
24        },
25      );
26 
27      await animate(
28        ".apple-body",
29        {
30          scale: [1, 1.05, 1],
31        },
32        {
33          duration: 0.4,
34          ease: "easeOut",
35        },
36      );
37    };
38 
39    const stop = async () => {
40      animate(
41        ".apple-leaf",
42        {
43          rotate: 0,
44          scale: 1,
45        },
46        {
47          duration: 0.3,
48          ease: "easeInOut",
49        },
50      );
51 
52      animate(
53        ".apple-body",
54        {
55          scale: 1,
56        },
57        {
58          duration: 0.2,
59          ease: "easeOut",
60        },
61      );
62    };
63 
64    useImperativeHandle(ref, () => {
65      return {
66        startAnimation: start,
67        stopAnimation: stop,
68      };
69    });
70 
71    const handleHoverStart = () => {
72      start();
73    };
74 
75    const handleHoverEnd = () => {
76      stop();
77    };
78 
79    return (
80      <motion.svg
81        ref={scope}
82        xmlns="http://www.w3.org/2000/svg"
83        width={size}
84        height={size}
85        viewBox="0 0 24 24"
86        fill="none"
87        stroke={color}
88        strokeWidth={strokeWidth}
89        strokeLinecap="round"
90        strokeLinejoin="round"
91        className={`cursor-pointer ${className}`}
92        onHoverStart={handleHoverStart}
93        onHoverEnd={handleHoverEnd}
94      >
95        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
96 
97        <motion.path
98          d="M8.286 7.008c-3.216 0 -4.286 3.23 -4.286 5.92c0 3.229 2.143 8.072 4.286 8.072c1.165 -.05 1.799 -.538 3.214 -.538c1.406 0 1.607 .538 3.214 .538s4.286 -3.229 4.286 -5.381c-.03 -.011 -2.649 -.434 -2.679 -3.23c-.02 -2.335 2.589 -3.179 2.679 -3.228c-1.096 -1.606 -3.162 -2.113 -3.75 -2.153c-1.535 -.12 -3.032 1.077 -3.75 1.077c-.729 0 -2.036 -1.077 -3.214 -1.077z"
99          className="apple-body"
100          style={{ transformOrigin: "50% 50%" }}
101        />
102 
103        <motion.path
104// … truncated