@mova-ui/react 0.1.0 → 0.4.1

package/dist/catalog/components/css-animations/whimsical/Tissue.js

@@ -0,0 +1,111 @@
+"use client";
+import {
+  useLoopFlg
+} from "../../../../catalog-chunks/chunk-KTP5OAIN.js";
+
+// .generated/catalog/components/css-animations/whimsical/Tissue.tsx
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Tissue({
+  trigger = "hover",
+  loop = true,
+  theme = "dark",
+  className = ""
+}) {
+  const loopFlg = useLoopFlg(true, 3e3);
+  const [hoverKey, setHoverKey] = useState(0);
+  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 ${theme === "dark" ? "bg-[#131313]" : "bg-[#f4f4f6]"} ${className}`,
+      onMouseEnter: trigger === "hover" ? () => setHoverKey((k) => k + 1) : void 0,
+      onClick: trigger === "click" ? () => setHoverKey((k) => k + 1) : void 0,
+      children: [
+        /* @__PURE__ */ jsx("style", { children: `
+        .tissue-wrapper {
+          transform: scale(0.85);
+          display: grid;
+          place-content: center;
+        }
+        .tissue-box {
+          position: relative;
+          width: 140px;
+          height: 55px;
+        }
+        .tissue-box::before,
+        .tissue-box::after {
+          content: "";
+          position: absolute;
+          z-index: 1;
+        }
+        .tissue-box::before {
+          inset: 0;
+          background-color: ${theme === "dark" ? "#1e293b" : "#ffffff"};
+          border: 1px solid ${theme === "dark" ? "#334155" : "#cbd5e1"};
+          border-radius: 18px 18px 8px 8px;
+        }
+        .tissue-box::after {
+          bottom: 0;
+          left: 0;
+          width: 100%;
+          height: 48%;
+          background-color: ${theme === "dark" ? "#0f172a" : "#f1f5f9"};
+          border-radius: 0 0 8px 8px;
+        }
+        .tissue-paper1,
+        .tissue-paper2 {
+          position: absolute;
+          bottom: 99%;
+          left: 50%;
+          width: 70%;
+          height: 55%;
+          transform: translate(-50%, 0);
+          transform-origin: center bottom;
+          background-color: ${theme === "dark" ? "#60a5fa" : "#3b82f6"};
+          clip-path: polygon(0 0, 100% 0, 98% 100%, 2% 100%);
+        }
+        .tissue-paper1 {
+          animation: tissue-pull 3s ease-in-out infinite both;
+        }
+        .tissue-paper2 {
+          animation: tissue-push 3s ease-in-out infinite both;
+        }
+        @keyframes tissue-pull {
+          0% {
+            transform: translate(-50%, 0) scale(1, 1);
+          }
+          15% {
+            transform: translate(-50%, -20%) scale(0.9, 1.2);
+          }
+          30%, 100% {
+            transform: translate(-50%, -150%) scale(0.8, 1);
+            opacity: 0;
+          }
+        }
+        @keyframes tissue-push {
+          0%, 25% {
+            transform: translate(-50%, 40%) scale(0.6, 0.4);
+            opacity: 0;
+          }
+          45% {
+            transform: translate(-50%, -10%) scale(1.05, 1.15);
+            opacity: 1;
+          }
+          60%, 100% {
+            transform: translate(-50%, 0) scale(1, 1);
+            opacity: 1;
+          }
+        }
+      ` }),
+        /* @__PURE__ */ jsx("div", { className: "tissue-wrapper", children: /* @__PURE__ */ jsxs("div", { className: "tissue-box", children: [
+          /* @__PURE__ */ jsx("div", { className: "tissue-paper1" }),
+          /* @__PURE__ */ jsx("div", { className: "tissue-paper2" })
+        ] }) }, activeKey)
+      ]
+    }
+  );
+}
+export {
+  Tissue
+};

package/dist/catalog/components/css-animations/whimsical/Tsumiki.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export declare function Tsumiki({ trigger, loop, theme, onCovered, className }: {
+    trigger?: "hover" | "click";
+    loop?: boolean;
+    theme?: "dark" | "light";
+    onCovered?: () => void;
+    className?: string;
+}): React.JSX.Element;

package/dist/catalog/components/css-animations/whimsical/Tsumiki.js

@@ -0,0 +1,83 @@
+"use client";
+import {
+  useLoopFlg
+} from "../../../../catalog-chunks/chunk-KTP5OAIN.js";
+
+// .generated/catalog/components/css-animations/whimsical/Tsumiki.tsx
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Tsumiki({
+  trigger = "hover",
+  loop = true,
+  theme = "dark",
+  onCovered,
+  className = ""
+}) {
+  const loopFlg = useLoopFlg(true, 3e3);
+  const [hoverKey, setHoverKey] = useState(0);
+  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;
+  useEffect(() => {
+    if (onCovered) {
+      const timeout = setTimeout(() => {
+        onCovered();
+      }, 1400);
+      return () => clearTimeout(timeout);
+    }
+  }, [activeKey, onCovered]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 ${theme === "dark" ? "bg-[#131313]" : "bg-[#f4f4f6]"} ${className}`,
+      onMouseEnter: trigger === "hover" ? () => setHoverKey((k) => k + 1) : void 0,
+      onClick: trigger === "click" ? () => setHoverKey((k) => k + 1) : void 0,
+      children: [
+        /* @__PURE__ */ jsx("style", { children: `
+        @keyframes tsumiki_bounce_right {
+          0% { transform: translateY(-300%) rotate(30deg); opacity: 0; }
+          20% { opacity: 1; }
+          60% { transform: translateY(0%) rotate(-4deg); opacity: 1; }
+          70% { transform: translateY(-10%) rotate(2deg); opacity: 1; }
+          80% { transform: translateY(0%) rotate(0deg); opacity: 1; }
+          90% { transform: translateY(-5%) rotate(-1deg); opacity: 1; }
+          100% { transform: translateY(0%) rotate(0deg); opacity: 1; }
+        }
+        @keyframes tsumiki_bounce_left {
+          0% { transform: translateY(-300%) rotate(-30deg); opacity: 0; }
+          20% { opacity: 1; }
+          60% { transform: translateY(0%) rotate(4deg); opacity: 1; }
+          70% { transform: translateY(-10%) rotate(-2deg); opacity: 1; }
+          80% { transform: translateY(0%) rotate(0deg); opacity: 1; }
+          90% { transform: translateY(-5%) rotate(1deg); opacity: 1; }
+          100% { transform: translateY(0%) rotate(0deg); opacity: 1; }
+        }
+        @keyframes tsumiki_fall_right {
+          0% { transform: translateY(0%) rotate(0deg); opacity: 1; }
+          80% { opacity: 1; }
+          100% { transform: translateY(400%) rotate(20deg); opacity: 0; }
+        }
+        @keyframes tsumiki_fall_left {
+          0% { transform: translateY(0%) rotate(0deg); opacity: 1; }
+          80% { opacity: 1; }
+          100% { transform: translateY(400%) rotate(-20deg); opacity: 0; }
+        }
+
+        .bar-0 { animation: tsumiki_bounce_right 0.8s ease-in-out 0.6s both, tsumiki_fall_right 0.5s cubic-bezier(0.74, 0.03, 1, 1) 2.0s forwards; }
+        .bar-1 { animation: tsumiki_bounce_left 0.8s ease-in-out 0.45s both, tsumiki_fall_left 0.5s cubic-bezier(0.74, 0.03, 1, 1) 1.85s forwards; }
+        .bar-2 { animation: tsumiki_bounce_right 0.8s ease-in-out 0.3s both, tsumiki_fall_right 0.5s cubic-bezier(0.74, 0.03, 1, 1) 1.7s forwards; }
+        .bar-3 { animation: tsumiki_bounce_left 0.8s ease-in-out 0.15s both, tsumiki_fall_left 0.5s cubic-bezier(0.74, 0.03, 1, 1) 1.55s forwards; }
+        .bar-4 { animation: tsumiki_bounce_right 0.8s ease-in-out 0s both, tsumiki_fall_right 0.5s cubic-bezier(0.74, 0.03, 1, 1) 1.4s forwards; }
+      ` }),
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center tsumiki-scene", children: /* @__PURE__ */ jsxs("div", { className: "absolute left-1/2 -translate-x-1/2 w-[70px] top-1/2 -translate-y-1/2 h-[75%]", children: [
+          /* @__PURE__ */ jsx("div", { className: "absolute top-[0%] left-0 w-full h-[18%] rounded-[14px] opacity-0 bar-0 bg-blue-400" }),
+          /* @__PURE__ */ jsx("div", { className: "absolute top-[20%] left-0 w-full h-[18%] rounded-[14px] opacity-0 bar-1 bg-blue-500" }),
+          /* @__PURE__ */ jsx("div", { className: "absolute top-[40%] left-0 w-full h-[18%] rounded-[14px] opacity-0 bar-2 bg-blue-600" }),
+          /* @__PURE__ */ jsx("div", { className: "absolute top-[60%] left-0 w-full h-[18%] rounded-[14px] opacity-0 bar-3 bg-blue-700" }),
+          /* @__PURE__ */ jsx("div", { className: "absolute top-[80%] left-0 w-full h-[18%] rounded-[14px] opacity-0 bar-4 bg-blue-800" })
+        ] }, activeKey) })
+      ]
+    }
+  );
+}
+export {
+  Tsumiki
+};

