motion-brew 0.0.0-stage → 0.1.0

package/dist/chunk-7PS2W7PU.js

@@ -0,0 +1,112 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/icons/bell.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 SVG_VARIANTS = {
+  normal: { rotate: 0 },
+  animate: { rotate: [0, -10, 10, -10, 0] }
+};
+var BellIcon = 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) {
+          onMouseEnter?.(e);
+        } else {
+          controls.start("animate");
+        }
+      },
+      [controls, onMouseEnter]
+    );
+    const handleMouseLeave = useCallback(
+      (e) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          controls.start("normal");
+        }
+      },
+      [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(
+          motion.svg,
+          {
+            animate: controls,
+            fill: "none",
+            height: size,
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: strokeWidth ?? 2,
+            transition: {
+              duration: 0.5,
+              ease: "easeInOut"
+            },
+            variants: SVG_VARIANTS,
+            viewBox: "0 0 24 24",
+            width: size,
+            xmlns: "http://www.w3.org/2000/svg",
+            children: [
+              /* @__PURE__ */ jsx("path", { d: "M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" }),
+              /* @__PURE__ */ jsx("path", { d: "M10.3 21a1.94 1.94 0 0 0 3.4 0" })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+BellIcon.displayName = "BellIcon";
+
+export {
+  BellIcon
+};

package/dist/chunk-AATJOPNH.js

@@ -0,0 +1,86 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/tilt-card/tilt-card.tsx
+import * as React from "react";
+import {
+  motion,
+  useMotionTemplate,
+  useMotionValue,
+  useReducedMotion,
+  useSpring,
+  useTransform
+} from "motion/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_SPRING = { stiffness: 260, damping: 22, mass: 0.7 };
+var TiltCard = React.forwardRef(function TiltCard2({
+  children,
+  className,
+  maxTilt = 12,
+  hoverScale = 1.03,
+  glare = true,
+  glareOpacity = 0.35,
+  perspective = 800,
+  spring = DEFAULT_SPRING,
+  style,
+  onPointerMove,
+  onPointerLeave,
+  ...props
+}, ref) {
+  const reduceMotion = useReducedMotion();
+  const nx = useMotionValue(0.5);
+  const ny = useMotionValue(0.5);
+  const hover = useSpring(0, spring);
+  const rotateX = useSpring(useTransform(ny, [0, 1], [maxTilt, -maxTilt]), spring);
+  const rotateY = useSpring(useTransform(nx, [0, 1], [-maxTilt, maxTilt]), spring);
+  const scale = useTransform(hover, [0, 1], [1, hoverScale]);
+  const glareX = useTransform(nx, [0, 1], [100, 0]);
+  const glareY = useTransform(ny, [0, 1], [100, 0]);
+  const glareAlpha = useTransform(hover, [0, 1], [0, glareOpacity]);
+  const glareBg = useMotionTemplate`radial-gradient(circle at ${glareX}% ${glareY}%, rgba(255,255,255,${glareAlpha}), transparent 60%)`;
+  const handlePointerMove = (event) => {
+    onPointerMove?.(event);
+    if (reduceMotion || event.pointerType !== "mouse") return;
+    const rect = event.currentTarget.getBoundingClientRect();
+    nx.set((event.clientX - rect.left) / rect.width);
+    ny.set((event.clientY - rect.top) / rect.height);
+    hover.set(1);
+  };
+  const handlePointerLeave = (event) => {
+    onPointerLeave?.(event);
+    nx.set(0.5);
+    ny.set(0.5);
+    hover.set(0);
+  };
+  return /* @__PURE__ */ jsx("div", { style: { perspective }, className: "inline-block", children: /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      ref,
+      onPointerMove: handlePointerMove,
+      onPointerLeave: handlePointerLeave,
+      style: reduceMotion ? style : { rotateX, rotateY, scale, transformStyle: "preserve-3d", ...style },
+      className: cn(
+        "relative overflow-hidden rounded-3xl bg-white shadow-[0_24px_48px_-24px_rgba(0,0,0,0.35)] will-change-transform dark:bg-zinc-900",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        glare && !reduceMotion && /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            "aria-hidden": true,
+            className: "pointer-events-none absolute inset-0 mix-blend-overlay",
+            style: { background: glareBg }
+          }
+        )
+      ]
+    }
+  ) });
+});
+
+export {
+  TiltCard
+};

package/dist/chunk-ADXWPWJR.js

