bits-lab 0.0.0-stage → 0.1.2

package/dist/ContourLines.js

@@ -0,0 +1,159 @@
+'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 hash = (x, y, z) => {
+  let n = Math.imul(x, 374761393) ^ Math.imul(y, 668265263) ^ Math.imul(z, 1440662683);
+  n = Math.imul(n ^ n >>> 13, 1274126177);
+  return ((n ^ n >>> 16) >>> 0) / 4294967296;
+};
+const fade = (t) => t * t * (3 - 2 * t);
+function noise(x, y, z) {
+  const xi = Math.floor(x);
+  const yi = Math.floor(y);
+  const zi = Math.floor(z);
+  const u = fade(x - xi);
+  const v = fade(y - yi);
+  const w = fade(z - zi);
+  const lerp = (a, b, k) => a + (b - a) * k;
+  const corner = (dx, dy, dz) => hash(xi + dx, yi + dy, zi + dz);
+  return lerp(
+    lerp(lerp(corner(0, 0, 0), corner(1, 0, 0), u), lerp(corner(0, 1, 0), corner(1, 1, 0), u), v),
+    lerp(lerp(corner(0, 0, 1), corner(1, 0, 1), u), lerp(corner(0, 1, 1), corner(1, 1, 1), u), v),
+    w
+  );
+}
+function ContourLines({
+  levels = 14,
+  major = 5,
+  scale = 1,
+  speed = 1,
+  pixelSize = 2,
+  tint = true,
+  pointer = true,
+  lineColor = "#73eff7",
+  majorColor = "#f4f4f4",
+  bandColors = ["#1a1c2c", "#262b44"],
+  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 line = hexToRgb(lineColor);
+    const strong = hexToRgb(majorColor);
+    const bands = bandColors.map(hexToRgb);
+    const hand = { x: -1, y: -1, lift: 0, on: false };
+    let w = 0;
+    let h = 0;
+    let img = null;
+    let level = new Int16Array(0);
+    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);
+      level = new Int16Array(w * h);
+    };
+    const frame = () => {
+      const k = 2.2 * scale / Math.max(w, h);
+      for (let y = 0; y < h; y++) {
+        for (let x = 0; x < w; x++) {
+          let v = noise(x * k * 1.6, y * k * 1.6, t * 0.12) * 0.7 + noise(x * k * 4, y * k * 4, t * 0.2 + 5) * 0.3;
+          if (hand.lift > 0.01) {
+            const dx = (x - hand.x) / w;
+            const dy = (y - hand.y) / w;
+            v += Math.exp(-(dx * dx + dy * dy) / 0.01) * 0.35 * hand.lift;
+          }
+          level[y * w + x] = Math.floor(v * levels);
+        }
+      }
+      const d = img.data;
+      for (let y = 0; y < h; y++) {
+        for (let x = 0; x < w; x++) {
+          const i = y * w + x;
+          const L = level[i];
+          const edge = x + 1 < w && level[i + 1] !== L || y + 1 < h && level[i + w] !== L;
+          let c;
+          if (edge) c = Math.max(L, x + 1 < w ? level[i + 1] : L, y + 1 < h ? level[i + w] : L) % major === 0 ? strong : line;
+          else c = tint ? bands[(L % bands.length + bands.length) % bands.length] : bands[0];
+          const o = i * 4;
+          d[o] = c[0];
+          d[o + 1] = c[1];
+          d[o + 2] = c[2];
+          d[o + 3] = 255;
+        }
+      }
+      ctx.putImageData(img, 0, 0);
+    };
+    const tick = (now) => {
+      const dt = Math.max(0, Math.min(0.05, (now - last) / 1e3));
+      last = now;
+      t += dt * speed;
+      hand.lift += ((hand.on ? 1 : 0) - hand.lift) * Math.min(1, dt * 4);
+      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 * w;
+      hand.y = (event.clientY - r.top) / r.height * h;
+      hand.on = true;
+      if (reduced) {
+        hand.lift = 1;
+        frame();
+      }
+    };
+    const onLeave = () => {
+      hand.on = false;
+      if (reduced) {
+        hand.lift = 0;
+        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);
+    };
+  }, [levels, major, scale, speed, pixelSize, tint, pointer, lineColor, majorColor, bandColors.join()]);
+  return /* @__PURE__ */ jsx("canvas", { ref: canvasRef, "aria-hidden": "true", className, style: { display: "block", width: "100%", height: "100%", background: bandColors[0], imageRendering: "pixelated", touchAction: "pan-y", ...style } });
+}
+export {
+  ContourLines as default
+};

