motion-brew 0.0.0-stage → 0.1.1

package/dist/chunk-4CKKTOJK.js

@@ -0,0 +1,366 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/ribbon-gallery/ribbon-gallery.tsx
+import * as React from "react";
+import { useAnimationFrame, useReducedMotion } from "motion/react";
+import { ArrowRight } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var photo = (id) => `https://images.unsplash.com/photo-${id}?w=1040&h=1280&fit=crop&q=80`;
+var DEFAULT_ITEMS = [
+  { src: photo("1470071459604-3b5ec3a7fe05"), title: "Soft Signal" },
+  { src: photo("1505144808419-1957a94ca61e"), title: "Tide Lines" },
+  { src: photo("1475924156734-496f6cac6ec1"), title: "Afterglow" },
+  { src: photo("1500534314209-a25ddb2bd429"), title: "Paper Dunes" },
+  { src: photo("1494500764479-0c8f2919a3d8"), title: "Night Bloom" },
+  { src: photo("1490750967868-88aa4486c946"), title: "Glass Garden" },
+  { src: photo("1519681393784-d120267933ba"), title: "Low Orbit" },
+  { src: photo("1508739773434-c26b3d09e071"), title: "Velvet Hour" }
+];
+var SLICES = 20;
+var PERSPECTIVE = 1400;
+var OVERLAP = 2;
+var TITLE_SLICE = 2;
+var SUPERSAMPLE = 2;
+var mod = (a, n) => (a % n + n) % n;
+var RibbonGallery = React.forwardRef(function RibbonGallery2({
+  items = DEFAULT_ITEMS,
+  angle = 20,
+  curve = 0.45,
+  cardWidth = 230,
+  cardHeight = 290,
+  gap = 14,
+  drift = 30,
+  momentum = 0.65,
+  wave = 1,
+  blur = 9.5,
+  intro = true,
+  wheel = true,
+  dim = 0.75,
+  dimColor = "rgb(245 245 245)",
+  label = "Project ribbon",
+  className
+}, forwardedRef) {
+  const still = !!useReducedMotion();
+  const root = React.useRef(null);
+  React.useImperativeHandle(forwardedRef, () => root.current);
+  const track = React.useRef(null);
+  const blurNode = React.useRef(null);
+  const slices = React.useRef([]);
+  const washes = React.useRef([]);
+  const titles = React.useRef([]);
+  const arrows = React.useRef([]);
+  const uid = React.useId().replace(/[^a-zA-Z0-9]/g, "");
+  const [view, setView] = React.useState({ w: 0, h: 0 });
+  const cam = React.useRef({ x: 0, tx: 0, v: 0, time: 0, phase: 0 });
+  const band = React.useRef({ x: 0, v: 0 });
+  const drag = React.useRef(null);
+  const swallowClick = React.useRef(false);
+  const hovering = React.useRef(false);
+  const hovered = React.useRef(null);
+  const focus = React.useRef([]);
+  const settled = React.useRef([]);
+  const written = React.useRef([]);
+  const introAt = React.useRef(null);
+  const settings = React.useRef({
+    angle,
+    drift,
+    momentum,
+    wave,
+    blur,
+    dim,
+    still
+  });
+  settings.current = { angle, drift, momentum, wave, blur, dim, still };
+  const pitch = cardWidth + gap;
+  const sliceW = cardWidth / SLICES;
+  const rad = angle * Math.PI / 180;
+  const run = view.w ? Math.abs(view.w * Math.cos(rad)) + Math.abs(view.h * Math.sin(rad)) : 0;
+  const radius = run ? run / (0.9 + Math.max(0, Math.min(1, curve)) * 2.6) : 1;
+  const visibleHalf = Math.min(radius * 1.45, run * 0.9);
+  const needed = Math.ceil((2 * visibleHalf + cardWidth) / pitch) + 2;
+  const count = run && items.length ? Math.ceil(needed / items.length) * items.length : 0;
+  const span = count * pitch;
+  React.useLayoutEffect(() => {
+    const el = root.current;
+    if (!el) return;
+    const measure = () => setView({ w: el.clientWidth, h: el.clientHeight });
+    measure();
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  React.useEffect(() => {
+    const el = root.current;
+    if (!el) return;
+    if (!intro || still) {
+      introAt.current = -Infinity;
+      return;
+    }
+    const io = new IntersectionObserver(
+      ([entry]) => {
+        if (entry?.isIntersecting && introAt.current === null) {
+          introAt.current = performance.now();
+          cam.current.x = cam.current.tx + pitch * 3.2;
+          io.disconnect();
+        }
+      },
+      { threshold: 0.25 }
+    );
+    io.observe(el);
+    return () => io.disconnect();
+  }, []);
+  React.useEffect(() => {
+    const el = root.current;
+    if (!el || !wheel) return;
+    const onWheel = (e) => {
+      e.preventDefault();
+      const k = e.deltaMode === 1 ? 32 : 1;
+      cam.current.tx -= (Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY) * k;
+    };
+    el.addEventListener("wheel", onWheel, { passive: false });
+    return () => el.removeEventListener("wheel", onWheel);
+  }, [wheel]);
+  useAnimationFrame((_, delta) => {
+    var _a;
+    if (!count) return;
+    const dt = Math.min(delta, 50) / 1e3;
+    const s = settings.current;
+    const c = cam.current;
+    c.time += dt;
+    if (!drag.current) {
+      c.tx += c.v * dt;
+      c.v *= Math.exp(-dt * (1.5 + (1 - s.momentum) * 10));
+      if (!hovering.current && !s.still && s.drift > 0) c.tx -= s.drift * dt;
+    }
+    const introAge = introAt.current === null ? -1 : (performance.now() - introAt.current) / 1e3;
+    if (introAge < 0 && !s.still) {
+      if (track.current) track.current.style.opacity = "0";
+      return;
+    }
+    const rate = introAge < 1.6 ? 2.6 + introAge * 4 : 12;
+    const px = c.x;
+    c.x += (c.tx - c.x) * (s.still ? 1 : 1 - Math.exp(-dt * rate));
+    const speed = dt > 0 ? (c.x - px) / dt : 0;
+    const b = band.current;
+    const K = 160;
+    b.v += ((speed - b.x) * K - b.v * 2 * Math.sqrt(K) * 0.45) * dt;
+    b.x += b.v * dt;
+    const pull = s.still ? 0 : Math.min(1, Math.abs(b.x) / 2200);
+    if (track.current) {
+      track.current.style.opacity = s.still ? "1" : Math.min(1, Math.max(0, introAge) * 2.5).toFixed(3);
+      const sd = s.still || !s.blur ? 0 : Math.min(s.blur, Math.abs(b.x) / 240);
+      blurNode.current?.setAttribute("stdDeviation", `${sd.toFixed(2)} 0`);
+      track.current.style.filter = sd > 0.05 ? `url(#${uid}-blur)` : "none";
+    }
+    const amp = s.still ? 0 : (0.4 + pull * 0.55) * s.wave;
+    c.phase += dt * (1.2 - Math.max(-3, Math.min(3, b.x / 300)));
+    const R = radius;
+    const maxPhi = 1.45;
+    const focusEase = s.still ? 1 : 1 - Math.exp(-dt * 9);
+    for (let k = 0; k < count; k++) {
+      const center = mod(k * pitch + c.x + span / 2, span) - span / 2;
+      const want = hovered.current === null || hovered.current === k ? 1 : 0;
+      const f = ((_a = focus.current)[k] ?? (_a[k] = 1)) + (want - (focus.current[k] ?? 1)) * focusEase;
+      focus.current[k] = f;
+      const up = (settled.current[k] ?? 0) + ((hovered.current === k ? 1 : 0) - (settled.current[k] ?? 0)) * focusEase;
+      settled.current[k] = up;
+      const cardAmp = amp * (1 - up);
+      const opacity = 1 - (1 - f) * Math.max(0, Math.min(1, s.dim)) * 0.88;
+      const writeOpacity = Math.abs((written.current[k] ?? 1) - opacity) > 2e-3;
+      if (writeOpacity) written.current[k] = opacity;
+      for (let j = 0; j < SLICES; j++) {
+        const el = slices.current[k * SLICES + j];
+        if (!el) continue;
+        const x = center - cardWidth / 2 + (j + 0.5) * sliceW;
+        const phi = x / R;
+        const depth = R * (1 - Math.cos(phi));
+        const hidden = Math.abs(phi) > maxPhi || depth > PERSPECTIVE * 0.7;
+        let transform = "";
+        if (!hidden) {
+          const wobble = Math.sin(phi * 2.4 - c.phase);
+          const ty = wobble * 26 * cardAmp;
+          const sy = 1 + Math.cos(phi * 1.9 + c.time * 1.2) * 0.1 * cardAmp;
+          transform = `translate3d(${(R * Math.sin(phi)).toFixed(2)}px, ${ty.toFixed(2)}px, ${depth.toFixed(2)}px) rotateY(${(-phi).toFixed(4)}rad) scaleY(${sy.toFixed(4)})`;
+          el.style.transform = `${transform} scale(${1 / SUPERSAMPLE})`;
+        }
+        el.style.visibility = hidden ? "hidden" : "visible";
+        const wash = washes.current[k * SLICES + j];
+        if (writeOpacity && wash) wash.style.opacity = (1 - opacity).toFixed(3);
+        const overlay = j === TITLE_SLICE ? titles.current[k] : j === SLICES - 1 ? arrows.current[k] : null;
+        if (overlay) {
+          overlay.style.visibility = hidden ? "hidden" : "visible";
+          if (writeOpacity) overlay.style.opacity = opacity.toFixed(3);
+          if (!hidden) overlay.style.transform = transform;
+        }
+      }
+    }
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: root,
+      role: "region",
+      "aria-label": label,
+      "aria-roledescription": "carousel",
+      tabIndex: 0,
+      onPointerEnter: (e) => e.pointerType === "mouse" && (hovering.current = true),
+      onPointerLeave: () => {
+        hovering.current = false;
+        hovered.current = null;
+      },
+      onPointerDown: (e) => {
+        if (e.button !== 0) return;
+        drag.current = {
+          id: e.pointerId,
+          x: e.clientX,
+          y: e.clientY,
+          sx: e.clientX,
+          sy: e.clientY,
+          t: performance.now(),
+          moved: false
+        };
+        cam.current.v = 0;
+        swallowClick.current = false;
+      },
+      onPointerMove: (e) => {
+        const d = drag.current;
+        if (!d || d.id !== e.pointerId) return;
+        const now = performance.now();
+        const a = settings.current.angle * Math.PI / 180;
+        const along = (e.clientX - d.x) * Math.cos(a) - (e.clientY - d.y) * Math.sin(a);
+        if (!d.moved && Math.hypot(e.clientX - d.sx, e.clientY - d.sy) > 5) {
+          d.moved = true;
+          e.currentTarget.setPointerCapture(e.pointerId);
+        }
+        cam.current.tx += along;
+        cam.current.v = cam.current.v * 0.6 + along / (Math.max(1, now - d.t) / 1e3) * 0.4;
+        Object.assign(d, { x: e.clientX, y: e.clientY, t: now });
+      },
+      onPointerUp: (e) => {
+        const d = drag.current;
+        if (!d || d.id !== e.pointerId) return;
+        if (d.moved) swallowClick.current = true;
+        if (performance.now() - d.t > 80 || still) cam.current.v = 0;
+        drag.current = null;
+      },
+      onPointerCancel: () => drag.current = null,
+      onKeyDown: (e) => {
+        if (e.target !== e.currentTarget) return;
+        if (e.key === "ArrowLeft" || e.key === "ArrowUp")
+          e.preventDefault(), cam.current.tx += pitch;
+        if (e.key === "ArrowRight" || e.key === "ArrowDown")
+          e.preventDefault(), cam.current.tx -= pitch;
+      },
+      className: cn(
+        "relative h-[520px] w-full cursor-grab touch-none select-none outline-none active:cursor-grabbing focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-zinc-400",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("svg", { "aria-hidden": true, className: "absolute size-0", children: /* @__PURE__ */ jsx("filter", { id: `${uid}-blur`, x: "-10%", y: "-10%", width: "120%", height: "120%", children: /* @__PURE__ */ jsx("feGaussianBlur", { ref: blurNode, stdDeviation: "0 0" }) }) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: track,
+            className: "absolute left-1/2 top-1/2 size-0",
+            style: {
+              transform: `rotate(${-angle}deg)`,
+              opacity: 0
+            },
+            children: Array.from({ length: count }, (_, k) => {
+              const item = items[k % items.length];
+              const repeat = k >= items.length;
+              const Card = item.href ? "a" : "div";
+              return /* @__PURE__ */ jsxs(
+                Card,
+                {
+                  ...item.href ? { href: item.href, draggable: false } : {},
+                  ...repeat ? { "aria-hidden": true, tabIndex: -1 } : { "aria-label": item.alt ?? item.title },
+                  onClick: (e) => swallowClick.current && e.preventDefault(),
+                  onDragStart: (e) => e.preventDefault(),
+                  onPointerEnter: (e) => {
+                    if (e.pointerType === "mouse" && !drag.current?.moved)
+                      hovered.current = k;
+                  },
+                  onPointerLeave: (e) => {
+                    if (e.pointerType === "mouse" && hovered.current === k)
+                      hovered.current = null;
+                  },
+                  onFocus: () => hovered.current = k,
+                  onBlur: () => hovered.current === k && (hovered.current = null),
+                  className: "group/card absolute left-0 top-0 block outline-none",
+                  style: { perspective: PERSPECTIVE },
+                  children: [
+                    Array.from({ length: SLICES }, (_2, j) => /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        ref: (el) => void (slices.current[k * SLICES + j] = el),
+                        className: cn(
+                          "absolute block bg-zinc-300 will-change-transform dark:bg-zinc-700",
+                          j === 0 && "rounded-l-[36px]",
+                          j === SLICES - 1 && "rounded-r-[36px]"
+                        ),
+                        style: {
+                          width: (sliceW + OVERLAP * 2) * SUPERSAMPLE,
+                          height: cardHeight * SUPERSAMPLE,
+                          left: (-sliceW / 2 - OVERLAP) * SUPERSAMPLE,
+                          top: -cardHeight / 2 * SUPERSAMPLE,
+                          backgroundImage: `url("${item.src}")`,
+                          backgroundSize: `${cardWidth * SUPERSAMPLE}px ${cardHeight * SUPERSAMPLE}px`,
+                          backgroundPosition: `${(-j * sliceW + OVERLAP) * SUPERSAMPLE}px 0`,
+                          visibility: "hidden"
+                        },
+                        children: /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            ref: (el) => void (washes.current[k * SLICES + j] = el),
+                            className: "pointer-events-none absolute inset-0 block rounded-[inherit]",
+                            style: { background: dimColor, opacity: 0 }
+                          }
+                        )
+                      },
+                      j
+                    )),
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        ref: (el) => void (titles.current[k] = el),
+                        className: "pointer-events-none absolute block whitespace-nowrap text-[14px] font-medium leading-none tracking-tight text-white will-change-transform [text-shadow:0_1px_8px_rgba(0,0,0,0.45)]",
+                        style: {
+                          left: -sliceW / 2 - TITLE_SLICE * sliceW + 18,
+                          top: cardHeight / 2 - 34,
+                          visibility: "hidden"
+                        },
+                        children: item.title
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        ref: (el) => void (arrows.current[k] = el),
+                        className: "pointer-events-none absolute block will-change-transform",
+                        style: {
+                          left: sliceW / 2 - 14 - 28,
+                          top: cardHeight / 2 - 18 - 28,
+                          visibility: "hidden"
+                        },
+                        children: /* @__PURE__ */ jsx("span", { className: "grid size-7 place-items-center rounded-full bg-white text-zinc-900 transition-transform duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] group-hover/card:scale-[1.18]", children: /* @__PURE__ */ jsx(ArrowRight, { className: "size-3.5", strokeWidth: 2.5 }) })
+                      }
+                    )
+                  ]
+                },
+                k
+              );
+            })
+          }
+        )
+      ]
+    }
+  );
+});
+
+export {
+  RibbonGallery
+};

