motion-brew 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Md Eftakher
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,107 @@
-# Temporary Holding Version
+# Motion Brew
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Working codename. The product name comes later.
+
+An open-source React component library for micro-interactions: spring physics, magnetic and tilt effects, GSAP timelines, scroll scenes and AI-interface elements. Every component works two ways:
+
+- **One file** per component: `npm i <packages> && curl --create-dirs -o components/<slug>.tsx <site>/r/<slug>.tsx`. Icons and `cn()` are inlined, so it needs only React and Tailwind CSS v4.
+- **Install** from npm: `npm i motion-brew` (see below).
+
+## From npm
+
+```bash
+npm i motion-brew motion
+```
+
+Import each component from its own path, so you only install and ship the engine it uses:
+
+```tsx
+import { BillList } from "motion-brew/bill-list";
+
+export default function Page() {
+  return <BillList />;
+}
+```
+
+Everything is also exported from `motion-brew`, but that entry needs every engine installed (`motion`, `gsap`, `@gsap/react`, and `three` for Globe card).
+
+Tailwind CSS v4 has to see the classes inside the package. Add one line under the Tailwind import in your CSS:
+
+```css
+@import "tailwindcss";
+@source "../node_modules/motion-brew/dist";
+```
+
+Every file starts with `"use client"`, so the components work from Next.js server components as they are.
+
+The package is built from `src/` by `npm run build` (tsup, then tsc for the types) into `dist/`. The component sources are never changed by it.
+
+## Stack
+
+React 18/19, TypeScript (strict), Tailwind CSS with `cn()`, `motion/react` for declarative springs and layout, `gsap` + `@gsap/react` for timelines and scroll work, `lucide-react` for icons.
+
+`motion` and `gsap` are optional peer dependencies, so you only install the engine a component uses.
+
+## MCP server
+
+AI agents use the library through MCP. The hosted endpoint needs no install and no key:
+
+```bash
+# Claude Code
+claude mcp add --transport http motion-brew https://motion-brew.com/mcp
+```
+
+```json
+// Cursor (~/.cursor/mcp.json); other clients are on the site's MCP page
+{ "mcpServers": { "motion-brew": { "url": "https://motion-brew.com/mcp" } } }
+```
+
+Tools, all read only:
+
+- `search_components` finds components from plain words, best match first.
+- `list_components` lists them all, filtered by trigger or engine.
+- `get_component` returns one shell command that installs the npm packages and downloads the component as a single self contained file, plus usage and props. Agents run the command instead of writing the file out, which keeps it fast. `files: "single"` includes the file's contents for agents without a shell.
+- `get_install_plan` gives one install command and a download per file for several components.
+- `get_setup` covers what a project needs: React and Tailwind CSS v4.
+
+It also serves resources (`components://catalog`, `components://<slug>`, `components://setup`) and two prompts, `add_component` and `find_component`, which Claude Code shows as slash commands.
+
+Each component ships as one file, `/r/<slug>.tsx`: `mcp/bundle.mjs` inlines its animated icons (each in its own scope), any component it builds on and `cn()`, merges the npm imports and adds `"use client"`. The same catalog builds `/r/index.json` (packages and sizes, used by the "add it by hand" panel on the MCP page) and `/llms.txt`.
+
+How it fits together:
+
+```
+mcp/catalog.mjs    reads src/components, src/icons and src/lib into the catalog
+mcp/core.mjs       the MCP server: tools, resources, prompts
+mcp/http.mjs       Streamable HTTP, stateless (worker/index.mjs on Cloudflare, /mcp in vite dev)
+mcp/server.mjs     the same server over stdio, for a local clone
+mcp/bundle.mjs     folds a component and its files into one self contained .tsx
+mcp/registry.mjs   the one file components, r/index.json and llms.txt (written by scripts/build-registry.mjs)
+```
+
+Each component's **Copy prompt** on the site tells the agent to call `get_component` when the server is connected.
+
+## Layout
+
+```
+src/
+  lib/cn.ts        class merge helper
+  components/      one folder per component (tsx, index, README)
+  index.ts         public exports
+mcp/              MCP server for AI agents (see above)
+worker/index.mjs   the site and the MCP endpoint on Cloudflare (wrangler.jsonc)
+playground/        the showcase website (Vite)
+  registry.tsx     every component's demo, controls, install line and prompt
+```
+
+## Scripts
+
+```
+npm run dev          showcase site on localhost
+npm run typecheck    library and site
+npm run build        library to dist/
+npm run mcp          MCP server over stdio
+npm run build:playground   site, one file components and llms.txt
+npm run cf:dev       the Cloudflare build, locally
+npm run cf:deploy    build and deploy to motion-brew.com on Cloudflare
+```