package/dist/Coverflow.d.ts

@@ -0,0 +1,27 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface CoverflowProps {
+    children?: ReactNode;
+    index?: number;
+    defaultIndex?: number;
+    onChange?: (index: number) => void;
+    itemWidth?: number;
+    height?: number;
+    /** Overlap between items (share of the item width). */
+    spacing?: number;
+    /** How far side items turn, in degrees. */
+    angle?: number;
+    /** How far side items step back, in px. */
+    depth?: number;
+    /** Items rendered on each side. */
+    range?: number;
+    label?: string;
+    textColor?: string;
+    mutedColor?: string;
+    lineColor?: string;
+    chipColor?: string;
+    accentColor?: string;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function Coverflow({ children, index: controlled, defaultIndex, onChange, itemWidth, height, spacing, angle, depth, range, label, textColor, mutedColor, lineColor, chipColor, accentColor, fontFamily, className, style }: CoverflowProps): import("react").JSX.Element;

package/dist/Coverflow.js

@@ -0,0 +1,167 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Children, useEffect, useInsertionEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-coverflow";
+const CSS = `
+.bl-cover { display: grid; gap: 14px; justify-items: center; width: 100%; font-family: var(--bl-font); color: var(--bl-ink); }
+.bl-cover__stage { position: relative; width: 100%; height: var(--bl-h); perspective: 1100px; touch-action: pan-y; outline: none; overflow: hidden; }
+.bl-cover__stage:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 4px; border-radius: 12px; }
+.bl-cover__item { position: absolute; top: 50%; left: 50%; width: var(--bl-item); margin-left: calc(var(--bl-item) / -2); transform: translateY(-50%) translateX(calc(var(--o) * var(--bl-item) * var(--bl-spacing))) translateZ(calc(var(--a) * var(--bl-depth) * -1)) rotateY(calc(var(--s) * var(--bl-angle) * -1)); transition: transform 420ms cubic-bezier(.2,.8,.2,1), filter 420ms; transform-style: preserve-3d; cursor: pointer; filter: brightness(calc(1 - var(--a) * 0.18)); }
+.bl-cover__item[data-active] { cursor: default; }
+.bl-cover__stage[data-dragging] .bl-cover__item { transition: none; }
+.bl-cover__floor { position: absolute; left: 10%; right: 10%; bottom: 6%; height: 14%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,0.55), transparent); pointer-events: none; }
+.bl-cover__bar { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--bl-muted); }
+.bl-cover__btn { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 10px; background: var(--bl-chip); color: var(--bl-ink); cursor: pointer; }
+.bl-cover__btn:hover { background: var(--bl-line); }
+.bl-cover__btn:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 2px; }
+.bl-cover__btn:disabled { opacity: 0.4; cursor: not-allowed; }
+.bl-cover__count { min-width: 64px; text-align: center; font-variant-numeric: tabular-nums; }
+@media (prefers-reduced-motion: reduce) { .bl-cover__item { transition: none; transform: translateY(-50%) translateX(calc(var(--o) * var(--bl-item) * 1.05)); } }
+`;
+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 Arrow = ({ flip }) => /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", style: { transform: flip ? "scaleX(-1)" : void 0 }, children: /* @__PURE__ */ jsx("path", { d: "M6 3l5 5-5 5" }) });
+function Coverflow({
+  children,
+  index: controlled,
+  defaultIndex = 0,
+  onChange,
+  itemWidth = 220,
+  height = 320,
+  spacing = 0.55,
+  angle = 55,
+  depth = 120,
+  range = 4,
+  label = "Gallery",
+  textColor = "#f4f4f4",
+  mutedColor = "#94b0c2",
+  lineColor = "#333c57",
+  chipColor = "rgba(255,255,255,0.08)",
+  accentColor = "#73eff7",
+  fontFamily = "inherit",
+  className = "",
+  style
+}) {
+  useStyles();
+  const items = Children.toArray(children);
+  const n = items.length;
+  const [inner, setInner] = useState(defaultIndex);
+  const index = Math.max(0, Math.min(n - 1, controlled ?? inner));
+  const [drag, setDrag] = useState(null);
+  const stageRef = useRef(null);
+  const wheelRef = useRef(0);
+  const draggedRef = useRef(false);
+  const select = (next) => {
+    const clamped = Math.max(0, Math.min(n - 1, next));
+    if (clamped === index) return;
+    if (controlled === void 0) setInner(clamped);
+    onChange?.(clamped);
+  };
+  const selectRef = useRef(select);
+  selectRef.current = select;
+  useEffect(() => {
+    const stage = stageRef.current;
+    const onWheel = (event) => {
+      const delta = Math.abs(event.deltaX) > Math.abs(event.deltaY) ? event.deltaX : event.shiftKey ? event.deltaY : 0;
+      if (!delta) return;
+      event.preventDefault();
+      wheelRef.current += delta;
+      if (Math.abs(wheelRef.current) > 60) {
+        selectRef.current(index + Math.sign(wheelRef.current));
+        wheelRef.current = 0;
+      }
+    };
+    stage.addEventListener("wheel", onWheel, { passive: false });
+    return () => stage.removeEventListener("wheel", onWheel);
+  }, [index]);
+  const onPointerDown = (event) => {
+    if (event.button > 0) return;
+    setDrag({ x: event.clientX, shift: 0, moved: false });
+  };
+  const onPointerMove = (event) => {
+    if (!drag) return;
+    if (!drag.moved && Math.abs(event.clientX - drag.x) > 6) stageRef.current.setPointerCapture?.(event.pointerId);
+    setDrag((d) => ({ ...d, shift: (event.clientX - d.x) / (itemWidth * spacing), moved: d.moved || Math.abs(event.clientX - d.x) > 6 }));
+  };
+  const onPointerUp = () => {
+    if (!drag) return;
+    draggedRef.current = drag.moved;
+    if (drag.moved) select(index - Math.round(drag.shift));
+    setDrag(null);
+  };
+  const onKeyDown = (event) => {
+    const moves = { ArrowRight: 1, ArrowLeft: -1, Home: -n, End: n };
+    if (moves[event.key] === void 0) return;
+    event.preventDefault();
+    select(index + moves[event.key]);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `bl-cover ${className}`,
+      style: { "--bl-h": `${height}px`, "--bl-item": `${itemWidth}px`, "--bl-spacing": spacing, "--bl-angle": `${angle}deg`, "--bl-depth": `${depth}px`, "--bl-ink": textColor, "--bl-muted": mutedColor, "--bl-line": lineColor, "--bl-chip": chipColor, "--bl-accent": accentColor, "--bl-font": fontFamily, ...style },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: stageRef,
+            className: "bl-cover__stage",
+            role: "group",
+            "aria-roledescription": "carousel",
+            "aria-label": `${label}: item ${index + 1} of ${n}`,
+            tabIndex: 0,
+            "data-dragging": drag?.moved || void 0,
+            onKeyDown,
+            onPointerDown,
+            onPointerMove,
+            onPointerUp,
+            onPointerCancel: onPointerUp,
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "bl-cover__floor", "aria-hidden": "true" }),
+              items.map((item, i) => {
+                const o = i - index + (drag?.moved ? drag.shift : 0);
+                const a = Math.min(Math.abs(o), range);
+                if (Math.abs(o) > range + 1) return null;
+                const active = i === index;
+                return /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "bl-cover__item",
+                    "data-active": active || void 0,
+                    "aria-hidden": !active || void 0,
+                    inert: !active || void 0,
+                    onClick: () => {
+                      if (draggedRef.current) draggedRef.current = false;
+                      else select(i);
+                    },
+                    style: { "--o": o.toFixed(3), "--a": a.toFixed(3), "--s": Math.max(-1, Math.min(1, o)).toFixed(3), zIndex: 100 - Math.round(a * 10) },
+                    children: item
+                  },
+                  item.key ?? i
+                );
+              })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "bl-cover__bar", children: [
+          /* @__PURE__ */ jsx("button", { type: "button", className: "bl-cover__btn", "aria-label": "Previous", disabled: index === 0, onClick: () => select(index - 1), children: /* @__PURE__ */ jsx(Arrow, { flip: true }) }),
+          /* @__PURE__ */ jsxs("span", { className: "bl-cover__count", "aria-live": "polite", children: [
+            index + 1,
+            " / ",
+            n
+          ] }),
+          /* @__PURE__ */ jsx("button", { type: "button", className: "bl-cover__btn", "aria-label": "Next", disabled: index === n - 1, onClick: () => select(index + 1), children: /* @__PURE__ */ jsx(Arrow, {}) })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  Coverflow as default
+};

