motion-brew 0.0.0-stage → 0.1.0

package/dist/chunk-OVEBMZHA.js

@@ -0,0 +1,573 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/liquid-metal-card/liquid-metal-card.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 W = 320;
+var H = 380;
+var GLIDE = [0.22, 1, 0.36, 1];
+var BANDS = [
+  "#2e3136",
+  "#040405",
+  "#1b1d21",
+  "#000000",
+  "#16181b",
+  "#020203",
+  "#26292d",
+  "#000000",
+  "#1d1f23"
+];
+var photo = (id) => `https://images.unsplash.com/photo-${id}?w=640&h=760&fit=crop&q=80`;
+function vein(length, seed) {
+  const steps = 5;
+  let x = 0;
+  let y = 0;
+  let a = 0;
+  let d = "M0 0";
+  const rand = (n) => {
+    const v = Math.sin(seed * 12.9898 + n * 78.233) * 43758.5453;
+    return v - Math.floor(v);
+  };
+  for (let i = 1; i <= steps; i++) {
+    const seg = length / steps;
+    a += (rand(i) - 0.5) * 1.1;
+    const cx = x + Math.cos(a + (rand(i + 9) - 0.5)) * seg * 0.6;
+    const cy = y + Math.sin(a + (rand(i + 9) - 0.5)) * seg * 0.6;
+    x += Math.cos(a) * seg;
+    y += Math.sin(a) * seg;
+    d += ` Q${cx.toFixed(1)} ${cy.toFixed(1)} ${x.toFixed(1)} ${y.toFixed(1)}`;
+  }
+  return d;
+}
+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 LiquidMetalCard = React.forwardRef(function LiquidMetalCard2({
+  src = photo("1504893524553-b855bce32c67"),
+  revealSrc = photo("1500534314209-a25ddb2bd429"),
+  title = "Daylight",
+  revealTitle = "Golden hour",
+  subtitle = "Hover the picture and watch it melt over.",
+  tendrils = 9,
+  speed = 2,
+  className
+}, ref) {
+  const still = !!useReducedMotion();
+  const uid = React.useId().replace(/:/g, "");
+  const frame = React.useRef(null);
+  const svg = React.useRef(null);
+  const [shown, setShown] = React.useState(false);
+  const count = Math.max(0, Math.min(16, tendrils));
+  const veins = React.useMemo(
+    () => Array.from(
+      { length: count },
+      (_, i) => vein(170 + i * 37 % 80, i + 1)
+    ),
+    [count]
+  );
+  const state = React.useRef({
+    active: false,
+    full: false,
+    living: [],
+    timeline: null
+  });
+  const { contextSafe } = useGSAP(
+    () => {
+      gsap.set("[data-mover]", { x: W + 6, y: H + 6 });
+      gsap.set("[data-body], [data-core], [data-lump], [data-bead]", {
+        attr: { r: 0 }
+      });
+      gsap.set("[data-vein]", {
+        strokeDasharray: 1,
+        strokeDashoffset: 1,
+        attr: { "stroke-width": 0 }
+      });
+    },
+    { scope: frame, dependencies: [count, still] }
+  );
+  const stopLiving = () => {
+    const s = state.current;
+    s.living.forEach((a) => a.kill());
+    s.living = [];
+  };
+  const POUR = "power2.inOut";
+  const cornerNear = (e) => {
+    if (!e || !frame.current) return { x: W + 6, y: H + 6 };
+    const r = frame.current.getBoundingClientRect();
+    const right = e.clientX - r.left > r.width / 2;
+    const bottom = e.clientY - r.top > r.height / 2;
+    return { x: right ? W + 6 : -6, y: bottom ? H + 6 : -6 };
+  };
+  const melt = contextSafe(
+    (from = { x: W + 6, y: H + 6 }) => {
+      const s = state.current;
+      if (s.active) return;
+      s.active = true;
+      s.full = true;
+      setShown(true);
+      if (still) {
+        gsap.to("[data-reveal]", { opacity: 1, duration: 0.4 });
+        return;
+      }
+      stopLiving();
+      s.timeline?.kill();
+      const root = svg.current;
+      const groups = gsap.utils.toArray("[data-vein-group]", root);
+      const paths = gsap.utils.toArray("[data-vein]", root);
+      const beads = gsap.utils.toArray("[data-bead]", root);
+      const lumps = gsap.utils.toArray("[data-lump]", root);
+      const big = Math.hypot(W, H) * 1.18;
+      const cx = from.x;
+      const cy = from.y;
+      const inward = Math.atan2(H / 2 - cy, W / 2 - cx) * 180 / Math.PI;
+      gsap.set("[data-mover]", { x: cx, y: cy });
+      gsap.set("[data-reveal]", { opacity: 1 });
+      const tl = gsap.timeline();
+      s.timeline = tl;
+      tl.timeScale(Math.max(0.2, speed));
+      groups.forEach((g, i) => {
+        const angle = inward - 41 + i / Math.max(1, groups.length - 1) * 82 + gsap.utils.random(-7, 7);
+        gsap.set(g, {
+          rotation: angle,
+          scale: gsap.utils.random(1.35, 1.85),
+          transformOrigin: "0 0"
+        });
+        const path = paths[i];
+        const bead = beads[i];
+        const len = path.getTotalLength();
+        const run = { p: 0 };
+        const width = gsap.utils.random(12, 17);
+        tl.to(
+          run,
+          {
+            p: 1,
+            duration: gsap.utils.random(1, 1.35),
+            ease: "power2.out",
+            onUpdate: () => {
+              const pt = path.getPointAtLength(run.p * len);
+              path.style.strokeDashoffset = String(1 - run.p);
+              path.setAttribute(
+                "stroke-width",
+                String(width * Math.min(1, run.p * 3))
+              );
+              bead.setAttribute("cx", pt.x.toFixed(1));
+              bead.setAttribute("cy", pt.y.toFixed(1));
+              bead.setAttribute(
+                "r",
+                String(width * 0.75 * Math.min(1, run.p * 2.5))
+              );
+            }
+          },
+          0.02 + i * 0.04
+        );
+      });
+      tl.to("[data-body]", { attr: { r: big }, duration: 2, ease: POUR }, 0.3);
+      lumps.forEach((l, i) => {
+        const a = (inward - 32 + i * 16) * Math.PI / 180;
+        const d = gsap.utils.random(60, 110);
+        tl.fromTo(
+          l,
+          { attr: { cx: 0, cy: 0, r: 0 } },
+          {
+            attr: {
+              cx: Math.cos(a) * d,
+              cy: Math.sin(a) * d,
+              r: gsap.utils.random(46, 70)
+            },
+            duration: 0.9,
+            ease: "elastic.out(1, 0.5)"
+          },
+          0.35 + i * 0.07
+        );
+      });
+      tl.to(
+        "[data-core]",
+        { attr: { r: big }, duration: 1.9, ease: POUR },
+        0.85
+      );
+      tl.fromTo(
+        "[data-reveal-image]",
+        {
+          scale: 1.12,
+          transformOrigin: `${cx > W / 2 ? 100 : 0}% ${cy > H / 2 ? 100 : 0}%`
+        },
+        { scale: 1, duration: 1.8, ease: "power3.out" },
+        0.85
+      );
+      s.living.push(
+        gsap.fromTo(
+          "[data-noise]",
+          { attr: { baseFrequency: 0.01 } },
+          {
+            attr: { baseFrequency: 0.02 },
+            duration: 1.4,
+            ease: "sine.inOut",
+            yoyo: true,
+            repeat: -1
+          }
+        ),
+        gsap.fromTo(
+          "[data-warp]",
+          { attr: { scale: 10 } },
+          {
+            attr: { scale: 24 },
+            duration: 0.9,
+            ease: "sine.inOut",
+            yoyo: true,
+            repeat: -1
+          }
+        ),
+        gsap.fromTo(
+          "[data-metal]",
+          { attr: { gradientTransform: `rotate(-18 ${W / 2} ${H / 2})` } },
+          {
+            attr: { gradientTransform: `rotate(22 ${W / 2} ${H / 2})` },
+            duration: 1.8,
+            ease: "sine.inOut",
+            yoyo: true,
+            repeat: -1
+          }
+        )
+      );
+    }
+  );
+  const retract = contextSafe(() => {
+    const s = state.current;
+    if (!s.active) return;
+    s.active = false;
+    s.full = false;
+    setShown(false);
+    if (still) {
+      gsap.to("[data-reveal]", { opacity: 0, duration: 0.3 });
+      return;
+    }
+    s.timeline?.kill();
+    const root = svg.current;
+    const paths = gsap.utils.toArray("[data-vein]", root);
+    const beads = gsap.utils.toArray("[data-bead]", root);
+    const tl = gsap.timeline({ onComplete: stopLiving });
+    s.timeline = tl;
+    tl.timeScale(Math.max(0.2, speed));
+    tl.to(
+      "[data-core]",
+      { attr: { r: 0 }, duration: 0.9, ease: "power2.inOut" },
+      0
+    );
+    tl.to(
+      "[data-reveal-image]",
+      { scale: 1.08, duration: 0.9, ease: "power2.inOut" },
+      0
+    );
+    tl.to(
+      "[data-body]",
+      { attr: { r: 0 }, duration: 1.1, ease: "power2.inOut" },
+      0.25
+    );
+    tl.to(
+      "[data-lump]",
+      { attr: { r: 0, cx: 0, cy: 0 }, duration: 0.6, ease: "power3.in" },
+      0.1
+    );
+    paths.forEach((path, i) => {
+      const bead = beads[i];
+      const len = path.getTotalLength();
+      const run = { p: 1 - Number(path.style.strokeDashoffset || 1) };
+      const width = Number(path.getAttribute("stroke-width")) || 14;
+      tl.to(
+        run,
+        {
+          p: 0,
+          duration: 0.5,
+          ease: "power3.in",
+          onUpdate: () => {
+            const pt = path.getPointAtLength(run.p * len);
+            path.style.strokeDashoffset = String(1 - run.p);
+            path.setAttribute(
+              "stroke-width",
+              String(width * Math.min(1, run.p * 3))
+            );
+            bead.setAttribute("cx", pt.x.toFixed(1));
+            bead.setAttribute("cy", pt.y.toFixed(1));
+            bead.setAttribute(
+              "r",
+              String(width * 0.75 * Math.min(1, run.p * 2.5))
+            );
+          }
+        },
+        0.05 + i * 0.02
+      );
+    });
+  });
+  const goo = `${uid}-goo`;
+  const wet = `${uid}-wet`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "w-[344px] max-w-full rounded-3xl bg-white p-3 text-zinc-900 shadow-[0_1px_2px_rgba(0,0,0,0.04),0_12px_32px_-16px_rgba(0,0,0,0.18)] dark:bg-zinc-900 dark:text-zinc-100",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: frame,
+            role: "button",
+            tabIndex: 0,
+            "aria-pressed": shown,
+            "aria-label": `${title}. Reveal ${revealTitle}`,
+            onPointerEnter: (e) => e.pointerType === "mouse" && melt(cornerNear(e)),
+            onPointerLeave: (e) => e.pointerType === "mouse" && retract(),
+            onClick: (e) => state.current.active ? retract() : melt(cornerNear(e)),
+            onKeyDown: (e) => {
+              if (e.key !== "Enter" && e.key !== " ") return;
+              e.preventDefault();
+              if (state.current.active) retract();
+              else melt();
+            },
+            className: "relative aspect-[320/380] w-full cursor-pointer overflow-hidden rounded-2xl bg-zinc-200 outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 focus-visible:ring-offset-2 dark:bg-zinc-800",
+            children: [
+              /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src,
+                  alt: title,
+                  draggable: false,
+                  className: "absolute inset-0 size-full select-none object-cover"
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "svg",
+                {
+                  ref: svg,
+                  viewBox: `0 0 ${W} ${H}`,
+                  preserveAspectRatio: "none",
+                  className: "absolute inset-0 size-full",
+                  "aria-hidden": true,
+                  children: [
+                    /* @__PURE__ */ jsxs("defs", { children: [
+                      /* @__PURE__ */ jsxs("filter", { id: goo, x: "-30%", y: "-30%", width: "160%", height: "160%", children: [
+                        /* @__PURE__ */ jsx(
+                          "feTurbulence",
+                          {
+                            "data-noise": true,
+                            type: "fractalNoise",
+                            baseFrequency: "0.011",
+                            numOctaves: "1",
+                            seed: "7",
+                            result: "noise"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "feDisplacementMap",
+                          {
+                            in: "SourceGraphic",
+                            in2: "noise",
+                            "data-warp": true,
+                            scale: "14",
+                            xChannelSelector: "R",
+                            yChannelSelector: "G",
+                            result: "torn"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("feGaussianBlur", { in: "torn", stdDeviation: "8", result: "blur" }),
+                        /* @__PURE__ */ jsx(
+                          "feColorMatrix",
+                          {
+                            in: "blur",
+                            values: "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 30 -12"
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ jsxs("filter", { id: wet, x: "-30%", y: "-30%", width: "160%", height: "160%", children: [
+                        /* @__PURE__ */ jsx(
+                          "feGaussianBlur",
+                          {
+                            in: "SourceAlpha",
+                            stdDeviation: "4",
+                            result: "height"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "feDiffuseLighting",
+                          {
+                            in: "height",
+                            surfaceScale: "5",
+                            diffuseConstant: "1.05",
+                            lightingColor: "#ffffff",
+                            result: "shade",
+                            children: /* @__PURE__ */ jsx("feDistantLight", { azimuth: "235", elevation: "48" })
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "feComposite",
+                          {
+                            in: "SourceGraphic",
+                            in2: "shade",
+                            operator: "arithmetic",
+                            k1: "1.15",
+                            k2: "0",
+                            k3: "0",
+                            k4: "0",
+                            result: "shaded"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "feSpecularLighting",
+                          {
+                            in: "height",
+                            surfaceScale: "6",
+                            specularConstant: "1.5",
+                            specularExponent: "42",
+                            lightingColor: "#ffffff",
+                            result: "hot",
+                            children: /* @__PURE__ */ jsx("fePointLight", { x: "-40", y: "-160", z: "300" })
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "feSpecularLighting",
+                          {
+                            in: "height",
+                            surfaceScale: "6",
+                            specularConstant: "0.7",
+                            specularExponent: "18",
+                            lightingColor: "#cfe3ff",
+                            result: "rim",
+                            children: /* @__PURE__ */ jsx("fePointLight", { x: "420", y: "520", z: "160" })
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "feComposite",
+                          {
+                            in: "hot",
+                            in2: "rim",
+                            operator: "arithmetic",
+                            k2: "1",
+                            k3: "1",
+                            result: "lights"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "feComposite",
+                          {
+                            in: "lights",
+                            in2: "SourceAlpha",
+                            operator: "in",
+                            result: "shine"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "feComposite",
+                          {
+                            in: "shaded",
+                            in2: "shine",
+                            operator: "arithmetic",
+                            k1: "0",
+                            k2: "1",
+                            k3: "1",
+                            k4: "0"
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ jsx(
+                        "linearGradient",
+                        {
+                          id: `${uid}-metal`,
+                          "data-metal": true,
+                          gradientUnits: "userSpaceOnUse",
+                          x1: "0",
+                          y1: "0",
+                          x2: W,
+                          y2: H,
+                          children: BANDS.map((c, i, all) => /* @__PURE__ */ jsx("stop", { offset: i / (all.length - 1), stopColor: c }, i))
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "mask",
+                        {
+                          id: `${uid}-mask`,
+                          maskUnits: "userSpaceOnUse",
+                          x: "0",
+                          y: "0",
+                          width: W,
+                          height: H,
+                          children: /* @__PURE__ */ jsx("g", { filter: `url(#${goo})`, children: /* @__PURE__ */ jsx("g", { "data-mover": true, "data-core-mover": true, children: /* @__PURE__ */ jsx("circle", { "data-core": true, cx: "0", cy: "0", r: "0", fill: "#fff" }) }) })
+                        }
+                      )
+                    ] }),
+                    !still && /* @__PURE__ */ jsx("g", { filter: `url(#${wet})`, children: /* @__PURE__ */ jsxs(
+                      "g",
+                      {
+                        filter: `url(#${goo})`,
+                        fill: `url(#${uid}-metal)`,
+                        stroke: `url(#${uid}-metal)`,
+                        strokeLinecap: "round",
+                        children: [
+                          /* @__PURE__ */ jsxs("g", { "data-mover": true, children: [
+                            /* @__PURE__ */ jsx("circle", { "data-body": true, cx: "0", cy: "0", r: "0" }),
+                            Array.from({ length: 5 }, (_, i) => /* @__PURE__ */ jsx("circle", { "data-lump": true, cx: "0", cy: "0", r: "0" }, i))
+                          ] }),
+                          veins.map((d, i) => /* @__PURE__ */ jsxs("g", { "data-mover": true, "data-vein-group": true, children: [
+                            /* @__PURE__ */ jsx("path", { "data-vein": true, d, fill: "none", pathLength: 1 }),
+                            /* @__PURE__ */ jsx("circle", { "data-bead": true, cx: "0", cy: "0", r: "0", stroke: "none" })
+                          ] }, i))
+                        ]
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx(
+                      "g",
+                      {
+                        "data-reveal": true,
+                        mask: still ? void 0 : `url(#${uid}-mask)`,
+                        style: { opacity: still ? 0 : 1 },
+                        children: /* @__PURE__ */ jsx(
+                          "image",
+                          {
+                            "data-reveal-image": true,
+                            href: revealSrc,
+                            x: "0",
+                            y: "0",
+                            width: W,
+                            height: H,
+                            preserveAspectRatio: "xMidYMid slice"
+                          }
+                        )
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "px-2 pb-1 pt-4", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-base font-semibold tracking-tight", children: /* @__PURE__ */ jsx(Rolling, { text: shown ? revealTitle : title, still }) }),
+          /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-sm text-zinc-500 dark:text-zinc-400", children: subtitle })
+        ] })
+      ]
+    }
+  );
+});
+
+export {
+  LiquidMetalCard
+};