motion-brew 0.0.0-stage → 0.1.1

package/dist/chunk-7IL5WRJR.js

@@ -0,0 +1,615 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/prism-carousel/prism-carousel.tsx
+import * as React from "react";
+import {
+  animate,
+  motion,
+  useAnimationFrame,
+  useMotionValue,
+  useMotionValueEvent,
+  useReducedMotion,
+  useTransform
+} from "motion/react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var CARD_W = 216;
+var CARD_H = 304;
+var GAP = 28;
+var STEP = CARD_W + GAP;
+var FLIP_PX = 150;
+var GLASS_PX = 230;
+var SPRING = {
+  type: "spring",
+  stiffness: 260,
+  damping: 32,
+  mass: 0.9
+};
+var DEFAULT_CARDS = [
+  {
+    label: "Uptime",
+    value: 99.98,
+    decimals: 2,
+    suffix: "%",
+    caption: "No incidents in the last 30 days.",
+    hues: ["#5ee7c4", "#3b82f6"]
+  },
+  {
+    label: "Health score",
+    value: 853,
+    caption: "Up 41 points since you turned on alerts.",
+    hues: ["#c084fc", "#fb7185"]
+  },
+  {
+    label: "Conversion",
+    value: 6.4,
+    decimals: 1,
+    suffix: "%",
+    caption: "Checkout changes are paying off.",
+    hues: ["#a3e635", "#14b8a6"]
+  },
+  {
+    label: "Latency",
+    value: 38,
+    suffix: " ms",
+    caption: "p95 across all regions this week.",
+    hues: ["#60a5fa", "#818cf8"]
+  },
+  {
+    label: "New signups",
+    value: 1204,
+    caption: "Best week since launch, mostly organic.",
+    hues: ["#fbbf24", "#f472b6"]
+  },
+  {
+    label: "NPS",
+    value: 72,
+    caption: "Teams love the new dashboard.",
+    hues: ["#f472b6", "#8b5cf6"]
+  }
+];
+var wrap = (k, n) => (k % n + n) % n;
+var format = (n, decimals = 0) => n.toLocaleString("en-US", {
+  minimumFractionDigits: decimals,
+  maximumFractionDigits: decimals
+});
+function Card({
+  card,
+  i,
+  slot,
+  boost,
+  flip,
+  x,
+  half,
+  active,
+  still,
+  onPick
+}) {
+  const n = useTransform(
+    x,
+    (v) => (slot * STEP + CARD_W / 2 + v - half) / Math.max(1, half)
+  );
+  const depth = useTransform(n, (v) => {
+    const fromEdge = half * (1 - Math.abs(v));
+    const t = Math.max(0, Math.min(1, (GLASS_PX - fromEdge) / (GLASS_PX - 40)));
+    return still ? 0 : t * t * (3 - 2 * t);
+  });
+  const spin = useMotionValue(0);
+  const spinning = React.useRef(false);
+  const lastN = React.useRef(null);
+  useMotionValueEvent(n, "change", (v) => {
+    const was = lastN.current;
+    lastN.current = v;
+    if (!flip || still || spinning.current || was === null) return;
+    const at = Math.max(0.2, 1 - FLIP_PX / Math.max(1, half));
+    const crossed = (line) => (was - line) * (v - line) < 0;
+    if (crossed(at) || crossed(-at)) {
+      spinning.current = true;
+      const dir = v < was ? 1 : -1;
+      void animate(spin, spin.get() + 180 * dir, {
+        duration: 0.9,
+        ease: [0.65, 0, 0.35, 1]
+      }).then(() => {
+        spinning.current = false;
+      });
+    }
+  });
+  const rotateY = useTransform(
+    [n, depth, spin],
+    ([v, d, t]) => -Math.sign(v) * d * 38 + t
+  );
+  const origin = useTransform(n, (v) => v >= 0 ? "0% 50%" : "100% 50%");
+  const back = useTransform(
+    rotateY,
+    (r) => Math.cos(r * Math.PI / 180) < 0 ? 1 : 0
+  );
+  const lift = useTransform(
+    spin,
+    (t) => 1 + 0.08 * Math.abs(Math.sin(Math.PI * t / 180))
+  );
+  const scaleY = useTransform(depth, (d) => 1 + 0.16 * d);
+  const pull = useTransform(
+    [n, depth],
+    ([v, d]) => Math.sign(v) * d * 14
+  );
+  const scale = lift;
+  const scaleX = useTransform(depth, (d) => 1 + 0.04 * d);
+  const filter = useTransform(
+    depth,
+    (d) => still || d <= 0 ? "none" : `saturate(${(1 + d * boost).toFixed(2)}) brightness(${(1 + d * 0.06).toFixed(3)}) blur(${(d * 2.5).toFixed(2)}px)`
+  );
+  const a = depth;
+  const face = useTransform(a, (d) => 1 - d * 0.45);
+  const value = card.value ?? 0;
+  const count = useMotionValue(value);
+  const shown = useTransform(count, (v) => format(v, card.decimals));
+  React.useEffect(() => {
+    if (!active || card.image) return;
+    if (still) {
+      count.set(value);
+      return;
+    }
+    count.set(value * 0.6);
+    const c = animate(count, value, {
+      duration: 1.1,
+      ease: [0.16, 1, 0.3, 1]
+    });
+    return () => c.stop();
+  }, [active, value, card.image, count, still]);
+  return /* @__PURE__ */ jsxs(
+    motion.button,
+    {
+      type: "button",
+      "aria-label": card.image ? card.label : `${card.label}: ${format(value, card.decimals)}${card.suffix ?? ""}`,
+      "aria-current": active || void 0,
+      tabIndex: -1,
+      onClick: onPick,
+      style: {
+        width: CARD_W,
+        height: CARD_H,
+        rotateY,
+        x: pull,
+        scale,
+        scaleX,
+        scaleY,
+        filter,
+        transformPerspective: 760,
+        transformOrigin: origin
+      },
+      className: "relative shrink-0 cursor-pointer overflow-hidden rounded-[18px] bg-white text-left text-[#242423] outline-none shadow-[0_1px_2px_rgba(0,0,0,0.04),0_18px_40px_-20px_rgba(0,0,0,0.28)]",
+      children: [
+        card.image ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: card.image,
+              alt: card.label,
+              draggable: false,
+              className: "absolute inset-0 size-full object-cover"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              className: "pointer-events-none absolute inset-0 rounded-[inherit] ring-1 ring-inset ring-white/25"
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            motion.div,
+            {
+              style: { opacity: face },
+              className: "absolute inset-x-2.5 bottom-2.5 rounded-xl bg-white/70 px-3 py-2 shadow-[0_4px_16px_-8px_rgba(0,0,0,0.3)] ring-1 ring-white/60 backdrop-blur-md",
+              children: [
+                /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-semibold tracking-tight", children: card.label }),
+                card.caption && /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-zinc-600", children: card.caption })
+              ]
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              "aria-hidden": true,
+              className: "absolute left-1/2 top-[44%] size-40 -translate-x-1/2 -translate-y-1/2 rounded-full blur-[22px]",
+              style: {
+                background: `radial-gradient(circle at 35% 35%, ${card.hues?.[0] ?? "#c084fc"}, ${card.hues?.[1] ?? "#60a5fa"} 70%)`
+              },
+              animate: still ? void 0 : { scale: [1, 1.12, 1], rotate: [0, 40, 0] },
+              transition: {
+                duration: 6 + i,
+                repeat: Infinity,
+                ease: "easeInOut"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": true,
+              className: "absolute left-1/2 top-[44%] size-32 -translate-x-1/2 -translate-y-1/2 rounded-full border border-white/70",
+              style: {
+                transform: "translate(-50%, -50%) rotateX(62deg) rotateZ(-18deg)"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            motion.div,
+            {
+              style: { opacity: face },
+              className: "relative flex h-full flex-col p-4",
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold tracking-tight", children: card.label }),
+                  /* @__PURE__ */ jsx("span", { className: "rounded-full bg-white/80 px-2 py-0.5 text-xs font-medium text-zinc-500 ring-1 ring-[#242423]/[0.06]", children: "Weekly" })
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col items-center justify-center pb-2", children: /* @__PURE__ */ jsxs("span", { className: "flex items-baseline text-[32px] font-semibold leading-none tracking-tight text-white drop-shadow-[0_1px_8px_rgba(0,0,0,0.18)]", children: [
+                  /* @__PURE__ */ jsx(motion.span, { className: "tabular-nums", children: shown }),
+                  card.suffix && /* @__PURE__ */ jsx("span", { className: "ml-0.5 text-lg", children: card.suffix.trim() })
+                ] }) }),
+                /* @__PURE__ */ jsx("p", { className: "text-center text-xs leading-4 text-zinc-500", children: card.caption })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          motion.span,
+          {
+            "aria-hidden": true,
+            style: { opacity: back },
+            className: "pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit] bg-white",
+            children: /* @__PURE__ */ jsx("span", { className: "absolute inset-0 block -scale-x-100", children: card.image ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: card.image,
+                  alt: "",
+                  draggable: false,
+                  className: "absolute inset-0 size-full object-cover"
+                }
+              ),
+              /* @__PURE__ */ jsxs("span", { className: "absolute inset-x-2.5 bottom-2.5 rounded-xl bg-white/70 px-3 py-2 ring-1 ring-white/60 backdrop-blur-md", children: [
+                /* @__PURE__ */ jsx("span", { className: "block truncate text-sm font-semibold tracking-tight", children: card.label }),
+                card.caption && /* @__PURE__ */ jsx("span", { className: "block truncate text-xs text-zinc-600", children: card.caption })
+              ] })
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "absolute left-1/2 top-[44%] size-40 -translate-x-1/2 -translate-y-1/2 rounded-full blur-[22px]",
+                  style: {
+                    background: `radial-gradient(circle at 35% 35%, ${card.hues?.[0] ?? "#c084fc"}, ${card.hues?.[1] ?? "#60a5fa"} 70%)`
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "absolute left-4 top-4 text-sm font-semibold tracking-tight", children: card.label }),
+              /* @__PURE__ */ jsxs("span", { className: "absolute inset-x-0 top-1/2 -translate-y-1/2 text-center text-[32px] font-semibold leading-none tracking-tight text-white", children: [
+                format(value, card.decimals),
+                card.suffix?.trim()
+              ] })
+            ] }) })
+          }
+        )
+      ]
+    }
+  );
+}
+var FADE = "#000 0%, rgba(0,0,0,0.94) 18%, rgba(0,0,0,0.8) 34%, rgba(0,0,0,0.6) 48%, rgba(0,0,0,0.4) 61%, rgba(0,0,0,0.22) 73%, rgba(0,0,0,0.1) 84%, rgba(0,0,0,0.03) 93%, transparent 100%";
+function Lens({
+  side,
+  x,
+  slots,
+  width,
+  blur,
+  saturation,
+  still
+}) {
+  const near = useTransform(x, (v) => {
+    let best = 0;
+    for (const k of slots) {
+      const c = k * STEP + CARD_W / 2 + v;
+      const d = side === "left" ? c - 40 : width - 40 - c;
+      best = Math.max(best, Math.exp(-((d / 150) ** 2)));
+    }
+    return still ? 0.3 : best;
+  });
+  const reach = useTransform(near, (p) => 130 + p * 110);
+  const tall = useTransform(near, (p) => 120 + p * 30);
+  const at = side === "left" ? "0%" : "100%";
+  const mask = useTransform(
+    [reach, tall],
+    ([r, t]) => `radial-gradient(ellipse ${r}px ${t}% at ${at} 50%, ${FADE})`
+  );
+  const soft = useTransform(
+    [reach, tall],
+    ([r, t]) => `radial-gradient(ellipse ${r * 1.3}px ${t + 14}% at ${at} 50%, ${FADE})`
+  );
+  const sat = saturation;
+  const softBlur = blur * 0.35;
+  const softSat = 1 + (saturation - 1) * 0.4;
+  const dir = side === "left" ? "90deg" : "270deg";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        "aria-hidden": true,
+        className: "pointer-events-none absolute inset-y-0 z-10",
+        style: {
+          [side]: 0,
+          width: 420,
+          WebkitMaskImage: soft,
+          maskImage: soft,
+          backdropFilter: `blur(${softBlur}px) saturate(${softSat})`,
+          WebkitBackdropFilter: `blur(${softBlur}px) saturate(${softSat})`
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        "aria-hidden": true,
+        className: "pointer-events-none absolute inset-y-0 z-10",
+        style: {
+          [side]: 0,
+          width: 340,
+          WebkitMaskImage: mask,
+          maskImage: mask,
+          backdropFilter: `blur(${blur}px) saturate(${sat}) brightness(1.05) contrast(1.04)`,
+          WebkitBackdropFilter: `blur(${blur}px) saturate(${sat}) brightness(1.05) contrast(1.04)`,
+          // A sheen across the glass, brightest at the edge.
+          background: `linear-gradient(${dir}, rgba(255,255,255,0.42), rgba(255,255,255,0.12) 38%, rgba(255,255,255,0) 70%)`
+        }
+      }
+    )
+  ] });
+}
+var PrismCarousel = React.forwardRef(function PrismCarousel2({
+  cards = DEFAULT_CARDS,
+  defaultIndex = 1,
+  autoplay = true,
+  speed = 80,
+  flip = false,
+  blur = 26,
+  saturation = 2.9,
+  className
+}, ref) {
+  const still = !!useReducedMotion();
+  const stage = React.useRef(null);
+  const [width, setWidth] = React.useState(720);
+  const n = cards.length;
+  const [pos, setPos] = React.useState(wrap(defaultIndex, n));
+  const index = wrap(pos, n);
+  const [touched, setTouched] = React.useState(false);
+  const [hover, setHover] = React.useState(false);
+  const dragged = React.useRef(false);
+  const half = width / 2;
+  const target = (k) => half - (k * STEP + CARD_W / 2);
+  const x = useMotionValue(target(pos));
+  const wheel = React.useRef(0);
+  React.useImperativeHandle(ref, () => stage.current);
+  React.useLayoutEffect(() => {
+    const el = stage.current;
+    if (!el) return;
+    const ro = new ResizeObserver(() => setWidth(el.clientWidth));
+    ro.observe(el);
+    setWidth(el.clientWidth);
+    return () => ro.disconnect();
+  }, []);
+  const posRef = React.useRef(pos);
+  posRef.current = pos;
+  useMotionValueEvent(x, "change", (v) => {
+    const k = Math.round((half - CARD_W / 2 - v) / STEP);
+    if (k !== posRef.current) setPos(k);
+  });
+  const lastHalf = React.useRef(half);
+  React.useEffect(() => {
+    x.set(x.get() + (half - lastHalf.current));
+    lastHalf.current = half;
+  }, [half, x]);
+  const glide = React.useRef(null);
+  const snap = (k) => {
+    glide.current?.stop();
+    if (still) {
+      x.set(target(k));
+      return Promise.resolve();
+    }
+    glide.current = animate(x, target(k), SPRING);
+    return glide.current.then(() => {
+    });
+  };
+  const flow = useMotionValue(0);
+  const pace = !autoplay || still || touched ? 0 : hover ? 0.3 : 1;
+  React.useEffect(() => {
+    const c = animate(flow, pace, { duration: 0.6, ease: "easeOut" });
+    return () => c.stop();
+  }, [pace, flow]);
+  const fling = React.useRef(0);
+  useAnimationFrame((_, delta) => {
+    if (dragged.current) return;
+    const dt = Math.min(delta, 100) / 1e3;
+    const f = flow.get();
+    fling.current *= Math.exp(-dt / 0.35);
+    if (Math.abs(fling.current) < 1) fling.current = 0;
+    const move = fling.current - speed * f;
+    if (move !== 0) x.set(x.get() + move * dt);
+  });
+  const turn = React.useRef(0);
+  const go = (k) => {
+    const me = ++turn.current;
+    fling.current = 0;
+    flow.set(0);
+    setTouched(true);
+    setPos(k);
+    void snap(k).then(() => {
+      if (turn.current === me) setTouched(false);
+    });
+  };
+  const show = (i) => {
+    let d = wrap(i - index, n);
+    if (d > n / 2) d -= n;
+    go(pos + d);
+  };
+  const reachSlots = Math.ceil(half / STEP) + 2;
+  const slots = Array.from(
+    { length: reachSlots * 2 + 1 },
+    (_, j) => pos - reachSlots + j
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: stage,
+      role: "region",
+      "aria-roledescription": "carousel",
+      "aria-label": "Cards",
+      tabIndex: 0,
+      onPointerEnter: (e) => e.pointerType === "mouse" && setHover(true),
+      onPointerLeave: (e) => e.pointerType === "mouse" && setHover(false),
+      onKeyDown: (e) => {
+        if (e.key === "ArrowRight") {
+          e.preventDefault();
+          go(pos + 1);
+        } else if (e.key === "ArrowLeft") {
+          e.preventDefault();
+          go(pos - 1);
+        }
+      },
+      onWheel: (e) => {
+        if (Math.abs(e.deltaX) <= Math.abs(e.deltaY)) return;
+        wheel.current += e.deltaX;
+        if (Math.abs(wheel.current) > 60) {
+          go(pos + Math.sign(wheel.current));
+          wheel.current = 0;
+        }
+      },
+      className: cn(
+        "relative isolate h-full min-h-[400px] w-full select-none overflow-hidden outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-zinc-400",
+        "bg-[linear-gradient(180deg,#f3f3f1_0%,#ececea_55%,#e4e4e1_100%)]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": true,
+            className: "pointer-events-none absolute inset-x-0 bottom-0 h-1/3 bg-[linear-gradient(180deg,transparent,rgba(255,255,255,0.65))]"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            drag: still ? false : "x",
+            dragElastic: 0.14,
+            dragMomentum: false,
+            onDragStart: () => {
+              dragged.current = true;
+              turn.current++;
+              glide.current?.stop();
+              fling.current = 0;
+              flow.set(0);
+              setTouched(true);
+            },
+            onDragEnd: (_, info) => {
+              window.setTimeout(() => dragged.current = false, 0);
+              requestAnimationFrame(
+                () => setHover(!!stage.current?.matches(":hover"))
+              );
+              if (autoplay && !still) {
+                fling.current = Math.max(-2400, Math.min(2400, info.velocity.x));
+                setTouched(false);
+                return;
+              }
+              const projected = x.get() + info.velocity.x * 0.22;
+              go(Math.round((half - CARD_W / 2 - projected) / STEP));
+            },
+            style: { x },
+            className: "absolute inset-y-0 left-0 w-full cursor-grab active:cursor-grabbing",
+            children: slots.map((k) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "absolute top-1/2",
+                style: { left: k * STEP, marginTop: -CARD_H / 2 },
+                children: /* @__PURE__ */ jsx(
+                  Card,
+                  {
+                    card: cards[wrap(k, n)],
+                    i: wrap(k, n),
+                    slot: k,
+                    boost: (saturation - 1) * 0.85,
+                    flip,
+                    x,
+                    half,
+                    active: k === pos,
+                    still,
+                    onPick: () => {
+                      if (!dragged.current && k !== pos) go(k);
+                    }
+                  }
+                )
+              },
+              k
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Lens,
+          {
+            side: "left",
+            x,
+            slots,
+            width,
+            blur,
+            saturation,
+            still
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Lens,
+          {
+            side: "right",
+            x,
+            slots,
+            width,
+            blur,
+            saturation,
+            still
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "absolute bottom-4 left-1/2 z-20 flex -translate-x-1/2 items-center gap-1.5 rounded-full bg-white/50 px-2.5 py-2 ring-1 ring-white/70 backdrop-blur-md", children: cards.map((c, i) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": `Show ${c.label}`,
+            "aria-current": i === index || void 0,
+            onClick: () => show(i),
+            className: "relative grid h-2 cursor-pointer place-items-center outline-none focus-visible:ring-2 focus-visible:ring-zinc-400",
+            children: /* @__PURE__ */ jsx(
+              motion.span,
+              {
+                className: "block h-1.5 rounded-full bg-[#242423]",
+                animate: {
+                  width: i === index ? 18 : 6,
+                  opacity: i === index ? 0.9 : 0.25
+                },
+                transition: still ? { duration: 0 } : SPRING
+              }
+            )
+          },
+          c.label + i
+        )) }),
+        /* @__PURE__ */ jsxs("p", { className: "sr-only", "aria-live": "polite", children: [
+          cards[index].label,
+          ", ",
+          index + 1,
+          " of ",
+          cards.length
+        ] })
+      ]
+    }
+  );
+});
+
+export {
+  PrismCarousel
+};