@@ -0,0 +1,209 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/icons/linkedin.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 PATH_VARIANTS = {
+  normal: {
+    opacity: 1,
+    pathLength: 1,
+    pathOffset: 0,
+    transition: {
+      duration: 0.4,
+      opacity: { duration: 0.1 }
+    }
+  },
+  animate: {
+    opacity: [0, 1],
+    pathLength: [0, 1],
+    pathOffset: [1, 0],
+    transition: {
+      duration: 0.6,
+      ease: "linear",
+      opacity: { duration: 0.1 }
+    }
+  }
+};
+var RECT_VARIANTS = {
+  normal: {
+    opacity: 1,
+    pathLength: 1,
+    pathOffset: 0,
+    transition: {
+      duration: 0.4,
+      opacity: { duration: 0.1 }
+    }
+  },
+  animate: {
+    opacity: [0, 1],
+    pathLength: [0, 1],
+    pathOffset: [1, 0],
+    transition: {
+      duration: 0.6,
+      ease: "linear",
+      opacity: { duration: 0.1 }
+    }
+  }
+};
+var CIRCLE_VARIANTS = {
+  normal: {
+    opacity: 1,
+    pathLength: 1,
+    pathOffset: 0,
+    transition: {
+      duration: 0.4,
+      opacity: { duration: 0.1 }
+    }
+  },
+  animate: {
+    opacity: [0, 1],
+    pathLength: [0, 1],
+    pathOffset: [1, 0],
+    transition: {
+      duration: 0.6,
+      ease: "linear",
+      opacity: { duration: 0.1 }
+    }
+  }
+};
+var LinkedinIcon = forwardRef(
+  ({ onMouseEnter, onMouseLeave, className, size, active, style, strokeWidth, ...props }, ref) => {
+    const pathControls = useAnimation();
+    const rectControls = useAnimation();
+    const circleControls = useAnimation();
+    const isControlledRef = useRef(false);
+    useImperativeHandle(ref, () => {
+      isControlledRef.current = true;
+      return {
+        startAnimation: () => {
+          pathControls.start("animate");
+          rectControls.start("animate");
+          circleControls.start("animate");
+        },
+        stopAnimation: () => {
+          pathControls.start("normal");
+          rectControls.start("normal");
+          circleControls.start("normal");
+        }
+      };
+    });
+    const handleMouseEnter = useCallback(
+      (e) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          pathControls.start("animate");
+          rectControls.start("animate");
+          circleControls.start("animate");
+        }
+      },
+      [circleControls, onMouseEnter, pathControls, rectControls]
+    );
+    const handleMouseLeave = useCallback(
+      (e) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          pathControls.start("normal");
+          rectControls.start("normal");
+          circleControls.start("normal");
+        }
+      },
+      [pathControls, rectControls, circleControls, 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: pathControls,
+                  d: "M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z",
+                  initial: "normal",
+                  variants: PATH_VARIANTS
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                motion.rect,
+                {
+                  animate: rectControls,
+                  height: "12",
+                  initial: "normal",
+                  variants: RECT_VARIANTS,
+                  width: "4",
+                  x: "2",
+                  y: "9"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                motion.circle,
+                {
+                  animate: circleControls,
+                  cx: "4",
+                  cy: "4",
+                  initial: "normal",
+                  r: "2",
+                  variants: CIRCLE_VARIANTS
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+LinkedinIcon.displayName = "LinkedinIcon";
+
+export {
+  LinkedinIcon
+};

package/dist/chunk-ANNDITUM.js

@@ -0,0 +1,47 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/blur-text/blur-text.tsx
+import * as React from "react";
+import { motion, useInView, useReducedMotion } from "motion/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var BlurText = React.forwardRef(function BlurText2({
+  text = "Every word drifts out of the blur and settles into sharp focus",
+  as: Tag = "p",
+  by = "word",
+  stagger = 0.08,
+  duration = 0.7,
+  blur = 12,
+  direction = "up",
+  delay = 0,
+  trigger = "inView",
+  className
+}, forwardedRef) {
+  const ref = React.useRef(null);
+  React.useImperativeHandle(forwardedRef, () => ref.current);
+  const seen = useInView(ref, { once: true, amount: 0.4 });
+  const inView = trigger === "mount" || seen;
+  const still = useReducedMotion();
+  const pieces = by === "word" ? text.split(" ") : Array.from(text);
+  const offset = direction === "up" ? "0.35em" : "-0.35em";
+  return /* @__PURE__ */ jsx(Tag, { ref, "aria-label": text, className: cn("text-balance", className), children: pieces.map((piece, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      motion.span,
+      {
+        "aria-hidden": true,
+        className: "inline-block whitespace-pre will-change-transform",
+        initial: still ? false : { opacity: 0, y: offset, filter: `blur(${blur}px)` },
+        animate: inView ? { opacity: 1, y: 0, filter: "blur(0px)" } : void 0,
+        transition: { duration, ease: [0.22, 1, 0.36, 1], delay: delay + i * stagger },
+        children: piece
+      }
+    ),
+    by === "word" && i < pieces.length - 1 && " "
+  ] }, i)) });
+});
+
+export {
+  BlurText
+};