motion-brew 0.0.0-stage → 0.1.1

package/dist/chunk-RZ2UCZ3C.js

@@ -0,0 +1,212 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/blur-accordion/blur-accordion.tsx
+import * as React from "react";
+import {
+  animate,
+  motion,
+  useMotionValue,
+  useMotionValueEvent,
+  useReducedMotion,
+  useVelocity
+} from "motion/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_ITEMS = [
+  {
+    id: "install",
+    title: "How do I add a component?",
+    content: "Copy the file into your project, or install the package and import it. Each one only needs Motion or GSAP, plus a small cn() helper."
+  },
+  {
+    id: "motion",
+    title: "Does it respect reduced motion?",
+    content: "Yes. Every component reads the system setting and swaps travel, blur and springs for instant changes, so nothing moves that does not have to."
+  },
+  {
+    id: "license",
+    title: "Can I use it in client work?",
+    content: "Yes. It is free and open source under the MIT license, for personal and commercial projects alike."
+  },
+  {
+    id: "style",
+    title: "How do I change the style?",
+    content: "Everything is plain Tailwind. Pass a className to restyle the shell, or edit the copied file directly. Nothing is locked away."
+  }
+];
+var MASS = 1;
+var critical = (k) => 2 * Math.sqrt(k * MASS);
+var PANEL_CONTENT = {
+  closed: { opacity: 0, y: -6, filter: "blur(4px)" },
+  open: { opacity: 1, y: 0, filter: "blur(0px)" }
+};
+function Row({ item, open, onToggle, blur, stiffness, still, uid, headerRef }) {
+  const filterId = `${uid}-blur-${item.id}`;
+  const headerId = `${uid}-h-${item.id}`;
+  const panelId = `${uid}-p-${item.id}`;
+  const inner = React.useRef(null);
+  const panel = React.useRef(null);
+  const blurNode = React.useRef(null);
+  const placed = React.useRef(false);
+  const height = useMotionValue(0);
+  const speed = useVelocity(height);
+  useMotionValueEvent(speed, "change", (v) => {
+    const sd = blur > 0 && !still ? Math.min(blur, Math.abs(v) / 110) : 0;
+    blurNode.current?.setAttribute("stdDeviation", `0 ${sd.toFixed(2)}`);
+    if (panel.current) panel.current.style.filter = sd > 0.05 ? `url(#${filterId})` : "none";
+  });
+  React.useLayoutEffect(() => {
+    const target = open ? inner.current?.offsetHeight ?? 0 : 0;
+    if (!placed.current || still) {
+      height.set(target);
+      placed.current = true;
+      return;
+    }
+    const controls = animate(height, target, {
+      type: "spring",
+      stiffness,
+      damping: critical(stiffness) * 0.92,
+      mass: MASS
+    });
+    return () => controls.stop();
+  }, [open, still, stiffness, height]);
+  React.useEffect(() => {
+    const el = inner.current;
+    if (!el) return;
+    const ro = new ResizeObserver(() => {
+      if (open && Math.abs(speed.get()) < 1) height.set(el.offsetHeight);
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [open, height, speed]);
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      initial: false,
+      animate: open ? "open" : "closed",
+      className: cn(
+        "rounded-[18px] transition-colors duration-300",
+        open ? "bg-[#242423]/[0.045] dark:bg-white/[0.06]" : "bg-transparent"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("svg", { "aria-hidden": true, className: "absolute size-0", children: /* @__PURE__ */ jsx("filter", { id: filterId, x: "-5%", y: "-20%", width: "110%", height: "140%", children: /* @__PURE__ */ jsx("feGaussianBlur", { ref: blurNode, stdDeviation: "0 0" }) }) }),
+        /* @__PURE__ */ jsx("h3", { className: "m-0", children: /* @__PURE__ */ jsxs(
+          motion.button,
+          {
+            ref: headerRef,
+            type: "button",
+            id: headerId,
+            "aria-expanded": open,
+            "aria-controls": panelId,
+            onClick: onToggle,
+            whileTap: still ? void 0 : { scale: 0.985 },
+            className: cn(
+              "group flex w-full cursor-pointer items-center justify-between gap-4 rounded-[18px] px-5 py-4 text-left text-base font-medium outline-none",
+              "focus-visible:ring-2 focus-visible:ring-zinc-400",
+              open ? "text-zinc-900 dark:text-zinc-100" : "text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100"
+            ),
+            children: [
+              item.title,
+              /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  "aria-hidden": true,
+                  className: cn(
+                    "relative grid size-7 shrink-0 place-items-center rounded-full transition-colors duration-300",
+                    open ? "bg-[#242423] text-white dark:bg-white dark:text-zinc-900" : "bg-[#242423]/6 text-zinc-700 group-hover:bg-[#242423]/11 dark:bg-white/10 dark:text-zinc-200"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "absolute h-[1.75px] w-3 rounded-full bg-current" }),
+                    /* @__PURE__ */ jsx(
+                      motion.span,
+                      {
+                        className: "absolute h-3 w-[1.75px] rounded-full bg-current",
+                        variants: { closed: { rotate: 0, scaleY: 1 }, open: { rotate: 90, scaleY: 0 } },
+                        transition: { duration: 0.35, ease: [0.22, 1, 0.36, 1] }
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            ref: panel,
+            id: panelId,
+            role: "region",
+            "aria-labelledby": headerId,
+            "aria-hidden": !open,
+            style: { height },
+            className: "overflow-hidden",
+            children: /* @__PURE__ */ jsx(
+              motion.div,
+              {
+                ref: inner,
+                variants: PANEL_CONTENT,
+                transition: { duration: still ? 0 : 0.4, ease: [0.22, 1, 0.36, 1], delay: open && !still ? 0.06 : 0 },
+                className: "px-5 pb-5 text-[14px] leading-relaxed text-zinc-500 dark:text-zinc-400",
+                children: item.content
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+var BlurAccordion = React.forwardRef(function BlurAccordion2({ items = DEFAULT_ITEMS, multiple = false, defaultOpen, blur = 6, stiffness = 380, onOpenChange, className }, ref) {
+  const still = !!useReducedMotion();
+  const uid = React.useId().replace(/[^a-zA-Z0-9]/g, "");
+  const [openIds, setOpenIds] = React.useState(defaultOpen ?? (items[0] ? [items[0].id] : []));
+  const headers = React.useRef([]);
+  const toggle = (id) => {
+    setOpenIds((prev) => {
+      const isOpen = prev.includes(id);
+      const next = isOpen ? prev.filter((x) => x !== id) : multiple ? [...prev, id] : [id];
+      onOpenChange?.(next);
+      return next;
+    });
+  };
+  const focusAt = (i) => headers.current[(i + items.length) % items.length]?.focus();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      onKeyDown: (e) => {
+        const at = headers.current.indexOf(document.activeElement);
+        if (at < 0) return;
+        if (e.key === "ArrowDown") e.preventDefault(), focusAt(at + 1);
+        if (e.key === "ArrowUp") e.preventDefault(), focusAt(at - 1);
+        if (e.key === "Home") e.preventDefault(), focusAt(0);
+        if (e.key === "End") e.preventDefault(), focusAt(items.length - 1);
+      },
+      className: cn(
+        "flex w-[420px] max-w-full flex-col gap-1 rounded-[26px] bg-white p-2 dark:bg-zinc-900",
+        className
+      ),
+      children: items.map((item, i) => /* @__PURE__ */ jsx(
+        Row,
+        {
+          item,
+          open: openIds.includes(item.id),
+          onToggle: () => toggle(item.id),
+          blur,
+          stiffness,
+          still,
+          uid,
+          headerRef: (el) => void (headers.current[i] = el)
+        },
+        item.id
+      ))
+    }
+  );
+});
+
+export {
+  BlurAccordion
+};

package/dist/chunk-SBDTC4UY.js

@@ -0,0 +1,367 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/depth-carousel/depth-carousel.tsx
+import * as React from "react";
+import {
+  motion,
+  useMotionTemplate,
+  useMotionValue,
+  useReducedMotion,
+  useSpring,
+  useTransform
+} from "motion/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var photo = (id) => `https://images.unsplash.com/photo-${id}?w=600&h=840&fit=crop&q=80`;
+var DEFAULT_ITEMS = [
+  { src: photo("1470071459604-3b5ec3a7fe05"), title: "Soft Signal" },
+  { src: photo("1505144808419-1957a94ca61e"), title: "Tide Lines" },
+  { src: photo("1475924156734-496f6cac6ec1"), title: "Afterglow" },
+  { src: photo("1500534314209-a25ddb2bd429"), title: "Paper Dunes" },
+  { src: photo("1494500764479-0c8f2919a3d8"), title: "Night Bloom" },
+  { src: photo("1490750967868-88aa4486c946"), title: "Glass Garden" },
+  { src: photo("1519681393784-d120267933ba"), title: "Low Orbit" },
+  { src: photo("1508739773434-c26b3d09e071"), title: "Velvet Hour" },
+  { src: photo("1504893524553-b855bce32c67"), title: "River Run" },
+  { src: photo("1507525428034-b723cf961d3e"), title: "Open Water" },
+  { src: photo("1454496522488-7a8e488e8606"), title: "First Snow" },
+  { src: photo("1433086966358-54859d0ed716"), title: "Falls" }
+];
+var CARD_W = 200;
+var CARD_H = 280;
+var STEP_X = 118;
+var STEP_Y = 60;
+var STEP_Z = 150;
+var TURN = -24;
+var AHEAD = 4;
+var wrap = (v, n) => (v % n + n) % n;
+function Card({
+  item,
+  index,
+  hovered,
+  dimmed,
+  onHover,
+  still,
+  setRef
+}) {
+  const px = useMotionValue(0.5);
+  const py = useMotionValue(0.5);
+  const spring = { stiffness: 220, damping: 22 };
+  const rx = useSpring(useTransform(py, [0, 1], [9, -9]), spring);
+  const ry = useSpring(useTransform(px, [0, 1], [-11, 11]), spring);
+  const face = useSpring(0, { stiffness: 240, damping: 26 });
+  React.useEffect(
+    () => face.set(hovered && !still ? -TURN : 0),
+    [hovered, still, face]
+  );
+  const turn = useTransform(() => face.get() + (hovered ? ry.get() : 0));
+  const sx = useSpring(px, { stiffness: 180, damping: 24 });
+  const sy = useSpring(py, { stiffness: 180, damping: 24 });
+  const glareX = useTransform(sx, (v) => `${v * 100}%`);
+  const glareY = useTransform(sy, (v) => `${v * 100}%`);
+  const glare = useMotionTemplate`radial-gradient(240px circle at ${glareX} ${glareY}, rgba(255,255,255,0.9), rgba(255,255,255,0.28) 34%, transparent 64%)`;
+  const spot = useMotionTemplate`radial-gradient(110px circle at ${glareX} ${glareY}, rgba(255,255,255,0.38), transparent 70%)`;
+  const sheenPos = useTransform(sx, (v) => `${15 + (1 - v) * 70}% 50%`);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: setRef,
+      className: "absolute left-0 top-0 will-change-transform",
+      style: { width: CARD_W, height: CARD_H, transformStyle: "preserve-3d" },
+      onPointerEnter: () => onHover(index),
+      onPointerLeave: () => {
+        onHover(null);
+        px.set(0.5);
+        py.set(0.5);
+      },
+      onPointerMove: (e) => {
+        if (still) return;
+        const r = e.currentTarget.getBoundingClientRect();
+        px.set(Math.min(1, Math.max(0, (e.clientX - r.left) / r.width)));
+        py.set(Math.min(1, Math.max(0, (e.clientY - r.top) / r.height)));
+      },
+      children: /* @__PURE__ */ jsx(
+        motion.figure,
+        {
+          animate: {
+            y: hovered && !still ? -40 : 0,
+            z: hovered && !still ? 120 : 0,
+            scale: hovered && !still ? 1.06 : 1
+          },
+          transition: { type: "spring", stiffness: 260, damping: 24 },
+          style: {
+            rotateX: hovered ? rx : 0,
+            rotateY: turn,
+            transformStyle: "preserve-3d"
+          },
+          className: "pointer-events-none relative m-0 size-full",
+          children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "relative size-full overflow-hidden rounded-2xl bg-zinc-200 shadow-[0_2px_6px_rgba(0,0,0,0.12),0_24px_48px_-20px_rgba(0,0,0,0.45)] transition-[filter,opacity] duration-300 dark:bg-zinc-800",
+                hovered && "shadow-[0_4px_10px_rgba(0,0,0,0.16),0_40px_70px_-24px_rgba(0,0,0,0.55)]"
+              ),
+              style: {
+                filter: dimmed ? "blur(4px) saturate(0.7) brightness(1.06) contrast(0.9)" : "blur(0px) saturate(1)",
+                opacity: 1
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: item.src,
+                    alt: item.title,
+                    draggable: false,
+                    loading: "lazy",
+                    className: "size-full select-none object-cover"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  motion.span,
+                  {
+                    "aria-hidden": true,
+                    className: "pointer-events-none absolute inset-0 mix-blend-overlay transition-opacity duration-300",
+                    style: { background: glare, opacity: hovered && !still ? 1 : 0 }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  motion.span,
+                  {
+                    "aria-hidden": true,
+                    className: "pointer-events-none absolute inset-0 mix-blend-screen transition-opacity duration-300",
+                    style: { background: spot, opacity: hovered && !still ? 1 : 0 }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  motion.span,
+                  {
+                    "aria-hidden": true,
+                    className: "pointer-events-none absolute inset-0 mix-blend-screen transition-opacity duration-300",
+                    style: {
+                      backgroundImage: "linear-gradient(115deg, transparent 32%, rgba(255,255,255,0.1) 41%, rgba(255,255,255,0.5) 47%, rgba(255,255,255,0.1) 53%, transparent 62%)",
+                      backgroundSize: "220% 100%",
+                      backgroundPosition: sheenPos,
+                      opacity: hovered && !still ? 1 : 0
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "aria-hidden": true,
+                    className: cn(
+                      "pointer-events-none absolute inset-0 rounded-2xl transition-opacity duration-300",
+                      hovered ? "opacity-100" : "opacity-0"
+                    ),
+                    style: {
+                      boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.45), inset 0 1px 0 rgba(255,255,255,0.7), inset 0 -1px 0 rgba(0,0,0,0.12)",
+                      background: "linear-gradient(180deg, rgba(255,255,255,0.18), transparent 22%)"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "figcaption",
+                  {
+                    className: cn(
+                      "absolute inset-x-3 bottom-3 rounded-full bg-white/90 px-3 py-1.5 text-xs font-medium text-zinc-900 backdrop-blur transition-[opacity,transform] duration-300",
+                      hovered ? "translate-y-0 opacity-100" : "translate-y-2 opacity-0"
+                    ),
+                    children: item.title
+                  }
+                )
+              ]
+            }
+          )
+        }
+      )
+    }
+  );
+}
+var DepthCarousel = React.forwardRef(function DepthCarousel2({
+  items = DEFAULT_ITEMS,
+  direction: directionProp = "up",
+  drift = 0.18,
+  blur = 1,
+  label = "Photo stack",
+  className
+}, ref) {
+  const still = !!useReducedMotion();
+  const uid = React.useId().replace(/:/g, "");
+  const stage = React.useRef(null);
+  const blurNode = React.useRef(null);
+  const cards = React.useRef([]);
+  const [hovered, setHovered] = React.useState(null);
+  const direction = directionProp;
+  const [current, setCurrent] = React.useState(0);
+  const [steered, setSteered] = React.useState(false);
+  const settings = React.useRef({ drift, blur, still, hovered, direction });
+  settings.current = { drift, blur, still, hovered, direction };
+  const motionState = React.useRef({
+    s: 0,
+    target: 0,
+    v: 0,
+    dir: directionProp === "up" ? 1 : -1,
+    drag: null
+  });
+  React.useEffect(() => {
+    const host = stage.current;
+    if (!host) return;
+    const m = motionState.current;
+    const n = items.length;
+    let raf = 0;
+    let last = performance.now();
+    let shown = -1;
+    const frame = () => {
+      raf = requestAnimationFrame(frame);
+      const now = performance.now();
+      const dt = Math.min(0.05, (now - last) / 1e3);
+      last = now;
+      const set = settings.current;
+      if (!set.still && !m.drag && set.hovered === null)
+        m.target += set.drift * dt;
+      const k = set.still ? 1 : 1 - Math.exp(-dt * 7);
+      const prev = m.s;
+      m.s += (m.target - m.s) * k;
+      const v = (m.s - prev) / Math.max(dt, 1e-3);
+      m.v += (v - m.v) * Math.min(1, dt * 12);
+      const want = set.direction === "up" ? 1 : -1;
+      m.dir += (want - m.dir) * Math.min(1, dt * 6);
+      const amount = set.still ? 0 : Math.min(12, Math.abs(m.v) * 8) * set.blur;
+      blurNode.current?.setAttribute(
+        "stdDeviation",
+        `${amount.toFixed(2)} ${(amount * 0.38).toFixed(2)}`
+      );
+      const w = host.clientWidth;
+      const h = host.clientHeight;
+      const ax = w * 0.4 - CARD_W / 2;
+      const ay = h * (0.5 + 0.04 * m.dir) - CARD_H / 2;
+      for (let i = 0; i < n; i++) {
+        const el = cards.current[i];
+        if (!el) continue;
+        const t = wrap(i - m.s + AHEAD, n) - AHEAD;
+        const x = ax + t * STEP_X;
+        const y = ay - t * STEP_Y * m.dir;
+        const z = -t * STEP_Z;
+        const front = Math.min(1, Math.max(0, (t + AHEAD) / 0.6));
+        const back = Math.min(1, Math.max(0, (n - AHEAD - 0.4 - t) / 0.8));
+        el.style.transform = `translate3d(${x}px, ${y}px, ${z}px) rotateY(${TURN}deg)`;
+        const lifted = set.hovered === i;
+        el.style.opacity = String(lifted ? 1 : front * back);
+        el.style.zIndex = String(lifted ? 1500 : Math.round(1e3 - t * 10));
+        el.style.pointerEvents = front * back > 0.6 ? "auto" : "none";
+      }
+      const nearest = wrap(Math.round(m.s), n);
+      if (nearest !== shown) {
+        shown = nearest;
+        setCurrent(nearest);
+      }
+    };
+    frame();
+    const onWheel = (e) => {
+      const d = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY;
+      if (Math.abs(d) < 1) return;
+      e.preventDefault();
+      m.target += d / 260;
+    };
+    const onDown = (e) => {
+      if (e.button !== 0) return;
+      m.drag = { x: e.clientX, t: performance.now(), v: 0 };
+      host.setPointerCapture(e.pointerId);
+    };
+    const onMove = (e) => {
+      if (!m.drag) return;
+      const now = performance.now();
+      const dx = e.clientX - m.drag.x;
+      const step = -dx / 150;
+      m.target += step;
+      m.drag.v = m.drag.v * 0.6 + step / Math.max(1, now - m.drag.t) * 1e3 * 0.4;
+      m.drag.x = e.clientX;
+      m.drag.t = now;
+    };
+    const onUp = () => {
+      if (!m.drag) return;
+      m.target += Math.max(-4, Math.min(4, m.drag.v * 0.35));
+      m.drag = null;
+    };
+    host.addEventListener("wheel", onWheel, { passive: false });
+    host.addEventListener("pointerdown", onDown);
+    host.addEventListener("pointermove", onMove);
+    host.addEventListener("pointerup", onUp);
+    host.addEventListener("pointercancel", onUp);
+    return () => {
+      cancelAnimationFrame(raf);
+      host.removeEventListener("wheel", onWheel);
+      host.removeEventListener("pointerdown", onDown);
+      host.removeEventListener("pointermove", onMove);
+      host.removeEventListener("pointerup", onUp);
+      host.removeEventListener("pointercancel", onUp);
+    };
+  }, [items.length]);
+  const onKey = (e) => {
+    const m = motionState.current;
+    if (e.key === "ArrowRight" || e.key === "ArrowDown")
+      m.target = Math.round(m.target) + 1;
+    else if (e.key === "ArrowLeft" || e.key === "ArrowUp")
+      m.target = Math.round(m.target) - 1;
+    else return;
+    e.preventDefault();
+    setSteered(true);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "relative h-[520px] w-full rounded-3xl bg-zinc-100 dark:bg-zinc-950",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("svg", { "aria-hidden": true, className: "absolute size-0", children: /* @__PURE__ */ jsx("filter", { id: `${uid}-mb`, x: "-50%", y: "-50%", width: "200%", height: "200%", children: /* @__PURE__ */ jsx("feGaussianBlur", { ref: blurNode, stdDeviation: "0 0" }) }) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: stage,
+            tabIndex: 0,
+            role: "region",
+            "aria-roledescription": "carousel",
+            "aria-label": label,
+            onKeyDown: onKey,
+            className: "absolute inset-0 cursor-grab touch-pan-y select-none outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-zinc-400 active:cursor-grabbing",
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "absolute inset-0",
+                style: {
+                  perspective: 1400,
+                  perspectiveOrigin: "40% 50%",
+                  filter: `url(#${uid}-mb)`
+                },
+                children: items.map((item, i) => /* @__PURE__ */ jsx(
+                  Card,
+                  {
+                    item,
+                    index: i,
+                    hovered: hovered === i,
+                    dimmed: hovered !== null && hovered !== i,
+                    onHover: setHovered,
+                    still,
+                    setRef: (el) => void (cards.current[i] = el)
+                  },
+                  item.src + i
+                ))
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { role: "status", "aria-live": "polite", className: "sr-only", children: steered ? `${items[current]?.title ?? ""}, ${current + 1} of ${items.length}` : "" })
+      ]
+    }
+  );
+});
+
+export {
+  DepthCarousel
+};