brand-windows-icon

1import { forwardRef, useImperativeHandle } from "react";
2import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
3import { motion, useAnimate } from "motion/react";
4 
5const BrandWindowsIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
6  (
7    { size = 24, color = "currentColor", strokeWidth = 1, className = "" },
8    ref,
9  ) => {
10    const [scope, animate] = useAnimate();
11 
12    const start = async () => {
13      // Stage 1: All windows explode outward (Windows key press!)
14      await animate(
15        "path:nth-of-type(2)", // Top-right
16        {
17          x: [0, 8, 6],
18          y: [0, -8, -6],
19          rotate: [0, 15, 10],
20          scale: [1, 1.1, 1.05],
21        },
22        { duration: 0.4, ease: [0.34, 1.56, 0.64, 1] },
23      );
24 
25      animate(
26        "path:nth-of-type(3)", // Bottom-left
27        {
28          x: [0, -8, -6],
29          y: [0, 8, 6],
30          rotate: [0, -15, -10],
31          scale: [1, 1.1, 1.05],
32        },
33        { duration: 0.4, ease: [0.34, 1.56, 0.64, 1] },
34      );
35 
36      animate(
37        "path:nth-of-type(4)", // Top-left
38        {
39          x: [0, -8, -6],
40          y: [0, -8, -6],
41          rotate: [0, -15, -10],
42          scale: [1, 1.1, 1.05],
43        },
44        { duration: 0.4, ease: [0.34, 1.56, 0.64, 1] },
45      );
46 
47      await animate(
48        "path:nth-of-type(5)", // Bottom-right
49        {
50          x: [0, 8, 6],
51          y: [0, 8, 6],
52          rotate: [0, 15, 10],
53          scale: [1, 1.1, 1.05],
54        },
55        { duration: 0.4, ease: [0.34, 1.56, 0.64, 1] },
56      );
57 
58      // Stage 2: 3D flip the entire icon
59      await animate(
60        scope.current,
61        {
62          rotateY: [0, 180, 360],
63          scale: [1, 1.15, 1],
64        },
65        { duration: 0.6, ease: "easeInOut" },
66      );
67 
68      // Stage 3: Windows snap back together with bounce
69      animate(
70        "path:nth-of-type(2)",
71        { x: 0, y: 0, rotate: 0, scale: 1 },
72        { duration: 0.5, ease: [0.34, 1.56, 0.64, 1] },
73      );
74 
75      animate(
76        "path:nth-of-type(3)",
77        { x: 0, y: 0, rotate: 0, scale: 1 },
78        { duration: 0.5, ease: [0.34, 1.56, 0.64, 1] },
79      );
80 
81      animate(
82        "path:nth-of-type(4)",
83        { x: 0, y: 0, rotate: 0, scale: 1 },
84        { duration: 0.5, ease: [0.34, 1.56, 0.64, 1] },
85      );
86 
87      await animate(
88        "path:nth-of-type(5)",
89        { x: 0, y: 0, rotate: 0, scale: 1 },
90        { duration: 0.5, ease: [0.34, 1.56, 0.64, 1] },
91      );
92 
93// … truncated