bits-lab 0.0.0-stage → 0.1.0

package/dist/JellyBlob.js

@@ -0,0 +1,209 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useInsertionEffect, useRef } from "react";
+const STYLE_ID = "bl-jelly-blob";
+const CSS = `
+.bl-jelly { position: relative; display: inline-grid; place-items: center; box-sizing: border-box; width: var(--bl-w); height: var(--bl-h); margin: 0; padding: 0 24px; border: 0; background: transparent; color: var(--bl-ink); font: inherit; font-family: var(--bl-font); font-size: var(--bl-size); font-weight: 700; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
+.bl-jelly:focus-visible { outline: none; }
+.bl-jelly:focus-visible .bl-jelly__ring { opacity: 1; }
+.bl-jelly:disabled { cursor: not-allowed; opacity: 0.5; }
+.bl-jelly__blob { position: absolute; inset: -16px; width: calc(100% + 32px); height: calc(100% + 32px); overflow: visible; pointer-events: none; }
+.bl-jelly__fill { fill: var(--bl-color); transition: fill 150ms; }
+.bl-jelly__shade { fill: rgba(0,0,0,0.28); }
+.bl-jelly__ring { fill: none; stroke: var(--bl-accent); stroke-width: 3; opacity: 0; transition: opacity 150ms; }
+.bl-jelly[data-pressed] .bl-jelly__fill { fill: var(--bl-pressed); }
+.bl-jelly__label { position: relative; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; pointer-events: 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);
+  }, []);
+}
+function smoothPath(pts) {
+  const n = pts.length;
+  let d = `M${pts[0][0].toFixed(2)} ${pts[0][1].toFixed(2)}`;
+  for (let i = 0; i < n; i++) {
+    const [p0, p1, p2, p3] = [pts[(i - 1 + n) % n], pts[i], pts[(i + 1) % n], pts[(i + 2) % n]];
+    const c1 = [p1[0] + (p2[0] - p0[0]) / 6, p1[1] + (p2[1] - p0[1]) / 6];
+    const c2 = [p2[0] - (p3[0] - p1[0]) / 6, p2[1] - (p3[1] - p1[1]) / 6];
+    d += `C${c1[0].toFixed(2)} ${c1[1].toFixed(2)} ${c2[0].toFixed(2)} ${c2[1].toFixed(2)} ${p2[0].toFixed(2)} ${p2[1].toFixed(2)}`;
+  }
+  return `${d}Z`;
+}
+function JellyBlob({
+  children,
+  onClick,
+  width = 220,
+  height = 72,
+  points = 18,
+  bulge = 10,
+  squash = 9,
+  stiffness = 320,
+  damping = 9,
+  idle = true,
+  color = "#b13e53",
+  pressedColor = "#8a2f43",
+  textColor = "#f4f4f4",
+  accentColor = "#73eff7",
+  fontSize = 18,
+  fontFamily = "ui-sans-serif, system-ui, sans-serif",
+  type = "button",
+  disabled = false,
+  className = "",
+  style,
+  ...rest
+}) {
+  useStyles();
+  const buttonRef = useRef(null);
+  const fillRef = useRef(null);
+  const shadeRef = useRef(null);
+  const ringRef = useRef(null);
+  useEffect(() => {
+    const button = buttonRef.current;
+    const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    const pad = 16;
+    const cx = width / 2 + pad;
+    const cy = height / 2 + pad;
+    const a = width / 2;
+    const b = height / 2;
+    const angles = Array.from({ length: points }, (_, i) => i / points * Math.PI * 2);
+    const base = angles.map((t) => Math.pow(Math.pow(Math.abs(Math.cos(t) / a), 4) + Math.pow(Math.abs(Math.sin(t) / b), 4), -1 / 4));
+    const offset = angles.map(() => 0);
+    const velocity = angles.map(() => 0);
+    const pointer = { inside: false, angle: 0, near: 0 };
+    let pressed = false;
+    let visible = true;
+    let frame = 0;
+    let last = 0;
+    let clock = 0;
+    const draw = () => {
+      const pts = angles.map((t, i) => {
+        const r = base[i] + offset[i];
+        return [cx + Math.cos(t) * r, cy + Math.sin(t) * r];
+      });
+      const d = smoothPath(pts);
+      fillRef.current.setAttribute("d", d);
+      ringRef.current.setAttribute("d", smoothPath(angles.map((t, i) => [cx + Math.cos(t) * (base[i] + offset[i] + 5), cy + Math.sin(t) * (base[i] + offset[i] + 5)])));
+      shadeRef.current.setAttribute("d", d);
+    };
+    const target = (i) => {
+      const t = angles[i];
+      let goal = 0;
+      if (pressed) goal += squash * (0.7 * Math.cos(t) ** 2 - Math.sin(t) ** 2);
+      if (pointer.inside) {
+        const delta = Math.abs((t - pointer.angle + Math.PI * 3) % (Math.PI * 2) - Math.PI);
+        goal += bulge * pointer.near * Math.max(0, Math.cos(delta)) ** 6;
+      }
+      if (idle && !pressed) goal += 1.6 * Math.sin(clock * 2.2 + t * 3);
+      return goal;
+    };
+    const tick = (now) => {
+      const dt = Math.min(0.05, (now - last) / 1e3 || 0.016);
+      last = now;
+      clock += dt;
+      let moving = false;
+      for (let i = 0; i < points; i++) {
+        const goal = target(i);
+        for (let t = 0; t < dt; t += 1 / 240) {
+          velocity[i] += (stiffness * (goal - offset[i]) - damping * velocity[i]) / 240;
+          offset[i] += velocity[i] / 240;
+        }
+        if (Math.abs(goal - offset[i]) > 0.02 || Math.abs(velocity[i]) > 0.2) moving = true;
+      }
+      draw();
+      frame = visible && (moving || idle) ? requestAnimationFrame(tick) : 0;
+    };
+    const wake = () => {
+      if (reduced || frame || !visible) return;
+      last = performance.now();
+      frame = requestAnimationFrame(tick);
+    };
+    const setPressed = (value) => {
+      if (disabled) return;
+      pressed = value;
+      if (value) button.dataset.pressed = "";
+      else {
+        delete button.dataset.pressed;
+        angles.forEach((t, i) => {
+          velocity[i] += squash * 14 * (Math.sin(t) ** 2 - 0.5);
+        });
+      }
+      wake();
+    };
+    const onMove = (event) => {
+      const rect = button.getBoundingClientRect();
+      const x = event.clientX - rect.left - rect.width / 2;
+      const y = event.clientY - rect.top - rect.height / 2;
+      pointer.inside = true;
+      pointer.angle = Math.atan2(y, x);
+      pointer.near = Math.min(1, Math.hypot(x / (rect.width / 2), y / (rect.height / 2)));
+      wake();
+    };
+    const onLeave = () => {
+      pointer.inside = false;
+      if (pressed) setPressed(false);
+      wake();
+    };
+    const onDown = (event) => {
+      if (event.button === 0) setPressed(true);
+    };
+    const onUp = () => pressed && setPressed(false);
+    const onKeyDown = (event) => {
+      if ((event.key === " " || event.key === "Enter") && !event.repeat) setPressed(true);
+    };
+    const onKeyUp = (event) => {
+      if (event.key === " " || event.key === "Enter") setPressed(false);
+    };
+    const observer = new IntersectionObserver(([entry]) => {
+      visible = entry.isIntersecting;
+      if (visible) wake();
+    });
+    observer.observe(button);
+    button.addEventListener("pointermove", onMove);
+    button.addEventListener("pointerleave", onLeave);
+    button.addEventListener("pointerdown", onDown);
+    window.addEventListener("pointerup", onUp);
+    button.addEventListener("keydown", onKeyDown);
+    button.addEventListener("keyup", onKeyUp);
+    button.addEventListener("blur", onUp);
+    draw();
+    wake();
+    return () => {
+      cancelAnimationFrame(frame);
+      observer.disconnect();
+      button.removeEventListener("pointermove", onMove);
+      button.removeEventListener("pointerleave", onLeave);
+      button.removeEventListener("pointerdown", onDown);
+      window.removeEventListener("pointerup", onUp);
+      button.removeEventListener("keydown", onKeyDown);
+      button.removeEventListener("keyup", onKeyUp);
+      button.removeEventListener("blur", onUp);
+    };
+  }, [width, height, points, bulge, squash, stiffness, damping, idle, disabled]);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ...rest,
+      ref: buttonRef,
+      type,
+      disabled,
+      onClick,
+      className: `bl-jelly ${className}`,
+      style: { "--bl-w": `${width}px`, "--bl-h": `${height}px`, "--bl-color": color, "--bl-pressed": pressedColor, "--bl-ink": textColor, "--bl-accent": accentColor, "--bl-size": `${fontSize}px`, "--bl-font": fontFamily, ...style },
+      children: [
+        /* @__PURE__ */ jsxs("svg", { className: "bl-jelly__blob", viewBox: `0 0 ${width + 32} ${height + 32}`, "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx("path", { ref: shadeRef, className: "bl-jelly__shade", transform: "translate(0 5)" }),
+          /* @__PURE__ */ jsx("path", { ref: fillRef, className: "bl-jelly__fill" }),
+          /* @__PURE__ */ jsx("path", { ref: ringRef, className: "bl-jelly__ring" })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "bl-jelly__label", children })
+      ]
+    }
+  );
+}
+export {
+  JellyBlob as default
+};

package/dist/KineticHeadline.d.ts

@@ -0,0 +1,30 @@
+import { type CSSProperties, type ElementType } from 'react';
+export interface KineticHeadlineProps {
+    /** The headline; screen readers get it once as plain text. */
+    text?: string;
+    as?: ElementType;
+    /** A rolling wave, a pulse on every beat, or a spotlight driven by scroll position. */
+    mode?: 'breathe' | 'beat' | 'scroll';
+    /** Breathe: cycles per second. */
+    speed?: number;
+    /** Breathe: letters per wave. */
+    wavelength?: number;
+    /** Beat: tempo. */
+    bpm?: number;
+    /** Beat and scroll: pulse width in letters. */
+    spread?: number;
+    minWeight?: number;
+    maxWeight?: number;
+    /** Width axis range in % (needs a font with wdth, e.g. Roboto Flex). */
+    minWidth?: number;
+    maxWidth?: number;
+    /** How far heavy letters shift toward the accent (0–1). */
+    tint?: number;
+    fontSize?: number | string;
+    textColor?: string;
+    accentColor?: string;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function KineticHeadline({ text, as: Tag, mode, speed, wavelength, bpm, spread, minWeight, maxWeight, minWidth, maxWidth, tint, fontSize, textColor, accentColor, fontFamily, className, style }: KineticHeadlineProps): import("react").JSX.Element;

package/dist/KineticHeadline.js

@@ -0,0 +1,133 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useInsertionEffect, useRef } from "react";
+const STYLE_ID = "bl-kinetic-headline";
+const CSS = `
+.bl-kinetic { margin: 0; font-family: var(--bl-font); font-size: var(--bl-size); line-height: 1.05; color: var(--bl-ink); letter-spacing: -0.01em; }
+.bl-kinetic__letter { --k: 0.5; display: inline-block; white-space: pre; font-weight: calc(var(--bl-wmin) + var(--k) * (var(--bl-wmax) - var(--bl-wmin))); font-stretch: calc(var(--bl-dmin) + var(--k) * (var(--bl-dmax) - var(--bl-dmin))); color: color-mix(in srgb, var(--bl-accent) calc(var(--k) * var(--bl-tint)), var(--bl-ink)); }
+.bl-kinetic__word { display: inline-block; white-space: nowrap; }
+.bl-kinetic__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);
+  }, []);
+}
+function KineticHeadline({
+  text = "",
+  as: Tag = "h2",
+  mode = "breathe",
+  speed = 0.5,
+  wavelength = 8,
+  bpm = 100,
+  spread = 3,
+  minWeight = 200,
+  maxWeight = 900,
+  minWidth = 100,
+  maxWidth = 100,
+  tint = 0,
+  fontSize = 72,
+  textColor = "#f4f4f4",
+  accentColor = "#ffcd75",
+  fontFamily = '"Roboto Flex", ui-sans-serif, system-ui, sans-serif',
+  className = "",
+  style
+}) {
+  useStyles();
+  const rootRef = useRef(null);
+  const words = text.split(/(\s+)/).filter(Boolean);
+  useEffect(() => {
+    const root = rootRef.current;
+    const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    const letters = [...root.querySelectorAll(".bl-kinetic__letter")];
+    const n = letters.length;
+    if (reduced || !n) return void 0;
+    let visible = true;
+    let raf = 0;
+    let clock = 0;
+    let last = 0;
+    const progress = () => {
+      const rect = root.getBoundingClientRect();
+      const vh = window.innerHeight || 1;
+      return Math.max(0, Math.min(1, (vh - rect.top) / (vh + rect.height)));
+    };
+    const level = (i, p) => {
+      if (mode === "scroll") {
+        const x = p * (n + spread * 4) - spread * 2;
+        return Math.exp(-((x - i) ** 2) / (2 * spread * spread));
+      }
+      if (mode === "beat") {
+        const beat = 60 / bpm;
+        const head = clock % beat / beat * (n + spread * 4) - spread * 2;
+        return 0.15 + 0.85 * Math.exp(-((head - i) ** 2) / (2 * spread * spread));
+      }
+      return (Math.sin(2 * Math.PI * (clock * speed - i / wavelength)) + 1) / 2;
+    };
+    const paint = () => {
+      const p = mode === "scroll" ? progress() : 0;
+      letters.forEach((node, i) => node.style.setProperty("--k", level(i, p).toFixed(3)));
+    };
+    const tick = (now) => {
+      clock += Math.max(0, Math.min(0.05, (now - last) / 1e3));
+      last = now;
+      paint();
+      raf = mode === "scroll" ? 0 : requestAnimationFrame(tick);
+    };
+    const start = () => {
+      if (raf || !visible || document.hidden) return;
+      last = performance.now();
+      raf = requestAnimationFrame(tick);
+    };
+    const stop = () => {
+      cancelAnimationFrame(raf);
+      raf = 0;
+    };
+    const observer = new IntersectionObserver(([entry]) => {
+      visible = entry.isIntersecting;
+      if (visible) start();
+      else stop();
+    });
+    observer.observe(root);
+    const onVisibility = () => document.hidden ? stop() : start();
+    document.addEventListener("visibilitychange", onVisibility);
+    const onScroll = () => start();
+    if (mode === "scroll") {
+      window.addEventListener("scroll", onScroll, { passive: true, capture: true });
+      window.addEventListener("resize", onScroll);
+    }
+    paint();
+    start();
+    return () => {
+      stop();
+      observer.disconnect();
+      document.removeEventListener("visibilitychange", onVisibility);
+      window.removeEventListener("scroll", onScroll, { capture: true });
+      window.removeEventListener("resize", onScroll);
+      letters.forEach((node) => node.style.removeProperty("--k"));
+    };
+  }, [text, mode, speed, wavelength, bpm, spread]);
+  let index = 0;
+  return /* @__PURE__ */ jsxs(
+    Tag,
+    {
+      ref: rootRef,
+      className: `bl-kinetic ${className}`,
+      style: { "--bl-size": typeof fontSize === "number" ? `${fontSize}px` : fontSize, "--bl-wmin": minWeight, "--bl-wmax": maxWeight, "--bl-dmin": `${minWidth}%`, "--bl-dmax": `${maxWidth}%`, "--bl-tint": `${tint * 100}%`, "--bl-ink": textColor, "--bl-accent": accentColor, "--bl-font": fontFamily, ...style },
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "bl-kinetic__sr", children: text }),
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: words.map(
+          (word, w) => /^\s+$/.test(word) ? " " : (
+            // Letters of a word stay together so the line only breaks between words.
+            /* @__PURE__ */ jsx("span", { className: "bl-kinetic__word", children: [...word].map((char) => /* @__PURE__ */ jsx("span", { className: "bl-kinetic__letter", children: char }, index++)) }, w)
+          )
+        ) })
+      ]
+    }
+  );
+}
+export {
+  KineticHeadline as default
+};

