motion-brew 0.0.0-stage → 0.1.1

package/dist/chunk-BRTZFUFR.js

@@ -0,0 +1,503 @@
+"use client";
+import {
+  BellIcon
+} from "./chunk-7PS2W7PU.js";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/pixel-feature-card/pixel-feature-card.tsx
+import * as React from "react";
+import {
+  animate,
+  motion,
+  useInView,
+  useMotionValue,
+  useReducedMotion,
+  useSpring,
+  useTransform
+} from "motion/react";
+import { Footprints, HeartPulse, Moon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var GLIDE = [0.22, 1, 0.36, 1];
+var TILT = { stiffness: 160, damping: 18, mass: 0.6 };
+var BAYER = [0, 8, 2, 10, 12, 4, 14, 6, 3, 11, 1, 9, 15, 7, 13, 5].map(
+  (v) => (v + 0.5) / 16
+);
+var hash = (x, y) => {
+  let h = Math.imul(x, 374761393) + Math.imul(y, 668265263);
+  h = Math.imul(h ^ h >>> 13, 1274126177);
+  return ((h ^ h >>> 16) >>> 0) / 4294967295;
+};
+var smooth = (t) => t * t * (3 - 2 * t);
+var noise = (x, y) => {
+  const ix = Math.floor(x);
+  const iy = Math.floor(y);
+  const fx = smooth(x - ix);
+  const fy = smooth(y - iy);
+  const a = hash(ix, iy);
+  const b = hash(ix + 1, iy);
+  const c = hash(ix, iy + 1);
+  const d = hash(ix + 1, iy + 1);
+  return a + (b - a) * fx + (c - a) * fy + (a - b - c + d) * fx * fy;
+};
+var fbm = (x, y) => noise(x, y) * 0.6 + noise(x * 2.1, y * 2.1) * 0.3 + noise(x * 4.3, y * 4.3) * 0.1;
+var CLOUDS = [
+  { ax: 0.42, ay: 0.36, fx: 0.23, fy: 0.17, px: 0, py: 1.2, r: 0.2 },
+  { ax: 0.46, ay: 0.4, fx: 0.15, fy: 0.21, px: 2.4, py: 4.1, r: 0.17 },
+  { ax: 0.38, ay: 0.44, fx: 0.19, fy: 0.13, px: 4.6, py: 0.4, r: 0.15 }
+];
+var REVEAL = 1.5;
+var STEPS = [0, 0, 0.16, 0.26, 0.38, 0.5, 0.62, 0.74, 0.86];
+var band = (lo, hi, v) => smooth(Math.min(1, Math.max(0, (v - lo) / (hi - lo))));
+function PixelField({
+  color,
+  cell,
+  shape,
+  speed,
+  coverage,
+  density,
+  floor,
+  still,
+  pointer,
+  ripples,
+  reveal
+}) {
+  const canvas = React.useRef(null);
+  React.useEffect(() => {
+    const el = canvas.current;
+    const ctx = el.getContext("2d");
+    let w = 0;
+    let h = 0;
+    let raf = 0;
+    let visible = true;
+    let last = performance.now();
+    let time = 0;
+    const glow = { x: 0, y: 0, a: 0 };
+    let idle = 0;
+    const phases = new Float32Array(4096).map(
+      (_, k) => hash(k, 17) * Math.PI * 2
+    );
+    const size = () => {
+      const dpr = Math.min(2, window.devicePixelRatio || 1);
+      w = el.clientWidth;
+      h = el.clientHeight;
+      el.width = Math.round(w * dpr);
+      el.height = Math.round(h * dpr);
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    };
+    const dot = (x, y, s) => {
+      if (s < 0.6) return;
+      if (shape === "circle") {
+        ctx.beginPath();
+        ctx.arc(x, y, s / 2, 0, Math.PI * 2);
+        ctx.fill();
+      } else if (shape === "diamond") {
+        const r = s * 0.62;
+        ctx.beginPath();
+        ctx.moveTo(x, y - r);
+        ctx.lineTo(x + r, y);
+        ctx.lineTo(x, y + r);
+        ctx.lineTo(x - r, y);
+        ctx.fill();
+      } else {
+        ctx.fillRect(x - s / 2, y - s / 2, s, s);
+      }
+    };
+    const light = (x, y) => {
+      let l = 0;
+      if (glow.a > 0.01) {
+        const dx = x - glow.x;
+        const dy = y - glow.y;
+        l += glow.a * 0.55 * Math.exp(-(dx * dx + dy * dy) / (2 * 54 * 54));
+      }
+      for (const r of ripples.current) {
+        const age = time - r.t;
+        const radius = age * 240;
+        const d = Math.hypot(x - r.x, y - r.y) - radius;
+        const fade = Math.max(0, 1 - age / 1.6);
+        l += 0.6 * fade * Math.exp(-(d * d) / (2 * 14 * 14));
+      }
+      return l;
+    };
+    const draw = () => {
+      ctx.clearRect(0, 0, w, h);
+      ctx.fillStyle = color;
+      const start = reveal.current;
+      const pr = still ? 1 : start === -1 || start === -2 ? 0 : Math.min(1, (time - start) / REVEAL);
+      if (pr === 0) return;
+      const eased = 1 - Math.pow(1 - pr, 3);
+      const reach = (Math.hypot(w, h) / 2 + 90) * eased;
+      const cx = w / 2;
+      const cy = h / 2;
+      const opened = (x, y) => {
+        if (pr >= 1) return { m: 1, edge: 0 };
+        const d = Math.hypot(x - cx, y - cy);
+        const e = d - reach;
+        return {
+          m: Math.min(1, Math.max(0, -e / 70)),
+          edge: 0.6 * (1 - pr) * Math.exp(-(e * e) / (2 * 14 * 14))
+        };
+      };
+      const horizon = floor ? h * 0.66 : h * 2;
+      const t = time * speed;
+      const cols = Math.ceil(w / cell);
+      const rows = Math.ceil(h / cell);
+      const bodies = CLOUDS.map((c) => ({
+        x: w * (0.5 + c.ax * Math.sin(t * c.fx + c.px)),
+        y: h * (0.5 + c.ay * Math.sin(t * c.fy + c.py)),
+        r2: 2 * (c.r * coverage * Math.max(w, h)) ** 2
+      }));
+      for (let j = 0; j < rows; j++) {
+        for (let i = 0; i < cols; i++) {
+          const x = i * cell + cell / 2;
+          const y = j * cell + cell / 2;
+          const n = fbm(x * 62e-4 + t * 0.045, y * 62e-4 - t * 0.03);
+          let body = 0;
+          for (const b of bodies) {
+            const dx = x - b.x;
+            const dy = y - b.y;
+            body += Math.exp(-(dx * dx + dy * dy) / b.r2);
+          }
+          let v = band(0.3, 0.95, body * (0.45 + 0.9 * n) * density);
+          v *= 1 - 0.55 * band(horizon - 30, horizon + 30, y);
+          v *= 0.82 + 0.18 * Math.sin(t * 2.4 + phases[(j * cols + i) % phases.length]);
+          const o = opened(x, y);
+          v = v * o.m + o.edge + light(x, y) * o.m;
+          if (v < 0.04) continue;
+          const th = BAYER[(j & 3) * 4 + (i & 3)];
+          const q = Math.min(1, v + (th - 0.5) * 0.32);
+          const step = STEPS[Math.min(STEPS.length - 1, Math.floor(q * STEPS.length))];
+          if (!step) continue;
+          ctx.globalAlpha = 0.3 + Math.min(1, v) * 0.7;
+          dot(x, y, cell * step);
+        }
+      }
+      if (floor) {
+        const near = 1;
+        const depth = 9;
+        const roll = t * 0.5 % 1;
+        const spacing = cell * 3.2;
+        const span = Math.ceil(w / spacing) * 3;
+        for (let k = depth; k >= 0; k--) {
+          const z = near + (k - roll) * 0.8;
+          if (z < near * 0.6) continue;
+          const p = near / z;
+          const y = horizon + (h - horizon) * p * 0.98;
+          const fade = Math.pow(Math.min(1, p * 1.1), 1.6);
+          for (let c = -span; c <= span; c++) {
+            const x = w / 2 + c * spacing * p;
+            if (x < -cell || x > w + cell) continue;
+            const shimmer = 0.8 + 0.2 * Math.sin(t * 2 + hash(c, k + 99) * 6.28);
+            const o = opened(x, y);
+            const v = (fade * 0.75 * shimmer + light(x, y) * p) * o.m;
+            ctx.globalAlpha = Math.min(1, v);
+            dot(x, y, cell * 0.8 * p);
+          }
+        }
+      }
+      ctx.globalAlpha = 1;
+    };
+    const frame = (now) => {
+      raf = requestAnimationFrame(frame);
+      const dt = Math.min(0.05, Math.max(0, (now - last) / 1e3));
+      last = now;
+      if (!visible) return;
+      time += dt;
+      if (reveal.current === -2) reveal.current = time;
+      const p = pointer.current;
+      const k = 1 - Math.pow(15e-4, dt);
+      glow.x += (p.x - glow.x) * k;
+      glow.y += (p.y - glow.y) * k;
+      glow.a += ((p.on ? 1 : 0) - glow.a) * (1 - Math.pow(0.02, dt));
+      idle = p.on ? 0 : idle + dt;
+      if (idle > 3.2) {
+        idle = 0;
+        ripples.current.push({
+          x: w * (0.15 + Math.random() * 0.7),
+          y: h * (0.15 + Math.random() * 0.45),
+          t: time
+        });
+      }
+      ripples.current = ripples.current.map((r) => r.t < 0 ? { ...r, t: time } : r).filter((r) => time - r.t < 1.6);
+      draw();
+    };
+    size();
+    const ro = new ResizeObserver(() => {
+      size();
+      if (still) draw();
+    });
+    ro.observe(el);
+    const io = new IntersectionObserver(
+      ([e]) => void (visible = !!e?.isIntersecting)
+    );
+    io.observe(el);
+    if (still) {
+      time = 3;
+      draw();
+    } else raf = requestAnimationFrame(frame);
+    return () => {
+      cancelAnimationFrame(raf);
+      ro.disconnect();
+      io.disconnect();
+    };
+  }, [
+    color,
+    cell,
+    shape,
+    speed,
+    coverage,
+    density,
+    floor,
+    still,
+    pointer,
+    ripples,
+    reveal
+  ]);
+  return /* @__PURE__ */ jsx(
+    "canvas",
+    {
+      ref: canvas,
+      "aria-hidden": true,
+      className: "pointer-events-none absolute inset-0 size-full"
+    }
+  );
+}
+function AppScreen({
+  shown,
+  still,
+  accent
+}) {
+  const score = useMotionValue(still ? 88 : 0);
+  const text = useTransform(score, (v) => Math.round(v).toString());
+  React.useEffect(() => {
+    if (!shown || still) return;
+    const c = animate(score, 88, {
+      duration: 1.2,
+      delay: 0.5,
+      ease: [0.5, 1, 0.89, 1]
+    });
+    return () => c.stop();
+  }, [shown, still, score]);
+  const rise = (i) => ({
+    initial: still ? false : { opacity: 0, y: 10 },
+    animate: shown ? { opacity: 1, y: 0 } : void 0,
+    transition: { duration: 0.5, delay: 0.35 + i * 0.08, ease: GLIDE }
+  });
+  const bars = [0.42, 0.58, 0.5, 0.72, 0.64, 0.8, 0.92];
+  const rows = [
+    { icon: Moon, label: "Sleep", value: "7h 40m" },
+    { icon: Footprints, label: "Steps", value: "8,214" },
+    { icon: HeartPulse, label: "Resting heart", value: "62 bpm" }
+  ];
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col px-4 pt-12 text-[#242423]", children: [
+    /* @__PURE__ */ jsxs(motion.div, { className: "flex items-center justify-between", ...rise(0), children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=80&h=80&fit=crop&crop=faces",
+            alt: "",
+            draggable: false,
+            className: "size-8 rounded-full object-cover"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "leading-tight", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-zinc-500", children: "Good morning" }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold tracking-tight", children: "Alex Morgan" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "grid size-8 place-items-center rounded-full bg-[#242423]/[0.06]", children: /* @__PURE__ */ jsx(BellIcon, { "aria-hidden": true, className: "size-4" }) })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        className: "mt-4 rounded-2xl bg-[#242423]/[0.05] p-3.5",
+        ...rise(1),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-zinc-500", children: "Health score" }),
+            /* @__PURE__ */ jsx("span", { className: "rounded-full bg-[#269a5a]/10 px-2 py-0.5 text-xs font-medium text-[#269a5a]", children: "+4" })
+          ] }),
+          /* @__PURE__ */ jsxs("p", { className: "mt-1 text-[32px] font-medium leading-none tracking-tight", children: [
+            /* @__PURE__ */ jsx(motion.span, { className: "tabular-nums", children: text }),
+            /* @__PURE__ */ jsx("span", { className: "text-base text-zinc-400", children: "/100" })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "mt-3 flex h-12 items-end gap-1.5", children: bars.map((v, i) => /* @__PURE__ */ jsx(
+            motion.span,
+            {
+              className: "flex-1 origin-bottom rounded-[4px]",
+              style: {
+                height: `${v * 100}%`,
+                backgroundColor: i === bars.length - 1 ? accent : "rgba(36,36,35,0.12)"
+              },
+              initial: still ? false : { scaleY: 0 },
+              animate: shown ? { scaleY: 1 } : void 0,
+              transition: {
+                type: "spring",
+                stiffness: 180,
+                damping: 18,
+                delay: 0.6 + i * 0.05
+              }
+            },
+            i
+          )) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "mt-3 flex flex-col gap-2", children: rows.map((r, i) => /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        className: "flex items-center gap-3 rounded-2xl bg-white p-2.5 shadow-[0_1px_2px_rgba(0,0,0,0.05)] ring-1 ring-black/[0.04]",
+        initial: still ? false : { opacity: 0, x: 16 },
+        animate: shown ? { opacity: 1, x: 0 } : void 0,
+        transition: { duration: 0.5, delay: 0.8 + i * 0.08, ease: GLIDE },
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "grid size-8 place-items-center rounded-full bg-[#242423]/[0.06]", children: /* @__PURE__ */ jsx(r.icon, { "aria-hidden": true, className: "size-4" }) }),
+          /* @__PURE__ */ jsx("span", { className: "flex-1 text-sm", children: r.label }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium tabular-nums", children: r.value })
+        ]
+      },
+      r.label
+    )) })
+  ] });
+}
+var PixelFeatureCard = React.forwardRef(function PixelFeatureCard2({
+  color = "#252528",
+  cellSize = 6,
+  shape = "square",
+  speed = 1,
+  coverage = 1.4,
+  density = 0.8,
+  floor = false,
+  children,
+  className
+}, ref) {
+  const root = React.useRef(null);
+  React.useImperativeHandle(ref, () => root.current);
+  const still = !!useReducedMotion();
+  const inView = useInView(root, { once: true, amount: 0.3 });
+  const shown = inView || still;
+  const pointer = React.useRef({ x: -999, y: -999, on: false });
+  const ripples = React.useRef([]);
+  const reveal = React.useRef(-1);
+  React.useEffect(() => {
+    if (shown) reveal.current = -2;
+  }, [shown]);
+  const rx = useSpring(0, TILT);
+  const ry = useSpring(0, TILT);
+  const local = (e) => {
+    const r = root.current.getBoundingClientRect();
+    return {
+      x: e.clientX - r.left,
+      y: e.clientY - r.top,
+      w: r.width,
+      h: r.height
+    };
+  };
+  const onMove = (e) => {
+    const p = local(e);
+    pointer.current = { x: p.x, y: p.y, on: true };
+    if (still) return;
+    ry.set((p.x / p.w - 0.5) * 14);
+    rx.set(-(p.y / p.h - 0.5) * 10);
+  };
+  const onLeave = () => {
+    pointer.current = { ...pointer.current, on: false };
+    rx.set(0);
+    ry.set(0);
+  };
+  const onDown = (e) => {
+    const p = local(e);
+    ripples.current.push({ x: p.x, y: p.y, t: -1 });
+  };
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      ref: root,
+      initial: still ? false : { opacity: 0, y: 24, scale: 0.97 },
+      animate: shown ? { opacity: 1, y: 0, scale: 1 } : void 0,
+      transition: { duration: 0.7, ease: GLIDE },
+      onPointerMove: onMove,
+      onPointerLeave: onLeave,
+      onPointerDown: onDown,
+      className: cn(
+        "relative h-[440px] w-[560px] max-w-full overflow-hidden rounded-3xl bg-white shadow-[0_1px_2px_rgba(0,0,0,0.04),0_12px_32px_-16px_rgba(0,0,0,0.18)] dark:bg-zinc-900",
+        className
+      ),
+      style: { perspective: 1200 },
+      children: [
+        /* @__PURE__ */ jsx(
+          PixelField,
+          {
+            color,
+            cell: Math.max(4, cellSize),
+            shape,
+            speed,
+            coverage: Math.max(0.3, coverage),
+            density: Math.max(0.2, density),
+            floor,
+            still,
+            pointer,
+            ripples,
+            reveal
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            className: "absolute left-1/2 top-12 -ml-[130px] h-[520px] w-[260px]",
+            style: { rotateX: rx, rotateY: ry, transformStyle: "preserve-3d" },
+            initial: still ? false : { y: 80, opacity: 0 },
+            animate: shown ? { y: 0, opacity: 1 } : void 0,
+            transition: {
+              type: "spring",
+              stiffness: 90,
+              damping: 16,
+              mass: 0.9,
+              delay: still ? 0 : 0.25
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": true,
+                  className: "absolute -left-[3px] top-28 h-8 w-[3px] rounded-l-full bg-[#242423]"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": true,
+                  className: "absolute -left-[3px] top-40 h-14 w-[3px] rounded-l-full bg-[#242423]"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": true,
+                  className: "absolute -right-[3px] top-36 h-20 w-[3px] rounded-r-full bg-[#242423]"
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "relative size-full rounded-[46px] bg-[#242423] p-[9px] shadow-[0_30px_60px_-30px_rgba(0,0,0,0.5)]", children: /* @__PURE__ */ jsxs("div", { className: "relative size-full overflow-hidden rounded-[38px] bg-white", children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "aria-hidden": true,
+                    className: "absolute left-1/2 top-2.5 z-10 flex h-7 w-[88px] -translate-x-1/2 items-center justify-end rounded-full bg-[#242423] pr-2.5",
+                    children: /* @__PURE__ */ jsx("span", { className: "size-2.5 rounded-full bg-[#3a3a48] ring-2 ring-[#1b1b22]" })
+                  }
+                ),
+                children ?? /* @__PURE__ */ jsx(AppScreen, { shown, still, accent: color })
+              ] }) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+});
+
+export {
+  PixelFeatureCard
+};

package/dist/chunk-BS4ZFJKW.js

@@ -0,0 +1,121 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/icons/compass.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 CompassIcon = 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(
+          "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("circle", { cx: "12", cy: "12", r: "10" }),
+              /* @__PURE__ */ jsx(
+                motion.polygon,
+                {
+                  animate: controls,
+                  points: "16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76",
+                  transition: {
+                    type: "spring",
+                    stiffness: 120,
+                    damping: 15
+                  },
+                  variants: {
+                    normal: {
+                      rotate: 0
+                    },
+                    animate: {
+                      rotate: 360
+                    }
+                  }
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+CompassIcon.displayName = "CompassIcon";
+
+export {
+  CompassIcon
+};

package/dist/chunk-BXAKCY6X.js

@@ -0,0 +1,86 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/annotation-text/annotation-text.tsx
+import * as React from "react";
+import { motion, useInView, useReducedMotion } from "motion/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var jitter = (n) => Math.sin(n * 12.9898) * 1.6;
+function markPath(type, w, h) {
+  switch (type) {
+    case "underline":
+      return `M -2 ${h + 2 + jitter(1)} Q ${w / 2} ${h + 5 + jitter(2)} ${w + 3} ${h + 1 + jitter(3)}`;
+    case "strike":
+      return `M -3 ${h * 0.55 + jitter(4)} Q ${w / 2} ${h * 0.5 + jitter(5)} ${w + 3} ${h * 0.52 + jitter(6)}`;
+    case "box":
+      return `M -5 ${-3 + jitter(7)} L ${w + 5} ${-4 + jitter(8)} L ${w + 4 + jitter(9)} ${h + 4} L ${-4} ${h + 3 + jitter(10)} Z`;
+    case "circle": {
+      const cx = w / 2;
+      const cy = h / 2;
+      const rx = w / 2 + 7;
+      const ry = h / 2 + 4;
+      const pts = [];
+      for (let k = 0; k <= 26; k++) {
+        const t = k / 24 * Math.PI * 2 - Math.PI / 1.6;
+        const wob = 1 + jitter(k + 11) * 0.02;
+        pts.push(`${(cx + Math.cos(t) * rx * wob).toFixed(1)} ${(cy + Math.sin(t) * ry * wob).toFixed(1)}`);
+      }
+      return `M ${pts.join(" L ")}`;
+    }
+  }
+}
+function AnnotationText({
+  children,
+  type = "underline",
+  color = "#e5484d",
+  strokeWidth = 2.5,
+  delay = 0,
+  duration = 0.7,
+  className
+}) {
+  const ref = React.useRef(null);
+  const inView = useInView(ref, { once: true, amount: 0.8 });
+  const still = useReducedMotion();
+  const [box, setBox] = React.useState({ w: 0, h: 0 });
+  React.useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const measure = () => setBox({ w: el.offsetWidth, h: el.offsetHeight });
+    measure();
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  return /* @__PURE__ */ jsxs("span", { ref, className: cn("relative inline-block whitespace-nowrap", className), children: [
+    box.w > 0 && /* @__PURE__ */ jsx(
+      "svg",
+      {
+        "aria-hidden": true,
+        className: "pointer-events-none absolute left-0 top-0 overflow-visible",
+        width: box.w,
+        height: box.h,
+        children: /* @__PURE__ */ jsx(
+          motion.path,
+          {
+            d: markPath(type, box.w, box.h),
+            fill: "none",
+            stroke: color,
+            strokeWidth,
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            initial: still ? false : { pathLength: 0, opacity: 0 },
+            animate: inView ? { pathLength: 1, opacity: 1 } : void 0,
+            transition: { pathLength: { duration, ease: [0.65, 0, 0.35, 1], delay }, opacity: { duration: 0.01, delay } }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "relative", children })
+  ] });
+}
+
+export {
+  AnnotationText
+};