bits-lab 0.0.0-stage → 0.1.0

package/dist/VoiceOrb.js

@@ -0,0 +1,182 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useInsertionEffect, useRef } from "react";
+const STYLE_ID = "bl-voice-orb";
+const CSS = `
+.bl-orb { position: relative; display: inline-grid; place-items: center; width: var(--bl-size); max-width: 100%; aspect-ratio: 1; }
+.bl-orb canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
+.bl-orb__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+`;
+function useStyles() {
+  useInsertionEffect(() => {
+    if (typeof document === "undefined") return;
+    const style = document.getElementById(STYLE_ID) ?? Object.assign(document.createElement("style"), { id: STYLE_ID });
+    style.textContent = CSS;
+    if (!style.isConnected) document.head.appendChild(style);
+  }, []);
+}
+const STATE_TEXT = { idle: "Idle", listening: "Listening", thinking: "Thinking", speaking: "Speaking" };
+function simulatedLevel(state, t) {
+  if (state === "idle") return 0.05 + Math.sin(t * 1.4) * 0.03;
+  if (state === "thinking") return 0.08;
+  const gate = Math.sin(t * 0.9) + Math.sin(t * 2.3 + 1) > -0.2 ? 1 : 0.15;
+  const syllables = Math.abs(Math.sin(t * (state === "speaking" ? 9 : 6))) * 0.6 + Math.abs(Math.sin(t * 3.7 + 2)) * 0.4;
+  return gate * syllables * (state === "speaking" ? 0.95 : 0.7);
+}
+function VoiceOrb({
+  state = "idle",
+  source = "simulated",
+  level,
+  size = 220,
+  colors = ["#41a6f6", "#73eff7", "#b13e53"],
+  glowColor = "rgba(115,239,247,0.45)",
+  sensitivity = 1,
+  label = "Voice assistant",
+  onMicError,
+  className = "",
+  style
+}) {
+  useStyles();
+  const wrapRef = useRef(null);
+  const canvasRef = useRef(null);
+  const live = useRef({ state, level, colors, glowColor, sensitivity });
+  live.current = { state, level, colors, glowColor, sensitivity };
+  const micLevel = useRef(null);
+  const onMicErrorRef = useRef(onMicError);
+  onMicErrorRef.current = onMicError;
+  useEffect(() => {
+    if (source !== "mic" || state !== "listening" || !navigator.mediaDevices?.getUserMedia) return void 0;
+    let cancelled = false;
+    let stream;
+    let ctx;
+    let frame = 0;
+    navigator.mediaDevices.getUserMedia({ audio: true }).then((media) => {
+      if (cancelled) {
+        media.getTracks().forEach((track) => track.stop());
+        return;
+      }
+      stream = media;
+      ctx = new AudioContext();
+      const analyser = ctx.createAnalyser();
+      analyser.fftSize = 512;
+      ctx.createMediaStreamSource(media).connect(analyser);
+      const data = new Uint8Array(analyser.fftSize);
+      const read = () => {
+        analyser.getByteTimeDomainData(data);
+        let sum = 0;
+        for (const v of data) sum += ((v - 128) / 128) ** 2;
+        micLevel.current = Math.min(1, Math.sqrt(sum / data.length) * 4);
+        frame = requestAnimationFrame(read);
+      };
+      read();
+    }).catch((error) => {
+      micLevel.current = null;
+      onMicErrorRef.current?.(error);
+    });
+    return () => {
+      cancelled = true;
+      cancelAnimationFrame(frame);
+      micLevel.current = null;
+      stream?.getTracks().forEach((track) => track.stop());
+      ctx?.close();
+    };
+  }, [source, state]);
+  useEffect(() => {
+    const wrap = wrapRef.current;
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext("2d");
+    const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    let width = 0;
+    let frame = 0;
+    let visible = true;
+    let smooth = 0;
+    let spinAngle = 0;
+    let last = performance.now();
+    const start = last;
+    const resize = () => {
+      const dpr = Math.min(2, window.devicePixelRatio || 1);
+      width = wrap.clientWidth;
+      canvas.width = Math.round(width * dpr);
+      canvas.height = Math.round(width * dpr);
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    };
+    const draw = (now) => {
+      frame = 0;
+      const dt = Math.min(0.05, (now - last) / 1e3);
+      last = now;
+      const t = (now - start) / 1e3;
+      const { state: s, level: external, colors: palette, glowColor: glow, sensitivity: gain } = live.current;
+      const target = Math.min(1, (external ?? micLevel.current ?? simulatedLevel(s, t)) * gain);
+      smooth += (target - smooth) * (target > smooth ? 0.35 : 0.08);
+      spinAngle += dt * (s === "thinking" ? 2.6 : 0.5) * (reduced ? 0 : 1);
+      const c = width / 2;
+      const base = width * 0.3 * (1 + (reduced ? 0 : smooth * 0.14));
+      ctx.clearRect(0, 0, width, width);
+      const halo = ctx.createRadialGradient(c, c, base * 0.6, c, c, base * 1.65);
+      halo.addColorStop(0, glow);
+      halo.addColorStop(1, "rgba(0,0,0,0)");
+      ctx.fillStyle = halo;
+      ctx.globalAlpha = 0.5 + smooth * 0.5;
+      ctx.fillRect(0, 0, width, width);
+      ctx.globalAlpha = 1;
+      const wobble = reduced ? 0 : s === "thinking" ? 0.02 : 0.05 + smooth * 0.2;
+      const points = 72;
+      ctx.beginPath();
+      for (let i = 0; i <= points; i++) {
+        const a = i / points * Math.PI * 2;
+        const n = Math.sin(a * 3 + t * 1.7) * 0.5 + Math.sin(a * 5 - t * 2.3 + 1) * 0.3 + Math.sin(a * 2 + t * 0.9 + 2) * 0.2;
+        const r = base * (1 + n * wobble);
+        const x = c + Math.cos(a) * r;
+        const y = c + Math.sin(a) * r;
+        if (i === 0) ctx.moveTo(x, y);
+        else ctx.lineTo(x, y);
+      }
+      ctx.closePath();
+      const fill = ctx.createConicGradient ? ctx.createConicGradient(spinAngle, c, c) : ctx.createLinearGradient(0, 0, width, width);
+      palette.forEach((color, i) => fill.addColorStop(i / palette.length, color));
+      fill.addColorStop(1, palette[0]);
+      ctx.fillStyle = fill;
+      ctx.fill();
+      const shine = ctx.createRadialGradient(c - base * 0.35, c - base * 0.4, 0, c, c, base * 1.1);
+      shine.addColorStop(0, "rgba(255,255,255,0.45)");
+      shine.addColorStop(0.5, "rgba(255,255,255,0.05)");
+      shine.addColorStop(1, "rgba(0,0,0,0.25)");
+      ctx.fillStyle = shine;
+      ctx.fill();
+      if (s === "thinking" && !reduced) {
+        for (let k = 0; k < 3; k++) {
+          const a = spinAngle * 1.4 + k * Math.PI * 2 / 3;
+          ctx.beginPath();
+          ctx.arc(c + Math.cos(a) * base * 1.28, c + Math.sin(a) * base * 1.28, width * 0.014, 0, Math.PI * 2);
+          ctx.fillStyle = palette[k % palette.length];
+          ctx.fill();
+        }
+      }
+      if (visible) frame = requestAnimationFrame(draw);
+    };
+    const observer = new ResizeObserver(resize);
+    observer.observe(wrap);
+    const io = new IntersectionObserver(([entry]) => {
+      visible = entry.isIntersecting;
+      if (visible && !frame) {
+        last = performance.now();
+        frame = requestAnimationFrame(draw);
+      }
+    });
+    io.observe(wrap);
+    resize();
+    frame = requestAnimationFrame(draw);
+    return () => {
+      cancelAnimationFrame(frame);
+      observer.disconnect();
+      io.disconnect();
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { ref: wrapRef, className: `bl-orb ${className}`, role: "img", "aria-label": `${label}: ${STATE_TEXT[state] ?? state}`, style: { "--bl-size": `${size}px`, ...style }, children: [
+    /* @__PURE__ */ jsx("canvas", { ref: canvasRef, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx("span", { className: "bl-orb__sr", "aria-live": "polite", children: STATE_TEXT[state] ?? state })
+  ] });
+}
+export {
+  VoiceOrb as default
+};

package/dist/VoxelTiles.d.ts

@@ -0,0 +1,38 @@
+import { type CSSProperties } from 'react';
+export interface Biome {
+    /** Highest height (inclusive) that belongs to this biome. */
+    max: number;
+    name: string;
+    color: string;
+}
+export interface Tile {
+    x: number;
+    y: number;
+    h: number;
+}
+export interface VoxelTilesProps {
+    /** Heights per cell (rows of columns); 0 is water. */
+    map?: number[][];
+    /** Generated map size when no map is given. */
+    size?: number;
+    seed?: number;
+    tileSize?: number;
+    /** Height of one block in SVG units. */
+    heightUnit?: number;
+    /** Hover lift. */
+    lift?: number;
+    /** Rise-in delay per diagonal, in ms. */
+    stagger?: number;
+    biomes?: Biome[];
+    selectable?: boolean;
+    onTileSelect?: (tile: Tile & {
+        biome: string;
+    }) => void;
+    highlightColor?: string;
+    label?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare const DEFAULT_BIOMES: Biome[];
+export declare function generateHeightmap(size?: number, seed?: number): number[][];
+export default function VoxelTiles({ map, size, seed, tileSize, heightUnit, lift, stagger, biomes, selectable, onTileSelect, highlightColor, label, className, style }: VoxelTilesProps): import("react").JSX.Element;

package/dist/VoxelTiles.js

@@ -0,0 +1,201 @@
+'use client';
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useInsertionEffect, useMemo, useRef, useState } from "react";
+const STYLE_ID = "bl-voxel-tiles";
+const CSS = `
+.bl-vox { display: block; width: 100%; max-width: var(--bl-w); height: auto; margin: 0 auto; overflow: visible; outline: none; }
+.bl-vox:focus-visible { outline: 2px dashed var(--bl-hi); outline-offset: 6px; }
+.bl-vox__tile { transition: transform 160ms steps(3); animation: bl-vox-rise 560ms cubic-bezier(.25,1.4,.5,1) backwards; animation-delay: calc(var(--d) * 1ms); cursor: pointer; }
+.bl-vox__tile:hover, .bl-vox__tile[data-cursor], .bl-vox__tile[data-selected] { transform: translateY(calc(var(--bl-lift) * -1px)); }
+.bl-vox__tile[data-cursor] .bl-vox__top, .bl-vox__tile[data-selected] .bl-vox__top { stroke: var(--bl-hi); stroke-width: 1.5; }
+.bl-vox__tile[data-water] .bl-vox__top { transform-box: fill-box; animation: bl-vox-bob 2.6s ease-in-out infinite; animation-delay: calc(var(--d) * -4ms); }
+.bl-vox[data-paused] .bl-vox__top { animation-play-state: paused; }
+.bl-vox__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+@keyframes bl-vox-rise { from { transform: translateY(40px); opacity: 0; } }
+@keyframes bl-vox-bob { 50% { transform: translateY(1.5px); } }
+@media (prefers-reduced-motion: reduce) { .bl-vox__tile { animation: none; transition: none; } .bl-vox__tile[data-water] .bl-vox__top { animation: none; } }
+`;
+function useStyles() {
+  useInsertionEffect(() => {
+    if (typeof document === "undefined") return;
+    const style = document.getElementById(STYLE_ID) ?? Object.assign(document.createElement("style"), { id: STYLE_ID });
+    style.textContent = CSS;
+    if (!style.isConnected) document.head.appendChild(style);
+  }, []);
+}
+const DEFAULT_BIOMES = [
+  { max: 0, name: "Water", color: "#41a6f6" },
+  { max: 1, name: "Sand", color: "#ffcd75" },
+  { max: 3, name: "Grass", color: "#38b764" },
+  { max: 4, name: "Forest", color: "#257179" },
+  { max: 5, name: "Stone", color: "#94b0c2" },
+  { max: Infinity, name: "Snow", color: "#f4f4f4" }
+];
+function random(seed) {
+  let a = seed | 0;
+  return () => {
+    a = a + 1831565813 | 0;
+    let t = Math.imul(a ^ a >>> 15, 1 | a);
+    t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  };
+}
+function generateHeightmap(size = 12, seed = 3) {
+  const rand = random(seed);
+  let grid = Array.from({ length: size }, () => Array.from({ length: size }, () => rand()));
+  for (let pass = 0; pass < 2; pass++) {
+    grid = grid.map(
+      (row, y) => row.map((_, x) => {
+        let sum = 0;
+        let n = 0;
+        for (let dy = -1; dy <= 1; dy++) {
+          for (let dx = -1; dx <= 1; dx++) {
+            const v = grid[y + dy]?.[x + dx];
+            if (v !== void 0) {
+              sum += v;
+              n++;
+            }
+          }
+        }
+        return sum / n;
+      })
+    );
+  }
+  const flat = grid.flat();
+  const lo = Math.min(...flat);
+  const span = Math.max(...flat) - lo || 1;
+  const c = (size - 1) / 2;
+  return grid.map(
+    (row, y) => row.map((v, x) => {
+      const falloff = Math.max(0, 1 - Math.hypot(x - c, y - c) / (size * 0.58));
+      return Math.max(0, Math.round(falloff ** 0.8 * (0.25 + (v - lo) / span * 1.1) * 8 - 1));
+    })
+  );
+}
+function shade(hex, amount) {
+  const n = parseInt(hex.replace("#", "").slice(0, 6), 16);
+  const f = (ch) => Math.round((n >> ch & 255) * amount);
+  return `rgb(${f(16)},${f(8)},${f(0)})`;
+}
+function VoxelTiles({
+  map,
+  size = 12,
+  seed = 3,
+  tileSize = 32,
+  heightUnit = 8,
+  lift = 6,
+  stagger = 30,
+  biomes = DEFAULT_BIOMES,
+  selectable = true,
+  onTileSelect,
+  highlightColor = "#f4f4f4",
+  label = "Voxel island",
+  className = "",
+  style
+}) {
+  useStyles();
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const heights = useMemo(() => map ?? generateHeightmap(size, seed), [map, size, seed]);
+  const rows = heights.length;
+  const cols = heights[0]?.length ?? 0;
+  const [cursor, setCursor] = useState(null);
+  const [selected, setSelected] = useState(null);
+  const [paused, setPaused] = useState(false);
+  const svgRef = useRef(null);
+  useEffect(() => {
+    const io = new IntersectionObserver(([entry]) => setPaused(!entry.isIntersecting));
+    io.observe(svgRef.current);
+    return () => io.disconnect();
+  }, []);
+  const a = tileSize / 2;
+  const biomeOf = (h) => biomes.find((b) => h <= b.max) ?? biomes[biomes.length - 1];
+  const maxH = Math.max(0, ...heights.flat());
+  const minX = -rows * a;
+  const top = -(maxH + 1) * heightUnit - a / 2 - lift - 2;
+  const viewW = (rows + cols) * a;
+  const viewH = (rows + cols) * (a / 2) + a / 2 - top + 4;
+  const tiles = [];
+  for (let s = 0; s < rows + cols - 1; s++) {
+    for (let y = 0; y < rows; y++) {
+      const x = s - y;
+      if (x < 0 || x >= cols) continue;
+      tiles.push({ x, y, h: heights[y][x] });
+    }
+  }
+  const describe = (tile) => tile ? `${biomeOf(tile.h).name}, height ${tile.h}, column ${tile.x + 1}, row ${tile.y + 1}` : "";
+  const select = (tile) => {
+    if (!selectable) return;
+    setSelected(tile);
+    onTileSelect?.({ ...tile, biome: biomeOf(tile.h).name });
+  };
+  const onKeyDown = (event) => {
+    const moves = { ArrowRight: [1, 0], ArrowLeft: [-1, 0], ArrowDown: [0, 1], ArrowUp: [0, -1] };
+    if (event.key in moves) {
+      event.preventDefault();
+      const [dx, dy] = moves[event.key];
+      const from = cursor ?? { x: Math.floor(cols / 2), y: Math.floor(rows / 2) };
+      const x = Math.max(0, Math.min(cols - 1, from.x + (cursor ? dx : 0)));
+      const y = Math.max(0, Math.min(rows - 1, from.y + (cursor ? dy : 0)));
+      setCursor({ x, y, h: heights[y][x] });
+    } else if ((event.key === "Enter" || event.key === " ") && cursor) {
+      event.preventDefault();
+      select(cursor);
+    } else if (event.key === "Escape") {
+      setCursor(null);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "svg",
+      {
+        ref: svgRef,
+        className: `bl-vox ${className}`,
+        viewBox: `${minX} ${top} ${viewW} ${viewH}`,
+        role: "application",
+        "aria-roledescription": "tile map",
+        "aria-label": `${label}. ${cols} by ${rows} tiles. Use arrow keys to move${selectable ? " and Enter to select" : ""}.`,
+        "aria-describedby": `${uid}-status`,
+        tabIndex: 0,
+        "data-paused": paused || void 0,
+        onKeyDown,
+        onFocus: () => setCursor((c) => c ?? { x: Math.floor(cols / 2), y: Math.floor(rows / 2), h: heights[Math.floor(rows / 2)][Math.floor(cols / 2)] }),
+        onBlur: () => setCursor(null),
+        style: { "--bl-w": `${viewW * 1.5}px`, "--bl-hi": highlightColor, "--bl-lift": lift, ...style },
+        children: tiles.map((tile) => {
+          const { x, y, h } = tile;
+          const biome = biomeOf(h);
+          const water = h <= 0;
+          const sx = (x - y) * a;
+          const sy = (x + y) * (a / 2);
+          const H = water ? heightUnit * 0.6 : (h + 1) * heightUnit;
+          const t = sy - H;
+          return /* @__PURE__ */ jsxs(
+            "g",
+            {
+              className: "bl-vox__tile",
+              "data-water": water || void 0,
+              "data-cursor": cursor && cursor.x === x && cursor.y === y || void 0,
+              "data-selected": selected && selected.x === x && selected.y === y || void 0,
+              style: { "--d": (x + y) * stagger },
+              onClick: () => select(tile),
+              shapeRendering: "crispEdges",
+              children: [
+                /* @__PURE__ */ jsx("polygon", { points: `${sx - a},${t} ${sx},${t + a / 2} ${sx},${sy + a / 2} ${sx - a},${sy}`, fill: shade(biome.color, water ? 0.7 : 0.72) }),
+                /* @__PURE__ */ jsx("polygon", { points: `${sx},${t + a / 2} ${sx + a},${t} ${sx + a},${sy} ${sx},${sy + a / 2}`, fill: shade(biome.color, water ? 0.55 : 0.52) }),
+                /* @__PURE__ */ jsx("polygon", { className: "bl-vox__top", points: `${sx},${t - a / 2} ${sx + a},${t} ${sx},${t + a / 2} ${sx - a},${t}`, fill: biome.color, fillOpacity: water ? 0.9 : 1 }),
+                !water && /* @__PURE__ */ jsx("polyline", { points: `${sx - a},${t} ${sx},${t - a / 2} ${sx + a},${t}`, fill: "none", stroke: "rgba(255,255,255,0.35)", strokeWidth: "1" })
+              ]
+            },
+            `${x}-${y}`
+          );
+        })
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { id: `${uid}-status`, className: "bl-vox__sr", "aria-live": "polite", children: cursor ? describe(cursor) : selected ? `Selected: ${describe(selected)}` : "" })
+  ] });
+}
+export {
+  DEFAULT_BIOMES,
+  VoxelTiles as default,
+  generateHeightmap
+};

package/dist/WarpField.d.ts

@@ -0,0 +1,18 @@
+import { type CSSProperties } from 'react';
+export interface WarpFieldProps {
+    stars?: number;
+    /** Cruising speed. */
+    speed?: number;
+    /** Hyperspace multiplier while held. */
+    boost?: number;
+    /** Hold the pointer down (or Space while focused) for hyperspace. */
+    holdToBoost?: boolean;
+    /** How far the vanishing point leans toward the pointer. */
+    lean?: number;
+    pixelSize?: number;
+    colors?: string[];
+    backgroundColor?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function WarpField({ stars, speed, boost, holdToBoost, lean, pixelSize, colors, backgroundColor, className, style }: WarpFieldProps): import("react").JSX.Element;

package/dist/WarpField.js

@@ -0,0 +1,160 @@
+'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 WarpField({
+  stars = 380,
+  speed = 0.35,
+  boost = 6,
+  holdToBoost = true,
+  lean = 0.12,
+  pixelSize = 2,
+  colors = ["#f4f4f4", "#73eff7", "#ffcd75"],
+  backgroundColor = "#0b0b14",
+  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 tints = colors.map(hexToRgb);
+    let W = 0;
+    let H = 0;
+    let dpr = 1;
+    let raf = 0;
+    let last = 0;
+    let visible = true;
+    let warp = 1;
+    let held = false;
+    const aim = { x: 0, y: 0, tx: 0, ty: 0 };
+    const spawn = (s, far) => {
+      s.x = (Math.random() - 0.5) * 2;
+      s.y = (Math.random() - 0.5) * 2;
+      s.z = far ? 1 : 0.15 + Math.random() * 0.85;
+      s.pz = s.z;
+      s.tint = tints[Math.floor(Math.random() * tints.length)];
+      return s;
+    };
+    const field = Array.from({ length: stars }, () => spawn({}, false));
+    const fit = () => {
+      dpr = Math.min(2, window.devicePixelRatio || 1);
+      W = canvas.clientWidth;
+      H = canvas.clientHeight;
+      canvas.width = Math.round(W * dpr);
+      canvas.height = Math.round(H * dpr);
+    };
+    const project = (x, y, z) => {
+      const scale = Math.max(W, H) * 0.5;
+      return [W / 2 + aim.x * W + x / z * scale, H / 2 + aim.y * H + y / z * scale];
+    };
+    const draw = () => {
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+      ctx.fillStyle = backgroundColor;
+      ctx.fillRect(0, 0, W, H);
+      const p = pixelSize;
+      field.forEach((s) => {
+        const [x1, y1] = project(s.x, s.y, s.z);
+        const [x0, y0] = project(s.x, s.y, s.pz);
+        const near = 1 - s.z;
+        const [r, g, b] = s.tint;
+        ctx.fillStyle = `rgba(${r},${g},${b},${Math.min(1, 0.25 + near * 1.1)})`;
+        const len = Math.hypot(x1 - x0, y1 - y0);
+        const steps = Math.max(1, Math.min(40, Math.ceil(len / p)));
+        for (let k = 0; k <= steps; k++) {
+          const x = x0 + (x1 - x0) * k / steps;
+          const y = y0 + (y1 - y0) * k / steps;
+          ctx.fillRect(Math.round(x / p) * p, Math.round(y / p) * p, p, p);
+        }
+      });
+    };
+    const tick = (now) => {
+      const dt = Math.max(0, Math.min(0.05, (now - last) / 1e3));
+      last = now;
+      warp += ((held ? boost : 1) - warp) * Math.min(1, dt * 3);
+      aim.x += (aim.tx - aim.x) * Math.min(1, dt * 2);
+      aim.y += (aim.ty - aim.y) * Math.min(1, dt * 2);
+      field.forEach((s) => {
+        s.pz = s.z + 0.02 * warp;
+        s.z -= speed * warp * dt;
+        if (s.z < 0.02) spawn(s, true);
+        else {
+          const [x, y] = project(s.x, s.y, s.z);
+          if (x < -50 || y < -50 || x > W + 50 || y > H + 50) spawn(s, true);
+        }
+      });
+      draw();
+      raf = visible && !document.hidden ? requestAnimationFrame(tick) : 0;
+    };
+    const start = () => {
+      if (raf || reduced || !visible || document.hidden) return;
+      last = performance.now();
+      raf = requestAnimationFrame(tick);
+    };
+    const onMove = (event) => {
+      const r = canvas.getBoundingClientRect();
+      aim.tx = ((event.clientX - r.left) / r.width - 0.5) * lean;
+      aim.ty = ((event.clientY - r.top) / r.height - 0.5) * lean;
+    };
+    const press = (on) => () => {
+      if (holdToBoost) held = on;
+    };
+    const down = press(true);
+    const up = press(false);
+    const onKey = (event) => {
+      if (event.code === "Space" && holdToBoost) {
+        event.preventDefault();
+        held = event.type === "keydown";
+      }
+    };
+    const resize = new ResizeObserver(() => {
+      fit();
+      draw();
+    });
+    resize.observe(canvas);
+    const observer = new IntersectionObserver(([entry]) => {
+      visible = entry.isIntersecting;
+      start();
+    });
+    observer.observe(canvas);
+    document.addEventListener("visibilitychange", start);
+    canvas.addEventListener("pointermove", onMove);
+    canvas.addEventListener("pointerdown", down);
+    window.addEventListener("pointerup", up);
+    canvas.addEventListener("pointerleave", up);
+    canvas.addEventListener("keydown", onKey);
+    canvas.addEventListener("keyup", onKey);
+    fit();
+    draw();
+    start();
+    return () => {
+      cancelAnimationFrame(raf);
+      resize.disconnect();
+      observer.disconnect();
+      document.removeEventListener("visibilitychange", start);
+      canvas.removeEventListener("pointermove", onMove);
+      canvas.removeEventListener("pointerdown", down);
+      window.removeEventListener("pointerup", up);
+      canvas.removeEventListener("pointerleave", up);
+      canvas.removeEventListener("keydown", onKey);
+      canvas.removeEventListener("keyup", onKey);
+    };
+  }, [stars, speed, boost, holdToBoost, lean, pixelSize, colors.join(), backgroundColor]);
+  return /* @__PURE__ */ jsx(
+    "canvas",
+    {
+      ref: canvasRef,
+      "aria-hidden": "true",
+      tabIndex: holdToBoost ? -1 : void 0,
+      className,
+      style: { display: "block", width: "100%", height: "100%", background: backgroundColor, touchAction: "pan-y", outline: "none", ...style }
+    }
+  );
+}
+export {
+  WarpField as default
+};

package/dist/WebcamPixels.d.ts

@@ -0,0 +1,38 @@
+import { type CSSProperties } from 'react';
+export type WebcamStatus = 'idle' | 'requesting' | 'live' | 'denied' | 'missing' | 'busy' | 'unsupported' | 'error';
+export interface WebcamPixelsProps {
+    /** Render this image or video URL instead of the camera. */
+    src?: string;
+    mode?: 'pixels' | 'ascii' | 'dots';
+    /** Grid pitch in px. */
+    cellSize?: number;
+    /** Snap colours to these. */
+    palette?: string[];
+    /** Flip horizontally (default: on for the camera). */
+    mirror?: boolean;
+    contrast?: number;
+    /** Redraw rate. */
+    fps?: number;
+    /** Ask for the camera on mount instead of after a click. */
+    autoStart?: boolean;
+    /** Draw everything in inkColor. */
+    monochrome?: boolean;
+    inkColor?: string;
+    backgroundColor?: string;
+    textColor?: string;
+    mutedColor?: string;
+    accentColor?: string;
+    /** The LIVE dot. */
+    liveColor?: string;
+    radius?: number;
+    fontFamily?: string;
+    /** Start-screen heading. */
+    title?: string;
+    description?: string;
+    /** The canvas's accessible name. */
+    label?: string;
+    onStatusChange?: (status: WebcamStatus) => void;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function WebcamPixels({ src, mode, cellSize, palette, mirror, contrast, fps, autoStart, monochrome, inkColor, backgroundColor, textColor, mutedColor, accentColor, liveColor, radius, fontFamily, title, description, label, onStatusChange, className, style }: WebcamPixelsProps): import("react").JSX.Element;