package/dist/LavaLamp.d.ts

@@ -0,0 +1,21 @@
+import { type CSSProperties } from 'react';
+export interface LavaLampProps {
+    blobs?: number;
+    /** How fast blobs rise and sink. */
+    speed?: number;
+    /** Blob size multiplier. */
+    size?: number;
+    /** The pointer becomes a blob of its own. */
+    pointer?: boolean;
+    pixelSize?: number;
+    /** Wax colour at the top. */
+    topColor?: string;
+    /** Wax colour at the bottom. */
+    bottomColor?: string;
+    rimColor?: string;
+    backgroundTop?: string;
+    backgroundBottom?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function LavaLamp({ blobs, speed, size, pointer, pixelSize, topColor, bottomColor, rimColor, backgroundTop, backgroundBottom, className, style }: LavaLampProps): import("react").JSX.Element;

package/dist/LavaLamp.js

@@ -0,0 +1,133 @@
+'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];
+};
+const mix = (a, b, t) => a.map((v, i) => v + (b[i] - v) * t);
+function LavaLamp({
+  blobs = 7,
+  speed = 1,
+  size = 1,
+  pointer = true,
+  pixelSize = 5,
+  topColor = "#ffcd75",
+  bottomColor = "#b13e53",
+  rimColor = "#f4f4f4",
+  backgroundTop = "#29366f",
+  backgroundBottom = "#1a1c2c",
+  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 hot = hexToRgb(bottomColor);
+    const cool = hexToRgb(topColor);
+    const rim = hexToRgb(rimColor);
+    const bgTop = hexToRgb(backgroundTop);
+    const bgBottom = hexToRgb(backgroundBottom);
+    const wax = Array.from({ length: blobs }, (_, i) => ({ x: 0.15 + i * 41 % 70 / 100, r: (0.07 + i * 13 % 6 / 100) * size, period: 9 + i * 7 % 8, phase: i * 1.37, sway: 0.04 + i * 3 % 5 / 100 }));
+    const hand = { x: -10, y: -10, on: false };
+    let w = 0;
+    let h = 0;
+    let img = null;
+    let t = 0;
+    let raf = 0;
+    let last = 0;
+    let visible = true;
+    const fit = () => {
+      w = Math.max(1, Math.ceil(canvas.clientWidth / pixelSize));
+      h = Math.max(1, Math.ceil(canvas.clientHeight / pixelSize));
+      canvas.width = w;
+      canvas.height = h;
+      img = ctx.createImageData(w, h);
+    };
+    const frame = () => {
+      const d = img.data;
+      const aspect = w / h;
+      const live = wax.map((b) => {
+        const cycle = (Math.sin(t / b.period * Math.PI * 2 + b.phase) + 1) / 2;
+        return { x: (b.x + Math.sin(t * 0.3 + b.phase) * b.sway) * aspect, y: 0.12 + cycle * 0.8, r2: b.r * b.r };
+      });
+      if (hand.on) live.push({ x: hand.x * aspect, y: hand.y, r2: 6e-3 * size });
+      for (let py = 0; py < h; py++) {
+        const y = py / h;
+        const back = mix(bgTop, bgBottom, y);
+        for (let px = 0; px < w; px++) {
+          const x = px / w * aspect;
+          let f = Math.max(0, (y - 0.9) * 9);
+          for (let k = 0; k < live.length; k++) {
+            const b = live[k];
+            const dx = x - b.x;
+            const dy = y - b.y;
+            f += b.r2 / (dx * dx + dy * dy + 1e-5);
+          }
+          const i = (py * w + px) * 4;
+          let c = back;
+          if (f > 1) c = mix(cool, hot, y);
+          else if (f > 0.82) c = mix(rim, mix(cool, hot, y), 0.35);
+          d[i] = c[0];
+          d[i + 1] = c[1];
+          d[i + 2] = c[2];
+          d[i + 3] = 255;
+        }
+      }
+      ctx.putImageData(img, 0, 0);
+    };
+    const tick = (now) => {
+      t += Math.max(0, Math.min(0.05, (now - last) / 1e3)) * speed;
+      last = now;
+      frame();
+      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) => {
+      if (!pointer) return;
+      const r = canvas.getBoundingClientRect();
+      hand.x = (event.clientX - r.left) / r.width;
+      hand.y = (event.clientY - r.top) / r.height;
+      hand.on = true;
+      if (reduced) frame();
+    };
+    const onLeave = () => {
+      hand.on = false;
+      if (reduced) frame();
+    };
+    const resize = new ResizeObserver(() => {
+      fit();
+      frame();
+    });
+    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("pointerleave", onLeave);
+    fit();
+    frame();
+    start();
+    return () => {
+      cancelAnimationFrame(raf);
+      resize.disconnect();
+      observer.disconnect();
+      document.removeEventListener("visibilitychange", start);
+      canvas.removeEventListener("pointermove", onMove);
+      canvas.removeEventListener("pointerleave", onLeave);
+    };
+  }, [blobs, speed, size, pointer, pixelSize, topColor, bottomColor, rimColor, backgroundTop, backgroundBottom]);
+  return /* @__PURE__ */ jsx("canvas", { ref: canvasRef, "aria-hidden": "true", className, style: { display: "block", width: "100%", height: "100%", background: backgroundBottom, imageRendering: "pixelated", touchAction: "pan-y", ...style } });
+}
+export {
+  LavaLamp as default
+};

