motion-brew 0.0.0-stage → 0.1.0

package/dist/chunk-6JQY7AX5.js

@@ -0,0 +1,307 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/contour-lines/contour-lines.tsx
+import * as React from "react";
+import { useInView, useReducedMotion } from "motion/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var REVEAL = 1.5;
+var CELL = 10;
+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;
+};
+function ContourField({
+  color,
+  lines,
+  scale,
+  speed,
+  lift,
+  still,
+  pointer,
+  waves,
+  reveal
+}) {
+  const canvas = React.useRef(null);
+  React.useEffect(() => {
+    const el = canvas.current;
+    const ctx = el.getContext("2d");
+    let w = 0;
+    let h = 0;
+    let cols = 0;
+    let rows = 0;
+    let field = new Float32Array(0);
+    let raf = 0;
+    let visible = true;
+    let last = performance.now();
+    let time = 0;
+    let idle = 0;
+    const glow = { x: 0, y: 0, a: 0 };
+    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);
+      cols = Math.ceil(w / CELL) + 1;
+      rows = Math.ceil(h / CELL) + 1;
+      field = new Float32Array(cols * rows);
+    };
+    const sample = () => {
+      const t = time * speed;
+      const z = 45e-4 / scale;
+      for (let j = 0; j < rows; j++) {
+        for (let i = 0; i < cols; i++) {
+          const x = i * CELL;
+          const y = j * CELL;
+          let v = noise(x * z + t * 0.04, y * z - t * 0.025) * 0.65 + noise(x * z * 2.2 - t * 0.03, y * z * 2.2 + 3.1) * 0.35;
+          if (glow.a > 0.01) {
+            const dx = x - glow.x;
+            const dy = y - glow.y;
+            v += glow.a * 0.28 * lift * Math.exp(-(dx * dx + dy * dy) / (2 * 70 * 70));
+          }
+          for (const wv of waves.current) {
+            const age = time - wv.t;
+            const d = Math.hypot(x - wv.x, y - wv.y) - age * 220;
+            v += 0.12 * Math.max(0, 1 - age / 1.8) * Math.exp(-(d * d) / (2 * 22 * 22));
+          }
+          field[j * cols + i] = v;
+        }
+      }
+    };
+    const draw = () => {
+      ctx.clearRect(0, 0, w, h);
+      const start = reveal.current;
+      const pr = still ? 1 : start === -1 || start === -2 ? 0 : Math.min(1, (time - start) / REVEAL);
+      if (pr === 0) return;
+      sample();
+      const step = 1 / (lines + 1);
+      const path = new Path2D();
+      const major = new Path2D();
+      const at = (i, j) => field[j * cols + i];
+      for (let l = 1; l <= lines; l++) {
+        const lv = 0.14 + l * step * 0.78;
+        const p = l % 4 === 0 ? major : path;
+        for (let j = 0; j < rows - 1; j++) {
+          for (let i = 0; i < cols - 1; i++) {
+            const a = at(i, j);
+            const b = at(i + 1, j);
+            const c = at(i + 1, j + 1);
+            const d = at(i, j + 1);
+            const k = (a > lv ? 8 : 0) | (b > lv ? 4 : 0) | (c > lv ? 2 : 0) | (d > lv ? 1 : 0);
+            if (k === 0 || k === 15) continue;
+            const x = i * CELL;
+            const y = j * CELL;
+            const top = () => [x + (lv - a) / (b - a) * CELL, y];
+            const right = () => [x + CELL, y + (lv - b) / (c - b) * CELL];
+            const bottom = () => [x + (lv - d) / (c - d) * CELL, y + CELL];
+            const left = () => [x, y + (lv - a) / (d - a) * CELL];
+            const seg = (p1, p2) => {
+              p.moveTo(p1[0], p1[1]);
+              p.lineTo(p2[0], p2[1]);
+            };
+            switch (k) {
+              case 1:
+              case 14:
+                seg(left(), bottom());
+                break;
+              case 2:
+              case 13:
+                seg(bottom(), right());
+                break;
+              case 3:
+              case 12:
+                seg(left(), right());
+                break;
+              case 4:
+              case 11:
+                seg(top(), right());
+                break;
+              case 5:
+                seg(left(), top());
+                seg(bottom(), right());
+                break;
+              case 6:
+              case 9:
+                seg(top(), bottom());
+                break;
+              case 7:
+              case 8:
+                seg(left(), top());
+                break;
+              case 10:
+                seg(left(), bottom());
+                seg(top(), right());
+                break;
+            }
+          }
+        }
+      }
+      ctx.save();
+      if (pr < 1) {
+        const e = 1 - Math.pow(1 - pr, 3);
+        const reach = (Math.hypot(w, h) / 2 + 40) * e;
+        ctx.beginPath();
+        ctx.arc(w / 2, h / 2, Math.max(0.1, reach), 0, Math.PI * 2);
+        ctx.clip();
+      }
+      ctx.lineCap = "round";
+      ctx.strokeStyle = color;
+      ctx.globalAlpha = 0.16;
+      ctx.lineWidth = 1;
+      ctx.stroke(path);
+      ctx.globalAlpha = 0.28;
+      ctx.lineWidth = 1.4;
+      ctx.stroke(major);
+      if (glow.a > 0.01) {
+        const g = ctx.createRadialGradient(
+          glow.x,
+          glow.y,
+          0,
+          glow.x,
+          glow.y,
+          150
+        );
+        g.addColorStop(0, color);
+        g.addColorStop(1, "transparent");
+        ctx.strokeStyle = g;
+        ctx.globalAlpha = 0.6 * glow.a;
+        ctx.lineWidth = 1.2;
+        ctx.stroke(path);
+        ctx.stroke(major);
+      }
+      ctx.restore();
+    };
+    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(2e-3, 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.03, dt));
+      idle = p.on ? 0 : idle + dt;
+      if (idle > 3.6) {
+        idle = 0;
+        waves.current.push({
+          x: w * (0.15 + Math.random() * 0.7),
+          y: h * (0.15 + Math.random() * 0.5),
+          t: time
+        });
+      }
+      waves.current = waves.current.map((wv) => wv.t < 0 ? { ...wv, t: time } : wv).filter((wv) => time - wv.t < 1.8);
+      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 = 4;
+      draw();
+    } else raf = requestAnimationFrame(frame);
+    return () => {
+      cancelAnimationFrame(raf);
+      ro.disconnect();
+      io.disconnect();
+    };
+  }, [color, lines, scale, speed, lift, still, pointer, waves, reveal]);
+  return /* @__PURE__ */ jsx(
+    "canvas",
+    {
+      ref: canvas,
+      "aria-hidden": true,
+      className: "pointer-events-none absolute inset-0 size-full"
+    }
+  );
+}
+var ContourLines = React.forwardRef(
+  function ContourLines2({
+    color = "#242423",
+    lines = 14,
+    scale = 1,
+    speed = 1,
+    lift = 1,
+    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 waves = 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 waves.current.push({ ...local(e), t: -1 }) : void 0
+        ),
+        className: cn(
+          "relative isolate min-h-[320px] w-full overflow-hidden",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            ContourField,
+            {
+              color,
+              lines: Math.max(4, Math.round(lines)),
+              scale: Math.max(0.3, scale),
+              speed,
+              lift,
+              still,
+              pointer,
+              waves,
+              reveal
+            }
+          ),
+          children
+        ]
+      }
+    );
+  }
+);
+
+export {
+  ContourLines
+};