package/dist/CursorAttractor.d.ts

@@ -0,0 +1,21 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface CursorAttractorProps {
+    /** Each child is pulled on its own spring. */
+    children?: ReactNode;
+    mode?: 'attract' | 'repel';
+    /** Reach in px from each item's centre. */
+    radius?: number;
+    /** How hard the pull is (fraction of the distance). */
+    strength?: number;
+    /** Cap on movement in px. */
+    maxShift?: number;
+    stiffness?: number;
+    damping?: number;
+    gap?: number;
+    /** Padding around the items; the pointer counts anywhere inside it. */
+    padding?: number;
+    justify?: 'center' | 'start' | 'end';
+    className?: string;
+    style?: CSSProperties;
+}
+export default function CursorAttractor({ children, radius, strength, maxShift, mode, stiffness, damping, gap, padding, justify, className, style }: CursorAttractorProps): import("react").JSX.Element;

package/dist/CursorAttractor.js

@@ -0,0 +1,136 @@
+'use client';
+import { jsx } from "react/jsx-runtime";
+import { Children, useEffect, useInsertionEffect, useRef } from "react";
+const STYLE_ID = "bl-cursor-attractor";
+const CSS = `
+.bl-attract { display: flex; flex-wrap: wrap; align-items: center; justify-content: var(--bl-justify); gap: var(--bl-gap); padding: var(--bl-pad); touch-action: pan-y; }
+.bl-attract__item { display: inline-block; will-change: transform; }
+`;
+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 CursorAttractor({
+  children,
+  radius = 180,
+  strength = 0.35,
+  maxShift = 36,
+  mode = "attract",
+  stiffness = 220,
+  damping = 13,
+  gap = 16,
+  padding = 32,
+  justify = "center",
+  className = "",
+  style
+}) {
+  useStyles();
+  const rootRef = useRef(null);
+  const itemRefs = useRef([]);
+  const items = Children.toArray(children);
+  useEffect(() => {
+    const root = rootRef.current;
+    const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    if (reduced) return;
+    const nodes = itemRefs.current.slice(0, items.length).filter(Boolean);
+    const state = nodes.map(() => ({ tx: 0, ty: 0, x: 0, y: 0, vx: 0, vy: 0 }));
+    let centres = [];
+    let frame = 0;
+    let last = 0;
+    const sign = mode === "repel" ? -1 : 1;
+    const measure = () => {
+      centres = nodes.map((node, i) => {
+        const rect = node.getBoundingClientRect();
+        return { x: rect.left + rect.width / 2 - state[i].x, y: rect.top + rect.height / 2 - state[i].y };
+      });
+    };
+    const tick = (now) => {
+      const dt = Math.min(0.05, (now - last) / 1e3 || 0.016);
+      last = now;
+      let moving = false;
+      state.forEach((s, i) => {
+        for (let t = 0; t < dt; t += 1 / 240) {
+          s.vx += (stiffness * (s.tx - s.x) - damping * s.vx) / 240;
+          s.vy += (stiffness * (s.ty - s.y) - damping * s.vy) / 240;
+          s.x += s.vx / 240;
+          s.y += s.vy / 240;
+        }
+        if (Math.abs(s.tx - s.x) > 0.05 || Math.abs(s.ty - s.y) > 0.05 || Math.abs(s.vx) > 0.5 || Math.abs(s.vy) > 0.5) moving = true;
+        else Object.assign(s, { x: s.tx, y: s.ty, vx: 0, vy: 0 });
+        nodes[i].style.transform = s.x || s.y ? `translate(${s.x.toFixed(2)}px, ${s.y.toFixed(2)}px)` : "";
+      });
+      frame = moving ? requestAnimationFrame(tick) : 0;
+    };
+    const wake = () => {
+      if (frame) return;
+      last = performance.now();
+      frame = requestAnimationFrame(tick);
+    };
+    const onEnter = () => measure();
+    const onMove = (event) => {
+      if (!centres.length) measure();
+      state.forEach((s, i) => {
+        const dx = event.clientX - centres[i].x;
+        const dy = event.clientY - centres[i].y;
+        const d = Math.hypot(dx, dy);
+        if (d >= radius || d === 0) {
+          s.tx = 0;
+          s.ty = 0;
+          return;
+        }
+        const pull = strength * (1 - d / radius);
+        const len = Math.min(maxShift, d * pull);
+        s.tx = sign * dx * len / d;
+        s.ty = sign * dy * len / d;
+      });
+      wake();
+    };
+    const onLeave = () => {
+      state.forEach((s) => {
+        s.tx = 0;
+        s.ty = 0;
+      });
+      centres = [];
+      wake();
+    };
+    const onLayout = () => {
+      centres = [];
+    };
+    root.addEventListener("pointerenter", onEnter);
+    root.addEventListener("pointermove", onMove);
+    root.addEventListener("pointerleave", onLeave);
+    root.addEventListener("pointercancel", onLeave);
+    window.addEventListener("scroll", onLayout, { passive: true, capture: true });
+    window.addEventListener("resize", onLayout);
+    return () => {
+      cancelAnimationFrame(frame);
+      root.removeEventListener("pointerenter", onEnter);
+      root.removeEventListener("pointermove", onMove);
+      root.removeEventListener("pointerleave", onLeave);
+      root.removeEventListener("pointercancel", onLeave);
+      window.removeEventListener("scroll", onLayout, { capture: true });
+      window.removeEventListener("resize", onLayout);
+      nodes.forEach((node) => {
+        node.style.transform = "";
+      });
+    };
+  }, [items.length, radius, strength, maxShift, mode, stiffness, damping]);
+  return /* @__PURE__ */ jsx("div", { ref: rootRef, className: `bl-attract ${className}`, style: { "--bl-gap": `${gap}px`, "--bl-pad": `${padding}px`, "--bl-justify": justify === "start" ? "flex-start" : justify === "end" ? "flex-end" : "center", ...style }, children: items.map((child, i) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref: (node) => {
+        itemRefs.current[i] = node;
+      },
+      className: "bl-attract__item",
+      children: child
+    },
+    child.key ?? i
+  )) });
+}
+export {
+  CursorAttractor as default
+};

