bits-lab 0.0.0-stage → 0.1.2

package/dist/PixelType.js

@@ -0,0 +1,220 @@
+'use client';
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+const hexToRgb = (hex) => {
+  const n = parseInt(hex.replace("#", "").replace(/^(.)(.)(.)$/, "$1$1$2$2$3$3"), 16);
+  return [n >> 16 & 255, n >> 8 & 255, n & 255];
+};
+function PixelType({
+  text = "PIXEL",
+  effect = "assemble",
+  pixelSize = 6,
+  gap = 1,
+  font = '"Press Start 2P", ui-monospace, monospace',
+  rows = 12,
+  colors = ["#ffcd75", "#ef7d57", "#b13e53"],
+  repel = 70,
+  stiffness = 90,
+  damping = 11,
+  hold = 2400,
+  trigger = "view",
+  align = "center",
+  className = "",
+  style
+}) {
+  const canvasRef = useRef(null);
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext("2d");
+    const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    const pitch = pixelSize + gap;
+    const palette = colors.map(hexToRgb);
+    let blocks = [];
+    let W = 0;
+    let H = 0;
+    let gridW = 0;
+    let dpr = 1;
+    let raf = 0;
+    let last = 0;
+    let visible = true;
+    let started = trigger === "mount";
+    let phase = "idle";
+    let phaseAt = 0;
+    const pointer = { x: -1e4, y: -1e4 };
+    const raster = () => {
+      const probe = document.createElement("canvas").getContext("2d");
+      probe.font = `${rows}px ${font}`;
+      const w = Math.ceil(probe.measureText(text).width) + 2;
+      const off = document.createElement("canvas");
+      off.width = Math.max(1, w);
+      off.height = rows + 2;
+      const o = off.getContext("2d");
+      o.font = `${rows}px ${font}`;
+      o.textBaseline = "middle";
+      o.fillStyle = "#fff";
+      o.fillText(text, 1, (rows + 2) / 2 + 1);
+      const data = o.getImageData(0, 0, off.width, off.height).data;
+      const cells = [];
+      for (let y = 0; y < off.height; y++) for (let x = 0; x < off.width; x++) if (data[(y * off.width + x) * 4 + 3] > 120) cells.push([x, y]);
+      return { cells, w: off.width, h: off.height };
+    };
+    const layout = () => {
+      const { cells, w, h } = raster();
+      gridW = w * pitch;
+      dpr = Math.min(2, window.devicePixelRatio || 1);
+      W = canvas.clientWidth;
+      H = h * pitch;
+      canvas.style.height = `${H}px`;
+      canvas.width = Math.round(W * dpr);
+      canvas.height = Math.round(H * dpr);
+      const ox = align === "start" ? 0 : align === "end" ? W - gridW : (W - gridW) / 2;
+      const old = blocks;
+      blocks = cells.map(([cx, cy], i) => {
+        const hx = ox + cx * pitch;
+        const hy = cy * pitch;
+        const prev = old[i];
+        const color = palette[Math.min(palette.length - 1, Math.floor(cy / h * palette.length))];
+        return prev ? { ...prev, hx, hy, color } : { hx, hy, x: hx, y: hy, vx: 0, vy: 0, color, loose: false };
+      });
+    };
+    const scatter = () => {
+      blocks.forEach((b) => {
+        b.x = Math.random() * W;
+        b.y = H + Math.random() * H * 2;
+        b.vx = 0;
+        b.vy = 0;
+        b.loose = false;
+      });
+    };
+    const draw = () => {
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+      ctx.clearRect(0, 0, W, H);
+      if (!started && !reduced) return;
+      blocks.forEach((b) => {
+        const [r, g, bl] = b.color;
+        ctx.fillStyle = `rgb(${r},${g},${bl})`;
+        ctx.fillRect(Math.round(b.x), Math.round(b.y), pixelSize, pixelSize);
+      });
+    };
+    const tick = (now) => {
+      const dt = Math.max(0, Math.min(0.033, (now - last) / 1e3));
+      last = now;
+      if (phase === "holding" && effect === "crumble" && now - phaseAt > hold) {
+        phase = "falling";
+        phaseAt = now;
+        blocks.forEach((b) => {
+          b.loose = true;
+          b.vx = (Math.random() - 0.5) * 120;
+          b.vy = -Math.random() * 160;
+        });
+      }
+      if (phase === "falling" && now - phaseAt > 1400) {
+        phase = "forming";
+        phaseAt = now;
+        blocks.forEach((b) => b.loose = false);
+      }
+      let moving = false;
+      blocks.forEach((b) => {
+        if (b.loose) {
+          b.vy += 900 * dt;
+          b.x += b.vx * dt;
+          b.y = Math.min(H * 3, b.y + b.vy * dt);
+          moving = true;
+          return;
+        }
+        let tx = b.hx;
+        let ty = b.hy;
+        const dx = b.x - pointer.x;
+        const dy = b.y - pointer.y;
+        const d = Math.hypot(dx, dy);
+        if (d < repel && d > 0) {
+          const push = (1 - d / repel) * repel * 0.6;
+          tx += dx / d * push;
+          ty += dy / d * push;
+        }
+        b.vx += (stiffness * (tx - b.x) - damping * b.vx) * dt;
+        b.vy += (stiffness * (ty - b.y) - damping * b.vy) * dt;
+        b.x += b.vx * dt;
+        b.y += b.vy * dt;
+        if (Math.abs(tx - b.x) > 0.3 || Math.abs(ty - b.y) > 0.3 || Math.abs(b.vx) > 2 || Math.abs(b.vy) > 2) moving = true;
+        else if (tx === b.hx && ty === b.hy) {
+          b.x = b.hx;
+          b.y = b.hy;
+          b.vx = 0;
+          b.vy = 0;
+        }
+      });
+      if (phase === "forming" && !moving) {
+        phase = "holding";
+        phaseAt = now;
+      }
+      draw();
+      const busy = moving || effect === "crumble" && phase !== "idle";
+      raf = busy && visible && !document.hidden ? requestAnimationFrame(tick) : 0;
+    };
+    const wake = () => {
+      if (raf || reduced || !visible || document.hidden || !started) return;
+      last = performance.now();
+      raf = requestAnimationFrame(tick);
+    };
+    const start = () => {
+      started = true;
+      if (reduced) return;
+      scatter();
+      phase = "forming";
+      wake();
+    };
+    const onMove = (event) => {
+      const rect = canvas.getBoundingClientRect();
+      pointer.x = event.clientX - rect.left;
+      pointer.y = event.clientY - rect.top;
+      wake();
+    };
+    const onLeave = () => {
+      pointer.x = -1e4;
+      pointer.y = -1e4;
+      wake();
+    };
+    const resize = new ResizeObserver(() => {
+      layout();
+      draw();
+    });
+    resize.observe(canvas);
+    const observer = new IntersectionObserver(([entry]) => {
+      visible = entry.isIntersecting;
+      if (visible && !started && trigger === "view") start();
+      else wake();
+    }, { threshold: 0.2 });
+    observer.observe(canvas);
+    const onVisibility = () => wake();
+    document.addEventListener("visibilitychange", onVisibility);
+    canvas.addEventListener("pointermove", onMove);
+    canvas.addEventListener("pointerleave", onLeave);
+    document.fonts?.load(`${rows}px ${font}`).then(() => {
+      if (!canvas.isConnected) return;
+      blocks = [];
+      layout();
+      if (started && !reduced) {
+        scatter();
+        phase = "forming";
+        wake();
+      }
+      draw();
+    });
+    layout();
+    if (started) start();
+    draw();
+    return () => {
+      cancelAnimationFrame(raf);
+      resize.disconnect();
+      observer.disconnect();
+      document.removeEventListener("visibilitychange", onVisibility);
+      canvas.removeEventListener("pointermove", onMove);
+      canvas.removeEventListener("pointerleave", onLeave);
+    };
+  }, [text, effect, pixelSize, gap, font, rows, colors.join(), repel, stiffness, damping, hold, trigger, align]);
+  return /* @__PURE__ */ jsx("canvas", { ref: canvasRef, role: "img", "aria-label": text, className, style: { display: "block", width: "100%", touchAction: "pan-y", ...style } });
+}
+export {
+  PixelType as default
+};