package/dist/LetterSwap.d.ts

@@ -0,0 +1,20 @@
+import { type HTMLAttributes, type ElementType } from 'react';
+export interface LetterSwapProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    text?: string;
+    /** The face that rolls into view; defaults to the same word. */
+    swapText?: string;
+    /** Element to render. */
+    as?: ElementType;
+    /** Makes it a link. */
+    href?: string;
+    /** Where the wave starts. */
+    from?: 'start' | 'center' | 'end' | 'random';
+    /** Delay between letters, in ms. */
+    stagger?: number;
+    duration?: number;
+    /** Hold it rolled. */
+    active?: boolean;
+    altColor?: string;
+    accentColor?: string;
+}
+export default function LetterSwap({ text, swapText, as, href, from, stagger, duration, active, altColor, accentColor, className, style, ...rest }: LetterSwapProps): import("react").JSX.Element;

package/dist/LetterSwap.js

@@ -0,0 +1,78 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useInsertionEffect } from "react";
+const STYLE_ID = "bl-letter-swap";
+const CSS = `
+.bl-swap { display: inline-flex; flex-wrap: wrap; color: inherit; font: inherit; text-decoration: none; perspective: 600px; cursor: pointer; }
+a.bl-swap, button.bl-swap { border: 0; background: none; padding: 0; }
+.bl-swap:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 4px; border-radius: 4px; }
+.bl-swap__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+.bl-swap { position: relative; }
+.bl-swap__char { position: relative; display: inline-block; height: 1.15em; line-height: 1.15em; transform-style: preserve-3d; transition: transform var(--bl-dur) cubic-bezier(.3,1.15,.5,1); transition-delay: calc(var(--d) * var(--bl-stagger)); }
+.bl-swap__face { display: block; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: translateZ(0.575em); white-space: pre; }
+.bl-swap__face + .bl-swap__face { position: absolute; inset: 0; color: var(--bl-alt); transform: rotateX(-90deg) translateZ(0.575em); }
+.bl-swap:is(:hover, :focus-visible) .bl-swap__char, .bl-swap[data-active] .bl-swap__char { transform: rotateX(90deg); }
+@media (prefers-reduced-motion: reduce) {
+  .bl-swap__char { transition: color 200ms; transform: none !important; }
+  .bl-swap__face + .bl-swap__face { display: none; }
+  .bl-swap:is(:hover, :focus-visible) .bl-swap__face, .bl-swap[data-active] .bl-swap__face { color: var(--bl-alt); }
+}
+`;
+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);
+  }, []);
+}
+function delays(count, from) {
+  if (from === "end") return Array.from({ length: count }, (_, i) => count - 1 - i);
+  if (from === "center") return Array.from({ length: count }, (_, i) => Math.abs(i - (count - 1) / 2));
+  if (from === "random") {
+    return Array.from({ length: count }, (_, i) => (i * 7 + 3) % count * 0.8);
+  }
+  return Array.from({ length: count }, (_, i) => i);
+}
+function LetterSwap({
+  text = "Hover me",
+  swapText,
+  as = "span",
+  href,
+  from = "start",
+  stagger = 30,
+  duration = 500,
+  active,
+  altColor = "currentColor",
+  accentColor = "#73eff7",
+  className = "",
+  style,
+  ...rest
+}) {
+  useStyles();
+  const front = [...text];
+  const back = [...swapText ?? text];
+  const count = Math.max(front.length, back.length);
+  const order = delays(count, from);
+  const Tag = href ? "a" : as;
+  return /* @__PURE__ */ jsxs(
+    Tag,
+    {
+      className: `bl-swap ${className}`,
+      href,
+      "data-active": active || void 0,
+      style: { "--bl-stagger": `${stagger}ms`, "--bl-dur": `${duration}ms`, "--bl-alt": altColor, "--bl-accent": accentColor, ...style },
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "bl-swap__sr", children: text }),
+        Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsxs("span", { className: "bl-swap__char", "aria-hidden": "true", style: { "--d": order[i] }, children: [
+          /* @__PURE__ */ jsx("span", { className: "bl-swap__face", children: front[i] ?? " " }),
+          /* @__PURE__ */ jsx("span", { className: "bl-swap__face", children: back[i] ?? " " })
+        ] }, i))
+      ]
+    }
+  );
+}
+export {
+  LetterSwap as default
+};