package/dist/chunk-6LOUA6XB.js

@@ -0,0 +1,237 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/pixel-scroll/pixel-scroll.tsx
+import * as React from "react";
+import { useMotionValueEvent, useScroll } from "motion/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var EASE = {
+  linear: (t) => t,
+  "ease-in": (t) => t * t * t,
+  "ease-out": (t) => 1 - (1 - t) ** 3,
+  "ease-in-out": (t) => t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2,
+  "expo-out": (t) => t >= 1 ? 1 : 1 - 2 ** (-10 * t)
+};
+var hash = (c, r) => {
+  const x = Math.sin(c * 127.1 + r * 311.7) * 43758.5453;
+  return x - Math.floor(x);
+};
+var frac = (v) => v - Math.floor(v);
+function cover(img, W, H) {
+  const k = Math.max(W / img.naturalWidth, H / img.naturalHeight);
+  const w = img.naturalWidth * k;
+  const h = img.naturalHeight * k;
+  return [(W - w) / 2, (H - h) / 2, w, h];
+}
+function useImage(src) {
+  const [img, setImg] = React.useState(null);
+  React.useEffect(() => {
+    if (!src) return setImg(null);
+    const i = new Image();
+    i.onload = () => setImg(i);
+    i.src = src;
+  }, [src]);
+  return img;
+}
+var PixelScroll = React.forwardRef(
+  function PixelScroll2({
+    mode = "colors",
+    from = "#f5f5f5",
+    to = "#242423",
+    layerA,
+    layerB,
+    pixelSize = 16,
+    gap = 0,
+    endAt = 0.8,
+    startAt = 0.08,
+    direction = "bottom-top",
+    pattern = "random",
+    intensity = 0.45,
+    easing = "ease-in-out",
+    accentShare = 0.25,
+    accents = ["#3d66d6", "#d6498f", "#9150e0", "#269a5a"],
+    length = 3,
+    container,
+    children,
+    label,
+    className
+  }, ref) {
+    const track = React.useRef(null);
+    const stage = React.useRef(null);
+    const canvas = React.useRef(null);
+    const [size, setSize] = React.useState({ w: 0, h: 0 });
+    const imgA = useImage(mode === "layers" ? layerA : void 0);
+    const imgB = useImage(mode === "layers" ? layerB : void 0);
+    const { scrollYProgress } = useScroll({
+      target: track,
+      container,
+      offset: ["start start", "end end"]
+    });
+    React.useLayoutEffect(() => {
+      const el = stage.current;
+      if (!el) return;
+      const measure = () => setSize({ w: el.clientWidth, h: el.clientHeight });
+      measure();
+      const ro = new ResizeObserver(measure);
+      ro.observe(el);
+      return () => ro.disconnect();
+    }, []);
+    const grid = React.useMemo(() => {
+      const step = Math.max(2, pixelSize + gap);
+      const cols = Math.ceil(size.w / step) || 0;
+      const rows = Math.ceil(size.h / step) || 0;
+      const th = new Float32Array(cols * rows);
+      const pick = new Float32Array(cols * rows);
+      const cx = (cols - 1) / 2;
+      const cy = (rows - 1) / 2;
+      const maxD = Math.hypot(cx, cy) || 1;
+      const k = Math.max(0, Math.min(1, intensity));
+      for (let r = 0; r < rows; r++)
+        for (let c = 0; c < cols; c++) {
+          const d = Math.hypot(c - cx, r - cy) / maxD;
+          const base = direction === "top-bottom" ? r / Math.max(1, rows - 1) : direction === "bottom-top" ? 1 - r / Math.max(1, rows - 1) : direction === "left-right" ? c / Math.max(1, cols - 1) : direction === "right-left" ? 1 - c / Math.max(1, cols - 1) : direction === "center-out" ? d : 1 - d;
+          const h = hash(c, r);
+          const pv = pattern === "random" ? h : pattern === "checker" ? (c + r) % 2 * 0.7 + h * 0.3 : pattern === "diagonal" ? frac((c + r) / 9) * 0.85 + h * 0.15 : pattern === "wave" ? 0.5 + 0.42 * Math.sin(c * 0.45 + r * 0.18) + (h - 0.5) * 0.16 : pattern === "spiral" ? frac(
+            Math.atan2(r - cy, c - cx) / (Math.PI * 2) + 0.5 + d * 2.2
+          ) * 0.9 + h * 0.1 : frac(d * 4) * 0.85 + h * 0.15;
+          th[r * cols + c] = (1 - k) * base + k * pv;
+          pick[r * cols + c] = hash(c + 91, r + 17);
+        }
+      return { step, cols, rows, th, pick };
+    }, [size, pixelSize, gap, direction, pattern, intensity]);
+    const draw = React.useCallback(
+      (raw) => {
+        const c = canvas.current;
+        if (!c || !size.w || !grid.cols) return;
+        const dpr = Math.min(2, window.devicePixelRatio || 1);
+        if (c.width !== Math.round(size.w * dpr)) {
+          c.width = Math.round(size.w * dpr);
+          c.height = Math.round(size.h * dpr);
+        }
+        const ctx = c.getContext("2d");
+        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+        const W = size.w;
+        const H = size.h;
+        const head = Math.max(0, Math.min(0.5, startAt));
+        const t = head + (1 - head) * EASE[easing](Math.max(0, Math.min(1, raw / Math.max(0.05, endAt))));
+        const band = 0.07;
+        const p = t * (1 + band * 2) - band;
+        const { step, cols, rows, th, pick } = grid;
+        const fillA = () => {
+          if (mode === "layers" && imgA)
+            ctx.drawImage(imgA, ...cover(imgA, W, H));
+          else {
+            ctx.fillStyle = from;
+            ctx.fillRect(0, 0, W, H);
+          }
+        };
+        const drawB = () => {
+          if (mode === "layers" && imgB)
+            ctx.drawImage(imgB, ...cover(imgB, W, H));
+          else {
+            ctx.fillStyle = to;
+            ctx.fillRect(0, 0, W, H);
+          }
+        };
+        ctx.clearRect(0, 0, W, H);
+        fillA();
+        if (t <= 0) return;
+        const settled = new Path2D();
+        const moving = new Path2D();
+        const accentCells = [];
+        const inset = gap / 2;
+        for (let r = 0; r < rows; r++)
+          for (let q = 0; q < cols; q++) {
+            const i = r * cols + q;
+            const lead = p - th[i];
+            if (lead < -band) continue;
+            const x = q * step;
+            const y = r * step;
+            if (lead >= band) settled.rect(x, y, step, step);
+            else {
+              const s = pick[i];
+              if (s < accentShare && accents.length)
+                accentCells.push([
+                  x + inset,
+                  y + inset,
+                  accents[Math.floor(
+                    s / Math.max(1e-4, accentShare) * accents.length
+                  ) % accents.length]
+                ]);
+              else moving.rect(x + inset, y + inset, step - gap, step - gap);
+            }
+          }
+        ctx.save();
+        ctx.clip(settled);
+        drawB();
+        ctx.restore();
+        ctx.save();
+        ctx.clip(moving);
+        drawB();
+        ctx.restore();
+        for (const [x, y, col] of accentCells) {
+          ctx.fillStyle = col;
+          ctx.fillRect(x, y, step - gap, step - gap);
+        }
+      },
+      [
+        size,
+        grid,
+        easing,
+        endAt,
+        startAt,
+        mode,
+        imgA,
+        imgB,
+        from,
+        to,
+        gap,
+        accentShare,
+        accents
+      ]
+    );
+    useMotionValueEvent(scrollYProgress, "change", draw);
+    React.useEffect(() => draw(scrollYProgress.get()), [draw, scrollYProgress]);
+    const inContainer = !!container;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: (el) => {
+          track.current = el;
+          if (typeof ref === "function") ref(el);
+          else if (ref) ref.current = el;
+        },
+        className: cn("relative w-full", className),
+        style: {
+          height: inContainer ? `${length * 100}%` : `${length * 100}vh`
+        },
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: stage,
+            className: "sticky top-0 w-full overflow-hidden",
+            style: { height: inContainer ? `${100 / length}%` : "100vh" },
+            ...label ? { role: "img", "aria-label": label } : {},
+            children: [
+              /* @__PURE__ */ jsx(
+                "canvas",
+                {
+                  ref: canvas,
+                  "aria-hidden": true,
+                  className: "absolute inset-0 size-full"
+                }
+              ),
+              children && /* @__PURE__ */ jsx("div", { className: "relative h-full", children })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+
+export {
+  PixelScroll
+};