bits-lab 0.0.0-stage → 0.1.0

package/dist/ScoreTicker.js

@@ -0,0 +1,176 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useInsertionEffect, useLayoutEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-score-ticker";
+const CSS = `
+.bl-score { display: inline-grid; justify-items: center; gap: 10px; max-width: 100%; color: var(--bl-ink); font-family: var(--bl-font); }
+.bl-score__label { display: flex; gap: 1.6em; font-size: calc(var(--bl-size) * 0.3); letter-spacing: 0.12em; color: var(--bl-muted); }
+.bl-score__label b { color: var(--bl-high); font-weight: inherit; }
+.bl-score__panel { position: relative; display: inline-flex; gap: calc(var(--bl-size) * 0.1); max-width: 100%; padding: calc(var(--bl-size) * 0.2); background: var(--bl-panel); box-shadow: 0 0 0 3px var(--bl-edge), 6px 6px 0 3px rgba(0,0,0,0.45); }
+.bl-score__drum { position: relative; width: 0.8em; height: 1.2em; overflow: hidden; font-size: var(--bl-size); line-height: 1.2em; text-align: center; background: var(--bl-drum); box-shadow: inset 0 0.12em 0 rgba(0,0,0,0.45), inset 0 -0.08em 0 rgba(255,255,255,0.06); }
+.bl-score__drum::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(0,0,0,0.45), transparent 30%, transparent 70%, rgba(0,0,0,0.45)); }
+.bl-score__drum[data-lead] { color: var(--bl-dim); }
+.bl-score__strip { display: block; transition: transform var(--bl-dur) cubic-bezier(.25,1.35,.5,1); }
+.bl-score__strip > span { display: block; height: 1.2em; }
+.bl-score__pops { position: absolute; left: 50%; top: 0; width: 0; pointer-events: none; }
+.bl-score__pop { position: absolute; left: 0; bottom: 4px; white-space: nowrap; font-size: calc(var(--bl-size) * 0.36); color: var(--bl-accent); text-shadow: 2px 2px 0 rgba(0,0,0,0.6); animation: bl-score-pop 1100ms steps(12) forwards; }
+.bl-score__pop em { margin-left: 0.6em; font-style: normal; color: var(--bl-combo); }
+.bl-score__banner { min-height: 1.3em; font-size: calc(var(--bl-size) * 0.32); color: var(--bl-high); }
+.bl-score__banner[data-show] { animation: bl-score-flash 0.5s steps(1) 6; }
+.bl-score__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+@keyframes bl-score-pop { 0% { transform: translate(-50%, 10px); opacity: 0; } 15% { transform: translate(-50%, -4px); opacity: 1; } 100% { transform: translate(-50%, -44px); opacity: 0; } }
+@keyframes bl-score-fade { 0%, 70% { transform: translate(-50%, -8px); opacity: 1; } 100% { transform: translate(-50%, -8px); opacity: 0; } }
+@keyframes bl-score-flash { 50% { opacity: 0; } }
+@media (prefers-reduced-motion: reduce) {
+  .bl-score__strip { transition: none; }
+  .bl-score__pop { animation: bl-score-fade 1100ms linear forwards; }
+  .bl-score__banner[data-show] { 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 STRIP = Array.from({ length: 30 }, (_, i) => i % 10);
+const clampScore = (value, digits) => Math.max(0, Math.min(10 ** digits - 1, Math.floor(value || 0)));
+const digitsOf = (value, digits) => String(value).padStart(digits, "0").split("").map(Number);
+function ScoreTicker({
+  value = 0,
+  digits = 7,
+  label = "SCORE",
+  highScore,
+  combo = 1,
+  showPopups = true,
+  shakeAt = 1e3,
+  duration = 600,
+  size = 40,
+  textColor = "#f4f4f4",
+  dimColor = "#333c57",
+  mutedColor = "#94b0c2",
+  panelColor = "#1a1c2c",
+  edgeColor = "#566c86",
+  drumColor = "#0b0b14",
+  accentColor = "#ffcd75",
+  comboColor = "#ef7d57",
+  highColor = "#73eff7",
+  fontFamily = '"Press Start 2P", ui-monospace, monospace',
+  className = "",
+  style
+}) {
+  useStyles();
+  const score = clampScore(value, digits);
+  const current = digitsOf(score, digits);
+  const [drums, setDrums] = useState(() => current.map((d) => ({ pos: 10 + d, still: false })));
+  const [pops, setPops] = useState([]);
+  const [newHigh, setNewHigh] = useState(false);
+  const [spoken, setSpoken] = useState(score);
+  const previous = useRef(score);
+  const panelRef = useRef(null);
+  const popId = useRef(0);
+  useLayoutEffect(() => {
+    const from = previous.current;
+    previous.current = score;
+    if (from === score) return;
+    const before = digitsOf(from, digits);
+    setDrums(
+      (list) => current.map((d, k) => {
+        const place = 10 ** (digits - 1 - k);
+        const turns = Math.floor(score / place) - Math.floor(from / place);
+        if (turns <= 0) return { pos: 10 + d, still: false };
+        const steps = (d - before[k] + 10) % 10;
+        const target = list[k].pos + steps;
+        return { pos: target > 29 ? target - 10 : target, still: false };
+      })
+    );
+    const gain = score - from;
+    if (gain > 0 && showPopups) {
+      popId.current += 1;
+      setPops((list) => [...list.slice(-4), { id: popId.current, gain, combo }]);
+    }
+    const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    if (gain >= shakeAt && !reduced) {
+      panelRef.current?.animate(
+        [{ transform: "none" }, { transform: "translate(-3px, 2px)" }, { transform: "translate(3px, -2px)" }, { transform: "none" }],
+        { duration: 240, easing: "steps(3)" }
+      );
+    }
+    if (highScore != null && from <= highScore && score > highScore) setNewHigh(true);
+    if (highScore != null && score <= highScore) setNewHigh(false);
+  }, [score]);
+  useEffect(() => {
+    const timer = setTimeout(() => setSpoken(score), 700);
+    return () => clearTimeout(timer);
+  }, [score]);
+  const settle = (k) => {
+    setDrums((list) => list.map((drum, i) => i === k && drum.pos >= 20 ? { pos: drum.pos - 10, still: true } : drum));
+    requestAnimationFrame(
+      () => requestAnimationFrame(() => setDrums((list) => list.map((drum, i) => i === k && drum.still ? { ...drum, still: false } : drum)))
+    );
+  };
+  const firstNonZero = current.findIndex((d) => d !== 0);
+  const best = highScore != null ? Math.max(highScore, score) : null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `bl-score ${className}`,
+      style: {
+        "--bl-size": `${size}px`,
+        "--bl-ink": textColor,
+        "--bl-dim": dimColor,
+        "--bl-muted": mutedColor,
+        "--bl-panel": panelColor,
+        "--bl-edge": edgeColor,
+        "--bl-drum": drumColor,
+        "--bl-accent": accentColor,
+        "--bl-combo": comboColor,
+        "--bl-high": highColor,
+        "--bl-dur": `${duration}ms`,
+        "--bl-font": fontFamily,
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "bl-score__label", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx("span", { children: label }),
+          best != null && /* @__PURE__ */ jsxs("span", { children: [
+            "HI ",
+            /* @__PURE__ */ jsx("b", { children: String(best).padStart(digits, "0") })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { ref: panelRef, className: "bl-score__panel", "aria-hidden": "true", children: [
+          drums.map((drum, k) => /* @__PURE__ */ jsx("span", { className: "bl-score__drum", "data-lead": (firstNonZero === -1 ? k < digits - 1 : k < firstNonZero) || void 0, children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "bl-score__strip",
+              style: { transform: `translateY(${-drum.pos * 1.2}em)`, transition: drum.still ? "none" : void 0 },
+              onTransitionEnd: () => settle(k),
+              children: STRIP.map((d, i) => /* @__PURE__ */ jsx("span", { children: d }, i))
+            }
+          ) }, k)),
+          /* @__PURE__ */ jsx("span", { className: "bl-score__pops", children: pops.map((pop) => /* @__PURE__ */ jsxs("span", { className: "bl-score__pop", onAnimationEnd: () => setPops((list) => list.filter((p) => p.id !== pop.id)), children: [
+            "+",
+            pop.gain.toLocaleString("en-US"),
+            pop.combo > 1 && /* @__PURE__ */ jsxs("em", { children: [
+              "\xD7",
+              pop.combo,
+              " COMBO"
+            ] })
+          ] }, pop.id)) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "bl-score__banner", "data-show": newHigh || void 0, "aria-hidden": "true", children: newHigh ? "NEW HIGH SCORE!" : "" }),
+        /* @__PURE__ */ jsxs("span", { className: "bl-score__sr", role: "status", children: [
+          label,
+          " ",
+          spoken.toLocaleString("en-US"),
+          newHigh ? ". New high score!" : ""
+        ] })
+      ]
+    }
+  );
+}
+export {
+  ScoreTicker as default
+};

package/dist/ScreenScroller.d.ts

@@ -0,0 +1,24 @@
+import { type CSSProperties, type ReactNode } from 'react';
+type ScrollerDevice = 'laptop' | 'phone' | 'tablet';
+export interface ScreenScrollerProps {
+    /** The page shown on the screen. Taller content scrolls further. */
+    children?: ReactNode;
+    /** Heading above the device; fades out as it rises. */
+    intro?: ReactNode;
+    device?: ScrollerDevice;
+    /** Section height: a number is vh, or pass any CSS length. */
+    scrollLength?: number | string;
+    /** Height of the sticky stage. Use the scroll box height when inside one. */
+    stageHeight?: string;
+    /** Starting tilt, in degrees. */
+    tilt?: number;
+    /** Share of the scroll spent rising flat before the screen scrolls (0–1). */
+    riseUntil?: number;
+    bodyColor?: string;
+    edgeColor?: string;
+    textColor?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function ScreenScroller({ children, intro, device, scrollLength, stageHeight, tilt, riseUntil, bodyColor, edgeColor, textColor, className, style }: ScreenScrollerProps): import("react").JSX.Element;
+export {};

package/dist/ScreenScroller.js

@@ -0,0 +1,138 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useInsertionEffect, useRef } from "react";
+const STYLE_ID = "bl-screen-scroller";
+const CSS = `
+.bl-ss { position: relative; height: var(--bl-len); }
+.bl-ss__stage { position: sticky; top: 0; height: var(--bl-stage); display: grid; place-items: center; overflow: hidden; perspective: 1400px; }
+.bl-ss__intro { position: absolute; top: 9%; left: 0; right: 0; text-align: center; padding: 0 16px; color: var(--bl-ink); opacity: calc(1 - var(--bl-rise) * 1.6); transform: translateY(calc(var(--bl-rise) * -40px)); pointer-events: none; }
+.bl-ss__device { position: relative; width: min(var(--bl-w), 92%); padding: var(--bl-bezel); border-radius: var(--bl-radius); background: var(--bl-body); box-shadow: inset 0 0 0 2px var(--bl-edge), 0 40px 80px -30px rgba(0,0,0,0.7); transform-origin: 50% 100%; transform: translateY(calc((1 - var(--bl-rise)) * 18%)) rotateX(calc((1 - var(--bl-rise)) * var(--bl-tilt))) scale(calc(0.82 + var(--bl-rise) * 0.18)); will-change: transform; }
+.bl-ss__screen { position: relative; overflow: hidden; aspect-ratio: var(--bl-ratio); border-radius: var(--bl-screen-radius); background: #000; }
+.bl-ss__content { position: absolute; top: 0; left: 0; right: 0; transform: translateY(calc(var(--bl-scroll) * var(--bl-travel) * -1px)); will-change: transform; }
+.bl-ss__content > img { display: block; width: 100%; height: auto; }
+.bl-ss__bar { position: absolute; right: 4px; top: 4px; bottom: 4px; width: 3px; border-radius: 2px; background: rgba(255,255,255,0.12); opacity: var(--bl-rise); }
+.bl-ss__thumb { position: absolute; left: 0; right: 0; height: 22%; border-radius: 2px; background: rgba(255,255,255,0.55); top: calc(var(--bl-scroll) * 78%); }
+@media (prefers-reduced-motion: reduce) {
+  .bl-ss { height: auto; }
+  .bl-ss__stage { position: relative; height: auto; padding: 40px 0; }
+  .bl-ss__intro { position: static; opacity: 1; transform: none; margin-bottom: 24px; }
+  .bl-ss__device { transform: none; }
+  .bl-ss__screen { overflow: auto; }
+  .bl-ss__content { position: static; transform: none; }
+  .bl-ss__bar { display: 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 scrollParent(node) {
+  for (let el = node?.parentElement; el; el = el.parentElement) {
+    const { overflowY } = getComputedStyle(el);
+    if (/(auto|scroll|overlay)/.test(overflowY) && el.scrollHeight > el.clientHeight) return el;
+  }
+  return window;
+}
+const clamp = (value) => Math.min(1, Math.max(0, value));
+const DEVICES = {
+  laptop: { width: 760, ratio: "16 / 10", bezel: "14px 14px 22px", radius: "18px 18px 8px 8px", screenRadius: "4px" },
+  phone: { width: 300, ratio: "9 / 19", bezel: "12px", radius: "44px", screenRadius: "34px" },
+  tablet: { width: 520, ratio: "3 / 4", bezel: "18px", radius: "30px", screenRadius: "12px" }
+};
+function ScreenScroller({
+  children,
+  intro,
+  device = "laptop",
+  scrollLength = 300,
+  stageHeight = "100vh",
+  tilt = 38,
+  riseUntil = 0.35,
+  bodyColor = "#1f2230",
+  edgeColor = "#3a3f55",
+  textColor = "#f4f4f4",
+  className = "",
+  style
+}) {
+  useStyles();
+  const rootRef = useRef(null);
+  const screenRef = useRef(null);
+  const contentRef = useRef(null);
+  const spec = DEVICES[device] ?? DEVICES.laptop;
+  useEffect(() => {
+    const root = rootRef.current;
+    const scroller = scrollParent(root);
+    let frame = 0;
+    const measureTravel = () => {
+      const travel = Math.max(0, contentRef.current.offsetHeight - screenRef.current.clientHeight);
+      root.style.setProperty("--bl-travel", String(travel));
+    };
+    const update = () => {
+      frame = 0;
+      const rect = root.getBoundingClientRect();
+      const viewTop = scroller === window ? 0 : scroller.getBoundingClientRect().top;
+      const viewHeight = scroller === window ? window.innerHeight : scroller.clientHeight;
+      const progress = clamp((viewTop - rect.top) / Math.max(1, rect.height - viewHeight));
+      const rise = clamp(progress / riseUntil);
+      const scroll = clamp((progress - riseUntil) / (1 - riseUntil));
+      root.style.setProperty("--bl-rise", rise.toFixed(4));
+      root.style.setProperty("--bl-scroll", scroll.toFixed(4));
+    };
+    const schedule = () => {
+      if (!frame) frame = requestAnimationFrame(update);
+    };
+    const resize = new ResizeObserver(() => {
+      measureTravel();
+      schedule();
+    });
+    resize.observe(contentRef.current);
+    resize.observe(screenRef.current);
+    measureTravel();
+    update();
+    scroller.addEventListener("scroll", schedule, { passive: true });
+    window.addEventListener("resize", schedule);
+    return () => {
+      cancelAnimationFrame(frame);
+      resize.disconnect();
+      scroller.removeEventListener("scroll", schedule);
+      window.removeEventListener("resize", schedule);
+    };
+  }, [riseUntil]);
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      ref: rootRef,
+      className: `bl-ss ${className}`,
+      style: {
+        "--bl-len": typeof scrollLength === "number" ? `${scrollLength}vh` : scrollLength,
+        "--bl-stage": stageHeight,
+        "--bl-tilt": `${tilt}deg`,
+        "--bl-rise": 0,
+        "--bl-scroll": 0,
+        "--bl-travel": 0,
+        "--bl-w": `${spec.width}px`,
+        "--bl-ratio": spec.ratio,
+        "--bl-bezel": spec.bezel,
+        "--bl-radius": spec.radius,
+        "--bl-screen-radius": spec.screenRadius,
+        "--bl-body": bodyColor,
+        "--bl-edge": edgeColor,
+        "--bl-ink": textColor,
+        ...style
+      },
+      children: /* @__PURE__ */ jsxs("div", { className: "bl-ss__stage", children: [
+        intro && /* @__PURE__ */ jsx("div", { className: "bl-ss__intro", children: intro }),
+        /* @__PURE__ */ jsx("div", { className: "bl-ss__device", children: /* @__PURE__ */ jsxs("div", { ref: screenRef, className: "bl-ss__screen", tabIndex: 0, "aria-label": "Device screen preview", children: [
+          /* @__PURE__ */ jsx("div", { ref: contentRef, className: "bl-ss__content", children }),
+          /* @__PURE__ */ jsx("div", { className: "bl-ss__bar", "aria-hidden": "true", children: /* @__PURE__ */ jsx("div", { className: "bl-ss__thumb" }) })
+        ] }) })
+      ] })
+    }
+  );
+}
+export {
+  ScreenScroller as default
+};

package/dist/Screensaver.d.ts

@@ -0,0 +1,31 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface ScreensaverProps {
+    /** What bounces; it takes the current colour (currentColor) on every wall. */
+    logo?: ReactNode;
+    /** Shown until the page has been idle for idleAfter ms (only when idleAfter > 0). */
+    children?: ReactNode;
+    /** 0 runs it always; otherwise it fades in after this many ms without input. */
+    idleAfter?: number;
+    /** Travel speed in px per second. */
+    speed?: number;
+    /** Colours cycled on each wall hit. */
+    colors?: string[];
+    /** How exact (in px) a corner hit must be. */
+    cornerTolerance?: number;
+    showCount?: boolean;
+    onCornerHit?: (count: number) => void;
+    height?: number | string;
+    radius?: number;
+    logoSize?: number;
+    backgroundColor?: string;
+    /** Behind the children in idle mode. */
+    contentColor?: string;
+    textColor?: string;
+    lineColor?: string;
+    fontFamily?: string;
+    /** Accessible name when always on. */
+    label?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function Screensaver({ logo, children, idleAfter, speed, colors, cornerTolerance, showCount, onCornerHit, height, radius, logoSize, backgroundColor, contentColor, textColor, lineColor, fontFamily, label, className, style }: ScreensaverProps): import("react").JSX.Element;

package/dist/Screensaver.js

@@ -0,0 +1,221 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useInsertionEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-screensaver";
+const CSS = `
+.bl-saver { position: relative; box-sizing: border-box; width: 100%; height: var(--bl-h); overflow: hidden; border-radius: var(--bl-radius); background: var(--bl-content-bg); box-shadow: 0 0 0 2px var(--bl-line); font-family: var(--bl-font); }
+.bl-saver__content { height: 100%; }
+.bl-saver__screen { position: absolute; inset: 0; overflow: hidden; background: var(--bl-bg); transition: opacity 600ms ease; }
+.bl-saver[data-idle-mode]:not([data-idle]) .bl-saver__screen { opacity: 0; pointer-events: none; transition-duration: 150ms; }
+.bl-saver__logo { position: absolute; top: 0; left: 0; display: grid; place-items: center; color: var(--bl-logo); font-size: var(--bl-logo-size); font-weight: 700; line-height: 1; white-space: nowrap; transition: color 120ms; will-change: transform; }
+.bl-saver__logo svg, .bl-saver__logo img { display: block; }
+.bl-saver__count { position: absolute; top: 10px; right: 12px; padding: 4px 8px; border-radius: 6px; background: rgba(0,0,0,0.45); color: var(--bl-ink); font-size: 12px; font-variant-numeric: tabular-nums; }
+.bl-saver__count[data-pop] { animation: bl-saver-pop 500ms steps(5); }
+.bl-saver__spark { position: absolute; width: 8px; height: 8px; margin: -4px; background: var(--c); animation: bl-saver-spark 900ms cubic-bezier(.2,.8,.3,1) forwards; pointer-events: none; }
+.bl-saver__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+@keyframes bl-saver-spark { from { transform: translate(0, 0) scale(1); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(0.3); opacity: 0; } }
+@keyframes bl-saver-pop { 50% { transform: scale(1.35); } }
+@media (prefers-reduced-motion: reduce) { .bl-saver__spark { display: none; } .bl-saver__count[data-pop] { 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 PALETTE = ["#73eff7", "#a7f070", "#ffcd75", "#ef7d57", "#b13e53", "#41a6f6", "#f4f4f4"];
+const ACTIVITY = ["pointermove", "pointerdown", "keydown", "wheel", "touchstart"];
+function Screensaver({
+  logo = "BITS LAB",
+  children,
+  idleAfter = 0,
+  speed = 110,
+  colors = PALETTE,
+  cornerTolerance = 4,
+  showCount = true,
+  onCornerHit,
+  height = 320,
+  radius = 12,
+  logoSize = 34,
+  backgroundColor = "#0b0b14",
+  contentColor = "#1a1c2c",
+  textColor = "#f4f4f4",
+  lineColor = "#333c57",
+  fontFamily = '"Press Start 2P", ui-monospace, monospace',
+  label = "Screensaver",
+  className = "",
+  style
+}) {
+  useStyles();
+  const rootRef = useRef(null);
+  const logoRef = useRef(null);
+  const countRef = useRef(null);
+  const hitRef = useRef(onCornerHit);
+  hitRef.current = onCornerHit;
+  const [idle, setIdle] = useState(idleAfter <= 0);
+  const [corners, setCorners] = useState(0);
+  const countValue = useRef(0);
+  const [bursts, setBursts] = useState([]);
+  const [announce, setAnnounce] = useState("");
+  useEffect(() => {
+    if (idleAfter <= 0) {
+      setIdle(true);
+      return void 0;
+    }
+    let timer = 0;
+    const reset = () => {
+      setIdle(false);
+      clearTimeout(timer);
+      timer = setTimeout(() => setIdle(true), idleAfter);
+    };
+    reset();
+    ACTIVITY.forEach((type) => window.addEventListener(type, reset, { passive: true }));
+    return () => {
+      clearTimeout(timer);
+      ACTIVITY.forEach((type) => window.removeEventListener(type, reset));
+    };
+  }, [idleAfter]);
+  useEffect(() => {
+    if (!idle) return void 0;
+    const root = rootRef.current;
+    const logoEl = logoRef.current;
+    const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    let colorIndex = 0;
+    const recolor = () => {
+      colorIndex = (colorIndex + 1) % colors.length;
+      logoEl.style.color = colors[colorIndex];
+    };
+    logoEl.style.color = colors[0];
+    if (reduced) {
+      const place = () => {
+        logoEl.style.transform = `translate(${(root.clientWidth - logoEl.offsetWidth) / 2}px, ${(root.clientHeight - logoEl.offsetHeight) / 2}px)`;
+      };
+      place();
+      const resize2 = new ResizeObserver(place);
+      resize2.observe(root);
+      const timer = setInterval(recolor, 4e3);
+      return () => {
+        resize2.disconnect();
+        clearInterval(timer);
+      };
+    }
+    const box = () => ({ w: Math.max(0, root.clientWidth - logoEl.offsetWidth), h: Math.max(0, root.clientHeight - logoEl.offsetHeight) });
+    let { w, h } = box();
+    const angle = Math.PI / 4 + (Math.random() - 0.5) * 0.5;
+    const p = { x: Math.random() * w, y: Math.random() * h, dx: Math.cos(angle), dy: Math.sin(angle) };
+    let visible = true;
+    let lastCorner = -Infinity;
+    let frame = 0;
+    let last = 0;
+    const celebrate = (x, y, now) => {
+      if (now - lastCorner < 600) return;
+      lastCorner = now;
+      countValue.current += 1;
+      const next = countValue.current;
+      setCorners(next);
+      setAnnounce(`Corner hit! ${next} so far.`);
+      hitRef.current?.(next);
+      const id = `${performance.now()}`;
+      const sparks = Array.from({ length: 14 }, (_, i) => {
+        const a = i / 14 * Math.PI * 2;
+        const dist = 50 + Math.random() * 60;
+        return { x, y, dx: Math.cos(a) * dist, dy: Math.sin(a) * dist, c: colors[i % colors.length] };
+      });
+      setBursts((list) => [...list.slice(-2), { id, sparks }]);
+      setTimeout(() => setBursts((list) => list.filter((b) => b.id !== id)), 950);
+      const count = countRef.current;
+      if (count) {
+        delete count.dataset.pop;
+        void count.offsetWidth;
+        count.dataset.pop = "";
+      }
+    };
+    const tick = (now) => {
+      const dt = Math.max(0, Math.min(0.05, (now - last) / 1e3));
+      last = now;
+      p.x += p.dx * speed * dt;
+      p.y += p.dy * speed * dt;
+      let hitX = false;
+      let hitY = false;
+      if (p.x <= 0 || p.x >= w) {
+        p.x = Math.max(0, Math.min(w, p.x));
+        p.dx = -p.dx;
+        hitX = true;
+      }
+      if (p.y <= 0 || p.y >= h) {
+        p.y = Math.max(0, Math.min(h, p.y));
+        p.dy = -p.dy;
+        hitY = true;
+      }
+      if (hitX || hitY) {
+        recolor();
+        const nearX = p.x <= cornerTolerance || p.x >= w - cornerTolerance;
+        const nearY = p.y <= cornerTolerance || p.y >= h - cornerTolerance;
+        if (nearX && nearY) celebrate(p.x < w / 2 ? 0 : root.clientWidth, p.y < h / 2 ? 0 : root.clientHeight, now);
+      }
+      logoEl.style.transform = `translate(${p.x.toFixed(1)}px, ${p.y.toFixed(1)}px)`;
+      frame = requestAnimationFrame(tick);
+    };
+    const start = () => {
+      if (frame || !visible || document.hidden) return;
+      last = performance.now();
+      frame = requestAnimationFrame(tick);
+    };
+    const stop = () => {
+      cancelAnimationFrame(frame);
+      frame = 0;
+    };
+    const observer = new IntersectionObserver(([entry]) => {
+      visible = entry.isIntersecting;
+      if (visible) start();
+      else stop();
+    });
+    observer.observe(root);
+    const resize = new ResizeObserver(() => {
+      ({ w, h } = box());
+    });
+    resize.observe(root);
+    resize.observe(logoEl);
+    const onVisibility = () => document.hidden ? stop() : start();
+    document.addEventListener("visibilitychange", onVisibility);
+    start();
+    return () => {
+      stop();
+      observer.disconnect();
+      resize.disconnect();
+      document.removeEventListener("visibilitychange", onVisibility);
+    };
+  }, [idle, speed, colors, cornerTolerance]);
+  const idleMode = idleAfter > 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      className: `bl-saver ${className}`,
+      "data-idle-mode": idleMode || void 0,
+      "data-idle": idle || void 0,
+      role: idleMode ? void 0 : "img",
+      "aria-label": idleMode ? void 0 : label,
+      style: { "--bl-h": typeof height === "number" ? `${height}px` : height, "--bl-radius": `${radius}px`, "--bl-bg": backgroundColor, "--bl-content-bg": contentColor, "--bl-ink": textColor, "--bl-line": lineColor, "--bl-logo": colors[0], "--bl-logo-size": `${logoSize}px`, "--bl-font": fontFamily, ...style },
+      children: [
+        idleMode && /* @__PURE__ */ jsx("div", { className: "bl-saver__content", children }),
+        /* @__PURE__ */ jsxs("div", { className: "bl-saver__screen", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx("div", { ref: logoRef, className: "bl-saver__logo", children: logo }),
+          bursts.map(
+            (burst) => burst.sparks.map((s, i) => /* @__PURE__ */ jsx("span", { className: "bl-saver__spark", style: { left: s.x, top: s.y, "--dx": `${s.dx}px`, "--dy": `${s.dy}px`, "--c": s.c } }, `${burst.id}-${i}`))
+          ),
+          showCount && /* @__PURE__ */ jsxs("span", { ref: countRef, className: "bl-saver__count", children: [
+            "Corners: ",
+            corners
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "bl-saver__sr", "aria-live": "polite", children: announce })
+      ]
+    }
+  );
+}
+export {
+  Screensaver as default
+};

package/dist/ScrollTilt.d.ts

@@ -0,0 +1,27 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface ScrollTiltProps {
+    /** The product shot: an image, video, device frame or live UI. */
+    children?: ReactNode;
+    /** Starting rotation, in degrees. */
+    tilt?: number;
+    /** Starting scale. */
+    scale?: number;
+    /** Starting downward offset, in px. */
+    lift?: number;
+    /** Viewport position (0 top, 1 bottom) of the card's top where the effect starts. */
+    start?: number;
+    /** Viewport position of the card's top where it is fully flat. */
+    end?: number;
+    /** 3D perspective, in px; lower is more dramatic. */
+    perspective?: number;
+    /** Light sweep across the card as it settles. */
+    shine?: boolean;
+    radius?: number;
+    borderWidth?: number;
+    borderColor?: string;
+    shineColor?: string;
+    shadowColor?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function ScrollTilt({ children, tilt, scale, lift, start, end, perspective, shine, radius, borderWidth, borderColor, shineColor, shadowColor, className, style }: ScrollTiltProps): import("react").JSX.Element;