package/dist/chunk-4IGMH34C.js

@@ -0,0 +1,319 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/pixel-blast/pixel-blast.tsx
+import * as React from "react";
+import { useInView, useReducedMotion } from "motion/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+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"
+    }
+  );
+}
+var PixelBlast = React.forwardRef(
+  function PixelBlast2({
+    color = "#252528",
+    cellSize = 6,
+    shape = "square",
+    speed = 1,
+    coverage = 1.4,
+    density = 0.8,
+    floor = false,
+    interactive = true,
+    children,
+    className
+  }, ref) {
+    const root = React.useRef(null);
+    React.useImperativeHandle(ref, () => root.current);
+    const still = !!useReducedMotion();
+    const inView = useInView(root, { once: true, amount: 0.2 });
+    const pointer = React.useRef({ x: -999, y: -999, on: false });
+    const ripples = React.useRef([]);
+    const reveal = React.useRef(-1);
+    React.useEffect(() => {
+      if (inView || still) reveal.current = -2;
+    }, [inView, still]);
+    const local = (e) => {
+      const r = root.current.getBoundingClientRect();
+      return { x: e.clientX - r.left, y: e.clientY - r.top };
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: root,
+        onPointerMove: interactive ? (e) => void (pointer.current = { ...local(e), on: true }) : void 0,
+        onPointerLeave: interactive ? () => void (pointer.current = { ...pointer.current, on: false }) : void 0,
+        onPointerDown: (
+          // t < 0 marks it new; the field stamps it with its own clock.
+          interactive ? (e) => void ripples.current.push({ ...local(e), t: -1 }) : void 0
+        ),
+        className: cn(
+          "relative isolate min-h-[320px] w-full overflow-hidden",
+          className
+        ),
+        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
+            }
+          ),
+          children
+        ]
+      }
+    );
+  }
+);
+
+export {
+  PixelBlast
+};