package/dist/account-menu.d.ts

@@ -0,0 +1 @@
+export * from "./components/account-menu/index";

package/dist/account-menu.js

@@ -0,0 +1,16 @@
+"use client";
+import {
+  AccountMenu
+} from "./chunk-OUVP5VKH.js";
+import "./chunk-NY7M42KC.js";
+import "./chunk-75DEIDBX.js";
+import "./chunk-YGONLKWH.js";
+import "./chunk-BHUNLG6S.js";
+import "./chunk-NIQFSLPC.js";
+import "./chunk-HK34LPY6.js";
+import "./chunk-6GRDT3OE.js";
+import "./chunk-JHT6RCGY.js";
+import "./chunk-2TQSHVXA.js";
+export {
+  AccountMenu
+};

package/dist/action-menu.d.ts

@@ -0,0 +1 @@
+export * from "./components/action-menu/index";

package/dist/action-menu.js

@@ -0,0 +1,10 @@
+"use client";
+import {
+  ActionMenu
+} from "./chunk-INV5FI6O.js";
+import "./chunk-I7KTTOOJ.js";
+import "./chunk-NIQFSLPC.js";
+import "./chunk-2TQSHVXA.js";
+export {
+  ActionMenu
+};

package/dist/activity-grid.d.ts

@@ -0,0 +1 @@
+export * from "./components/activity-grid/index";

package/dist/activity-grid.js

@@ -0,0 +1,14 @@
+"use client";
+import {
+  ACTIVITY_PALETTES,
+  ActivityGrid
+} from "./chunk-CMTGYFT7.js";
+import "./chunk-SSWKGVRI.js";
+import "./chunk-62RBYLIN.js";
+import "./chunk-YVYYDPE2.js";
+import "./chunk-6GRDT3OE.js";
+import "./chunk-2TQSHVXA.js";
+export {
+  ACTIVITY_PALETTES,
+  ActivityGrid
+};

package/dist/add-card.d.ts

@@ -0,0 +1 @@
+export * from "./components/add-card/index";

package/dist/add-card.js

@@ -0,0 +1,11 @@
+"use client";
+import {
+  AddCard
+} from "./chunk-G7KDH7ME.js";
+import "./chunk-XL4L2J6N.js";
+import "./chunk-HK34LPY6.js";
+import "./chunk-JHT6RCGY.js";
+import "./chunk-2TQSHVXA.js";
+export {
+  AddCard
+};

package/dist/amount-slider.d.ts

@@ -0,0 +1 @@
+export * from "./components/amount-slider/index";

package/dist/amount-slider.js

@@ -0,0 +1,10 @@
+"use client";
+import {
+  AmountSlider
+} from "./chunk-FFUBTMDC.js";
+import "./chunk-WE7VCUOA.js";
+import "./chunk-NB5CB65C.js";
+import "./chunk-2TQSHVXA.js";
+export {
+  AmountSlider
+};

package/dist/annotation-text.d.ts

@@ -0,0 +1 @@
+export * from "./components/annotation-text/index";

package/dist/annotation-text.js

@@ -0,0 +1,8 @@
+"use client";
+import {
+  AnnotationText
+} from "./chunk-BXAKCY6X.js";
+import "./chunk-2TQSHVXA.js";
+export {
+  AnnotationText
+};

package/dist/aura-card.d.ts

@@ -0,0 +1 @@
+export * from "./components/aura-card/index";

package/dist/aura-card.js

@@ -0,0 +1,19 @@
+"use client";
+import {
+  AuraCard
+} from "./chunk-K3HQEHJ6.js";
+import "./chunk-SKEE23KW.js";
+import "./chunk-GVWOJJ3T.js";
+import "./chunk-BPE43MTT.js";
+import "./chunk-OINRQUYT.js";
+import "./chunk-CEQ56RF6.js";
+import "./chunk-YURGXJSP.js";
+import "./chunk-IKM7EEYN.js";
+import "./chunk-WOR2GMMN.js";
+import "./chunk-6GRDT3OE.js";
+import "./chunk-JHT6RCGY.js";
+import "./chunk-NB5CB65C.js";
+import "./chunk-2TQSHVXA.js";
+export {
+  AuraCard
+};

