brand-twitch-icon

1import { forwardRef, useImperativeHandle, useCallback, useRef } from "react";
2import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
3import { motion, useAnimate } from "motion/react";
4 
5const BrandTwitchIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
6  (
7    { size = 24, color = "currentColor", strokeWidth = 2, className = "" },
8    ref,
9  ) => {
10    const [scope, animate] = useAnimate();
11    const isAnimatingRef = useRef(false);
12 
13    const start = useCallback(async () => {
14      if (isAnimatingRef.current) return;
15      isAnimatingRef.current = true;
16 
17      // 1. Color Shift to Twitch Purple
18      animate(
19        scope.current,
20        { color: "#9146FF", stroke: "#9146FF" },
21        { duration: 0.3 },
22      );
23 
24      while (isAnimatingRef.current) {
25        // 2. The Blink (Random intervals)
26        await animate(
27          ".twitch-eyes",
28          { scaleY: [1, 0, 1] },
29          { duration: 0.1, ease: "easeInOut" },
30        );
31 
32        if (!isAnimatingRef.current) break;
33 
34        // 3. The Glitch (Rare sharp shift)
35        if (Math.random() > 0.6) {
36          await animate(
37            ".twitch-path",
38            { x: [0, -1, 1, 0], y: [0, 0.5, -0.5, 0] },
39            { duration: 0.15, ease: "linear" },
40          );
41        }
42 
43        await new Promise((resolve) =>
44          setTimeout(resolve, 800 + Math.random() * 2000),
45        );
46      }
47    }, [animate, scope]);
48 
49    const stop = useCallback(() => {
50      isAnimatingRef.current = false;
51      animate(scope.current, { color, stroke: color }, { duration: 0.3 });
52      animate(".twitch-eyes", { scaleY: 1 }, { duration: 0.3 });
53      animate(".twitch-path", { x: 0, y: 0 }, { duration: 0.3 });
54    }, [animate, color, scope]);
55 
56    useImperativeHandle(ref, () => ({
57      startAnimation: start,
58      stopAnimation: stop,
59    }));
60 
61    return (
62      <motion.svg
63        ref={scope}
64        onHoverStart={start}
65        onHoverEnd={stop}
66        xmlns="http://www.w3.org/2000/svg"
67        width={size}
68        height={size}
69        viewBox="0 0 24 24"
70        fill="none"
71        stroke={color}
72        strokeWidth={strokeWidth}
73        strokeLinecap="round"
74        strokeLinejoin="round"
75        className={`cursor-pointer ${className}`}
76        style={{ overflow: "visible" }}
77      >
78        <motion.path
79          className="twitch-path"
80          d="M21 2H3v16h5v4l4-4h5l4-4V2z"
81          style={{ transformOrigin: "center" }}
82        />
83        <motion.g
84// … truncated