package/dist/PointerKit.d.ts

@@ -0,0 +1,23 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export type PointerMode = 'trail' | 'crosshair' | 'target' | 'sparks' | 'blob';
+export interface PointerKitProps {
+    /** The area it covers (ignored by global). */
+    children?: ReactNode;
+    /** One look or several together. */
+    mode?: PointerMode | PointerMode[];
+    /** Cover the whole window instead of the children. */
+    global?: boolean;
+    hideCursor?: boolean;
+    color?: string;
+    accentColor?: string;
+    pixelSize?: number;
+    trailLength?: number;
+    /** Blob lag: 1 follows exactly, lower lags more. */
+    smoothing?: number;
+    /** What the target brackets snap to. */
+    targets?: string;
+    sparkCount?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function PointerKit({ children, mode, global, hideCursor, color, accentColor, pixelSize, trailLength, smoothing, targets, sparkCount, className, style }: PointerKitProps): import("react").JSX.Element;

package/dist/PointerKit.js

@@ -0,0 +1,222 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+const hexToRgb = (hex) => {
+  const n = parseInt(hex.replace("#", "").replace(/^(.)(.)(.)$/, "$1$1$2$2$3$3"), 16);
+  return [n >> 16 & 255, n >> 8 & 255, n & 255];
+};
+const rgba = ([r, g, b], a) => `rgba(${r},${g},${b},${a})`;
+const TARGETS = 'a, button, input, select, textarea, [role="button"], [data-pointer-target]';
+function PointerKit({
+  children,
+  mode = ["trail", "sparks"],
+  global = false,
+  hideCursor = false,
+  color = "#73eff7",
+  accentColor = "#ffcd75",
+  pixelSize = 6,
+  trailLength = 24,
+  smoothing = 0.18,
+  targets = TARGETS,
+  sparkCount = 14,
+  className = "",
+  style
+}) {
+  const rootRef = useRef(null);
+  const canvasRef = useRef(null);
+  const modes = Array.isArray(mode) ? mode : [mode];
+  const key = modes.join(",");
+  useEffect(() => {
+    const root = rootRef.current;
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext("2d");
+    const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    const fine = window.matchMedia?.("(pointer: fine)").matches ?? true;
+    const on = new Set(key.split(","));
+    if (reduced) ["trail", "blob", "sparks"].forEach((m) => on.delete(m));
+    if (!fine) ["trail", "blob", "crosshair", "target"].forEach((m) => on.delete(m));
+    const main = hexToRgb(color);
+    const accent = hexToRgb(accentColor);
+    const area = global ? window : root;
+    let W = 0;
+    let H = 0;
+    let dpr = 1;
+    const p = { x: -1e4, y: -1e4, inside: false };
+    const blob = { x: -1e4, y: -1e4, vx: 0, vy: 0 };
+    const trail = [];
+    const sparks = [];
+    let box = null;
+    let goal = null;
+    let raf = 0;
+    let last = 0;
+    const size = () => {
+      dpr = Math.min(2, window.devicePixelRatio || 1);
+      W = global ? window.innerWidth : root.clientWidth;
+      H = global ? window.innerHeight : root.clientHeight;
+      canvas.width = Math.round(W * dpr);
+      canvas.height = Math.round(H * dpr);
+    };
+    const origin = () => global ? { left: 0, top: 0 } : root.getBoundingClientRect();
+    const draw = (now) => {
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+      ctx.clearRect(0, 0, W, H);
+      const snap = (v) => Math.round(v / pixelSize) * pixelSize;
+      if (on.has("trail")) {
+        trail.forEach((t, i) => {
+          const life = 1 - (now - t.at) / (trailLength * 22);
+          if (life <= 0) return;
+          const s = Math.max(2, pixelSize * life * (i / trail.length + 0.4));
+          ctx.fillStyle = rgba(i % 3 === 0 ? accent : main, life * 0.9);
+          ctx.fillRect(snap(t.x) - s / 2, snap(t.y) - s / 2, s, s);
+        });
+      }
+      if (on.has("blob") && p.inside) {
+        const speed = Math.min(1, Math.hypot(blob.vx, blob.vy) / 40);
+        const angle = Math.atan2(blob.vy, blob.vx);
+        ctx.save();
+        ctx.translate(blob.x, blob.y);
+        ctx.rotate(angle);
+        ctx.scale(1 + speed * 0.6, 1 - speed * 0.35);
+        ctx.fillStyle = rgba(main, 0.35);
+        ctx.beginPath();
+        ctx.arc(0, 0, pixelSize * 3, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.restore();
+      }
+      if (on.has("crosshair") && p.inside) {
+        ctx.fillStyle = rgba(main, 0.45);
+        const x = Math.round(p.x);
+        const y = Math.round(p.y);
+        for (let i = 0; i < W; i += pixelSize * 2) if (Math.abs(i - x) > pixelSize * 3) ctx.fillRect(i, y, pixelSize, 1);
+        for (let i = 0; i < H; i += pixelSize * 2) if (Math.abs(i - y) > pixelSize * 3) ctx.fillRect(x, i, 1, pixelSize);
+        ctx.font = `10px ui-monospace, monospace`;
+        ctx.fillStyle = rgba(accent, 0.9);
+        ctx.fillText(`${x},${y}`, Math.min(W - 60, x + 10), Math.max(12, y - 8));
+      }
+      if (on.has("target") && box) {
+        const arm = Math.min(14, box.w / 3, box.h / 3);
+        ctx.strokeStyle = rgba(accent, box.alpha);
+        ctx.lineWidth = 2;
+        const corners = [
+          [box.x, box.y, 1, 1],
+          [box.x + box.w, box.y, -1, 1],
+          [box.x, box.y + box.h, 1, -1],
+          [box.x + box.w, box.y + box.h, -1, -1]
+        ];
+        ctx.beginPath();
+        corners.forEach(([cx, cy, sx, sy]) => {
+          ctx.moveTo(cx, cy + sy * arm);
+          ctx.lineTo(cx, cy);
+          ctx.lineTo(cx + sx * arm, cy);
+        });
+        ctx.stroke();
+      }
+      sparks.forEach((s) => {
+        ctx.fillStyle = rgba(s.accent ? accent : main, Math.max(0, s.life));
+        ctx.fillRect(snap(s.x), snap(s.y), pixelSize * 0.8, pixelSize * 0.8);
+      });
+    };
+    const tick = (now) => {
+      const dt = Math.max(0, Math.min(0.05, (now - last) / 1e3));
+      last = now;
+      const k = reduced ? 1 : smoothing;
+      blob.vx = (p.x - blob.x) * k;
+      blob.vy = (p.y - blob.y) * k;
+      blob.x += blob.vx;
+      blob.y += blob.vy;
+      while (trail.length && now - trail[0].at > trailLength * 22) trail.shift();
+      for (let i = sparks.length - 1; i >= 0; i--) {
+        const s = sparks[i];
+        s.vy += 600 * dt;
+        s.x += s.vx * dt;
+        s.y += s.vy * dt;
+        s.life -= dt * 1.6;
+        if (s.life <= 0) sparks.splice(i, 1);
+      }
+      if (on.has("target")) {
+        if (goal && !box) box = { ...goal, alpha: 0 };
+        if (box) {
+          const to = goal ?? box;
+          const e = reduced ? 1 : 0.3;
+          box.x += (to.x - box.x) * e;
+          box.y += (to.y - box.y) * e;
+          box.w += (to.w - box.w) * e;
+          box.h += (to.h - box.h) * e;
+          box.alpha += ((goal ? 1 : 0) - box.alpha) * (reduced ? 1 : 0.25);
+          if (!goal && box.alpha < 0.02) box = null;
+        }
+      }
+      draw(now);
+      const busy = trail.length || sparks.length || on.has("blob") && Math.hypot(blob.vx, blob.vy) > 0.1 || box && (goal ? Math.abs(goal.x - box.x) + Math.abs(goal.w - box.w) > 0.3 || box.alpha < 0.98 : true);
+      raf = busy ? requestAnimationFrame(tick) : 0;
+    };
+    const wake = () => {
+      if (!raf) {
+        last = performance.now();
+        raf = requestAnimationFrame(tick);
+      }
+    };
+    const onMove = (event) => {
+      const o = origin();
+      p.x = event.clientX - o.left;
+      p.y = event.clientY - o.top;
+      p.inside = true;
+      if (on.has("trail")) {
+        trail.push({ x: p.x, y: p.y, at: performance.now() });
+        if (trail.length > trailLength) trail.shift();
+      }
+      if (on.has("target")) {
+        const el = event.target.closest?.(targets);
+        if (el && (global || root.contains(el))) {
+          const r = el.getBoundingClientRect();
+          goal = { x: r.left - o.left - 4, y: r.top - o.top - 4, w: r.width + 8, h: r.height + 8 };
+        } else goal = null;
+      }
+      if (blob.x < -1e3) {
+        blob.x = p.x;
+        blob.y = p.y;
+      }
+      wake();
+    };
+    const onLeave = () => {
+      p.inside = false;
+      goal = null;
+      blob.x = -1e4;
+      wake();
+    };
+    const onDown = (event) => {
+      if (!on.has("sparks")) return;
+      const o = origin();
+      const x = event.clientX - o.left;
+      const y = event.clientY - o.top;
+      for (let i = 0; i < sparkCount; i++) {
+        const a = i / sparkCount * Math.PI * 2 + Math.random() * 0.4;
+        const v = 140 + Math.random() * 160;
+        sparks.push({ x, y, vx: Math.cos(a) * v, vy: Math.sin(a) * v - 120, life: 1, accent: i % 2 === 0 });
+      }
+      wake();
+    };
+    size();
+    const resize = new ResizeObserver(size);
+    resize.observe(root);
+    window.addEventListener("resize", size);
+    area.addEventListener("pointermove", onMove, { passive: true });
+    area.addEventListener("pointerdown", onDown, { passive: true });
+    (global ? document.documentElement : root).addEventListener("pointerleave", onLeave);
+    return () => {
+      cancelAnimationFrame(raf);
+      resize.disconnect();
+      window.removeEventListener("resize", size);
+      area.removeEventListener("pointermove", onMove);
+      area.removeEventListener("pointerdown", onDown);
+      (global ? document.documentElement : root).removeEventListener("pointerleave", onLeave);
+    };
+  }, [key, global, color, accentColor, pixelSize, trailLength, smoothing, targets, sparkCount]);
+  return /* @__PURE__ */ jsxs("div", { ref: rootRef, className, style: { position: "relative", cursor: hideCursor ? "none" : void 0, ...style }, children: [
+    children,
+    /* @__PURE__ */ jsx("canvas", { ref: canvasRef, "aria-hidden": "true", style: { position: global ? "fixed" : "absolute", inset: 0, width: global ? "100vw" : "100%", height: global ? "100vh" : "100%", pointerEvents: "none", zIndex: 2147483e3 } })
+  ] });
+}
+export {
+  PointerKit as default
+};

package/dist/Polaroids.d.ts

@@ -0,0 +1,41 @@
+import { type CSSProperties } from 'react';
+export interface Photo {
+    src: string;
+    /** Shown under the photo; also names it for screen readers. */
+    caption?: string;
+    /** Used as the name when there is no caption. */
+    alt?: string;
+}
+export interface PolaroidsProps {
+    photos?: Photo[];
+    /** Table height in px. */
+    height?: number;
+    photoWidth?: number;
+    /** White border around the image, in px. */
+    frame?: number;
+    captionHeight?: number;
+    /** How quickly a throw slows down (per second). */
+    friction?: number;
+    /** Share of speed kept when bouncing off an edge (0–1). */
+    bounce?: number;
+    /** How much an off-centre grip spins a thrown photo. */
+    spin?: number;
+    /** Show the Scatter and Tidy up buttons. */
+    showControls?: boolean;
+    scatterLabel?: string;
+    tidyLabel?: string;
+    /** Accessible name of the table. */
+    label?: string;
+    radius?: number;
+    backgroundColor?: string;
+    paperColor?: string;
+    textColor?: string;
+    lineColor?: string;
+    accentColor?: string;
+    buttonColor?: string;
+    buttonTextColor?: string;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function Polaroids({ photos, height, photoWidth, frame, captionHeight, friction, bounce, spin, showControls, scatterLabel, tidyLabel, label, radius, backgroundColor, paperColor, textColor, lineColor, accentColor, buttonColor, buttonTextColor, fontFamily, className, style }: PolaroidsProps): import("react").JSX.Element;