@mova-ui/react 0.1.0 → 0.4.1

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

@@ -0,0 +1,441 @@
+"use client";
+import {
+  useLoopFlg
+} from "../../../../catalog-chunks/chunk-KTP5OAIN.js";
+
+// .generated/catalog/components/css-animations/whimsical/ConceptTrios3.tsx
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function DropletSquish({
+  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 droplet_squish {
+          0%, 100% { transform: scale(1, 1); border-radius: 50%; }
+          35% { transform: scale(1.4, 0.6); border-radius: 40% 40% 50% 50%; }
+          60% { transform: scale(0.7, 1.35); border-radius: 50% 50% 30% 30%; }
+          80% { transform: scale(1.1, 0.9); }
+        }
+        .droplet-anim {
+          animation: droplet_squish 2.4s ease-in-out infinite both;
+        }
+      ` }),
+        /* @__PURE__ */ jsx("div", { className: "relative flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "w-[48px] h-[48px] droplet-anim bg-blue-500 shadow-md" }) }, activeKey)
+      ]
+    }
+  );
+}
+function SegmentedLinkStretch({
+  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 link_gap_stretch {
+          0%, 100% { gap: 4px; }
+          40%, 75% { gap: 18px; }
+        }
+        .segmented-link {
+          animation: link_gap_stretch 2.4s cubic-bezier(0.34, 1.56, 0.64, 1) infinite both;
+        }
+      ` }),
+        /* @__PURE__ */ jsxs("div", { className: "relative flex items-center justify-center segmented-link", children: [
+          /* @__PURE__ */ jsx("div", { className: "w-5 h-8 rounded-full bg-blue-400" }),
+          /* @__PURE__ */ jsx("div", { className: "w-5 h-8 rounded-full bg-blue-500" }),
+          /* @__PURE__ */ jsx("div", { className: "w-5 h-8 rounded-full bg-blue-600" })
+        ] }, activeKey)
+      ]
+    }
+  );
+}
+function RotatingLouvers({
+  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 louver_rotate {
+          0%, 100% { transform: perspective(400px) rotateX(0deg); }
+          40%, 75% { transform: perspective(400px) rotateX(75deg); }
+        }
+        .louver-slat {
+          animation: louver_rotate 3s ease-in-out infinite both;
+        }
+      ` }),
+        /* @__PURE__ */ jsx("div", { className: "relative flex flex-col gap-2", children: [0, 1, 2, 3].map((i) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "w-[90px] h-[10px] rounded-sm bg-blue-500 louver-slat shadow-sm",
+            style: { animationDelay: `${i * 0.08}s` }
+          },
+          i
+        )) }, activeKey)
+      ]
+    }
+  );
+}
+function RadialAperture({
+  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 aperture_rotate_scale {
+          0%, 100% { transform: rotate(0deg) scale(0.4); }
+          40%, 75% { transform: rotate(90deg) scale(1); }
+        }
+        .aperture-core {
+          animation: aperture_rotate_scale 3s cubic-bezier(0.65, 0, 0.35, 1) infinite both;
+        }
+      ` }),
+        /* @__PURE__ */ jsx("div", { className: "relative w-[70px] h-[70px] rounded-full border-2 border-neutral-700 flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "w-[45px] h-[45px] rounded-xl bg-blue-500 aperture-core" }) }, activeKey)
+      ]
+    }
+  );
+}
+function NewtonsCradle({
+  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 cradle_left_ball {
+          0%, 50%, 100% { transform: rotate(0deg); }
+          25% { transform: rotate(35deg); }
+        }
+        @keyframes cradle_right_ball {
+          0%, 50%, 100% { transform: rotate(0deg); }
+          75% { transform: rotate(-35deg); }
+        }
+        .cradle-left  { transform-origin: top center; animation: cradle_left_ball 2.4s ease-in-out infinite both; }
+        .cradle-right { transform-origin: top center; animation: cradle_right_ball 2.4s ease-in-out infinite both; }
+      ` }),
+        /* @__PURE__ */ jsxs("div", { className: "relative flex items-start gap-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "cradle-left flex flex-col items-center", children: [
+            /* @__PURE__ */ jsx("div", { className: "w-[1.5px] h-[36px] bg-neutral-600" }),
+            /* @__PURE__ */ jsx("div", { className: "w-4 h-4 rounded-full bg-blue-400" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
+            /* @__PURE__ */ jsx("div", { className: "w-[1.5px] h-[36px] bg-neutral-600" }),
+            /* @__PURE__ */ jsx("div", { className: "w-4 h-4 rounded-full bg-blue-500" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "cradle-right flex flex-col items-center", children: [
+            /* @__PURE__ */ jsx("div", { className: "w-[1.5px] h-[36px] bg-neutral-600" }),
+            /* @__PURE__ */ jsx("div", { className: "w-4 h-4 rounded-full bg-blue-600" })
+          ] })
+        ] }, activeKey)
+      ]
+    }
+  );
+}
+function GyroscopeRings({
+  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 ring_orbit_3d {
+          0% { transform: perspective(500px) rotateX(0deg) rotateY(0deg); }
+          100% { transform: perspective(500px) rotateX(360deg) rotateY(180deg); }
+        }
+        .gyro-ring {
+          animation: ring_orbit_3d 3s linear infinite;
+        }
+      ` }),
+        /* @__PURE__ */ jsxs("div", { className: "relative w-[70px] h-[70px] flex items-center justify-center", children: [
+          /* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-full border-[3px] border-blue-500 gyro-ring" }),
+          /* @__PURE__ */ jsx("div", { className: "w-4 h-4 rounded-full bg-blue-400 shadow-sm" })
+        ] }, activeKey)
+      ]
+    }
+  );
+}
+function SlinkyCoil({
+  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 slinky_expand {
+          0%, 100% { transform: scaleY(0.4); }
+          45%, 70% { transform: scaleY(1.3); }
+        }
+        .slinky-stack {
+          transform-origin: center bottom;
+          animation: slinky_expand 2.4s cubic-bezier(0.34, 1.56, 0.64, 1) infinite both;
+        }
+      ` }),
+        /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col items-center gap-1.5 slinky-stack", children: [
+          /* @__PURE__ */ jsx("div", { className: "w-12 h-2 rounded-full bg-blue-300" }),
+          /* @__PURE__ */ jsx("div", { className: "w-12 h-2 rounded-full bg-blue-400" }),
+          /* @__PURE__ */ jsx("div", { className: "w-12 h-2 rounded-full bg-blue-500" }),
+          /* @__PURE__ */ jsx("div", { className: "w-12 h-2 rounded-full bg-blue-600" }),
+          /* @__PURE__ */ jsx("div", { className: "w-12 h-2 rounded-full bg-blue-700" })
+        ] }, activeKey)
+      ]
+    }
+  );
+}
+function SquashStretchSphere({
+  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 sphere_squash_bounce {
+          0% { transform: translateY(-50px) scale(0.85, 1.25); }
+          40% { transform: translateY(0) scale(1.4, 0.6); }
+          55% { transform: translateY(-15px) scale(0.9, 1.15); }
+          70% { transform: translateY(0) scale(1.15, 0.85); }
+          85%, 100% { transform: translateY(-50px) scale(1, 1); }
+        }
+        .squash-sphere {
+          transform-origin: center bottom;
+          animation: sphere_squash_bounce 2.2s cubic-bezier(0.25, 1, 0.5, 1) infinite both;
+        }
+      ` }),
+        /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col items-center", children: [
+          /* @__PURE__ */ jsx("div", { className: "w-9 h-9 rounded-full bg-blue-500 squash-sphere shadow-md" }),
+          /* @__PURE__ */ jsx("div", { className: "w-14 h-1 rounded-full bg-neutral-700 mt-2" })
+        ] }, activeKey)
+      ]
+    }
+  );
+}
+function CardDeckCascade({
+  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 card_fan_spread {
+          0%, 100% { transform: rotate(0deg) translateX(0); }
+          40%, 75% { transform: rotate(var(--rot)) translateX(var(--tx)); }
+        }
+        .fan-card {
+          transform-origin: bottom center;
+          animation: card_fan_spread 3s cubic-bezier(0.34, 1.56, 0.64, 1) infinite both;
+        }
+      ` }),
+        /* @__PURE__ */ jsxs("div", { className: "relative w-[110px] h-[75px] flex items-center justify-center", children: [
+          /* @__PURE__ */ jsx("div", { className: "absolute w-[42px] h-[58px] rounded-xl bg-blue-700 border border-neutral-600 fan-card", style: { "--rot": "-22deg", "--tx": "-24px" } }),
+          /* @__PURE__ */ jsx("div", { className: "absolute w-[42px] h-[58px] rounded-xl bg-blue-600 border border-neutral-500 fan-card", style: { "--rot": "0deg", "--tx": "0px" } }),
+          /* @__PURE__ */ jsx("div", { className: "absolute w-[42px] h-[58px] rounded-xl bg-blue-500 border border-neutral-400 fan-card", style: { "--rot": "22deg", "--tx": "24px" } })
+        ] }, activeKey)
+      ]
+    }
+  );
+}
+function GearToothStep({
+  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 gear_cw { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
+        @keyframes gear_ccw { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } }
+        .gear-1 { animation: gear_cw 4s linear infinite; }
+        .gear-2 { animation: gear_ccw 4s linear infinite; }
+      ` }),
+        /* @__PURE__ */ jsxs("div", { className: "relative flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx("div", { className: "w-10 h-10 rounded-full border-4 border-dashed border-blue-400 gear-1 flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "w-3 h-3 rounded-full bg-blue-400" }) }),
+          /* @__PURE__ */ jsx("div", { className: "w-10 h-10 rounded-full border-4 border-dashed border-blue-600 gear-2 flex items-center justify-center -ml-2 mt-4", children: /* @__PURE__ */ jsx("div", { className: "w-3 h-3 rounded-full bg-blue-600" }) })
+        ] }, activeKey)
+      ]
+    }
+  );
+}
+function MagneticOrbitParticle({
+  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 orbit_spin {
+          0% { transform: rotate(0deg); }
+          100% { transform: rotate(360deg); }
+        }
+        .orbit-arm {
+          animation: orbit_spin 2.6s linear infinite;
+        }
+      ` }),
+        /* @__PURE__ */ jsxs("div", { className: "relative w-[70px] h-[70px] flex items-center justify-center", children: [
+          /* @__PURE__ */ jsx("div", { className: "w-7 h-7 rounded-full bg-blue-600 shadow-md z-10" }),
+          /* @__PURE__ */ jsx("div", { className: "absolute inset-0 orbit-arm flex items-start justify-center", children: /* @__PURE__ */ jsx("div", { className: "w-3.5 h-3.5 rounded-full bg-blue-400 shadow-sm" }) })
+        ] }, activeKey)
+      ]
+    }
+  );
+}
+function MagneticGridRepel({
+  trigger = "hover",
+  loop = true,
+  theme = "dark",
+  className = ""
+}) {
+  const loopFlg = useLoopFlg(true, 2600);
+  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 repel_disperse {
+          0%, 100% { transform: translate(0, 0); }
+          40%, 75% { transform: translate(var(--tx), var(--ty)); }
+        }
+        .repel-dot {
+          animation: repel_disperse 2.6s cubic-bezier(0.34, 1.56, 0.64, 1) infinite both;
+        }
+      ` }),
+        /* @__PURE__ */ jsxs("div", { className: "relative w-[60px] h-[60px] grid grid-cols-2 gap-2 place-items-center", children: [
+          /* @__PURE__ */ jsx("div", { className: "w-4 h-4 rounded-full bg-blue-400 repel-dot", style: { "--tx": "-10px", "--ty": "-10px" } }),
+          /* @__PURE__ */ jsx("div", { className: "w-4 h-4 rounded-full bg-blue-500 repel-dot", style: { "--tx": "10px", "--ty": "-10px" } }),
+          /* @__PURE__ */ jsx("div", { className: "w-4 h-4 rounded-full bg-blue-600 repel-dot", style: { "--tx": "-10px", "--ty": "10px" } }),
+          /* @__PURE__ */ jsx("div", { className: "w-4 h-4 rounded-full bg-blue-700 repel-dot", style: { "--tx": "10px", "--ty": "10px" } })
+        ] }, activeKey)
+      ]
+    }
+  );
+}
+export {
+  CardDeckCascade,
+  DropletSquish,
+  GearToothStep,
+  GyroscopeRings,
+  MagneticGridRepel,
+  MagneticOrbitParticle,
+  NewtonsCradle,
+  RadialAperture,
+  RotatingLouvers,
+  SegmentedLinkStretch,
+  SlinkyCoil,
+  SquashStretchSphere
+};

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

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

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

