motion-brew 0.0.0-stage → 0.1.0

package/dist/chunk-6V6OTHNE.js

@@ -0,0 +1,299 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/download-button/download-button.tsx
+import * as React from "react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import gsap from "gsap";
+import { useGSAP } from "@gsap/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+gsap.registerPlugin(useGSAP);
+var GLIDE = [0.22, 1, 0.36, 1];
+var INK = "#242423";
+var SUCCESS = "#269a5a";
+function Rolling({ text, still }) {
+  return /* @__PURE__ */ jsx("span", { className: "relative inline-grid overflow-hidden", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsx(
+    motion.span,
+    {
+      className: "whitespace-nowrap",
+      initial: still ? { opacity: 0 } : { opacity: 0, y: "70%", filter: "blur(4px)" },
+      animate: { opacity: 1, y: 0, filter: "blur(0px)" },
+      exit: still ? { opacity: 0 } : { opacity: 0, y: "-70%", filter: "blur(4px)" },
+      transition: { duration: 0.32, ease: GLIDE },
+      children: text
+    },
+    text
+  ) }) });
+}
+var DownloadButton = React.forwardRef(function DownloadButton2({
+  label = "Download",
+  size = "4.2 MB",
+  duration = 2.6,
+  onDownload,
+  className
+}, ref) {
+  const still = !!useReducedMotion();
+  const root = React.useRef(null);
+  React.useImperativeHandle(ref, () => root.current);
+  const [phase, setPhase] = React.useState("idle");
+  const clip = `${React.useId().replace(/:/g, "")}-clip`;
+  const timeline = React.useRef(null);
+  const bob = React.useRef(null);
+  const { contextSafe } = useGSAP(
+    () => {
+      gsap.set("[data-fill]", { scaleX: 0, transformOrigin: "0% 50%" });
+      gsap.set("[data-check]", { strokeDashoffset: 1 });
+      gsap.set("[data-liquid]", { y: 16 });
+      gsap.set("[data-arrow]", {
+        y: 0,
+        autoAlpha: 1,
+        scale: 1,
+        svgOrigin: "9.75 10.75"
+      });
+      gsap.set("[data-bg]", { backgroundColor: INK });
+      if (still) return;
+      gsap.to("[data-wave]", {
+        yPercent: -50,
+        duration: 0.9,
+        ease: "none",
+        repeat: -1
+      });
+      gsap.to("[data-surface]", {
+        x: -8,
+        duration: 1.2,
+        ease: "none",
+        repeat: -1
+      });
+    },
+    { scope: root }
+  );
+  const hover = contextSafe((on) => {
+    if (phase !== "idle" || still) return;
+    gsap.to("[data-arrow]", {
+      y: on ? 1.5 : 0,
+      duration: 0.45,
+      ease: "sine.inOut"
+    });
+  });
+  const reset = contextSafe(() => {
+    timeline.current?.kill();
+    bob.current?.kill();
+    gsap.to("[data-fill]", {
+      scaleX: 0,
+      autoAlpha: 1,
+      duration: 0.3,
+      ease: "power2.inOut"
+    });
+    gsap.to("[data-bg]", { backgroundColor: INK, duration: 0.3 });
+    gsap.to("[data-check]", { strokeDashoffset: 1, duration: 0.2 });
+    gsap.to("[data-liquid]", {
+      y: 16,
+      autoAlpha: 1,
+      duration: 0.5,
+      ease: "sine.inOut"
+    });
+    gsap.fromTo(
+      "[data-arrow]",
+      { y: -3, autoAlpha: 0, scale: 1 },
+      { y: 0, autoAlpha: 1, duration: 0.5, ease: "sine.out", delay: 0.15 }
+    );
+    setPhase("idle");
+  });
+  const start = contextSafe(() => {
+    setPhase("loading");
+    const pct = root.current.querySelector("[data-pct]");
+    const liquid = root.current.querySelector("[data-liquid]");
+    const state = { p: 0 };
+    const show = () => {
+      pct.textContent = `${Math.round(state.p * 100)}%`;
+      gsap.set(liquid, { y: 16 * (1 - state.p) });
+    };
+    show();
+    const d = Math.max(0.6, duration);
+    const steps = [
+      [0.34, 0.24],
+      [0.41, 0.14],
+      [0.78, 0.3],
+      [0.92, 0.18]
+    ];
+    const tl = gsap.timeline();
+    timeline.current = tl;
+    bob.current = still ? null : gsap.to("[data-arrow]", {
+      y: 1.75,
+      duration: 0.6,
+      ease: "sine.inOut",
+      yoyo: true,
+      repeat: -1
+    });
+    steps.forEach(
+      ([to, share]) => tl.to(state, {
+        p: to,
+        duration: d * share,
+        ease: "power2.out",
+        onUpdate: show
+      })
+    );
+    tl.to("[data-fill]", { scaleX: 0.92, duration: d * 0.86, ease: "none" }, 0);
+    const pending = Promise.resolve(onDownload?.());
+    tl.add(() => {
+      tl.pause();
+      pending.then(
+        () => tl.resume(),
+        () => reset()
+      );
+    });
+    tl.to(state, {
+      p: 1,
+      duration: d * 0.14,
+      ease: "power2.inOut",
+      onUpdate: show
+    }).to(
+      "[data-fill]",
+      { scaleX: 1, duration: d * 0.14, ease: "power2.inOut" },
+      "<"
+    ).add(() => {
+      bob.current?.kill();
+      setPhase("done");
+    }).to("[data-arrow]", {
+      y: 0,
+      autoAlpha: 0,
+      scale: 0.5,
+      duration: 0.3,
+      ease: "sine.in"
+    }).to("[data-liquid]", { autoAlpha: 0, duration: 0.35 }, "<").to("[data-bg]", { backgroundColor: SUCCESS, duration: 0.35 }, "<").to("[data-fill]", { autoAlpha: 0, duration: 0.3 }, "<").fromTo(
+      "[data-fold]",
+      { scale: 1 },
+      {
+        scale: 1.35,
+        duration: 0.18,
+        ease: "sine.out",
+        yoyo: true,
+        repeat: 1,
+        svgOrigin: "15.5 2.5"
+      },
+      "<0.05"
+    ).to(
+      "[data-check]",
+      { strokeDashoffset: 0, duration: 0.35, ease: "power2.out" },
+      "-=0.1"
+    ).set("[data-fill]", { scaleX: 0, autoAlpha: 1 });
+  });
+  const press = () => {
+    if (phase === "idle") start();
+    else if (phase === "done") reset();
+  };
+  const text = phase === "loading" ? "Downloading" : phase === "done" ? "Downloaded" : label;
+  return /* @__PURE__ */ jsxs(
+    motion.button,
+    {
+      ref: root,
+      type: "button",
+      onClick: press,
+      onPointerEnter: () => hover(true),
+      onPointerLeave: () => hover(false),
+      "aria-busy": phase === "loading",
+      whileTap: still || phase === "loading" ? void 0 : { scale: 0.97 },
+      className: cn(
+        "group relative flex h-12 w-[240px] max-w-full cursor-pointer items-center justify-center overflow-hidden rounded-full text-sm font-medium text-white outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-zinc-900",
+        phase === "loading" && "cursor-progress",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-bg": true,
+            "aria-hidden": true,
+            className: "absolute inset-0",
+            style: { background: INK }
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { "data-fill": true, "aria-hidden": true, className: "absolute inset-y-0 left-0 w-full", children: [
+          /* @__PURE__ */ jsx("span", { className: "absolute inset-0 bg-white/14" }),
+          /* @__PURE__ */ jsx("span", { className: "absolute -right-2 top-0 h-full w-2 overflow-hidden", children: /* @__PURE__ */ jsx(
+            "svg",
+            {
+              "data-wave": true,
+              viewBox: "0 0 8 96",
+              preserveAspectRatio: "none",
+              className: "absolute left-0 top-0 h-[200%] w-2 fill-white/14",
+              children: /* @__PURE__ */ jsx("path", { d: "M0 0h2c3 6 3 6 0 12s-3 6 0 12 3 6 0 12-3 6 0 12 3 6 0 12-3 6 0 12 3 6 0 12-3 6 0 12H0Z" })
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxs("span", { className: "relative flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              viewBox: "0 0 20 20",
+              className: "size-5 overflow-visible",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "1.75",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              "aria-hidden": true,
+              children: [
+                /* @__PURE__ */ jsx("clipPath", { id: clip, children: /* @__PURE__ */ jsx("path", { d: "M5.5 2.5h6l4 4v9.75a1.5 1.5 0 0 1-1.5 1.5H5.5a1.5 1.5 0 0 1-1.5-1.5V4a1.5 1.5 0 0 1 1.5-1.5Z" }) }),
+                /* @__PURE__ */ jsx("g", { clipPath: `url(#${clip})`, children: /* @__PURE__ */ jsx("g", { "data-liquid": true, children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    "data-surface": true,
+                    d: "M0 2.5q2-1.5 4 0t4 0 4 0 4 0 4 0 4 0 4 0V22H0Z",
+                    fill: "currentColor",
+                    fillOpacity: "0.35",
+                    stroke: "none"
+                  }
+                ) }) }),
+                /* @__PURE__ */ jsx("path", { d: "M11.5 2.5h-6A1.5 1.5 0 0 0 4 4v12.25a1.5 1.5 0 0 0 1.5 1.5H14a1.5 1.5 0 0 0 1.5-1.5V6.5" }),
+                /* @__PURE__ */ jsx("path", { "data-fold": true, d: "M11.5 2.5v3.25a.75.75 0 0 0 .75.75h3.25Z" }),
+                /* @__PURE__ */ jsxs("g", { "data-arrow": true, children: [
+                  /* @__PURE__ */ jsx("path", { d: "M9.75 8.25v5" }),
+                  /* @__PURE__ */ jsx("path", { d: "m7.75 11.25 2 2 2-2" })
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    "data-check": true,
+                    d: "m7.25 12 1.75 1.75 3.5-3.75",
+                    pathLength: 1,
+                    strokeDasharray: "1",
+                    strokeDashoffset: "1"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(Rolling, { text, still }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-pct": true,
+              className: cn(
+                "tabular-nums text-white/70 transition-opacity duration-200",
+                phase === "loading" ? "opacity-100" : "hidden"
+              )
+            }
+          ),
+          phase === "done" && /* @__PURE__ */ jsx(
+            motion.span,
+            {
+              initial: { opacity: 0, x: -4 },
+              animate: { opacity: 1, x: 0 },
+              transition: { duration: 0.3, ease: GLIDE, delay: 0.15 },
+              className: "text-white/75",
+              children: size
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("span", { role: "status", "aria-live": "polite", className: "sr-only", children: phase === "loading" ? "Downloading." : phase === "done" ? `Download complete, ${size}.` : "" })
+      ]
+    }
+  );
+});
+
+export {
+  DownloadButton
+};

package/dist/chunk-6VZIT62Q.js

@@ -0,0 +1,142 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/magnetic-button/magnetic-button.tsx
+import * as React from "react";
+import {
+  motion,
+  useMotionTemplate,
+  useMotionValue,
+  useReducedMotion,
+  useSpring,
+  useTransform
+} from "motion/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_SPRING = {
+  stiffness: 400,
+  damping: 25,
+  mass: 0.6
+};
+var PRESS = { scale: 0.96 };
+var HOVER = { scale: 1.02 };
+var VARIANTS = {
+  solid: "bg-zinc-900 text-white shadow-[0_1px_0_0_rgba(255,255,255,0.12)_inset,0_8px_24px_-8px_rgba(0,0,0,0.5)] dark:bg-white dark:text-zinc-900",
+  outline: "border border-zinc-300 bg-white/60 text-zinc-900 backdrop-blur dark:border-zinc-700 dark:bg-zinc-900/60 dark:text-zinc-100",
+  ghost: "bg-transparent text-zinc-900 hover:bg-zinc-900/5 dark:text-zinc-100 dark:hover:bg-white/10"
+};
+var SIZES = {
+  sm: "h-9 px-4 text-sm",
+  md: "h-11 px-6 text-sm",
+  lg: "h-14 px-8 text-base"
+};
+var MagneticButton = React.forwardRef(function MagneticButton2({
+  children,
+  className,
+  variant = "solid",
+  size = "md",
+  strength = 0.3,
+  labelStrength = 0.15,
+  spring = DEFAULT_SPRING,
+  spotlight = true,
+  type = "button",
+  href,
+  target,
+  rel,
+  onPointerMove,
+  onPointerLeave,
+  ...props
+}, ref) {
+  const reduceMotion = useReducedMotion();
+  const dx = useMotionValue(0);
+  const dy = useMotionValue(0);
+  const px = useMotionValue(0);
+  const py = useMotionValue(0);
+  const glow = useSpring(0, { stiffness: 300, damping: 30 });
+  const x = useSpring(
+    useTransform(dx, (v) => v * strength),
+    spring
+  );
+  const y = useSpring(
+    useTransform(dy, (v) => v * strength),
+    spring
+  );
+  const labelX = useSpring(
+    useTransform(dx, (v) => v * labelStrength),
+    spring
+  );
+  const labelY = useSpring(
+    useTransform(dy, (v) => v * labelStrength),
+    spring
+  );
+  const background = useMotionTemplate`radial-gradient(120px circle at ${px}px ${py}px, rgba(255,255,255,0.22), transparent 70%)`;
+  const handlePointerMove = (event) => {
+    onPointerMove?.(event);
+    if (reduceMotion || event.pointerType !== "mouse") return;
+    const rect = event.currentTarget.getBoundingClientRect();
+    const localX = event.clientX - rect.left;
+    const localY = event.clientY - rect.top;
+    dx.set(localX - rect.width / 2);
+    dy.set(localY - rect.height / 2);
+    px.set(localX);
+    py.set(localY);
+    glow.set(1);
+  };
+  const handlePointerLeave = (event) => {
+    onPointerLeave?.(event);
+    dx.set(0);
+    dy.set(0);
+    glow.set(0);
+  };
+  const Tag = href ? motion.a : motion.button;
+  const linkProps = href ? {
+    href,
+    target,
+    rel: rel ?? (target === "_blank" ? "noopener noreferrer" : void 0)
+  } : { type };
+  return /* @__PURE__ */ jsxs(
+    Tag,
+    {
+      ref,
+      ...linkProps,
+      style: reduceMotion ? void 0 : { x, y },
+      whileHover: reduceMotion ? void 0 : HOVER,
+      whileTap: PRESS,
+      transition: spring,
+      onPointerMove: handlePointerMove,
+      onPointerLeave: handlePointerLeave,
+      className: cn(
+        "relative isolate inline-flex cursor-pointer select-none items-center justify-center gap-2 overflow-hidden rounded-full font-medium",
+        "outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-zinc-950",
+        "disabled:pointer-events-none disabled:opacity-50",
+        VARIANTS[variant],
+        SIZES[size],
+        className
+      ),
+      ...props,
+      children: [
+        spotlight && !reduceMotion && /* @__PURE__ */ jsx(
+          motion.span,
+          {
+            "aria-hidden": true,
+            className: "pointer-events-none absolute inset-0 -z-10 mix-blend-soft-light",
+            style: { background, opacity: glow }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          motion.span,
+          {
+            className: "relative inline-flex items-center gap-2",
+            style: reduceMotion ? void 0 : { x: labelX, y: labelY },
+            children
+          }
+        )
+      ]
+    }
+  );
+});
+
+export {
+  MagneticButton
+};