@mova-ui/react 0.1.0 → 0.4.1

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

@@ -0,0 +1,183 @@
+"use client";
+import {
+  useLoopFlg
+} from "../../../../catalog-chunks/chunk-KTP5OAIN.js";
+
+// .generated/catalog/components/css-animations/whimsical/Bookmark.tsx
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Bookmark({
+  trigger = "hover",
+  loop = true,
+  theme = "dark",
+  className = ""
+}) {
+  const loopFlg = useLoopFlg(true, 3600);
+  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: `
+        .bookmark-box {
+          --bg: ${theme === "dark" ? "#1c1c1c" : "#ffffff"};
+          box-sizing: border-box;
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          width: 90px;
+          aspect-ratio: 1;
+          background-color: var(--bg);
+          border-radius: 20px;
+          border: 1px solid ${theme === "dark" ? "#2e2e2e" : "#e5e7eb"};
+          overflow: hidden;
+        }
+        .bookmark-scene {
+          position: absolute;
+          inset: 0;
+        }
+        @keyframes bookmark-scale {
+          from { transform: scale(0); }
+          to { transform: scale(1.3); }
+        }
+        .bookmark-scene__bg {
+          position: absolute;
+          inset: 0;
+          background-color: ${theme === "dark" ? "#262626" : "#eff6ff"};
+          border-radius: 50%;
+          animation: bookmark-scale 0.8s cubic-bezier(0.7, 0.01, 0.23, 1) 0.4s both;
+        }
+        .bookmark-scene__bg--alt {
+          background-color: ${theme === "dark" ? "#1f1f1f" : "#f8f9fa"};
+          animation-delay: 2.6s;
+        }
+        .bookmark-marks {
+          --s: 66px;
+          position: absolute;
+          top: 0;
+          left: 50%;
+          transform: translate(-50%, 0%);
+          width: var(--s);
+          height: var(--s);
+        }
+        .bookmark-marks__inner,
+        .bookmark-marks__main {
+          position: absolute;
+          inset: 0;
+        }
+        .bookmark-marks__main {
+          animation: bookmark-up 0.55s cubic-bezier(0.75, 0.01, 0.24, 0.98) 2.6s both;
+        }
+        .bookmark-mark {
+          --c: #3b82f6;
+          position: absolute;
+          top: 0;
+          left: 17.5%;
+          width: 65%;
+          height: 100%;
+          background-color: var(--c);
+          clip-path: polygon(0 -100%, 100% -100%, 100% 100%, 50% 80%, 0 100%);
+        }
+        .bookmark-mark::after {
+          content: "";
+          position: absolute;
+          inset: 0;
+          background-color: var(--c);
+          transform: translateY(-99%);
+        }
+        @keyframes bookmark-up {
+          from { transform: translateY(0); }
+          50% { transform: translateY(22%); }
+          to { transform: translateY(-101%); }
+        }
+        @keyframes bookmark-reset {
+          from { transform: translateY(-101%); }
+          to { transform: translateY(0%); }
+        }
+        @keyframes bookmark-color {
+          from { background-color: #2563eb; }
+          to { background-color: #3b82f6; }
+        }
+        @keyframes bookmark-down {
+          from {
+            transform: perspective(700px) translateY(-40%) rotateX(80deg) rotateY(var(--z)) scale(1.5, 1.15);
+          }
+          to {
+            transform: perspective(700px) translateY(0) rotateX(0deg) rotateY(0) scale(1);
+          }
+        }
+        .bookmark-mark--1 {
+          --c: #1d4ed8;
+          animation:
+            bookmark-up 0.55s cubic-bezier(0.75, 0.01, 0.24, 0.98) 0s both,
+            bookmark-reset 0.01s ease-out 1s forwards,
+            bookmark-color 1s linear 2.6s forwards;
+        }
+        .bookmark-mark--2 {
+          --c: #60a5fa;
+          --z: 20deg;
+          top: 0%;
+          transform-origin: top center;
+          animation: bookmark-down 0.7s cubic-bezier(0.7, 0.01, 0.23, 1) 0.35s both;
+        }
+        .bookmark-mark--3 {
+          --c: #3b82f6;
+          --z: 12deg;
+          top: 0%;
+          transform-origin: top center;
+          animation: bookmark-down 0.7s cubic-bezier(0.7, 0.01, 0.23, 1) 0.5s both;
+        }
+        .bookmark-mark--4 {
+          --c: #2563eb;
+          --z: 0deg;
+          transform-origin: top center;
+          animation: bookmark-down 0.7s cubic-bezier(0.7, 0.01, 0.23, 1) 0.65s both;
+        }
+        @keyframes bookmark-kira {
+          from, to { transform: scale(0); }
+          50% { transform: scale(1); }
+        }
+        .bookmark-kira {
+          --s: 26px;
+          position: absolute;
+          width: var(--s);
+          height: var(--s);
+          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M16 0C17.2 11.5 20.5 14.8 32 16C20.5 17.2 17.2 20.5 16 32C14.8 20.5 11.5 17.2 0 16C11.5 14.8 14.8 11.5 16 0Z' fill='%2360a5fa'/%3E%3C/svg%3E");
+          background-position: center;
+          background-size: contain;
+          background-repeat: no-repeat;
+          animation: bookmark-kira 0.6s ease-in-out var(--delay, 0s) both;
+        }
+        .bookmark-kira--1 { --delay: 0.8s; top: 17%; left: 2%; }
+        .bookmark-kira--2 { --delay: 1s; top: 48%; right: 2%; }
+        .bookmark-kira--3 { --delay: 1.2s; top: 62%; left: 10%; }
+        .bookmark-kira--4 { --delay: 1.4s; top: 6%; right: 6%; }
+      ` }),
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bookmark-scene-wrapper", children: /* @__PURE__ */ jsx("div", { className: "bookmark-box", children: /* @__PURE__ */ jsxs("div", { className: "bookmark-scene", children: [
+          /* @__PURE__ */ jsx("div", { className: "bookmark-scene__bg" }),
+          /* @__PURE__ */ jsx("div", { className: "bookmark-scene__bg bookmark-scene__bg--alt" }),
+          /* @__PURE__ */ jsx("div", { className: "bookmark-marks", children: /* @__PURE__ */ jsxs("div", { className: "bookmark-marks__inner", children: [
+            /* @__PURE__ */ jsx("div", { className: "bookmark-mark bookmark-mark--1" }),
+            /* @__PURE__ */ jsxs("div", { className: "bookmark-marks__main", children: [
+              /* @__PURE__ */ jsx("div", { className: "bookmark-mark bookmark-mark--2" }),
+              /* @__PURE__ */ jsx("div", { className: "bookmark-mark bookmark-mark--3" }),
+              /* @__PURE__ */ jsx("div", { className: "bookmark-mark bookmark-mark--4" })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsx("div", { className: "bookmark-kira bookmark-kira--1" }),
+          /* @__PURE__ */ jsx("div", { className: "bookmark-kira bookmark-kira--2" }),
+          /* @__PURE__ */ jsx("div", { className: "bookmark-kira bookmark-kira--3" }),
+          /* @__PURE__ */ jsx("div", { className: "bookmark-kira bookmark-kira--4" })
+        ] }) }, activeKey) })
+      ]
+    }
+  );
+}
+export {
+  Bookmark
+};

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