@@ -0,0 +1,155 @@
+"use client";
+import {
+  useLoopFlg
+} from "../../../../catalog-chunks/chunk-KTP5OAIN.js";
+
+// .generated/catalog/components/css-animations/whimsical/Curtain.tsx
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Curtain({
+  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 ${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: `
+        .curtain-wrapper {
+          position: absolute;
+          inset: 0;
+          transform: scale(0.85);
+          display: grid;
+          place-content: center;
+        }
+        .curtain-clothes {
+          position: absolute;
+          inset: 0;
+        }
+        .curtain-line {
+          position: absolute;
+          top: 0;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 4px;
+          height: 90%;
+        }
+        .curtain-line::before {
+          content: "";
+          display: block;
+          position: absolute;
+          inset: 0;
+          background-color: ${theme === "dark" ? "#262626" : "#e5e7eb"};
+          animation: curtain-line-anim 3.2s ease-in-out 0s infinite both;
+        }
+        @keyframes curtain-line-anim {
+          0%, 6.67% { transform: translateY(0); }
+          33.33%, 53.33% { transform: translateY(-160px); }
+          80%, 100% { transform: translateY(0); }
+        }
+        .curtain-cloth {
+          position: absolute;
+          top: 0;
+          width: calc(50% - 2px);
+          height: 100%;
+        }
+        .curtain-cloth::before {
+          content: "";
+          display: block;
+          position: absolute;
+          inset: 0;
+          background-color: ${theme === "dark" ? "#1e3a8a" : "#3b82f6"};
+          animation: curtain-cloth-anim 3.2s ease-in-out 0s infinite both;
+        }
+        .curtain-cloth--left { left: 0; }
+        .curtain-cloth--right { right: 0; transform: scaleX(-1); }
+        @keyframes curtain-cloth-anim {
+          0%, 6.67% { border-radius: 0 0 0 0; }
+          40%, 53.33% { border-radius: 0 0 85% 0; }
+          86.67%, 100% { border-radius: 0 0 0 0; }
+        }
+        .curtain-zipper-wrapper {
+          box-sizing: border-box;
+          position: absolute;
+          bottom: 0;
+          left: 50%;
+          transform: translate(-50%, -80%);
+          width: 22px;
+          height: 28px;
+          background-color: ${theme === "dark" ? "#2563eb" : "#1d4ed8"};
+          border-radius: 6px;
+          border: 3px solid ${theme === "dark" ? "#0f172a" : "#ffffff"};
+          animation: curtain-zipper-up 3.2s ease-in-out 0s infinite both;
+        }
+        @keyframes curtain-zipper-up {
+          0%, 6.67% { bottom: 0; }
+          33.33%, 53.33% { bottom: 160px; }
+          80%, 100% { bottom: 0; }
+        }
+        .curtain-zipper {
+          position: absolute;
+          bottom: 0;
+          left: 50%;
+          transform-origin: center 8px;
+          transform: translate(-50%, 70%);
+          width: 18px;
+          height: 36px;
+          background-color: ${theme === "dark" ? "#60a5fa" : "#3b82f6"};
+          border: 3px solid ${theme === "dark" ? "#0f172a" : "#ffffff"};
+          border-radius: 7px;
+          animation: curtain-zipper-rotate 3.2s ease-in-out 0s infinite both;
+        }
+        .curtain-zipper::before,
+        .curtain-zipper::after {
+          content: "";
+          position: absolute;
+          top: 4px;
+          left: 50%;
+          transform: translateX(-50%);
+          border-radius: 50%;
+        }
+        .curtain-zipper::before {
+          width: 8px;
+          height: 8px;
+          background-color: ${theme === "dark" ? "#0f172a" : "#ffffff"};
+        }
+        .curtain-zipper::after {
+          width: 4px;
+          height: 4px;
+          background-color: ${theme === "dark" ? "#131313" : "#f4f4f6"};
+        }
+        @keyframes curtain-zipper-rotate {
+          0%, 6.67% { transform: translate(-50%, 70%) rotate(0deg); }
+          13.33% { transform: translate(-50%, 70%) rotate(8deg); }
+          20% { transform: translate(-50%, 70%) rotate(-6deg); }
+          26.67% { transform: translate(-50%, 70%) rotate(4deg); }
+          33.33%, 53.33% { transform: translate(-50%, 70%) rotate(0deg); }
+          60% { transform: translate(-50%, 70%) rotate(8deg); }
+          66.67% { transform: translate(-50%, 70%) rotate(-6deg); }
+          73.33% { transform: translate(-50%, 70%) rotate(4deg); }
+          80%, 100% { transform: translate(-50%, 70%) rotate(0deg); }
+        }
+      ` }),
+        /* @__PURE__ */ jsxs("div", { className: "curtain-wrapper w-[160px] h-[190px]", children: [
+          /* @__PURE__ */ jsxs("div", { className: "curtain-clothes", children: [
+            /* @__PURE__ */ jsx("div", { className: "curtain-cloth curtain-cloth--left" }),
+            /* @__PURE__ */ jsx("div", { className: "curtain-cloth curtain-cloth--right" })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "curtain-line" }),
+          /* @__PURE__ */ jsx("div", { className: "curtain-zipper-wrapper", children: /* @__PURE__ */ jsx("div", { className: "curtain-zipper" }) })
+        ] }, activeKey)
+      ]
+    }
+  );
+}
+export {
+  Curtain
+};

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

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

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