package/dist/auth-card.d.ts

@@ -0,0 +1 @@
+export * from "./components/auth-card/index";

package/dist/auth-card.js

@@ -0,0 +1,15 @@
+"use client";
+import {
+  AuthCard
+} from "./chunk-HHXK3NAH.js";
+import "./chunk-IGI6OLRX.js";
+import "./chunk-G3XH7YT2.js";
+import "./chunk-UD5OQ2T3.js";
+import "./chunk-H7XKIWHA.js";
+import "./chunk-YU6B7YRO.js";
+import "./chunk-BN4MA5UY.js";
+import "./chunk-BHUNLG6S.js";
+import "./chunk-2TQSHVXA.js";
+export {
+  AuthCard
+};

package/dist/avatar-testimonial.d.ts

@@ -0,0 +1 @@
+export * from "./components/avatar-testimonial/index";

package/dist/avatar-testimonial.js

@@ -0,0 +1,8 @@
+"use client";
+import {
+  AvatarTestimonial
+} from "./chunk-WGIT4MMH.js";
+import "./chunk-2TQSHVXA.js";
+export {
+  AvatarTestimonial
+};

package/dist/backspace-text.d.ts

@@ -0,0 +1 @@
+export * from "./components/backspace-text/index";

package/dist/backspace-text.js

@@ -0,0 +1,8 @@
+"use client";
+import {
+  BackspaceText
+} from "./chunk-327TGRS5.js";
+import "./chunk-2TQSHVXA.js";
+export {
+  BackspaceText
+};

package/dist/bell-toggle.d.ts

@@ -0,0 +1 @@
+export * from "./components/bell-toggle/index";

package/dist/bell-toggle.js

@@ -0,0 +1,8 @@
+"use client";
+import {
+  BellToggle
+} from "./chunk-RP22J4NX.js";
+import "./chunk-2TQSHVXA.js";
+export {
+  BellToggle
+};

package/dist/bill-list.d.ts

@@ -0,0 +1 @@
+export * from "./components/bill-list/index";

package/dist/bill-list.js

@@ -0,0 +1,15 @@
+"use client";
+import {
+  BillList
+} from "./chunk-W46CBUFX.js";
+import "./chunk-PKM6B4JJ.js";
+import "./chunk-OS6REIBR.js";
+import "./chunk-2QCWELWT.js";
+import "./chunk-NIQFSLPC.js";
+import "./chunk-XL4L2J6N.js";
+import "./chunk-6GRDT3OE.js";
+import "./chunk-JHT6RCGY.js";
+import "./chunk-2TQSHVXA.js";
+export {
+  BillList
+};

package/dist/binary-text.d.ts

@@ -0,0 +1 @@
+export * from "./components/binary-text/index";

package/dist/binary-text.js

@@ -0,0 +1,8 @@
+"use client";
+import {
+  BinaryText
+} from "./chunk-WTTDB475.js";
+import "./chunk-2TQSHVXA.js";
+export {
+  BinaryText
+};

package/dist/blur-accordion.d.ts

@@ -0,0 +1 @@
+export * from "./components/blur-accordion/index";

package/dist/blur-accordion.js

@@ -0,0 +1,8 @@
+"use client";
+import {
+  BlurAccordion
+} from "./chunk-RZ2UCZ3C.js";
+import "./chunk-2TQSHVXA.js";
+export {
+  BlurAccordion
+};

package/dist/blur-text.d.ts

@@ -0,0 +1 @@
+export * from "./components/blur-text/index";

package/dist/blur-text.js

@@ -0,0 +1,8 @@
+"use client";
+import {
+  BlurText
+} from "./chunk-ANNDITUM.js";
+import "./chunk-2TQSHVXA.js";
+export {
+  BlurText
+};

package/dist/booking-card.d.ts

@@ -0,0 +1 @@
+export * from "./components/booking-card/index";

package/dist/booking-card.js

@@ -0,0 +1,11 @@
+"use client";
+import {
+  BookingCard
+} from "./chunk-FXI6NHNR.js";
+import "./chunk-NIQFSLPC.js";
+import "./chunk-YURGXJSP.js";
+import "./chunk-JHT6RCGY.js";
+import "./chunk-2TQSHVXA.js";
+export {
+  BookingCard
+};