package/dist/catalog/components/css-animations/whimsical/WhimsicalVariations.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+export declare function BlindPull({ trigger, loop, theme, className, }: {
+    trigger?: 'hover' | 'click';
+    loop?: boolean;
+    theme?: 'dark' | 'light';
+    className?: string;
+}): React.JSX.Element;
+export declare function BalanceScale({ trigger, loop, theme, className, }: {
+    trigger?: 'hover' | 'click';
+    loop?: boolean;
+    theme?: 'dark' | 'light';
+    className?: string;
+}): React.JSX.Element;
+export declare function GelatinWobble({ trigger, loop, theme, className, }: {
+    trigger?: 'hover' | 'click';
+    loop?: boolean;
+    theme?: 'dark' | 'light';
+    className?: string;
+}): React.JSX.Element;
+export declare function DominoChain({ trigger, loop, theme, className, }: {
+    trigger?: 'hover' | 'click';
+    loop?: boolean;
+    theme?: 'dark' | 'light';
+    className?: string;
+}): React.JSX.Element;
+export declare function MagneticDisks({ trigger, loop, theme, className, }: {
+    trigger?: 'hover' | 'click';
+    loop?: boolean;
+    theme?: 'dark' | 'light';
+    className?: string;
+}): React.JSX.Element;
+export declare function FanFold({ trigger, loop, theme, className, }: {
+    trigger?: 'hover' | 'click';
+    loop?: boolean;
+    theme?: 'dark' | 'light';
+    className?: string;
+}): React.JSX.Element;