@@ -0,0 +1,37 @@
+import React from 'react';
+export declare function BookmarkCornerPeel({ trigger, loop, theme, className, }: {
+    trigger?: 'hover' | 'click';
+    loop?: boolean;
+    theme?: 'dark' | 'light';
+    className?: string;
+}): React.JSX.Element;
+export declare function BookmarkStampDrop({ trigger, loop, theme, className, }: {
+    trigger?: 'hover' | 'click';
+    loop?: boolean;
+    theme?: 'dark' | 'light';
+    className?: string;
+}): React.JSX.Element;
+export declare function ShutterSlide({ trigger, loop, theme, className, }: {
+    trigger?: 'hover' | 'click';
+    loop?: boolean;
+    theme?: 'dark' | 'light';
+    className?: string;
+}): React.JSX.Element;
+export declare function DiagonalDrape({ trigger, loop, theme, className, }: {
+    trigger?: 'hover' | 'click';
+    loop?: boolean;
+    theme?: 'dark' | 'light';
+    className?: string;
+}): React.JSX.Element;
+export declare function StickyNotePeel({ trigger, loop, theme, className, }: {
+    trigger?: 'hover' | 'click';
+    loop?: boolean;
+    theme?: 'dark' | 'light';
+    className?: string;
+}): React.JSX.Element;
+export declare function ReceiptTapePrint({ trigger, loop, theme, className, }: {
+    trigger?: 'hover' | 'click';
+    loop?: boolean;
+    theme?: 'dark' | 'light';
+    className?: string;
+}): React.JSX.Element;

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