package/dist/brand-bridge.d.ts

@@ -0,0 +1 @@
+export * from "./components/brand-bridge/index";

package/dist/brand-bridge.js

@@ -0,0 +1,12 @@
+"use client";
+import {
+  BRANDS,
+  BrandBridge,
+  DEFAULT_BRANDS
+} from "./chunk-VX4XEYQN.js";
+import "./chunk-2TQSHVXA.js";
+export {
+  BRANDS,
+  BrandBridge,
+  DEFAULT_BRANDS
+};

package/dist/calendar-agenda.d.ts

@@ -0,0 +1 @@
+export * from "./components/calendar-agenda/index";

package/dist/calendar-agenda.js

@@ -0,0 +1,12 @@
+"use client";
+import {
+  CalendarAgenda
+} from "./chunk-3B2RYSTL.js";
+import "./chunk-YGONLKWH.js";
+import "./chunk-HK34LPY6.js";
+import "./chunk-YURGXJSP.js";
+import "./chunk-JHT6RCGY.js";
+import "./chunk-2TQSHVXA.js";
+export {
+  CalendarAgenda
+};

package/dist/channel-mix.d.ts

@@ -0,0 +1 @@
+export * from "./components/channel-mix/index";

package/dist/channel-mix.js

@@ -0,0 +1,11 @@
+"use client";
+import {
+  ChannelMix
+} from "./chunk-TTNORJF5.js";
+import "./chunk-YFLQ4HPJ.js";
+import "./chunk-25254AZA.js";
+import "./chunk-I7KTTOOJ.js";
+import "./chunk-2TQSHVXA.js";
+export {
+  ChannelMix
+};

package/dist/chunk-25254AZA.js

