motion-brew 0.0.0-stage → 0.1.1

package/dist/chunk-HPJJAQ5L.js

@@ -0,0 +1,406 @@
+"use client";
+import {
+  ArchiveIcon
+} from "./chunk-PJ5EVDNN.js";
+import {
+  FolderOpenIcon
+} from "./chunk-MUDKP3LK.js";
+import {
+  SparklesIcon
+} from "./chunk-YGONLKWH.js";
+import {
+  TrendingUpIcon
+} from "./chunk-SSWKGVRI.js";
+import {
+  MailCheckIcon
+} from "./chunk-CEQ56RF6.js";
+import {
+  ZapIcon
+} from "./chunk-6GRDT3OE.js";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/pricing-card/pricing-card.tsx
+import * as React from "react";
+import {
+  AnimatePresence,
+  motion,
+  useReducedMotion
+} from "motion/react";
+import { ArrowRight } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SPRING = { type: "spring", stiffness: 420, damping: 34 };
+var KNOB = { type: "spring", stiffness: 600, damping: 34 };
+var ROLL = { type: "spring", stiffness: 220, damping: 26 };
+var EASE = [0.22, 1, 0.36, 1];
+var DIGITS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+var GLOW = "linear-gradient(120deg, #e9d5ff, #c7d7fe, #fbcfe8, #fde7c2, #e9d5ff)";
+var DEFAULT_PLAN = {
+  name: "Personal",
+  label: "Ideal for solo makers",
+  blurb: "Everything you need to ship your own projects.",
+  monthly: 12,
+  yearly: 9,
+  features: [
+    {
+      title: "Unlimited projects",
+      detail: "Start as many as you like.",
+      icon: FolderOpenIcon
+    },
+    {
+      title: "Simple analytics",
+      detail: "Visits, sources and top pages.",
+      icon: TrendingUpIcon
+    },
+    {
+      title: "10 GB storage",
+      detail: "Room for files and builds.",
+      icon: ArchiveIcon
+    },
+    {
+      title: "Email support",
+      detail: "Answers within a working day.",
+      icon: MailCheckIcon
+    }
+  ],
+  cta: "Get started",
+  footnote: "14 day free trial, no card needed",
+  icon: ZapIcon
+};
+function Digit({ digit, still }) {
+  return /* @__PURE__ */ jsx("span", { className: "relative inline-block h-[1em] w-[0.62em] overflow-hidden", children: /* @__PURE__ */ jsx(
+    motion.span,
+    {
+      className: "absolute inset-x-0 top-0 flex flex-col",
+      initial: false,
+      animate: { y: `${-digit * 10}%` },
+      transition: still ? { duration: 0 } : ROLL,
+      children: DIGITS.map((d) => /* @__PURE__ */ jsx("span", { className: "flex h-[1em] items-center justify-center", children: d }, d))
+    }
+  ) });
+}
+function Rolling({ value, still }) {
+  const chars = Array.from(String(Math.round(value)));
+  return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "inline-flex leading-none tabular-nums", children: chars.map((ch, i) => /* @__PURE__ */ jsx(Digit, { digit: Number(ch), still }, chars.length - i)) });
+}
+function Feature({
+  feature,
+  delay,
+  hovered,
+  onHover,
+  uid,
+  still
+}) {
+  const Icon = feature.icon;
+  return /* @__PURE__ */ jsxs(
+    motion.li,
+    {
+      initial: still ? { opacity: 0 } : { opacity: 0, y: 6 },
+      whileInView: { opacity: 1, y: 0 },
+      viewport: { once: true },
+      transition: {
+        duration: still ? 0 : 0.45,
+        delay: still ? 0 : delay,
+        ease: EASE
+      },
+      onPointerEnter: () => onHover(true),
+      onPointerLeave: () => onHover(false),
+      className: "relative -mx-2.5 flex gap-3 rounded-2xl px-2.5 py-2.5",
+      children: [
+        hovered && /* @__PURE__ */ jsx(
+          motion.span,
+          {
+            layoutId: `${uid}-row`,
+            transition: still ? { duration: 0 } : { type: "spring", stiffness: 500, damping: 38 },
+            className: "absolute inset-0 rounded-2xl bg-[#242423]/[0.045]"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          motion.span,
+          {
+            animate: { scale: hovered && !still ? 1.12 : 1 },
+            transition: { type: "spring", stiffness: 500, damping: 26 },
+            className: "relative mt-0.5 grid size-4 shrink-0 place-items-center text-zinc-600",
+            children: Icon ? /* @__PURE__ */ jsx(
+              Icon,
+              {
+                className: "size-4",
+                strokeWidth: 2.25,
+                active: hovered && !still ? true : void 0
+              }
+            ) : /* @__PURE__ */ jsx("span", { className: "size-1.5 rounded-full bg-current" })
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: "relative min-w-0", children: [
+          /* @__PURE__ */ jsx("span", { className: "block text-sm font-medium leading-5", children: feature.title }),
+          feature.detail && /* @__PURE__ */ jsx("span", { className: "mt-1 block text-xs leading-4 text-zinc-500", children: feature.detail })
+        ] })
+      ]
+    }
+  );
+}
+var PricingCard = React.forwardRef(
+  function PricingCard2({
+    plan = DEFAULT_PLAN,
+    defaultBilling = "monthly",
+    note = "Recommended for you",
+    onSelect,
+    className
+  }, ref) {
+    const still = !!useReducedMotion();
+    const [billing, setBilling] = React.useState(
+      defaultBilling
+    );
+    const [lit, setLit] = React.useState(false);
+    const [intro, setIntro] = React.useState(false);
+    const [row, setRow] = React.useState(null);
+    const uid = React.useId();
+    const yearly = billing === "yearly";
+    const price = yearly ? plan.yearly : plan.monthly;
+    const save = plan.monthly > 0 ? Math.round((1 - plan.yearly / plan.monthly) * 100) : 0;
+    const Icon = plan.icon;
+    return /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        ref,
+        initial: still ? { opacity: 0 } : { opacity: 0, y: 32, filter: "blur(8px)" },
+        whileInView: { opacity: 1, y: 0, filter: "blur(0px)" },
+        viewport: { once: true, amount: 0.25 },
+        transition: { duration: still ? 0 : 0.75, ease: EASE },
+        onViewportEnter: () => {
+          setIntro(true);
+          window.setTimeout(() => setIntro(false), 1200);
+        },
+        className: cn("w-[360px] max-w-full", className),
+        children: /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            tabIndex: 0,
+            "aria-label": `${plan.name}, $${price} a month`,
+            onPointerEnter: (e) => e.pointerType === "mouse" && setLit(true),
+            onPointerLeave: (e) => e.pointerType === "mouse" && setLit(false),
+            onFocus: () => setLit(true),
+            onBlur: (e) => {
+              if (!e.currentTarget.contains(e.relatedTarget))
+                setLit(false);
+            },
+            animate: {
+              y: lit && !still ? -6 : 0,
+              boxShadow: lit ? "0 1px 2px rgba(0,0,0,0.04), 0 28px 56px -28px rgba(80,60,160,0.35)" : "0 1px 2px rgba(0,0,0,0.03), 0 12px 32px -20px rgba(0,0,0,0.16)"
+            },
+            transition: SPRING,
+            className: "relative overflow-hidden rounded-[30px] bg-[#f1f1ef] p-1.5 text-[#242423] outline-none focus-visible:ring-2 focus-visible:ring-zinc-400",
+            children: [
+              /* @__PURE__ */ jsx(
+                motion.span,
+                {
+                  "aria-hidden": true,
+                  className: "pointer-events-none absolute inset-0",
+                  style: { background: GLOW, backgroundSize: "300% 300%" },
+                  initial: false,
+                  animate: {
+                    opacity: lit ? 1 : 0,
+                    backgroundPosition: still ? "0% 50%" : ["0% 50%", "100% 50%", "0% 50%"]
+                  },
+                  transition: {
+                    opacity: { duration: 0.5, ease: EASE },
+                    backgroundPosition: {
+                      duration: 10,
+                      repeat: Infinity,
+                      ease: "linear"
+                    }
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "relative flex h-9 items-center overflow-hidden px-4", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsxs(
+                motion.span,
+                {
+                  initial: still ? { opacity: 0 } : { opacity: 0, y: 16, filter: "blur(4px)" },
+                  animate: { opacity: 1, y: 0, filter: "blur(0px)" },
+                  exit: still ? { opacity: 0 } : { opacity: 0, y: -16, filter: "blur(4px)" },
+                  transition: { duration: 0.35, ease: EASE },
+                  className: cn(
+                    "flex items-center gap-1.5 truncate text-xs font-medium",
+                    lit ? "text-[#242423]" : "text-zinc-500"
+                  ),
+                  children: [
+                    lit && /* @__PURE__ */ jsx(
+                      SparklesIcon,
+                      {
+                        className: "size-3.5",
+                        strokeWidth: 2,
+                        active: !still
+                      }
+                    ),
+                    lit ? note : plan.label
+                  ]
+                },
+                lit ? "note" : "label"
+              ) }) }),
+              /* @__PURE__ */ jsxs(
+                motion.div,
+                {
+                  initial: still ? false : { y: 14, opacity: 0 },
+                  whileInView: { y: 0, opacity: 1 },
+                  viewport: { once: true },
+                  transition: {
+                    duration: still ? 0 : 0.6,
+                    delay: still ? 0 : 0.15,
+                    ease: EASE
+                  },
+                  className: "relative rounded-3xl bg-white p-5 shadow-[0_1px_2px_rgba(0,0,0,0.04),0_8px_24px_-14px_rgba(0,0,0,0.16)]",
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                      Icon && /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: cn(
+                            "grid size-10 shrink-0 place-items-center rounded-2xl transition-colors duration-300",
+                            lit ? "bg-[#242423] text-white" : "bg-[#242423]/[0.06] text-[#242423]"
+                          ),
+                          children: /* @__PURE__ */ jsx(
+                            Icon,
+                            {
+                              className: "size-[18px]",
+                              strokeWidth: 2,
+                              active: (lit || intro) && !still ? true : void 0
+                            }
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("p", { className: "text-lg font-semibold tracking-tight", children: plan.name })
+                    ] }),
+                    /* @__PURE__ */ jsx("p", { className: "mt-3 text-sm leading-5 text-zinc-500", children: plan.blurb }),
+                    /* @__PURE__ */ jsxs("div", { className: "mt-6 flex items-end justify-between gap-3", children: [
+                      /* @__PURE__ */ jsxs("div", { children: [
+                        /* @__PURE__ */ jsxs("span", { className: "flex items-baseline gap-1", children: [
+                          /* @__PURE__ */ jsxs("span", { className: "flex items-start text-[48px] font-semibold leading-none tracking-tight", children: [
+                            /* @__PURE__ */ jsx("span", { className: "mt-1 text-2xl text-zinc-400", children: "$" }),
+                            /* @__PURE__ */ jsx(Rolling, { value: price, still })
+                          ] }),
+                          /* @__PURE__ */ jsx("span", { className: "text-sm text-zinc-500", children: "/ month" })
+                        ] }),
+                        /* @__PURE__ */ jsx("span", { className: "relative mt-2 inline-grid h-4 overflow-hidden text-xs text-zinc-500", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsx(
+                          motion.span,
+                          {
+                            initial: still ? { opacity: 0 } : { opacity: 0, y: 8, filter: "blur(3px)" },
+                            animate: { opacity: 1, y: 0, filter: "blur(0px)" },
+                            exit: still ? { opacity: 0 } : { opacity: 0, y: -8, filter: "blur(3px)" },
+                            transition: { duration: 0.3, ease: EASE },
+                            className: "leading-4",
+                            children: yearly ? `$${plan.yearly * 12} billed once a year` : "Billed monthly, cancel any time"
+                          },
+                          billing
+                        ) }) })
+                      ] }),
+                      /* @__PURE__ */ jsxs(
+                        "button",
+                        {
+                          type: "button",
+                          role: "switch",
+                          "aria-checked": yearly,
+                          onClick: () => setBilling(yearly ? "monthly" : "yearly"),
+                          className: "mb-5 flex shrink-0 cursor-pointer flex-col items-end gap-1.5 outline-none focus-visible:rounded-lg focus-visible:ring-2 focus-visible:ring-zinc-400",
+                          children: [
+                            /* @__PURE__ */ jsx("span", { className: "relative inline-grid h-4 overflow-hidden text-xs", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsx(
+                              motion.span,
+                              {
+                                initial: still ? { opacity: 0 } : { opacity: 0, y: 8, scale: 0.9 },
+                                animate: { opacity: 1, y: 0, scale: 1 },
+                                exit: still ? { opacity: 0 } : { opacity: 0, y: -8, scale: 0.9 },
+                                transition: { duration: 0.25, ease: EASE },
+                                className: cn(
+                                  "leading-4 font-medium",
+                                  yearly ? "text-[#269a5a]" : "text-zinc-500"
+                                ),
+                                children: yearly ? `Saving ${save}%` : "Pay yearly"
+                              },
+                              yearly ? "save" : "plain"
+                            ) }) }),
+                            /* @__PURE__ */ jsx(
+                              "span",
+                              {
+                                className: cn(
+                                  "relative flex h-6 w-10 items-center rounded-full p-0.5 transition-colors duration-300",
+                                  yearly ? "bg-[#242423]" : "bg-[#242423]/[0.12]"
+                                ),
+                                children: /* @__PURE__ */ jsx(
+                                  motion.span,
+                                  {
+                                    className: "size-5 rounded-full bg-white shadow-[0_1px_3px_rgba(0,0,0,0.25)]",
+                                    animate: { x: yearly ? 16 : 0 },
+                                    transition: still ? { duration: 0 } : KNOB
+                                  }
+                                )
+                              }
+                            )
+                          ]
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => onSelect?.(billing),
+                        className: cn(
+                          "group/cta mt-5 flex h-11 w-full cursor-pointer items-center justify-center gap-2 rounded-full text-sm font-medium outline-none transition-[background-color,color,box-shadow] duration-300 focus-visible:ring-2 focus-visible:ring-zinc-400 active:scale-[0.98]",
+                          lit ? "bg-[#242423] text-white shadow-[0_8px_20px_-10px_rgba(0,0,0,0.5)]" : "bg-[#242423]/[0.06] text-[#242423] hover:bg-[#242423]/[0.1]"
+                        ),
+                        children: [
+                          plan.cta,
+                          /* @__PURE__ */ jsxs("span", { className: "relative grid size-4 overflow-hidden", children: [
+                            /* @__PURE__ */ jsx(
+                              ArrowRight,
+                              {
+                                className: "size-4 transition-transform duration-300 ease-out group-hover/cta:translate-x-5",
+                                strokeWidth: 2.25
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              ArrowRight,
+                              {
+                                className: "absolute inset-0 size-4 -translate-x-5 transition-transform duration-300 ease-out group-hover/cta:translate-x-0",
+                                strokeWidth: 2.25
+                              }
+                            )
+                          ] })
+                        ]
+                      }
+                    ),
+                    plan.footnote && /* @__PURE__ */ jsx("p", { className: "mt-2.5 text-center text-xs text-zinc-500", children: plan.footnote }),
+                    /* @__PURE__ */ jsx("div", { className: "mb-3 mt-5 h-px bg-[#242423]/[0.06]" }),
+                    /* @__PURE__ */ jsx(
+                      "ul",
+                      {
+                        className: "flex flex-col gap-0.5",
+                        onPointerLeave: () => setRow(null),
+                        children: plan.features.map((f, k) => /* @__PURE__ */ jsx(
+                          Feature,
+                          {
+                            feature: f,
+                            delay: 0.45 + k * 0.06,
+                            hovered: row === k,
+                            onHover: (on) => setRow(on ? k : null),
+                            uid,
+                            still
+                          },
+                          f.title
+                        ))
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+
+export {
+  PricingCard
+};

package/dist/chunk-HYSXVKZB.js

@@ -0,0 +1,213 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/magnetic-flow/magnetic-flow.tsx
+import * as React from "react";
+import gsap from "gsap";
+import { useGSAP } from "@gsap/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+gsap.registerPlugin(useGSAP);
+var face = "relative h-full w-full overflow-hidden";
+var BARS = [55, 30, 70, 42, 85, 38, 64, 48, 76];
+var PIXELS = Array.from({ length: 42 }, (_, i) => (i * 37 + 11) % 10 / 10);
+var DEFAULT_CARDS = [
+  /* @__PURE__ */ jsxs("div", { className: cn(face, "bg-[#d4392e] p-[9cqw] text-white"), children: [
+    /* @__PURE__ */ jsx("p", { className: "text-[11cqw] font-medium uppercase tracking-[0.2em] opacity-80", children: "magnetic" }),
+    /* @__PURE__ */ jsx("p", { className: "absolute bottom-[6cqw] left-[7cqw] text-[38cqw] font-black leading-[0.8] tracking-tighter", children: "FLOW" })
+  ] }, "flow"),
+  /* @__PURE__ */ jsx("div", { className: cn(face, "grid place-items-center bg-[#ec9a74]"), children: /* @__PURE__ */ jsx("div", { className: "size-[72cqw] rounded-full bg-[repeating-radial-gradient(circle,#1b1b1b_0_2.6cqw,transparent_2.6cqw_6.4cqw)]" }) }, "rings"),
+  /* @__PURE__ */ jsx("div", { className: cn(face, "flex items-end justify-center gap-[3.2cqw] bg-[#f2c94c] pb-[14cqw]"), children: BARS.map((h, i) => /* @__PURE__ */ jsx("span", { className: "w-[5.5cqw] rounded-full bg-[#141414]", style: { height: `${h * 0.62}cqw` } }, i)) }, "bars"),
+  /* @__PURE__ */ jsx("div", { className: cn(face, "grid place-items-center bg-[#3563e9]"), children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-[2.4cqw]", children: PIXELS.map((o, i) => /* @__PURE__ */ jsx("span", { className: "size-[6.5cqw] rounded-[1cqw] bg-white", style: { opacity: 0.18 + o * 0.6 } }, i)) }) }, "pixels"),
+  /* @__PURE__ */ jsxs("div", { className: cn(face, "flex flex-col justify-between bg-[#8fd6c7] p-[9cqw] text-[#141414]"), children: [
+    /* @__PURE__ */ jsx("p", { className: "text-[10cqw] font-bold tracking-[0.3em]", children: "\xD7 \u25CB \u25B3" }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("p", { className: "text-[13cqw] font-extrabold tracking-tight", children: "Loading" }),
+      /* @__PURE__ */ jsx("div", { className: "mt-[4cqw] h-[3cqw] rounded-full bg-black/15", children: /* @__PURE__ */ jsx("div", { className: "h-full w-[36%] rounded-full bg-[#141414]" }) })
+    ] })
+  ] }, "loading"),
+  /* @__PURE__ */ jsx("div", { className: cn(face, "grid place-items-center bg-[#1e1f23]"), children: /* @__PURE__ */ jsx("div", { className: "size-[62cqw] rounded-full bg-[conic-gradient(from_200deg,#f4f4f5,#71717a,#e4e4e7,#52525b,#f4f4f5)] p-[11cqw]", children: /* @__PURE__ */ jsx("div", { className: "size-full rounded-full bg-[#1e1f23]" }) }) }, "ring"),
+  /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(face, "bg-[#e8643b] bg-[radial-gradient(circle_at_50%_78%,#ffe2b3_0%,#ffad6b_22%,transparent_58%)]"),
+      children: /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 bottom-[20cqw] h-px bg-white/40" })
+    },
+    "sun"
+  ),
+  /* @__PURE__ */ jsx("div", { className: cn(face, "bg-[#e4e7ec] p-[8cqw] text-[#111]"), children: /* @__PURE__ */ jsxs("p", { className: "text-[18cqw] font-black uppercase leading-[0.88] tracking-tight", children: [
+    "Move",
+    /* @__PURE__ */ jsx("br", {}),
+    "with",
+    /* @__PURE__ */ jsx("br", {}),
+    "the",
+    /* @__PURE__ */ jsx("br", {}),
+    "flow"
+  ] }) }, "words")
+];
+var MagneticFlow = React.forwardRef(function MagneticFlow2({
+  cards = DEFAULT_CARDS,
+  cardSize = 140,
+  follow = 0.16,
+  spacing = 7,
+  burstRadius = 150,
+  burstHold = 2400,
+  autoplay = true,
+  onBurst,
+  className
+}, forwardedRef) {
+  const root = React.useRef(null);
+  React.useImperativeHandle(forwardedRef, () => root.current);
+  const mode = React.useRef("flow");
+  const pointer = React.useRef(null);
+  const pos = React.useRef([]);
+  const holdTimer = React.useRef(null);
+  const [burst, setBurst] = React.useState(false);
+  const chain = () => gsap.utils.toArray("[data-card]", root.current).reverse();
+  const center = () => {
+    const el = root.current;
+    return { x: el.clientWidth / 2, y: el.clientHeight / 2 };
+  };
+  const { contextSafe } = useGSAP(
+    () => {
+      const els = chain();
+      const c = center();
+      const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+      pos.current = els.map((_, i) => ({ x: c.x - i * spacing, y: c.y - i * spacing, r: 0 }));
+      gsap.set(els, { xPercent: -50, yPercent: -50, x: (i) => pos.current[i].x, y: (i) => pos.current[i].y });
+      if (reduce) return;
+      const setX = els.map((el) => gsap.quickSetter(el, "x", "px"));
+      const setY = els.map((el) => gsap.quickSetter(el, "y", "px"));
+      const setR = els.map((el) => gsap.quickSetter(el, "rotation", "deg"));
+      const tick = (time, delta) => {
+        if (mode.current !== "flow") return;
+        const el = root.current;
+        if (!el) return;
+        const w = el.clientWidth;
+        const h = el.clientHeight;
+        const target = pointer.current ?? (autoplay ? { x: w / 2 + 14 * Math.sin(time * 0.9), y: h / 2 + 10 * Math.sin(time * 1.4 + 1) } : { x: w / 2, y: h / 2 });
+        const k = 1 - Math.pow(1 - follow, delta / 16.67);
+        pos.current.forEach((p, i) => {
+          const ahead = i === 0 ? target : { x: pos.current[i - 1].x - spacing, y: pos.current[i - 1].y - spacing };
+          const ease = i === 0 ? Math.min(1, k * 1.5) : k;
+          const vx = (ahead.x - p.x) * ease;
+          p.x += vx;
+          p.y += (ahead.y - p.y) * ease;
+          p.r += (gsap.utils.clamp(-16, 16, vx * 1.6) - p.r) * 0.12;
+          setX[i](p.x);
+          setY[i](p.y);
+          setR[i](p.r);
+        });
+      };
+      gsap.ticker.add(tick);
+      return () => gsap.ticker.remove(tick);
+    },
+    { scope: root, dependencies: [cards.length, follow, spacing, autoplay] }
+  );
+  React.useEffect(() => () => void (holdTimer.current && clearTimeout(holdTimer.current)), []);
+  const fold = contextSafe(() => {
+    if (mode.current !== "burst") return;
+    if (holdTimer.current) clearTimeout(holdTimer.current);
+    mode.current = "busy";
+    setBurst(false);
+    const els = chain();
+    const c = center();
+    gsap.to(els, {
+      x: (i) => c.x - i * spacing,
+      y: (i) => c.y - i * spacing,
+      rotation: 0,
+      scale: 1,
+      duration: 0.7,
+      ease: "power3.inOut",
+      stagger: { each: 0.03, from: "end" },
+      onComplete: () => {
+        pos.current = els.map((el) => ({
+          x: gsap.getProperty(el, "x"),
+          y: gsap.getProperty(el, "y"),
+          r: 0
+        }));
+        mode.current = "flow";
+      }
+    });
+  });
+  const open = contextSafe(() => {
+    if (mode.current !== "flow") return;
+    mode.current = "busy";
+    setBurst(true);
+    onBurst?.();
+    const els = chain();
+    const el = root.current;
+    const c = center();
+    const scale = 0.82;
+    const fit = (Math.min(el.clientWidth, el.clientHeight) - cardSize * scale * 1.2) / 2;
+    const radius = Math.max(cardSize * 0.4, Math.min(burstRadius, fit));
+    const step = 360 / els.length;
+    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    gsap.timeline({
+      onComplete: () => {
+        mode.current = "burst";
+        if (burstHold !== null) holdTimer.current = setTimeout(fold, burstHold);
+      }
+    }).to(els, {
+      x: c.x,
+      y: c.y,
+      rotation: 0,
+      scale: 0.9,
+      duration: reduce ? 0 : 0.35,
+      ease: "power2.in",
+      stagger: { each: 0.015, from: "end" }
+    }).to(els, {
+      x: (i) => c.x + Math.cos((i * step - 90) * Math.PI / 180) * radius,
+      y: (i) => c.y + Math.sin((i * step - 90) * Math.PI / 180) * radius,
+      rotation: (i) => i * step,
+      scale,
+      duration: reduce ? 0 : 1.1,
+      ease: "elastic.out(1, 0.65)",
+      stagger: 0.035
+    });
+  });
+  const toggle = () => mode.current === "burst" ? fold() : open();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: root,
+      role: "button",
+      tabIndex: 0,
+      "aria-pressed": burst,
+      "aria-label": burst ? "Fold the cards back" : "Burst the cards open",
+      onPointerMove: (e) => {
+        if (e.pointerType !== "mouse") return;
+        const rect = e.currentTarget.getBoundingClientRect();
+        pointer.current = { x: e.clientX - rect.left, y: e.clientY - rect.top };
+      },
+      onPointerLeave: () => pointer.current = null,
+      onClick: toggle,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          toggle();
+        }
+      },
+      className: cn(
+        "relative h-[440px] w-[400px] max-w-full cursor-pointer touch-none select-none overflow-hidden rounded-3xl outline-none focus-visible:ring-2 focus-visible:ring-zinc-400",
+        className
+      ),
+      children: cards.map((card, i) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-card": true,
+          "aria-hidden": true,
+          className: "@container absolute left-0 top-0 overflow-hidden rounded-[11%] shadow-[0_10px_24px_-12px_rgba(0,0,0,0.45)] will-change-transform",
+          style: { width: cardSize, height: cardSize },
+          children: card
+        },
+        i
+      ))
+    }
+  );
+});
+
+export {
+  MagneticFlow
+};