package/dist/CutReveal.d.ts

@@ -0,0 +1,21 @@
+import { type CSSProperties, type ElementType } from 'react';
+export interface CutRevealProps {
+    text?: string;
+    /** Element to render (h1–h6, p…). */
+    as?: ElementType;
+    /** Width of each cut in px. */
+    slice?: number;
+    /** The way the strips open. */
+    direction?: 'right' | 'left' | 'down' | 'up';
+    stagger?: number;
+    duration?: number;
+    /** How far lines rise as they appear (CSS length). */
+    rise?: string;
+    /** Share of the element that must be visible to play. */
+    threshold?: number;
+    /** Change to play again. */
+    replayKey?: string | number;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function CutReveal({ text, as, slice, direction, stagger, duration, rise, threshold, replayKey, className, style }: CutRevealProps): import("react").JSX.Element;

package/dist/CutReveal.js

@@ -0,0 +1,116 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useInsertionEffect, useLayoutEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-cut-reveal";
+const CSS = `
+@property --bl-open { syntax: '<number>'; inherits: false; initial-value: 0; }
+.bl-cut { margin: 0; }
+.bl-cut__line { display: block; --bl-open: 0; -webkit-mask-image: repeating-linear-gradient(var(--bl-angle), #000 0 calc(var(--bl-open) * var(--bl-slice)), transparent calc(var(--bl-open) * var(--bl-slice)) var(--bl-slice)); mask-image: repeating-linear-gradient(var(--bl-angle), #000 0 calc(var(--bl-open) * var(--bl-slice)), transparent calc(var(--bl-open) * var(--bl-slice)) var(--bl-slice)); transform: translateY(var(--bl-rise)); opacity: 0.001; }
+.bl-cut[data-state="play"] .bl-cut__line { animation: bl-cut-open var(--bl-dur) cubic-bezier(.2,.9,.25,1) both; animation-delay: calc(var(--i) * var(--bl-stagger)); }
+.bl-cut[data-state="done"] .bl-cut__line { -webkit-mask-image: none; mask-image: none; transform: none; opacity: 1; }
+.bl-cut[data-state="measure"] .bl-cut__line { display: inline; -webkit-mask-image: none; mask-image: none; transform: none; opacity: 0; }
+@keyframes bl-cut-open { to { --bl-open: 1.02; transform: none; opacity: 1; } }
+@media (prefers-reduced-motion: reduce) { .bl-cut .bl-cut__line { animation: none !important; -webkit-mask-image: none; mask-image: none; transform: none; opacity: 1; } }
+`;
+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 CutReveal({
+  text = "",
+  as = "p",
+  slice = 14,
+  direction = "right",
+  stagger = 140,
+  duration = 900,
+  rise = "0.35em",
+  threshold = 0.3,
+  replayKey,
+  className = "",
+  style
+}) {
+  useStyles();
+  const ref = useRef(null);
+  const words = text.split(/\s+/).filter(Boolean);
+  const [lines, setLines] = useState(null);
+  const [state, setState] = useState("measure");
+  const width = useRef(0);
+  const Tag = as;
+  const measure = () => {
+    const node = ref.current;
+    if (!node) return;
+    const spans = [...node.querySelectorAll("[data-word]")];
+    const grouped = [];
+    let top = null;
+    spans.forEach((span, i) => {
+      if (top === null || Math.abs(span.offsetTop - top) > 2) {
+        grouped.push([]);
+        top = span.offsetTop;
+      }
+      grouped[grouped.length - 1].push(words[i]);
+    });
+    setLines(grouped.map((line) => line.join(" ")));
+  };
+  useLayoutEffect(() => {
+    setLines(null);
+    setState("measure");
+  }, [text, replayKey]);
+  useLayoutEffect(() => {
+    if (lines === null) measure();
+  }, [lines]);
+  useEffect(() => {
+    const node = ref.current;
+    width.current = node.clientWidth;
+    const resize = new ResizeObserver(() => {
+      if (Math.abs(node.clientWidth - width.current) < 2) return;
+      width.current = node.clientWidth;
+      setLines(null);
+    });
+    resize.observe(node);
+    return () => resize.disconnect();
+  }, []);
+  useEffect(() => {
+    if (lines === null || state === "play" || state === "done") return void 0;
+    if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) {
+      setState("done");
+      return void 0;
+    }
+    setState("wait");
+    const io = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry.isIntersecting) return;
+        io.disconnect();
+        setState("play");
+      },
+      { threshold }
+    );
+    io.observe(ref.current);
+    return () => io.disconnect();
+  }, [lines]);
+  useEffect(() => {
+    if (state !== "play" || !lines) return void 0;
+    const timer = setTimeout(() => setState("done"), duration + stagger * lines.length + 50);
+    return () => clearTimeout(timer);
+  }, [state, lines, duration, stagger]);
+  const angle = { right: "90deg", left: "270deg", down: "180deg", up: "0deg" }[direction] ?? "90deg";
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      ref,
+      className: `bl-cut ${className}`,
+      "data-state": lines === null ? "measure" : state === "wait" ? "wait" : state,
+      style: { "--bl-slice": `${slice}px`, "--bl-angle": angle, "--bl-stagger": `${stagger}ms`, "--bl-dur": `${duration}ms`, "--bl-rise": rise, ...style },
+      children: lines === null ? words.map((word, i) => /* @__PURE__ */ jsxs("span", { "data-word": "", children: [
+        word,
+        " "
+      ] }, i)) : lines.map((line, i) => /* @__PURE__ */ jsx("span", { className: "bl-cut__line", style: { "--i": i }, children: line }, `${i}-${line}`))
+    }
+  );
+}
+export {
+  CutReveal as default
+};