package/dist/catalog/components/css-animations/whimsical/WhimsicalVariations.js

@@ -0,0 +1,325 @@
+"use client";
+import {
+  useLoopFlg
+} from "../../../../catalog-chunks/chunk-KTP5OAIN.js";
+
+// .generated/catalog/components/css-animations/whimsical/WhimsicalVariations.tsx
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function BlindPull({
+  trigger = "hover",
+  loop = true,
+  theme = "dark",
+  className = ""
+}) {
+  const loopFlg = useLoopFlg(true, 2800);
+  const [hoverKey, setHoverKey] = useState(0);
+  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,
+      onMouseEnter: trigger === "hover" ? () => setHoverKey((k) => k + 1) : void 0,
+      onClick: trigger === "click" ? () => setHoverKey((k) => k + 1) : void 0,
+      children: [
+        /* @__PURE__ */ jsx("style", { children: `
+        @keyframes blind_slat_expand {
+          0% { transform: translateY(0) scaleY(0.2); opacity: 0.4; }
+          45% { transform: translateY(var(--ty)) scaleY(1); opacity: 1; }
+          55% { transform: translateY(calc(var(--ty) * 0.95)) scaleY(1); opacity: 1; }
+          80% { transform: translateY(var(--ty)) scaleY(1); opacity: 1; }
+          100% { transform: translateY(0) scaleY(0.2); opacity: 0.4; }
+        }
+        @keyframes blind_cord_pull {
+          0%, 100% { height: 20px; }
+          45%, 80% { height: 95px; }
+        }
+        .blind-cord {
+          animation: blind_cord_pull 2.8s cubic-bezier(0.65, 0, 0.35, 1) infinite both;
+        }
+        .blind-slat {
+          animation: blind_slat_expand 2.8s cubic-bezier(0.65, 0, 0.35, 1) infinite both;
+        }
+      ` }),
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "relative w-[110px] h-[100px] flex flex-col items-center", children: [
+          /* @__PURE__ */ jsx("div", { className: `w-[110px] h-[8px] rounded-full z-20 ${theme === "dark" ? "bg-neutral-600" : "bg-neutral-400"}` }),
+          [1, 2, 3, 4, 5].map((i) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `absolute top-0 w-[100px] h-[7px] rounded-full blind-slat z-10 ${theme === "dark" ? "bg-blue-500" : "bg-blue-600"}`,
+              style: {
+                "--ty": `${i * 17}px`,
+                animationDelay: `${i * 0.04}s`
+              }
+            },
+            i
+          )),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `absolute top-[4px] right-[10px] w-[2px] blind-cord ${theme === "dark" ? "bg-neutral-600" : "bg-neutral-300"}`,
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: `absolute -bottom-1.5 -left-1 w-2.5 h-2.5 rounded-full ${theme === "dark" ? "bg-blue-400" : "bg-blue-600"}`
+                }
+              )
+            }
+          )
+        ] }, activeKey) })
+      ]
+    }
+  );
+}
+function BalanceScale({
+  trigger = "hover",
+  loop = true,
+  theme = "dark",
+  className = ""
+}) {
+  const loopFlg = useLoopFlg(true, 3200);
+  const [hoverKey, setHoverKey] = useState(0);
+  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,
+      onMouseEnter: trigger === "hover" ? () => setHoverKey((k) => k + 1) : void 0,
+      onClick: trigger === "click" ? () => setHoverKey((k) => k + 1) : void 0,
+      children: [
+        /* @__PURE__ */ jsx("style", { children: `
+        @keyframes beam_tilt {
+          0%, 100% { transform: rotate(0deg); }
+          25% { transform: rotate(-14deg); }
+          50% { transform: rotate(14deg); }
+          75% { transform: rotate(-6deg); }
+          85% { transform: rotate(3deg); }
+        }
+        @keyframes weight_drop_left {
+          0% { transform: translateY(-40px); opacity: 0; }
+          20% { transform: translateY(0); opacity: 1; }
+          75% { opacity: 1; }
+          90%, 100% { transform: translateY(-40px); opacity: 0; }
+        }
+        @keyframes weight_drop_right {
+          0%, 25% { transform: translateY(-40px); opacity: 0; }
+          45% { transform: translateY(0); opacity: 1; }
+          75% { opacity: 1; }
+          90%, 100% { transform: translateY(-40px); opacity: 0; }
+        }
+        .balance-beam {
+          transform-origin: center center;
+          animation: beam_tilt 3.2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite both;
+        }
+        .weight-left {
+          animation: weight_drop_left 3.2s cubic-bezier(0.34, 1.56, 0.64, 1) infinite both;
+        }
+        .weight-right {
+          animation: weight_drop_right 3.2s cubic-bezier(0.34, 1.56, 0.64, 1) infinite both;
+        }
+      ` }),
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "relative w-[120px] h-[80px] flex flex-col items-center justify-center", children: [
+          /* @__PURE__ */ jsxs("div", { className: "relative w-[110px] h-[8px] flex items-center justify-between balance-beam", children: [
+            /* @__PURE__ */ jsx("div", { className: `w-[22px] h-[22px] rounded-lg -mt-7 weight-left ${theme === "dark" ? "bg-blue-500" : "bg-blue-600"}` }),
+            /* @__PURE__ */ jsx("div", { className: `absolute inset-0 rounded-full ${theme === "dark" ? "bg-neutral-600" : "bg-neutral-400"}` }),
+            /* @__PURE__ */ jsx("div", { className: `w-[22px] h-[22px] rounded-lg -mt-7 weight-right ${theme === "dark" ? "bg-blue-400" : "bg-blue-700"}` })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "w-0 h-0 border-l-[10px] border-l-transparent border-r-[10px] border-r-transparent border-b-[18px] border-b-neutral-500 mt-1" }),
+          /* @__PURE__ */ jsx("div", { className: `w-[50px] h-[4px] rounded-full mt-1 ${theme === "dark" ? "bg-neutral-700" : "bg-neutral-300"}` })
+        ] }, activeKey) })
+      ]
+    }
+  );
+}
+function GelatinWobble({
+  trigger = "hover",
+  loop = true,
+  theme = "dark",
+  className = ""
+}) {
+  const loopFlg = useLoopFlg(true, 2200);
+  const [hoverKey, setHoverKey] = useState(0);
+  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,
+      onMouseEnter: trigger === "hover" ? () => setHoverKey((k) => k + 1) : void 0,
+      onClick: trigger === "click" ? () => setHoverKey((k) => k + 1) : void 0,
+      children: [
+        /* @__PURE__ */ jsx("style", { children: `
+        @keyframes jelly_drop_wobble {
+          0% { transform: translateY(-70px) scale(0.8, 1.25); opacity: 0; }
+          30% { transform: translateY(0) scale(1.4, 0.6); opacity: 1; }
+          45% { transform: translateY(-16px) scale(0.85, 1.2); }
+          60% { transform: translateY(0) scale(1.15, 0.85); }
+          75% { transform: translateY(-4px) scale(0.95, 1.05); }
+          88% { transform: translateY(0) scale(1.02, 0.98); }
+          95%, 100% { transform: translateY(0) scale(1, 1); }
+        }
+        .jelly-box {
+          transform-origin: center bottom;
+          animation: jelly_drop_wobble 2.2s cubic-bezier(0.25, 1, 0.5, 1) infinite both;
+        }
+      ` }),
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col items-center", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `w-[48px] h-[48px] rounded-2xl jelly-box ${theme === "dark" ? "bg-blue-500" : "bg-blue-600"}`
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: `w-[72px] h-[5px] rounded-full mt-2 ${theme === "dark" ? "bg-neutral-700" : "bg-neutral-300"}` })
+        ] }, activeKey) })
+      ]
+    }
+  );
+}
+function DominoChain({
+  trigger = "hover",
+  loop = true,
+  theme = "dark",
+  className = ""
+}) {
+  const loopFlg = useLoopFlg(true, 3e3);
+  const [hoverKey, setHoverKey] = useState(0);
+  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,
+      onMouseEnter: trigger === "hover" ? () => setHoverKey((k) => k + 1) : void 0,
+      onClick: trigger === "click" ? () => setHoverKey((k) => k + 1) : void 0,
+      children: [
+        /* @__PURE__ */ jsx("style", { children: `
+        @keyframes domino_tip {
+          0%, 15% { transform: rotate(0deg); }
+          35%, 80% { transform: rotate(72deg); }
+          95%, 100% { transform: rotate(0deg); }
+        }
+        .domino-tile {
+          transform-origin: bottom right;
+          animation: domino_tip 3s cubic-bezier(0.6, -0.28, 0.735, 0.045) infinite both;
+        }
+      ` }),
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "relative w-[130px] h-[60px] flex items-end justify-between px-2", children: [
+          [0, 1, 2, 3, 4].map((i) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `w-[10px] h-[36px] rounded-[3px] domino-tile ${theme === "dark" ? i % 2 === 0 ? "bg-blue-400" : "bg-neutral-300" : i % 2 === 0 ? "bg-blue-600" : "bg-neutral-700"}`,
+              style: { animationDelay: `${i * 0.12}s` }
+            },
+            i
+          )),
+          /* @__PURE__ */ jsx("div", { className: `absolute bottom-0 left-0 right-0 h-[3px] rounded-full ${theme === "dark" ? "bg-neutral-700" : "bg-neutral-300"}` })
+        ] }, activeKey) })
+      ]
+    }
+  );
+}
+function MagneticDisks({
+  trigger = "hover",
+  loop = true,
+  theme = "dark",
+  className = ""
+}) {
+  const loopFlg = useLoopFlg(true, 2400);
+  const [hoverKey, setHoverKey] = useState(0);
+  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,
+      onMouseEnter: trigger === "hover" ? () => setHoverKey((k) => k + 1) : void 0,
+      onClick: trigger === "click" ? () => setHoverKey((k) => k + 1) : void 0,
+      children: [
+        /* @__PURE__ */ jsx("style", { children: `
+        @keyframes disk_left_snap {
+          0%, 100% { transform: translateX(-35px) scale(1, 1); }
+          35% { transform: translateX(-20px) scale(1.2, 0.85); }
+          50% { transform: translateX(0) scale(0.85, 1.25); }
+          65% { transform: translateX(0) scale(1, 1); }
+          80% { transform: translateX(-35px) scale(0.9, 1.1); }
+        }
+        @keyframes disk_right_snap {
+          0%, 100% { transform: translateX(35px) scale(1, 1); }
+          35% { transform: translateX(20px) scale(1.2, 0.85); }
+          50% { transform: translateX(0) scale(0.85, 1.25); }
+          65% { transform: translateX(0) scale(1, 1); }
+          80% { transform: translateX(35px) scale(0.9, 1.1); }
+        }
+        .disk-left {
+          animation: disk_left_snap 2.4s cubic-bezier(0.34, 1.56, 0.64, 1) infinite both;
+        }
+        .disk-right {
+          animation: disk_right_snap 2.4s cubic-bezier(0.34, 1.56, 0.64, 1) infinite both;
+        }
+      ` }),
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "relative w-[120px] h-[50px] flex items-center justify-center", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `absolute w-[28px] h-[28px] rounded-full disk-left ${theme === "dark" ? "bg-blue-400" : "bg-blue-600"}`
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `absolute w-[28px] h-[28px] rounded-full disk-right ${theme === "dark" ? "bg-blue-600" : "bg-blue-800"}`
+            }
+          )
+        ] }, activeKey) })
+      ]
+    }
+  );
+}
+function FanFold({
+  trigger = "hover",
+  loop = true,
+  theme = "dark",
+  className = ""
+}) {
+  const loopFlg = useLoopFlg(true, 2800);
+  const [hoverKey, setHoverKey] = useState(0);
+  const activeKey = loop ? `${loopFlg}-${hoverKey}` : `${hoverKey}`;
+  const blades = [-40, -20, 0, 20, 40];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `relative w-full h-full rounded-2xl overflow-hidden flex justify-center items-center cursor-pointer transition-all duration-300 bg-transparent ${className}`,
+      onMouseEnter: trigger === "hover" ? () => setHoverKey((k) => k + 1) : void 0,
+      onClick: trigger === "click" ? () => setHoverKey((k) => k + 1) : void 0,
+      children: [
+        /* @__PURE__ */ jsx("style", { children: `
+        @keyframes fan_blade_spread {
+          0%, 100% { transform: rotate(0deg); opacity: 0.6; }
+          40%, 75% { transform: rotate(var(--deg)); opacity: 1; }
+        }
+        .fan-blade {
+          transform-origin: center bottom;
+          animation: fan_blade_spread 2.8s cubic-bezier(0.65, 0, 0.35, 1) infinite both;
+        }
+      ` }),
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "relative w-[100px] h-[70px] flex items-end justify-center", children: [
+          blades.map((deg, idx) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `absolute bottom-0 w-[14px] h-[55px] rounded-t-full fan-blade ${theme === "dark" ? idx % 2 === 0 ? "bg-blue-400" : "bg-blue-600" : idx % 2 === 0 ? "bg-blue-600" : "bg-blue-800"}`,
+              style: { "--deg": `${deg}deg` }
+            },
+            idx
+          )),
+          /* @__PURE__ */ jsx("div", { className: "absolute -bottom-1 w-3 h-3 rounded-full bg-blue-300 z-10" })
+        ] }, activeKey) })
+      ]
+    }
+  );
+}
+export {
+  BalanceScale,
+  BlindPull,
+  DominoChain,
+  FanFold,
+  GelatinWobble,
+  MagneticDisks
+};