@@ -0,0 +1,67 @@
+"use client";
+import {
+  useLoopFlg
+} from "../../../../catalog-chunks/chunk-KTP5OAIN.js";
+
+// .generated/catalog/components/css-animations/whimsical/Kakikaki.tsx
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Kakikaki({
+  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: `
+        @keyframes kakikaki-draw {
+          0% {
+            stroke-dashoffset: 1200;
+          }
+          60% {
+            stroke-dashoffset: 0;
+          }
+          80%, 100% {
+            stroke-dashoffset: -1200;
+          }
+        }
+        .kakikaki-path {
+          stroke-dasharray: 1200;
+          animation: kakikaki-draw 3s ease-in-out infinite both;
+        }
+      ` }),
+        /* @__PURE__ */ jsx("div", { className: "relative w-[150px] h-[100px] flex items-center justify-center", children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            viewBox: "0 0 200 120",
+            className: "w-full h-full",
+            fill: "none",
+            stroke: theme === "dark" ? "#3b82f6" : "#2563eb",
+            strokeWidth: "6",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: /* @__PURE__ */ jsx(
+              "polyline",
+              {
+                className: "kakikaki-path",
+                points: "20,100 40,20 80,100 100,40 140,90 170,30 190,70"
+              }
+            )
+          }
+        ) }, activeKey)
+      ]
+    }
+  );
+}
+export {
+  Kakikaki
+};