motion-brew 0.0.0-stage → 0.1.1

package/dist/chunk-TAFVHTWV.js

@@ -0,0 +1,607 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/orbit-card/orbit-card.tsx
+import * as React from "react";
+import {
+  motion,
+  useInView,
+  useReducedMotion
+} from "motion/react";
+import { ArrowRight, Heart, MessageCircle, Send } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var PALETTE = ["#9150e0", "#3d66d6", "#d6498f", "#269a5a", "#cf7a1c"];
+var GLIDE = [0.22, 1, 0.36, 1];
+var ROLL = { type: "spring", stiffness: 260, damping: 26 };
+var headshot = (id) => `https://images.unsplash.com/${id}?w=96&h=96&fit=crop&crop=faces`;
+var DEFAULT_MEMBERS = [
+  {
+    name: "Maya",
+    role: "Product designer",
+    avatar: headshot("photo-1438761681033-6461ffad8d80")
+  },
+  {
+    name: "Daniel",
+    role: "Founder",
+    avatar: headshot("photo-1507003211169-0a1dd7228f2d")
+  },
+  {
+    name: "Sofia",
+    role: "Illustrator",
+    avatar: headshot("photo-1534528741775-53994a69daeb")
+  },
+  {
+    name: "Leo",
+    role: "Engineer",
+    avatar: headshot("photo-1500648767791-00dcc994a43e")
+  },
+  {
+    name: "Ava",
+    role: "Writer",
+    avatar: headshot("photo-1494790108377-be9c29b29330")
+  },
+  {
+    name: "Omar",
+    role: "Motion designer",
+    avatar: headshot("photo-1472099645785-5658abf4ff4e")
+  }
+];
+var CARD_H = 568;
+var CENTER_Y = 448;
+var RADII = [100, 156, 216];
+var RING_SPEED = [11, -7, 5];
+function layout(members) {
+  const slots = [
+    [0, 205],
+    [1, 160],
+    [1, 300],
+    [2, 192],
+    [2, 252],
+    [2, 338]
+  ];
+  const items = slots.slice(0, members).map(([ring, angle], i) => ({
+    id: `m${i}`,
+    kind: "member",
+    ring,
+    angle,
+    member: i
+  }));
+  items.push(
+    {
+      id: "c0",
+      kind: "chip",
+      ring: 0,
+      angle: 330,
+      icon: MessageCircle,
+      color: PALETTE[0],
+      label: "Feedback"
+    },
+    {
+      id: "c1",
+      kind: "chip",
+      ring: 1,
+      angle: 20,
+      icon: Send,
+      color: PALETTE[1],
+      label: "Shared"
+    },
+    {
+      id: "c2",
+      kind: "chip",
+      ring: 2,
+      angle: 120,
+      icon: Heart,
+      color: PALETTE[2],
+      label: "Liked"
+    },
+    { id: "d0", kind: "dot", ring: 0, angle: 80, color: PALETTE[4] },
+    { id: "d1", kind: "dot", ring: 1, angle: 232, color: PALETTE[0] },
+    { id: "d2", kind: "dot", ring: 2, angle: 296, color: PALETTE[1] }
+  );
+  return items;
+}
+var initials = (name) => name.split(/\s+/).map((p) => p[0]).slice(0, 2).join("").toUpperCase();
+var DIGITS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+function Digit({ digit, still }) {
+  return /* @__PURE__ */ jsx("span", { className: "relative inline-block h-[1.2em] w-[0.6em] 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-[1.2em] items-center justify-center", children: d }, d))
+    }
+  ) });
+}
+function Count({ value, still }) {
+  const text = Math.max(0, Math.round(value)).toLocaleString("en-US");
+  const digits = [...text].filter((c) => c !== ",").length;
+  let seen = 0;
+  return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "inline-flex tabular-nums", children: [...text].map((c, i) => {
+    if (c === ",") return /* @__PURE__ */ jsx("span", { children: "," }, `s${i}`);
+    const key = digits - seen++;
+    return /* @__PURE__ */ jsx(Digit, { digit: Number(c), still }, key);
+  }) });
+}
+function Reveal({
+  text,
+  show,
+  delay = 0,
+  still,
+  className
+}) {
+  return /* @__PURE__ */ jsx("span", { className, "aria-label": text, children: text.split(" ").map((w, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      motion.span,
+      {
+        "aria-hidden": true,
+        className: "inline-block",
+        initial: still ? false : { opacity: 0, y: "0.35em", filter: "blur(6px)" },
+        animate: show ? { opacity: 1, y: 0, filter: "blur(0px)" } : void 0,
+        transition: {
+          duration: 0.55,
+          ease: GLIDE,
+          delay: delay + i * 0.05
+        },
+        children: w
+      }
+    ),
+    " "
+  ] }, i)) });
+}
+function GhostButton({
+  label,
+  href,
+  onClick,
+  still
+}) {
+  const Tag = href ? "a" : "button";
+  const arrow = "absolute inset-0 size-4 transition-transform duration-[420ms] ease-[cubic-bezier(0.22,1,0.36,1)]";
+  return /* @__PURE__ */ jsxs(
+    Tag,
+    {
+      ...href ? { href } : { type: "button", onClick },
+      className: cn(
+        "group pointer-events-auto inline-flex h-10 cursor-pointer items-center gap-2 rounded-full bg-[#242423]/6 px-4 text-sm font-medium text-[#242423] outline-none transition-[background-color,transform] duration-200 hover:bg-[#242423]/10 focus-visible:ring-2 focus-visible:ring-zinc-400 active:bg-[#242423]/[0.14] dark:bg-white/8 dark:text-zinc-100 dark:hover:bg-white/12",
+        !still && "active:scale-[0.97]"
+      ),
+      children: [
+        label,
+        /* @__PURE__ */ jsxs("span", { "aria-hidden": true, className: "relative size-4 overflow-hidden", children: [
+          /* @__PURE__ */ jsx(
+            ArrowRight,
+            {
+              className: cn(arrow, !still && "group-hover:translate-x-[140%]"),
+              strokeWidth: 2.25
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ArrowRight,
+            {
+              className: cn(
+                arrow,
+                "-translate-x-[140%]",
+                !still && "group-hover:translate-x-0 group-hover:delay-75"
+              ),
+              strokeWidth: 2.25
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function Star() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "size-7", fill: "currentColor", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M12 2c.6 5.2 3.8 8.4 10 10-6.2 1.6-9.4 4.8-10 10-.6-5.2-3.8-8.4-10-10 6.2-1.6 9.4-4.8 10-10Z" }) });
+}
+function Avatar({ member, index }) {
+  const [broken, setBroken] = React.useState(false);
+  return /* @__PURE__ */ jsx("span", { className: "relative block size-11 overflow-hidden rounded-full bg-white p-[3px] shadow-[0_1px_2px_rgba(0,0,0,0.08),0_6px_16px_-6px_rgba(0,0,0,0.25)] dark:bg-zinc-800", children: member.avatar && !broken ? /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: member.avatar,
+      alt: member.name,
+      draggable: false,
+      onError: () => setBroken(true),
+      className: "size-full rounded-full object-cover"
+    }
+  ) : /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "grid size-full place-items-center rounded-full text-xs font-semibold text-white",
+      style: { background: PALETTE[index % PALETTE.length] },
+      children: initials(member.name)
+    }
+  ) });
+}
+var OrbitCard = React.forwardRef(
+  function OrbitCard2({
+    count = 24816,
+    label = "creators",
+    subtitle = "Designers, founders and makers trade feedback here every day. Someone new joins every few seconds.",
+    cta = "Join the community",
+    href,
+    members = DEFAULT_MEMBERS,
+    logo,
+    speed = 1,
+    joinEvery = 2.6,
+    onCta,
+    className
+  }, ref) {
+    const still = !!useReducedMotion();
+    const card = React.useRef(null);
+    React.useImperativeHandle(ref, () => card.current);
+    const field = React.useRef(null);
+    const spark = React.useRef(null);
+    const nodes = React.useRef(/* @__PURE__ */ new Map());
+    const inView = useInView(card, { once: true, amount: 0.4 });
+    const visible = useInView(card, { amount: 0 });
+    const show = still || inView;
+    const people = members.slice(0, 6);
+    const items = React.useMemo(() => layout(people.length), [people.length]);
+    const [joined, setJoined] = React.useState(0);
+    const [hovered, setHovered] = React.useState(null);
+    React.useEffect(() => setJoined(0), [count]);
+    const settings = React.useRef({ speed, joinEvery, still, hovered });
+    settings.current = { speed, joinEvery, still, hovered };
+    const motionState = React.useRef({
+      turn: [0, 0, 0],
+      spin: 0,
+      spinVel: 0,
+      calm: 1,
+      pointer: { x: 0, y: 0, inside: false },
+      drag: null,
+      pull: /* @__PURE__ */ new Map(),
+      pops: /* @__PURE__ */ new Map(),
+      sinceJoin: 0,
+      flight: null
+    });
+    React.useEffect(() => {
+      const host = field.current;
+      if (!host) return;
+      const s = motionState.current;
+      let raf = 0;
+      let last = performance.now();
+      const FLY = 0.6;
+      const frame = () => {
+        if (visible) raf = requestAnimationFrame(frame);
+        const now = performance.now();
+        const dt = Math.min(0.05, (now - last) / 1e3);
+        last = now;
+        const set = settings.current;
+        const cx = host.clientWidth / 2;
+        const moving = !set.still && visible;
+        if (moving) {
+          const target = set.hovered ? 0 : s.pointer.inside ? 0.35 : 1;
+          s.calm += (target - s.calm) * Math.min(1, dt * 5);
+          for (let r = 0; r < 3; r++)
+            s.turn[r] += RING_SPEED[r] * set.speed * s.calm * dt;
+          if (!s.drag) {
+            s.spin += s.spinVel * dt;
+            s.spinVel *= Math.exp(-dt * 1.6);
+          }
+          if (set.joinEvery > 0 && !s.flight) {
+            s.sinceJoin += dt;
+            if (s.sinceJoin >= set.joinEvery) {
+              s.sinceJoin = 0;
+              const members2 = items.filter((i) => i.kind === "member");
+              const pick = members2[Math.floor(Math.random() * members2.length)];
+              if (pick) s.flight = { id: pick.id, t: 0 };
+            }
+          }
+        }
+        const where = (it) => {
+          const a = (it.angle + s.turn[it.ring] + s.spin) * Math.PI / 180;
+          return {
+            x: cx + Math.cos(a) * RADII[it.ring],
+            y: CENTER_Y + Math.sin(a) * RADII[it.ring]
+          };
+        };
+        for (const it of items) {
+          const el = nodes.current.get(it.id);
+          if (!el) continue;
+          const p = where(it);
+          let pull = s.pull.get(it.id);
+          if (!pull) s.pull.set(it.id, pull = { x: 0, y: 0 });
+          let tx = 0;
+          let ty = 0;
+          if (moving && s.pointer.inside && !s.drag && it.kind !== "dot") {
+            const dx = s.pointer.x - p.x;
+            const dy = s.pointer.y - p.y;
+            const d = Math.hypot(dx, dy);
+            if (d < 110) {
+              const k = (1 - d / 110) * 0.22;
+              tx = Math.max(-12, Math.min(12, dx * k));
+              ty = Math.max(-12, Math.min(12, dy * k));
+            }
+          }
+          pull.x += (tx - pull.x) * Math.min(1, dt * 10);
+          pull.y += (ty - pull.y) * Math.min(1, dt * 10);
+          const popAt = s.pops.get(it.id);
+          let scale = 1;
+          if (popAt !== void 0) {
+            const k = (now - popAt) / 520;
+            if (k >= 1) s.pops.delete(it.id);
+            else scale = 1 + Math.sin(k * Math.PI) * 0.22 * (1 - k * 0.5);
+          }
+          el.style.transform = `translate3d(${p.x + pull.x}px, ${p.y + pull.y}px, 0) translate(-50%, -50%) scale(${scale})`;
+        }
+        const dot = spark.current;
+        if (dot) {
+          const f = s.flight;
+          if (!f || !moving) dot.style.opacity = "0";
+          else {
+            f.t += dt / FLY;
+            const it = items.find((i) => i.id === f.id);
+            const p = where(it);
+            const k = Math.min(1, f.t);
+            const e = 1 - Math.pow(1 - k, 3);
+            const x = cx + (p.x - cx) * e;
+            const y = CENTER_Y + (p.y - CENTER_Y) * e;
+            dot.style.opacity = String(Math.min(1, k * 4) * (1 - k * 0.3));
+            dot.style.transform = `translate3d(${x}px, ${y}px, 0) translate(-50%, -50%)`;
+            if (f.t >= 1) {
+              s.pops.set(f.id, now);
+              s.flight = null;
+              setJoined((j) => j + 1);
+            }
+          }
+        }
+      };
+      frame();
+      const local = (e) => {
+        const r = host.getBoundingClientRect();
+        return { x: e.clientX - r.left, y: e.clientY - r.top };
+      };
+      const angleOf = (p) => Math.atan2(p.y - CENTER_Y, p.x - host.clientWidth / 2) * 180 / Math.PI;
+      const onMove = (e) => {
+        const p = local(e);
+        Object.assign(s.pointer, p, { inside: true });
+        if (!s.drag) return;
+        const a = angleOf(p);
+        let da = a - s.drag.angle;
+        if (da > 180) da -= 360;
+        if (da < -180) da += 360;
+        const now = performance.now();
+        const dts = Math.max(1, now - s.drag.t) / 1e3;
+        s.spin += da;
+        s.spinVel = s.spinVel * 0.5 + da / dts * 0.5;
+        s.drag = { angle: a, t: now };
+      };
+      const onDown = (e) => {
+        if (settings.current.still) return;
+        s.drag = { angle: angleOf(local(e)), t: performance.now() };
+        s.spinVel = 0;
+        host.setPointerCapture(e.pointerId);
+      };
+      const onUp = () => {
+        s.drag = null;
+        s.spinVel = Math.max(-540, Math.min(540, s.spinVel));
+      };
+      const onLeave = () => {
+        if (!s.drag) s.pointer.inside = false;
+      };
+      host.addEventListener("pointermove", onMove);
+      host.addEventListener("pointerdown", onDown);
+      host.addEventListener("pointerup", onUp);
+      host.addEventListener("pointercancel", onUp);
+      host.addEventListener("pointerleave", onLeave);
+      return () => {
+        cancelAnimationFrame(raf);
+        host.removeEventListener("pointermove", onMove);
+        host.removeEventListener("pointerdown", onDown);
+        host.removeEventListener("pointerup", onUp);
+        host.removeEventListener("pointercancel", onUp);
+        host.removeEventListener("pointerleave", onLeave);
+      };
+    }, [items, visible]);
+    const total = count + joined;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: card,
+        className: cn(
+          "relative w-[440px] max-w-full overflow-hidden rounded-3xl bg-white 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
+        ),
+        style: { height: CARD_H },
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: field,
+              "aria-hidden": true,
+              className: "absolute inset-0 cursor-grab touch-none select-none active:cursor-grabbing",
+              style: {
+                maskImage: "linear-gradient(to bottom, transparent 176px, #000 248px)",
+                WebkitMaskImage: "linear-gradient(to bottom, transparent 176px, #000 248px)"
+              },
+              children: /* @__PURE__ */ jsxs(
+                motion.div,
+                {
+                  className: "absolute inset-0",
+                  initial: still ? false : { opacity: 0, scale: 0.92 },
+                  animate: show ? { opacity: 1, scale: 1 } : void 0,
+                  transition: { duration: 0.9, ease: GLIDE, delay: 0.2 },
+                  style: { transformOrigin: `50% ${CENTER_Y}px` },
+                  children: [
+                    /* @__PURE__ */ jsxs("svg", { className: "absolute inset-0 size-full overflow-visible", children: [
+                      /* @__PURE__ */ jsx(
+                        "circle",
+                        {
+                          cx: "50%",
+                          cy: CENTER_Y,
+                          r: 64,
+                          className: "fill-zinc-100/70 dark:fill-white/[0.04]"
+                        }
+                      ),
+                      RADII.map((r) => /* @__PURE__ */ jsx(
+                        "circle",
+                        {
+                          cx: "50%",
+                          cy: CENTER_Y,
+                          r,
+                          fill: "none",
+                          strokeWidth: 1,
+                          className: "stroke-zinc-200 dark:stroke-white/10"
+                        },
+                        r
+                      ))
+                    ] }),
+                    !still && joined > 0 && [0, 0.18].map((d) => /* @__PURE__ */ jsx(
+                      motion.span,
+                      {
+                        className: "absolute left-1/2 size-20 -translate-x-1/2 -translate-y-1/2 rounded-full border border-zinc-300 dark:border-white/20",
+                        style: { top: CENTER_Y },
+                        initial: { scale: 1, opacity: 0.7 },
+                        animate: { scale: 3.2, opacity: 0 },
+                        transition: { duration: 1.4, ease: GLIDE, delay: d }
+                      },
+                      `${joined}-${d}`
+                    )),
+                    /* @__PURE__ */ jsx(
+                      motion.div,
+                      {
+                        className: "absolute left-1/2 grid size-20 -translate-x-1/2 -translate-y-1/2 place-items-center rounded-full bg-white shadow-[0_1px_2px_rgba(0,0,0,0.06),0_10px_28px_-10px_rgba(0,0,0,0.28)] dark:bg-zinc-800",
+                        style: { top: CENTER_Y },
+                        initial: still || joined === 0 ? false : { scale: 1 },
+                        animate: { scale: [1, 1.08, 1] },
+                        transition: { duration: 0.5, ease: GLIDE },
+                        children: /* @__PURE__ */ jsx("span", { className: "grid size-14 place-items-center rounded-full bg-[#242423] text-white dark:bg-white dark:text-[#242423]", children: logo ?? /* @__PURE__ */ jsx(Star, {}) })
+                      },
+                      joined
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        ref: spark,
+                        className: "absolute left-0 top-0 size-2 rounded-full bg-[#242423] opacity-0 shadow-[0_0_0_4px_rgba(36,36,35,0.12)] dark:bg-white"
+                      }
+                    ),
+                    items.map((it) => {
+                      const isHovered = hovered === it.id;
+                      const name = it.kind === "member" ? people[it.member].name : it.kind === "chip" ? it.label : null;
+                      const role = it.kind === "member" ? people[it.member].role : null;
+                      return /* @__PURE__ */ jsxs(
+                        "div",
+                        {
+                          ref: (el) => {
+                            if (el) nodes.current.set(it.id, el);
+                            else nodes.current.delete(it.id);
+                          },
+                          className: cn(
+                            "absolute left-0 top-0 will-change-transform",
+                            isHovered ? "z-20" : "z-10"
+                          ),
+                          onPointerEnter: () => it.kind !== "dot" && setHovered(it.id),
+                          onPointerLeave: () => setHovered((h) => h === it.id ? null : h),
+                          children: [
+                            /* @__PURE__ */ jsxs(
+                              "div",
+                              {
+                                className: cn(
+                                  "relative transition-transform duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]",
+                                  isHovered && "scale-[1.14]"
+                                ),
+                                children: [
+                                  it.kind === "member" && /* @__PURE__ */ jsx(Avatar, { member: people[it.member], index: it.member }),
+                                  it.kind === "chip" && /* @__PURE__ */ jsx(
+                                    "span",
+                                    {
+                                      className: "grid size-10 place-items-center rounded-full text-white shadow-[0_6px_16px_-6px_rgba(0,0,0,0.3)]",
+                                      style: { background: it.color },
+                                      children: /* @__PURE__ */ jsx(it.icon, { className: "size-[18px]", strokeWidth: 2.25 })
+                                    }
+                                  ),
+                                  it.kind === "dot" && /* @__PURE__ */ jsx(
+                                    "span",
+                                    {
+                                      className: "block size-2 rounded-full",
+                                      style: { background: it.color }
+                                    }
+                                  )
+                                ]
+                              }
+                            ),
+                            name && /* @__PURE__ */ jsxs(
+                              "span",
+                              {
+                                className: cn(
+                                  "pointer-events-none absolute left-1/2 top-full mt-2 -translate-x-1/2 whitespace-nowrap rounded-full bg-white px-3 py-1 text-xs shadow-[0_1px_2px_rgba(0,0,0,0.06),0_8px_20px_-8px_rgba(0,0,0,0.25)] transition-[opacity,translate] duration-200 dark:bg-zinc-800",
+                                  isHovered ? "translate-y-0 opacity-100" : "-translate-y-1 opacity-0"
+                                ),
+                                children: [
+                                  /* @__PURE__ */ jsx("span", { className: "font-medium", children: name }),
+                                  role && /* @__PURE__ */ jsxs("span", { className: "text-zinc-500 dark:text-zinc-400", children: [
+                                    " ",
+                                    role
+                                  ] })
+                                ]
+                              }
+                            )
+                          ]
+                        },
+                        it.id
+                      );
+                    })
+                  ]
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "pointer-events-none relative px-6 pt-6", children: [
+            /* @__PURE__ */ jsxs(
+              motion.h3,
+              {
+                "aria-label": `${total.toLocaleString("en-US")} ${label}`,
+                initial: still ? false : { opacity: 0, y: 8, filter: "blur(6px)" },
+                animate: show ? { opacity: 1, y: 0, filter: "blur(0px)" } : void 0,
+                transition: { duration: 0.55, ease: GLIDE },
+                className: "flex items-center gap-[0.3em] text-2xl font-semibold leading-[1.2] tracking-tight",
+                children: [
+                  /* @__PURE__ */ jsx(Count, { value: total, still }),
+                  /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: label })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Reveal,
+              {
+                text: subtitle,
+                show,
+                delay: 0.12,
+                still,
+                className: "mt-2 block text-base leading-relaxed text-zinc-500 dark:text-zinc-400"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              motion.div,
+              {
+                initial: still ? false : { opacity: 0, y: 8, filter: "blur(4px)" },
+                animate: show ? { opacity: 1, y: 0, filter: "blur(0px)" } : void 0,
+                transition: { duration: 0.5, ease: GLIDE, delay: 0.3 },
+                className: "mt-5",
+                children: /* @__PURE__ */ jsx(
+                  GhostButton,
+                  {
+                    label: cta,
+                    href,
+                    onClick: onCta,
+                    still
+                  }
+                )
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+
+export {
+  OrbitCard
+};