@@ -0,0 +1,253 @@
+"use client";
+import {
+  useLoopFlg
+} from "../../../../catalog-chunks/chunk-KTP5OAIN.js";
+
+// .generated/catalog/components/css-animations/whimsical/ConceptTrios1.tsx
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function BookmarkCornerPeel({
+  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 corner_peel_fold {
+          0%, 100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
+          40%, 75% { clip-path: polygon(0 0, 65% 0, 100% 35%, 100% 100%, 0 100%); }
+        }
+        @keyframes corner_triangle_peel {
+          0%, 100% { transform: translate(100%, -100%); opacity: 0; }
+          40%, 75% { transform: translate(0, 0); opacity: 1; }
+        }
+        .peel-card {
+          animation: corner_peel_fold 3s cubic-bezier(0.65, 0, 0.35, 1) infinite both;
+        }
+        .peel-triangle {
+          animation: corner_triangle_peel 3s cubic-bezier(0.65, 0, 0.35, 1) infinite both;
+        }
+      ` }),
+        /* @__PURE__ */ jsxs("div", { className: "relative w-[110px] h-[75px] flex items-center justify-center", children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: `absolute inset-0 rounded-2xl peel-card border ${theme === "dark" ? "bg-[#1c1c1e] border-[#2c2c2e]" : "bg-white border-[#d2d2d7]"}`,
+              children: [
+                /* @__PURE__ */ jsx("div", { className: "absolute top-4 left-3 w-12 h-2 rounded-full bg-blue-500" }),
+                /* @__PURE__ */ jsx("div", { className: "absolute top-8 left-3 w-8 h-2 rounded-full bg-blue-400/50" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "absolute top-0 right-0 w-[38px] h-[38px] overflow-hidden pointer-events-none", children: /* @__PURE__ */ jsx("div", { className: "w-full h-full peel-triangle bg-blue-600 rounded-bl-xl shadow-md" }) })
+        ] }, activeKey)
+      ]
+    }
+  );
+}
+function BookmarkStampDrop({
+  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 stamp_drop_swing {
+          0% { transform: translateY(-70px) rotate(15deg); opacity: 0; }
+          30% { transform: translateY(0) rotate(-6deg); opacity: 1; }
+          45% { transform: translateY(-8px) rotate(4deg); }
+          60% { transform: translateY(0) rotate(-2deg); }
+          75% { transform: translateY(0) rotate(0deg); opacity: 1; }
+          90%, 100% { transform: translateY(-70px) rotate(15deg); opacity: 0; }
+        }
+        .stamp-ribbon {
+          transform-origin: top center;
+          animation: stamp_drop_swing 3s cubic-bezier(0.34, 1.56, 0.64, 1) infinite both;
+        }
+      ` }),
+        /* @__PURE__ */ jsx("div", { className: "relative w-[110px] h-[85px] flex items-start justify-center pt-2", children: /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col items-center stamp-ribbon", children: [
+          /* @__PURE__ */ jsx("div", { className: "w-[3px] h-[36px] bg-blue-500 rounded-full" }),
+          /* @__PURE__ */ jsx("div", { className: "w-[42px] h-[48px] -mt-1 rounded-xl bg-blue-600 flex items-center justify-center shadow-md", children: /* @__PURE__ */ jsx("div", { className: "w-4 h-4 rounded-full bg-white/90" }) })
+        ] }) }, activeKey)
+      ]
+    }
+  );
+}
+function ShutterSlide({
+  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 shutter_left_open {
+          0%, 100% { transform: translateX(0); }
+          40%, 75% { transform: translateX(-95%); }
+        }
+        @keyframes shutter_right_open {
+          0%, 100% { transform: translateX(0); }
+          40%, 75% { transform: translateX(95%); }
+        }
+        .shutter-panel-left {
+          animation: shutter_left_open 3s cubic-bezier(0.65, 0, 0.35, 1) infinite both;
+        }
+        .shutter-panel-right {
+          animation: shutter_right_open 3s cubic-bezier(0.65, 0, 0.35, 1) infinite both;
+        }
+      ` }),
+        /* @__PURE__ */ jsxs("div", { className: "relative w-[120px] h-[75px] rounded-2xl overflow-hidden border border-neutral-700 bg-blue-600 flex items-center justify-center", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-bold text-white tracking-wider", children: "OPEN" }),
+          /* @__PURE__ */ jsx("div", { className: `absolute top-0 left-0 w-1/2 h-full shutter-panel-left border-r ${theme === "dark" ? "bg-[#1c1c1e] border-[#2c2c2e]" : "bg-[#e5e5ea] border-[#d1d1d6]"}` }),
+          /* @__PURE__ */ jsx("div", { className: `absolute top-0 right-0 w-1/2 h-full shutter-panel-right border-l ${theme === "dark" ? "bg-[#1c1c1e] border-[#2c2c2e]" : "bg-[#e5e5ea] border-[#d1d1d6]"}` })
+        ] }, activeKey)
+      ]
+    }
+  );
+}
+function DiagonalDrape({
+  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 diagonal_cloth_draw {
+          0%, 100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
+          40%, 75% { clip-path: polygon(0 0, 20% 0, 100% 80%, 100% 100%, 0 100%); }
+        }
+        .drape-cloth {
+          animation: diagonal_cloth_draw 3s cubic-bezier(0.65, 0, 0.35, 1) infinite both;
+        }
+      ` }),
+        /* @__PURE__ */ jsxs("div", { className: "relative w-[120px] h-[80px] rounded-2xl overflow-hidden border border-neutral-700 bg-neutral-900 flex items-center justify-center", children: [
+          /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-blue-500" }),
+          /* @__PURE__ */ jsx("div", { className: `absolute inset-0 drape-cloth ${theme === "dark" ? "bg-[#1c1c1e]" : "bg-[#ffffff]"}` }),
+          /* @__PURE__ */ jsx("div", { className: "absolute top-2 right-2 w-3 h-3 rounded-full bg-blue-400 z-10" })
+        ] }, activeKey)
+      ]
+    }
+  );
+}
+function StickyNotePeel({
+  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 note_peel_lift {
+          0% { transform: rotateX(0deg) translateY(0); opacity: 1; }
+          35% { transform: perspective(500px) rotateX(65deg) translateY(-12px); opacity: 1; }
+          50%, 100% { transform: perspective(500px) rotateX(90deg) translateY(-40px); opacity: 0; }
+        }
+        .note-sheet {
+          transform-origin: top center;
+          animation: note_peel_lift 3s cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+        }
+      ` }),
+        /* @__PURE__ */ jsxs("div", { className: "relative w-[75px] h-[75px] flex items-center justify-center", children: [
+          /* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-xl bg-blue-600 shadow-sm" }),
+          /* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-xl bg-blue-400 note-sheet shadow-md" })
+        ] }, activeKey)
+      ]
+    }
+  );
+}
+function ReceiptTapePrint({
+  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 receipt_print_step {
+          0% { height: 0px; opacity: 0; }
+          25% { height: 25px; opacity: 1; }
+          50% { height: 55px; opacity: 1; }
+          75% { height: 55px; opacity: 1; }
+          90%, 100% { height: 0px; opacity: 0; }
+        }
+        .receipt-paper {
+          animation: receipt_print_step 3s steps(4) infinite both;
+        }
+      ` }),
+        /* @__PURE__ */ jsxs("div", { className: "relative w-[110px] h-[85px] flex flex-col items-center justify-start pt-2", children: [
+          /* @__PURE__ */ jsx("div", { className: `w-[90px] h-[18px] rounded-full z-20 flex items-center justify-center border ${theme === "dark" ? "bg-[#1c1c1e] border-[#2c2c2e]" : "bg-[#e5e5ea] border-[#d1d1d6]"}`, children: /* @__PURE__ */ jsx("div", { className: "w-[65px] h-[3px] rounded-full bg-neutral-600" }) }),
+          /* @__PURE__ */ jsxs("div", { className: "w-[60px] receipt-paper bg-blue-500 rounded-b-lg shadow-md -mt-1.5 flex flex-col gap-1 p-1", children: [
+            /* @__PURE__ */ jsx("div", { className: "w-full h-1 bg-blue-300/60 rounded-full" }),
+            /* @__PURE__ */ jsx("div", { className: "w-3/4 h-1 bg-blue-300/60 rounded-full" }),
+            /* @__PURE__ */ jsx("div", { className: "w-1/2 h-1 bg-blue-300/60 rounded-full" })
+          ] })
+        ] }, activeKey)
+      ]
+    }
+  );
+}
+export {
+  BookmarkCornerPeel,
+  BookmarkStampDrop,
+  DiagonalDrape,
+  ReceiptTapePrint,
+  ShutterSlide,
+  StickyNotePeel
+};

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