@@ -0,0 +1,141 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/icons/arrow-down-right.tsx
+import { motion, useAnimation, useReducedMotion } from "motion/react";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var HEAD_VARIANTS = {
+  normal: { translateX: 0, translateY: 0 },
+  animate: {
+    translateX: [0, -3, 0],
+    translateY: [0, -3, 0],
+    transition: {
+      duration: 0.5,
+      ease: "easeInOut"
+    }
+  }
+};
+var SHAFT_VARIANTS = {
+  normal: { translateX: 0, translateY: 0, scale: 1 },
+  animate: {
+    translateX: [0, -3, 0],
+    translateY: [0, -3, 0],
+    scale: [1, 0.85, 1],
+    originX: 1,
+    originY: 1,
+    transition: {
+      duration: 0.5,
+      ease: "easeInOut"
+    }
+  }
+};
+var ArrowDownRightIcon = forwardRef(({ onMouseEnter, onMouseLeave, className, size, active, style, strokeWidth, ...props }, ref) => {
+  const controls = useAnimation();
+  const isControlledRef = useRef(false);
+  useImperativeHandle(ref, () => {
+    isControlledRef.current = true;
+    return {
+      startAnimation: () => controls.start("animate"),
+      stopAnimation: () => controls.start("normal")
+    };
+  });
+  const handleMouseEnter = useCallback(
+    (e) => {
+      if (!isControlledRef.current) controls.start("animate");
+      onMouseEnter?.(e);
+    },
+    [controls, onMouseEnter]
+  );
+  const handleMouseLeave = useCallback(
+    (e) => {
+      if (!isControlledRef.current) controls.start("normal");
+      onMouseLeave?.(e);
+    },
+    [controls, onMouseLeave]
+  );
+  const wrap = useRef(null);
+  const reduced = useReducedMotion();
+  const [hosted, setHosted] = useState(false);
+  useEffect(() => {
+    const fake = {};
+    if (reduced) {
+      setHosted(true);
+      return;
+    }
+    if (active !== void 0) {
+      setHosted(true);
+      (active ? handleMouseEnter : handleMouseLeave)(fake);
+      return;
+    }
+    const host = wrap.current?.parentElement?.closest("button, a, [role=button], [role=menuitem], [role=tab], [role=switch], [role=radio], label");
+    setHosted(!!host);
+    if (!host) return;
+    const on = () => handleMouseEnter(fake);
+    const off = () => handleMouseLeave(fake);
+    host.addEventListener("pointerenter", on);
+    host.addEventListener("pointerleave", off);
+    return () => {
+      host.removeEventListener("pointerenter", on);
+      host.removeEventListener("pointerleave", off);
+    };
+  }, [active, reduced, handleMouseEnter, handleMouseLeave]);
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref: wrap,
+      className: cn("inline-grid size-6 shrink-0 place-items-center align-middle [&>svg]:size-full", className),
+      style: size ? { width: size, height: size, ...style } : style,
+      onMouseEnter: hosted ? void 0 : handleMouseEnter,
+      onMouseLeave: hosted ? void 0 : handleMouseLeave,
+      ...props,
+      children: /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          fill: "none",
+          height: size,
+          stroke: "currentColor",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: strokeWidth ?? 2,
+          viewBox: "0 0 24 24",
+          width: size,
+          xmlns: "http://www.w3.org/2000/svg",
+          children: [
+            /* @__PURE__ */ jsx(
+              motion.path,
+              {
+                animate: controls,
+                d: "M7 7 L17 17",
+                variants: SHAFT_VARIANTS
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              motion.path,
+              {
+                animate: controls,
+                d: "M17 7v10H7",
+                variants: HEAD_VARIANTS
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              motion.path,
+              {
+                animate: controls,
+                d: "M17 17 L10 17",
+                variants: HEAD_VARIANTS
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+});
+ArrowDownRightIcon.displayName = "ArrowDownRightIcon";
+
+export {
+  ArrowDownRightIcon
+};

package/dist/chunk-2CIJ5TVW.js

@@ -0,0 +1,59 @@
+"use client";
+import {
+  ArrowUpRightIcon
+} from "./chunk-I7KTTOOJ.js";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/rotating-text/rotating-text.tsx
+import * as React from "react";
+import { motion, useAnimationFrame, useMotionValue, useReducedMotion } from "motion/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var RotatingText = React.forwardRef(function RotatingText2({ text = "Scroll to explore \u2022 ", size = 160, duration = 14, boost = 4, label, className }, ref) {
+  const still = useReducedMotion();
+  const id = `ring-${React.useId().replace(/[^a-zA-Z0-9]/g, "")}`;
+  const rotate = useMotionValue(0);
+  const speed = React.useRef(1);
+  const [hover, setHover] = React.useState(false);
+  useAnimationFrame((_, delta) => {
+    if (still) return;
+    speed.current += ((hover ? boost : 1) - speed.current) * Math.min(1, delta / 220);
+    rotate.set((rotate.get() + 360 / (duration * 1e3) * delta * speed.current) % 360);
+  });
+  const ring = text.repeat(Math.max(1, Math.ceil(28 / text.length)));
+  const r = 40;
+  const circumference = 2 * Math.PI * r;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      role: "img",
+      "aria-label": label ?? text.replace(/[•·]/g, "").trim(),
+      onPointerEnter: () => setHover(true),
+      onPointerLeave: () => setHover(false),
+      className: cn("relative grid place-items-center", className),
+      style: { width: size, height: size },
+      children: [
+        /* @__PURE__ */ jsxs(motion.svg, { viewBox: "0 0 100 100", className: "absolute inset-0 size-full overflow-visible", style: { rotate }, "aria-hidden": true, children: [
+          /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("path", { id, d: `M 50 ${50 - r} a ${r} ${r} 0 1 1 0 ${2 * r} a ${r} ${r} 0 1 1 0 ${-2 * r}` }) }),
+          /* @__PURE__ */ jsx("text", { className: "fill-current text-[10px] font-semibold uppercase tracking-[0.2em]", children: /* @__PURE__ */ jsx("textPath", { href: `#${id}`, textLength: circumference, lengthAdjust: "spacing", children: ring }) })
+        ] }),
+        /* @__PURE__ */ jsx(
+          motion.span,
+          {
+            "aria-hidden": true,
+            animate: { scale: hover ? 1.08 : 1, rotate: hover ? 45 : 0 },
+            transition: { type: "spring", stiffness: 400, damping: 22 },
+            className: "grid size-[38%] place-items-center rounded-full bg-[#242423] text-white dark:bg-white dark:text-zinc-900",
+            children: /* @__PURE__ */ jsx(ArrowUpRightIcon, { className: "size-[45%]", strokeWidth: 2.25 })
+          }
+        )
+      ]
+    }
+  );
+});
+
+export {
+  RotatingText
+};