motion-brew 0.0.0-stage → 0.1.1

package/dist/chunk-6WSY725U.js

@@ -0,0 +1,387 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/decay-card/decay-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 GLIDE = [0.22, 1, 0.36, 1];
+var DecayCard = React.forwardRef(
+  function DecayCard2({
+    src = "https://images.unsplash.com/photo-1454496522488-7a8e488e8606?w=720&h=940&fit=crop&q=80",
+    revealSrc = "https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=720&h=940&fit=crop&q=80",
+    tag = "Field notes",
+    title = "Nothing stays",
+    subtitle = "Hover the picture and watch it rot away from the inside.",
+    depth = 1.6,
+    speed = 1,
+    tilt = 8,
+    glare: showGlare = true,
+    className
+  }, ref) {
+    const still = !!useReducedMotion();
+    const box = React.useRef(null);
+    React.useImperativeHandle(ref, () => box.current);
+    const canvas = React.useRef(null);
+    const settings = React.useRef({ depth, speed, still });
+    settings.current = { depth, speed, still };
+    const kick = React.useRef(() => {
+    });
+    const [open, setOpen] = React.useState(false);
+    React.useEffect(() => {
+      const el = canvas.current;
+      const host = box.current;
+      if (!el || !host) return;
+      const ctx = el.getContext("2d");
+      if (!ctx) return;
+      const N = 260;
+      const grit = Float32Array.from(
+        { length: N },
+        () => (Math.random() - 0.5) * 2
+      );
+      const waves = [
+        { f: 3, a: 0.07, p: Math.random() * 6 },
+        { f: 5, a: 0.05, p: Math.random() * 6 },
+        { f: 9, a: 0.035, p: Math.random() * 6 },
+        { f: 17, a: 0.02, p: Math.random() * 6 }
+      ];
+      const flecks = Array.from({ length: 220 }, () => {
+        const near = Math.random() < 0.55;
+        return {
+          a: Math.random() * Math.PI * 2,
+          k: near ? 1 + Math.random() * 0.12 : 1.04 + Math.random() * 0.34,
+          r: near ? 1.5 + Math.random() * 5 : 0.6 + Math.random() * 2.2
+        };
+      });
+      let raf = 0;
+      let running = false;
+      let w = 0;
+      let h = 0;
+      let dpr = 1;
+      let ready = false;
+      let p = 0;
+      let target = 0;
+      let time = 0;
+      let last = 0;
+      const centre = { x: 0, y: 0, tx: 0, ty: 0 };
+      const img = new Image();
+      img.crossOrigin = "anonymous";
+      img.decoding = "async";
+      img.src = src;
+      const fit = () => {
+        dpr = Math.min(2, window.devicePixelRatio || 1);
+        w = host.clientWidth;
+        h = host.clientHeight;
+        el.width = Math.round(w * dpr);
+        el.height = Math.round(h * dpr);
+        el.style.width = `${w}px`;
+        el.style.height = `${h}px`;
+      };
+      const cover = () => {
+        const ir = img.naturalWidth / img.naturalHeight;
+        const br = w / h;
+        if (ir > br) {
+          const sw = img.naturalHeight * br;
+          return [
+            (img.naturalWidth - sw) / 2,
+            0,
+            sw,
+            img.naturalHeight
+          ];
+        }
+        const sh = img.naturalWidth / br;
+        return [0, (img.naturalHeight - sh) / 2, img.naturalWidth, sh];
+      };
+      const rim = (t, a, b) => {
+        const c = Math.abs(Math.cos(t)) / a;
+        const s = Math.abs(Math.sin(t)) / b;
+        return 1 / Math.pow(Math.pow(c, 4) + Math.pow(s, 4), 0.25);
+      };
+      const draw = () => {
+        if (!ready) return;
+        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+        ctx.globalCompositeOperation = "source-over";
+        ctx.clearRect(0, 0, w, h);
+        const [sx, sy, sw, sh] = cover();
+        ctx.drawImage(img, sx, sy, sw, sh, 0, 0, w, h);
+        if (p < 2e-3) return;
+        const grow = p * settings.current.depth;
+        const a = w / 2 * grow;
+        const b = h / 2 * grow;
+        ctx.globalCompositeOperation = "destination-out";
+        ctx.fillStyle = "#000";
+        ctx.beginPath();
+        for (let i = 0; i <= N; i++) {
+          const t = i / N * Math.PI * 2;
+          let k = 1 + grit[i % N] * 0.035;
+          for (const wv of waves)
+            k += Math.sin(t * wv.f + wv.p + time * (0.6 + wv.f * 0.05)) * wv.a;
+          const r = rim(t, a, b) * k;
+          const x = centre.x + Math.cos(t) * r;
+          const y = centre.y + Math.sin(t) * r;
+          if (i === 0) ctx.moveTo(x, y);
+          else ctx.lineTo(x, y);
+        }
+        ctx.closePath();
+        ctx.fill();
+        for (const f of flecks) {
+          const r = rim(f.a, a, b) * f.k;
+          ctx.beginPath();
+          ctx.arc(
+            centre.x + Math.cos(f.a) * r,
+            centre.y + Math.sin(f.a) * r,
+            f.r * Math.min(1, p * 1.6),
+            0,
+            Math.PI * 2
+          );
+          ctx.fill();
+        }
+        ctx.globalCompositeOperation = "source-over";
+      };
+      const loop = (now) => {
+        const dt = Math.min(0.05, last ? (now - last) / 1e3 : 0.016);
+        last = now;
+        const set = settings.current;
+        const rate = target > p ? 1.15 : 1.8;
+        p += (target - p) * Math.min(1, dt * rate * set.speed);
+        time += dt * (0.8 + p);
+        const room = Math.max(0, 1 - set.depth * Math.max(p, 0.3));
+        const limX = w / 2 * room;
+        const limY = h / 2 * room;
+        const gx = w / 2 + Math.max(-limX, Math.min(limX, centre.tx - w / 2));
+        const gy = h / 2 + Math.max(-limY, Math.min(limY, centre.ty - h / 2));
+        centre.x += (gx - centre.x) * Math.min(1, dt * 5);
+        centre.y += (gy - centre.y) * Math.min(1, dt * 5);
+        draw();
+        if (target === 0 && p < 2e-3) {
+          p = 0;
+          draw();
+          running = false;
+          return;
+        }
+        raf = requestAnimationFrame(loop);
+      };
+      const start = () => {
+        if (running || settings.current.still) return;
+        running = true;
+        last = 0;
+        raf = requestAnimationFrame(loop);
+      };
+      kick.current = start;
+      img.onload = () => {
+        ready = true;
+        centre.x = centre.tx = w / 2;
+        centre.y = centre.ty = h / 2;
+        draw();
+      };
+      const local = (e) => {
+        const r = host.getBoundingClientRect();
+        return { x: e.clientX - r.left, y: e.clientY - r.top };
+      };
+      const onEnter = (e) => {
+        if (!ready || settings.current.still) return;
+        const q = local(e);
+        if (p < 0.05) {
+          centre.x = centre.tx = q.x;
+          centre.y = centre.ty = q.y;
+        }
+        target = 1;
+        setOpen(true);
+        start();
+      };
+      const onMove = (e) => {
+        const q = local(e);
+        centre.tx = q.x;
+        centre.ty = q.y;
+        if (target === 0 && e.pointerType !== "mouse") onEnter(e);
+      };
+      const onLeave = () => {
+        target = 0;
+        setOpen(false);
+        start();
+      };
+      fit();
+      const ro = new ResizeObserver(() => {
+        fit();
+        draw();
+      });
+      ro.observe(host);
+      host.addEventListener("pointerenter", onEnter);
+      host.addEventListener("pointermove", onMove);
+      host.addEventListener("pointerleave", onLeave);
+      return () => {
+        cancelAnimationFrame(raf);
+        ro.disconnect();
+        host.removeEventListener("pointerenter", onEnter);
+        host.removeEventListener("pointermove", onMove);
+        host.removeEventListener("pointerleave", onLeave);
+      };
+    }, [src]);
+    const px = useMotionValue(0.5);
+    const py = useMotionValue(0.5);
+    const spring = { stiffness: 170, damping: 20 };
+    const amount = still ? 0 : Math.max(0, tilt);
+    const depth3d = amount / 12;
+    const rotateX = useSpring(
+      useTransform(py, (v) => (0.5 - v) * 2 * amount * 0.83),
+      spring
+    );
+    const rotateY = useSpring(
+      useTransform(px, (v) => (v - 0.5) * 2 * amount),
+      spring
+    );
+    const lift = useSpring(1, spring);
+    const textX = useSpring(
+      useTransform(px, (v) => (v - 0.5) * 16 * depth3d),
+      spring
+    );
+    const textY = useSpring(
+      useTransform(py, (v) => (v - 0.5) * 12 * depth3d),
+      spring
+    );
+    const glareX = useTransform(px, (v) => `${v * 100}%`);
+    const glareY = useTransform(py, (v) => `${v * 100}%`);
+    const glare = useMotionTemplate`radial-gradient(260px circle at ${glareX} ${glareY}, rgba(255,255,255,0.2), transparent 65%)`;
+    const lean = (e) => {
+      if (still) return;
+      const r = e.currentTarget.getBoundingClientRect();
+      px.set((e.clientX - r.left) / r.width);
+      py.set((e.clientY - r.top) / r.height);
+    };
+    const show = { opacity: 1, y: 0, filter: "blur(0px)" };
+    const hide = { opacity: 0, y: 10, filter: "blur(4px)" };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("aspect-[340/440] w-[340px] max-w-full", className),
+        style: { perspective: 1e3 },
+        onPointerMove: lean,
+        onPointerEnter: () => amount > 0 && lift.set(1 + 0.03 * Math.min(1, depth3d)),
+        onPointerLeave: () => {
+          px.set(0.5);
+          py.set(0.5);
+          lift.set(1);
+        },
+        children: /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            ref: box,
+            style: {
+              rotateX,
+              rotateY,
+              scale: lift
+            },
+            className: "relative size-full overflow-hidden rounded-3xl bg-[#0b0b0c] shadow-[0_1px_2px_rgba(0,0,0,0.06),0_24px_48px_-20px_rgba(0,0,0,0.45)] will-change-transform",
+            children: [
+              /* @__PURE__ */ jsx(
+                motion.img,
+                {
+                  src: revealSrc,
+                  alt: "",
+                  "aria-hidden": true,
+                  draggable: false,
+                  initial: false,
+                  animate: { scale: open && !still ? 1 : 1.12 },
+                  transition: { duration: 1.4, ease: GLIDE },
+                  className: "absolute inset-0 size-full select-none object-cover"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src,
+                  alt: "",
+                  "aria-hidden": true,
+                  draggable: false,
+                  className: cn(
+                    "absolute inset-0 size-full select-none object-cover",
+                    !still && "hidden"
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "canvas",
+                {
+                  ref: canvas,
+                  role: "img",
+                  "aria-label": title,
+                  className: cn("absolute inset-0 size-full", still && "hidden")
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "aria-hidden": true,
+                  className: "pointer-events-none absolute inset-x-0 bottom-0 h-1/2 bg-gradient-to-t from-black/75 via-black/35 to-transparent"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                motion.span,
+                {
+                  initial: still ? false : hide,
+                  animate: show,
+                  transition: { duration: 0.5, ease: GLIDE, delay: 0.1 },
+                  className: "pointer-events-none absolute left-4 top-4 rounded-full bg-white/15 px-3 py-1 text-xs font-medium text-white backdrop-blur-md",
+                  children: tag
+                }
+              ),
+              !still && showGlare && /* @__PURE__ */ jsx(
+                motion.div,
+                {
+                  "aria-hidden": true,
+                  className: cn(
+                    "pointer-events-none absolute inset-0 mix-blend-soft-light transition-opacity duration-300",
+                    open ? "opacity-100" : "opacity-0"
+                  ),
+                  style: { background: glare }
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                motion.div,
+                {
+                  style: { x: textX, y: textY },
+                  className: "pointer-events-none absolute inset-x-0 bottom-0 p-6 text-white",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      motion.h3,
+                      {
+                        initial: still ? false : hide,
+                        animate: show,
+                        transition: { duration: 0.55, ease: GLIDE, delay: 0.15 },
+                        className: "text-2xl font-semibold tracking-tight",
+                        children: title
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      motion.p,
+                      {
+                        initial: still ? false : hide,
+                        animate: show,
+                        transition: { duration: 0.55, ease: GLIDE, delay: 0.25 },
+                        className: "mt-1.5 text-sm leading-relaxed text-white/75",
+                        children: subtitle
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+
+export {
+  DecayCard
+};