package/dist/LevelMap.d.ts

@@ -0,0 +1,35 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export type LevelStatus = 'cleared' | 'current' | 'available' | 'locked';
+export interface Level {
+    id?: string | number;
+    name?: string;
+    status: LevelStatus;
+    /** 0–3 stars, shown under the name. */
+    stars?: number;
+    /** Text on the node instead of its number. */
+    label?: ReactNode;
+}
+export interface LevelMapProps {
+    levels?: Level[];
+    /** Node diameter, in px. */
+    nodeSize?: number;
+    /** Minimum horizontal spacing between nodes, in px. */
+    minSpacing?: number;
+    /** Vertical distance between rows, in px. */
+    rowGap?: number;
+    padding?: number;
+    pathColor?: string;
+    /** Color of the path already traveled. */
+    clearedColor?: string;
+    textColor?: string;
+    /** Custom "you are here" marker over the current level. */
+    marker?: ReactNode;
+    /** Path draw-in length, in ms. */
+    drawDuration?: number;
+    fontFamily?: string;
+    /** Called when an unlocked level is chosen. */
+    onSelect?: (level: Level, index: number) => void;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function LevelMap({ levels, nodeSize, minSpacing, rowGap, padding, pathColor, clearedColor, textColor, marker, drawDuration, fontFamily, onSelect, className, style }: LevelMapProps): import("react").JSX.Element;