@@ -0,0 +1,37 @@
+import React from 'react';
+export declare function StrokeSpiral({ trigger, loop, theme, className, }: {
+    trigger?: 'hover' | 'click';
+    loop?: boolean;
+    theme?: 'dark' | 'light';
+    className?: string;
+}): React.JSX.Element;
+export declare function StrokeWaveform({ trigger, loop, theme, className, }: {
+    trigger?: 'hover' | 'click';
+    loop?: boolean;
+    theme?: 'dark' | 'light';
+    className?: string;
+}): React.JSX.Element;
+export declare function TetrisBlockSettle({ trigger, loop, theme, className, }: {
+    trigger?: 'hover' | 'click';
+    loop?: boolean;
+    theme?: 'dark' | 'light';
+    className?: string;
+}): React.JSX.Element;
+export declare function PyramidBlockBuild({ trigger, loop, theme, className, }: {
+    trigger?: 'hover' | 'click';
+    loop?: boolean;
+    theme?: 'dark' | 'light';
+    className?: string;
+}): React.JSX.Element;
+export declare function ScrollCanvasUnroll({ trigger, loop, theme, className, }: {
+    trigger?: 'hover' | 'click';
+    loop?: boolean;
+    theme?: 'dark' | 'light';
+    className?: string;
+}): React.JSX.Element;
+export declare function FlagPennantUnfurl({ trigger, loop, theme, className, }: {
+    trigger?: 'hover' | 'click';
+    loop?: boolean;
+    theme?: 'dark' | 'light';
+    className?: string;
+}): React.JSX.Element;