package/dist/catalog/components/css-animations/whimsical/YuiPhysicsExperiments.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+export declare function NeonSignDraw({ trigger, loop, theme, className, }: {
+    trigger?: 'hover' | 'click';
+    loop?: boolean;
+    theme?: 'dark' | 'light';
+    className?: string;
+}): React.JSX.Element;
+export declare function SuddenBrake({ trigger, loop, theme, className, }: {
+    trigger?: 'hover' | 'click';
+    loop?: boolean;
+    theme?: 'dark' | 'light';
+    className?: string;
+}): React.JSX.Element;
+export declare function RollingTumble({ trigger, loop, theme, className, }: {
+    trigger?: 'hover' | 'click';
+    loop?: boolean;
+    theme?: 'dark' | 'light';
+    className?: string;
+}): React.JSX.Element;
+export declare function PageTurnCurl({ trigger, loop, theme, className, }: {
+    trigger?: 'hover' | 'click';
+    loop?: boolean;
+    theme?: 'dark' | 'light';
+    className?: string;
+}): React.JSX.Element;
+export declare function ShutterStepBlocks({ trigger, loop, theme, className, }: {
+    trigger?: 'hover' | 'click';
+    loop?: boolean;
+    theme?: 'dark' | 'light';
+    className?: string;
+}): React.JSX.Element;
+export declare function InertiaSkidStop({ trigger, loop, theme, className, }: {
+    trigger?: 'hover' | 'click';
+    loop?: boolean;
+    theme?: 'dark' | 'light';
+    className?: string;
+}): React.JSX.Element;