fancy-ui-react 0.3.0 → 0.4.0

package/dist/components/border-beam/BorderBeam.js

@@ -1,17 +1,54 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { cn } from "../../utils.js";
 /* empty css                */
+const TAIL_SEGMENTS = 18;
+const BLOOM_SEGMENTS = 8;
+function tailSegments(count) {
+  return Array.from({ length: count }, (_, i) => {
+    const t = (i + 0.5) / count;
+    return {
+      t: Number(t.toFixed(4)),
+      alpha: Number(Math.pow(1 - t, 1.6).toFixed(4)),
+      thickness: Number((1 - 0.7 * t).toFixed(4))
+    };
+  });
+}
+function clamp01(n) {
+  return Number.isFinite(n) ? Math.min(1, Math.max(0, n)) : 0;
+}
+function beamPhase(duration, delay, anchor, reverse) {
+  const d = duration > 0 ? duration : 1;
+  const lag = (delay % d + d) % d;
+  const offset = lag === 0 ? 0 : -(d - lag);
+  const dir = reverse ? -1 : 1;
+  const park = anchor - dir * lag * 100 / d;
+  return { offset: Number(offset.toFixed(4)), park: Number(park.toFixed(4)) };
+}
+const tailPieces = tailSegments(TAIL_SEGMENTS);
+const bloomPieces = tailSegments(BLOOM_SEGMENTS);
+function piece(p, count) {
+  return {
+    "--bb-t": p.t,
+    "--bb-alpha": p.alpha,
+    "--bb-thick": p.thickness,
+    "--bb-count": count
+  };
+}
 function BorderBeam({
   className,
   size = 200,
-  duration = 15,
+  duration = 9,
   borderWidth = 1.5,
   anchor = 90,
-  colorFrom = "#ffaa40",
-  colorTo = "#9c40ff",
-  delay = 0
+  colorFrom = "#8ec5ff",
+  colorTo = "#c084fc",
+  delay = 0,
+  tail = 0.25,
+  glow = 0.6,
+  reverse = false
 }) {
+  const phase = beamPhase(duration, delay, anchor, reverse);
   const style = {
     "--border-beam-size": size,
     "--border-beam-duration": `${duration}s`,
@@ -19,27 +56,67 @@ function BorderBeam({
     "--border-beam-border-width": borderWidth,
     "--border-beam-color-from": colorFrom,
     "--border-beam-color-to": colorTo,
-    "--border-beam-delay": `${delay}s`
+    "--border-beam-delay": `${delay}s`,
+    "--border-beam-tail": clamp01(tail),
+    "--border-beam-glow": clamp01(glow),
+    "--border-beam-offset": `${phase.offset}s`,
+    "--border-beam-park": `${phase.park}%`,
+    "--border-beam-dir": reverse ? -1 : 1
   };
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
         "border-beam",
         "pointer-events-none absolute inset-0 rounded-[inherit]",
-        "[border:calc(var(--border-beam-border-width)*1px)_solid_transparent]",
-        "![mask-composite:intersect] ![mask-clip:padding-box,border-box] [mask:linear-gradient(transparent,transparent),linear-gradient(white,white)]",
-        "after:absolute after:aspect-square after:w-[calc(var(--border-beam-size)*1px)]",
-        "after:[animation-delay:var(--border-beam-delay)]",
-        "after:[background:linear-gradient(to_left,var(--border-beam-color-from),var(--border-beam-color-to),transparent)]",
-        "after:[offset-anchor:calc(var(--border-beam-anchor)*1%)_50%]",
-        "after:[offset-path:rect(0_auto_auto_0_round_calc(var(--border-beam-size)*1px))]",
         className
       ),
-      style
+      "data-direction": reverse ? "reverse" : "forward",
+      "aria-hidden": "true",
+      style,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "bb-spill-clip", children: /* @__PURE__ */ jsx("span", { className: "bb-ride bb-spill" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "bb-bloom", children: [
+          bloomPieces.map((p) => /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "bb-ride bb-piece bb-bloom-piece",
+              style: piece(p, BLOOM_SEGMENTS)
+            },
+            p.t
+          )),
+          /* @__PURE__ */ jsx("span", { className: "bb-ride bb-bloom-head" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "bb-halo", children: bloomPieces.map((p) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "bb-ride bb-piece bb-halo-piece",
+            style: piece(p, BLOOM_SEGMENTS)
+          },
+          p.t
+        )) }),
+        /* @__PURE__ */ jsxs("div", { className: "bb-ring", children: [
+          /* @__PURE__ */ jsx("span", { className: "bb-rail" }),
+          /* @__PURE__ */ jsx("span", { className: "bb-ride bb-reach" }),
+          tailPieces.map((p) => /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "bb-ride bb-piece bb-tail-piece",
+              style: piece(p, TAIL_SEGMENTS)
+            },
+            p.t
+          )),
+          /* @__PURE__ */ jsx("span", { className: "bb-ride bb-head" })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "bb-ride bb-spark" })
+      ]
     }
   );
 }
 export {
-  BorderBeam
+  BLOOM_SEGMENTS,
+  BorderBeam,
+  TAIL_SEGMENTS,
+  beamPhase,
+  tailSegments
 };

package/dist/components/compare/Compare.d.ts

@@ -1,4 +1,26 @@
+/**
+ * Compare - a before/after slider split by a blade of light
+ *
+ * The seam is a beam: a white-hot core with a chromatic fringe, a glow
+ * that spills onto both sides, and pulses of light running along it. Moving
+ * the seam leaves a trail behind it that stretches with the speed of the
+ * gesture and settles when it stops.
+ */
 import { type ReactNode } from "react";
+export declare const COMPARE_BEAM_COLORS: string[];
+/** Three colours for the beam (left fringe, centre, right fringe), from one to many given. */
+export declare function beamPalette(colors: string[] | undefined): [string, string, string];
+/**
+ * One frame of the beam's motion: the trail follows the seam's velocity
+ * (px per frame, signed) and decays; the energy eases toward its target
+ * and is kicked up by speed.
+ */
+export declare function beamStep(trail: number, energy: number, deltaPx: number, target: number): {
+    trail: number;
+    energy: number;
+};
+/** Keyboard step for the slider, in %: arrows move 2, Shift+arrows 10, Home/End jump to the ends. */
+export declare function keyStep(key: string, shift: boolean, current: number): number | null;
 export interface CompareProps {
     firstImage?: string;
     secondImage?: string;
@@ -12,6 +34,15 @@ export interface CompareProps {
     showHandlebar?: boolean;
     autoplay?: boolean;
     autoplayDuration?: number;
+    /** Beam colours: left fringe, centre, right fringe (one or more colours) */
+    beamColors?: string[];
+    /** Accessible name of the slider */
+    label?: string;
+    /**
+     * @deprecated Use `label`. Kept so code written against the earlier port
+     * keeps its accessible name; `label` wins when both are given.
+     */
+    ariaLabel?: string;
     onpercentagechange?: (percentage: number) => void;
     ondragstart?: () => void;
     ondragend?: () => void;
@@ -20,12 +51,5 @@ export interface CompareProps {
     firstContent?: ReactNode;
     secondContent?: ReactNode;
     handle?: ReactNode;
-    /**
-     * Accessible name for the slider. The element carries `role="slider"` and
-     * sits in the tab order, so it needs one — the two images around it are not
-     * its label. Overridable because "before and after" only says something when
-     * the caller says what changed.
-     */
-    ariaLabel?: string;
 }
-export declare function Compare({ firstImage, secondImage, firstImageAlt, secondImageAlt, className, firstContentClass, secondContentClass, initialSliderPercentage, slideMode, showHandlebar, autoplay, autoplayDuration, onpercentagechange, ondragstart, ondragend, onhoverenter, onhoverleave, firstContent, secondContent, handle, ariaLabel, }: CompareProps): import("react").JSX.Element;
+export declare function Compare({ firstImage, secondImage, firstImageAlt, secondImageAlt, className, firstContentClass, secondContentClass, initialSliderPercentage, slideMode, showHandlebar, autoplay, autoplayDuration, beamColors, label, ariaLabel, onpercentagechange, ondragstart, ondragend, onhoverenter, onhoverleave, firstContent, secondContent, handle, }: CompareProps): import("react").JSX.Element;

package/dist/components/compare/Compare.js

@@ -1,12 +1,46 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useRef, useState } from "react";
+import { useRef, useState, useEffect } from "react";
 import { useIsomorphicLayoutEffect } from "../../internals/dom/ssr.js";
 import { useLiveRef } from "../../internals/dom/use-live-ref.js";
+import { useReducedMotion } from "../../internals/motion/media-query.js";
 import { cn } from "../../utils.js";
-import { StarField } from "./StarField.js";
-const KEYBOARD_STEP = 1;
-const KEYBOARD_PAGE_STEP = 10;
+/* empty css            */
+const COMPARE_BEAM_COLORS = ["#22d3ee", "#818cf8", "#f472b6"];
+function beamPalette(colors) {
+  const list = (colors ?? []).filter(Boolean);
+  if (list.length === 0) return COMPARE_BEAM_COLORS;
+  if (list.length === 1) return [list[0], list[0], list[0]];
+  if (list.length === 2) return [list[0], `color-mix(in srgb, ${list[0]}, ${list[1]})`, list[1]];
+  return [list[0], list[Math.floor((list.length - 1) / 2)], list[list.length - 1]];
+}
+function beamStep(trail, energy, deltaPx, target) {
+  const nextTrail = Math.max(-140, Math.min(140, trail * 0.86 + deltaPx * 1.6));
+  const kick = Math.min(1, Math.abs(deltaPx) / 12);
+  const nextEnergy = Math.min(1, energy + (Math.max(target, kick) - energy) * 0.12);
+  return { trail: Math.abs(nextTrail) < 0.25 ? 0 : nextTrail, energy: nextEnergy };
+}
+function keyStep(key, shift, current) {
+  const step = shift ? 10 : 2;
+  switch (key) {
+    case "ArrowLeft":
+    case "ArrowDown":
+      return Math.max(0, current - step);
+    case "ArrowRight":
+    case "ArrowUp":
+      return Math.min(100, current + step);
+    case "PageDown":
+      return Math.max(0, current - 10);
+    case "PageUp":
+      return Math.min(100, current + 10);
+    case "Home":
+      return 0;
+    case "End":
+      return 100;
+    default:
+      return null;
+  }
+}
 function Compare({
   firstImage = "",
   secondImage = "",
@@ -20,6 +54,9 @@ function Compare({
   showHandlebar = true,
   autoplay = false,
   autoplayDuration = 5e3,
+  beamColors,
+  label,
+  ariaLabel,
   onpercentagechange,
   ondragstart,
   ondragend,
@@ -27,28 +64,51 @@ function Compare({
   onhoverleave,
   firstContent,
   secondContent,
-  handle,
-  ariaLabel = "Image comparison slider"
+  handle
 }) {
+  const accessibleName = label ?? ariaLabel ?? "Comparison slider";
+  const reducedMotion = useReducedMotion();
+  const reducedMotionRef = useLiveRef(reducedMotion);
   const sliderRef = useRef(null);
-  const [sliderXPercent, setSliderXPercent] = useState(initialSliderPercentage);
-  const [isInteracting, setIsInteracting] = useState(false);
+  const [sliderXPercent, setSliderXPercentState] = useState(initialSliderPercentage);
+  const percentRef = useRef(initialSliderPercentage);
+  const [isDragging, setIsDraggingState] = useState(false);
   const isDraggingRef = useRef(false);
+  const [isMouseOver, setIsMouseOverState] = useState(false);
   const isMouseOverRef = useRef(false);
+  const [isInteracting, setIsInteractingState] = useState(false);
+  const isInteractingRef = useRef(false);
   const autoplayRAF = useRef(null);
+  const returnRAF = useRef(null);
   const moveRAF = useRef(null);
+  const [trail, setTrail] = useState(0);
+  const [energy, setEnergy] = useState(0);
+  const trailRef = useRef(0);
+  const energyRef = useRef(0);
+  const beamRAF = useRef(null);
+  const lastPx = useRef(null);
   const onPercentageChangeRef = useLiveRef(onpercentagechange);
-  function stopAutoplay() {
-    if (autoplayRAF.current) {
-      cancelAnimationFrame(autoplayRAF.current);
-      autoplayRAF.current = null;
-    }
+  const palette = beamPalette(beamColors);
+  function setSliderX(p) {
+    percentRef.current = p;
+    setSliderXPercentState(p);
   }
-  function stopMoveFrame() {
-    if (moveRAF.current) {
-      cancelAnimationFrame(moveRAF.current);
-      moveRAF.current = null;
-    }
+  function setIsDragging(v) {
+    isDraggingRef.current = v;
+    setIsDraggingState(v);
+  }
+  function setIsMouseOver(v) {
+    isMouseOverRef.current = v;
+    setIsMouseOverState(v);
+  }
+  function setIsInteracting(v) {
+    isInteractingRef.current = v;
+    setIsInteractingState(v);
+  }
+  function setPercent(p) {
+    const next = Math.max(0, Math.min(100, p));
+    setSliderX(next);
+    onPercentageChangeRef.current?.(next);
   }
   function startAutoplay() {
     if (!autoplay || isMouseOverRef.current || isDraggingRef.current) return;
@@ -60,38 +120,74 @@ function Compare({
       }
       const elapsedTime = Date.now() - startTime;
       const progress = elapsedTime % (autoplayDuration * 2) / autoplayDuration;
-      const percentage = progress <= 1 ? progress * 100 : (2 - progress) * 100;
-      setSliderXPercent(percentage);
-      onPercentageChangeRef.current?.(percentage);
+      const linear = progress <= 1 ? progress : 2 - progress;
+      const eased = linear < 0.5 ? 4 * linear ** 3 : 1 - (-2 * linear + 2) ** 3 / 2;
+      setPercent(eased * 100);
       autoplayRAF.current = requestAnimationFrame(animate);
     }
     animate();
   }
+  function stopAutoplay() {
+    if (autoplayRAF.current) {
+      cancelAnimationFrame(autoplayRAF.current);
+      autoplayRAF.current = null;
+    }
+  }
+  function stopReturn() {
+    if (returnRAF.current) {
+      cancelAnimationFrame(returnRAF.current);
+      returnRAF.current = null;
+    }
+  }
+  function stopMoveFrame() {
+    if (moveRAF.current) {
+      cancelAnimationFrame(moveRAF.current);
+      moveRAF.current = null;
+    }
+  }
+  function glideTo(target) {
+    stopReturn();
+    if (reducedMotionRef.current) {
+      setPercent(target);
+      return;
+    }
+    const from = percentRef.current;
+    const start = performance.now();
+    const duration = 520;
+    const step = (now) => {
+      const k = Math.min(1, (now - start) / duration);
+      const e = 1 - (1 - k) ** 3;
+      setPercent(from + (target - from) * e);
+      returnRAF.current = k < 1 ? requestAnimationFrame(step) : null;
+    };
+    returnRAF.current = requestAnimationFrame(step);
+  }
   function mouseEnterHandler() {
-    isMouseOverRef.current = true;
+    setIsMouseOver(true);
+    stopReturn();
     onhoverenter?.();
     if (autoplay) {
       stopAutoplay();
     }
   }
   function mouseLeaveHandler() {
-    isMouseOverRef.current = false;
+    setIsMouseOver(false);
     setIsInteracting(false);
     onhoverleave?.();
     if (slideMode === "hover") {
-      setSliderXPercent(initialSliderPercentage);
-      onpercentagechange?.(initialSliderPercentage);
+      glideTo(initialSliderPercentage);
     }
     if (slideMode === "drag") {
-      isDraggingRef.current = false;
+      setIsDragging(false);
     }
     if (autoplay) {
+      stopReturn();
       startAutoplay();
     }
   }
   function handleStart() {
     if (slideMode === "drag") {
-      isDraggingRef.current = true;
+      setIsDragging(true);
       setIsInteracting(true);
       ondragstart?.();
       stopAutoplay();
@@ -99,7 +195,7 @@ function Compare({
   }
   function handleEnd() {
     if (slideMode === "drag") {
-      isDraggingRef.current = false;
+      setIsDragging(false);
       setIsInteracting(false);
       ondragend?.();
       if (autoplay && !isMouseOverRef.current) {
@@ -107,56 +203,22 @@ function Compare({
       }
     }
   }
-  function commitPercent(percent) {
-    const newPercent = Math.max(0, Math.min(100, percent));
-    setSliderXPercent(newPercent);
-    onpercentagechange?.(newPercent);
-  }
   function handleMove(clientX) {
     if (!sliderRef.current) return;
     if (slideMode === "hover" || slideMode === "drag" && isDraggingRef.current) {
       setIsInteracting(true);
       stopAutoplay();
+      stopReturn();
       const rect = sliderRef.current.getBoundingClientRect();
       const x = clientX - rect.left;
       const percent = x / rect.width * 100;
       stopMoveFrame();
       moveRAF.current = requestAnimationFrame(() => {
         moveRAF.current = null;
-        commitPercent(percent);
+        setPercent(percent);
       });
     }
   }
-  function handleKeyDown(event) {
-    let next;
-    switch (event.key) {
-      case "ArrowLeft":
-      case "ArrowDown":
-        next = sliderXPercent - KEYBOARD_STEP;
-        break;
-      case "ArrowRight":
-      case "ArrowUp":
-        next = sliderXPercent + KEYBOARD_STEP;
-        break;
-      case "PageDown":
-        next = sliderXPercent - KEYBOARD_PAGE_STEP;
-        break;
-      case "PageUp":
-        next = sliderXPercent + KEYBOARD_PAGE_STEP;
-        break;
-      case "Home":
-        next = 0;
-        break;
-      case "End":
-        next = 100;
-        break;
-      default:
-        return;
-    }
-    event.preventDefault();
-    stopAutoplay();
-    commitPercent(next);
-  }
   function handleMouseDown() {
     handleStart();
   }
@@ -173,29 +235,73 @@ function Compare({
     const touch = e.touches[0];
     if (!autoplay && touch) handleMove(touch.clientX);
   }
+  function handleKeyDown(e) {
+    const next = keyStep(e.key, e.shiftKey, percentRef.current);
+    if (next === null) return;
+    e.preventDefault();
+    stopAutoplay();
+    stopReturn();
+    setPercent(next);
+  }
+  function wakeBeam() {
+    if (beamRAF.current !== null || reducedMotionRef.current) return;
+    const tick = () => {
+      const width = sliderRef.current?.clientWidth ?? 0;
+      const px = percentRef.current / 100 * width;
+      const delta = lastPx.current === null ? 0 : px - lastPx.current;
+      lastPx.current = px;
+      const target = isInteractingRef.current || isDraggingRef.current ? 1 : isMouseOverRef.current ? 0.7 : 0;
+      const next = beamStep(trailRef.current, energyRef.current, delta, target);
+      trailRef.current = next.trail;
+      energyRef.current = next.energy;
+      setTrail(next.trail);
+      setEnergy(next.energy);
+      const settled = next.trail === 0 && delta === 0 && Math.abs(next.energy - target) < 0.01;
+      beamRAF.current = settled ? null : requestAnimationFrame(tick);
+    };
+    beamRAF.current = requestAnimationFrame(tick);
+  }
   useIsomorphicLayoutEffect(() => {
-    setSliderXPercent(initialSliderPercentage);
+    setSliderX(initialSliderPercentage);
   }, [initialSliderPercentage]);
+  useEffect(() => {
+    wakeBeam();
+  }, [sliderXPercent, isInteracting, isMouseOver]);
   useIsomorphicLayoutEffect(() => {
     if (autoplay && !isMouseOverRef.current && !isDraggingRef.current) {
       startAutoplay();
     } else {
       stopAutoplay();
     }
-    return () => {
+    return stopAutoplay;
+  }, [autoplay, autoplayDuration]);
+  useEffect(
+    () => () => {
       stopAutoplay();
+      stopReturn();
       stopMoveFrame();
-    };
-  }, [autoplay, autoplayDuration]);
+      if (beamRAF.current !== null) cancelAnimationFrame(beamRAF.current);
+      beamRAF.current = null;
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  const rootStyle = {
+    position: "relative",
+    cursor: slideMode === "drag" ? isDragging ? "grabbing" : "grab" : "col-resize",
+    "--cmp-c1": palette[0],
+    "--cmp-c2": palette[1],
+    "--cmp-c3": palette[2],
+    "--cmp-energy": energy.toFixed(3),
+    "--cmp-trail": trail.toFixed(1)
+  };
   return /* @__PURE__ */ jsxs(
     "div",
     {
       ref: sliderRef,
-      className: cn("h-[400px] w-[400px] overflow-hidden", className),
-      style: {
-        position: "relative",
-        cursor: slideMode === "drag" ? "grab" : "col-resize"
-      },
+      className: cn("compare h-[400px] w-[400px] overflow-hidden", className),
+      style: rootStyle,
+      "data-active": isInteracting || isDragging ? "" : void 0,
       onMouseMove: handleMouseMove,
       onMouseLeave: mouseLeaveHandler,
       onMouseEnter: mouseEnterHandler,
@@ -206,41 +312,49 @@ function Compare({
       onTouchMove: handleTouchMove,
       onKeyDown: handleKeyDown,
       role: "slider",
-      "aria-label": ariaLabel,
-      "aria-valuenow": sliderXPercent,
+      "aria-label": accessibleName,
+      "aria-valuenow": Math.round(sliderXPercent),
+      "aria-valuetext": `${Math.round(sliderXPercent)}% ${firstImageAlt}`,
       "aria-valuemin": 0,
       "aria-valuemax": 100,
+      "aria-orientation": "horizontal",
       tabIndex: 0,
       children: [
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: "pointer-events-none absolute top-0 z-40 m-auto h-full w-px bg-gradient-to-b from-transparent from-5% via-indigo-500 to-transparent to-95%",
+            className: "compare-beam pointer-events-none absolute top-0 z-40 h-full w-px",
             style: { left: `${sliderXPercent}%` },
+            "aria-hidden": "true",
             children: [
-              /* @__PURE__ */ jsx("div", { className: "absolute top-1/2 left-0 z-20 h-full w-36 -translate-y-1/2 bg-gradient-to-r from-indigo-400 via-transparent to-transparent [mask-image:radial-gradient(100px_at_left,white,transparent)] opacity-50" }),
-              /* @__PURE__ */ jsx("div", { className: "absolute top-1/2 left-0 z-10 h-1/2 w-10 -translate-y-1/2 bg-gradient-to-r from-cyan-400 via-transparent to-transparent [mask-image:radial-gradient(50px_at_left,white,transparent)] opacity-100" }),
-              /* @__PURE__ */ jsx("div", { className: "absolute top-1/2 -right-10 h-3/4 w-10 -translate-y-1/2 [mask-image:radial-gradient(100px_at_left,white,transparent)]", children: /* @__PURE__ */ jsx(StarField, { starsCount: 120, className: "size-full" }) }),
-              handle ? handle : showHandlebar ? /* @__PURE__ */ jsx("div", { className: "pointer-events-auto absolute top-1/2 -right-2.5 z-30 flex size-5 -translate-y-1/2 cursor-grab items-center justify-center rounded-md bg-white shadow-[0px_-1px_0px_0px_#FFFFFF40]", children: /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx("span", { className: "compare-beam__glow" }),
+              /* @__PURE__ */ jsx("span", { className: "compare-beam__trail" }),
+              /* @__PURE__ */ jsx("span", { className: "compare-beam__fringe" }),
+              /* @__PURE__ */ jsx("span", { className: "compare-beam__core" }),
+              /* @__PURE__ */ jsx("span", { className: "compare-beam__pulse" }),
+              /* @__PURE__ */ jsx("span", { className: "compare-beam__pulse compare-beam__pulse--late" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "compare-seam pointer-events-none absolute top-0 z-[41] h-full w-px",
+            style: { left: `${sliderXPercent}%` },
+            children: handle ? handle : showHandlebar ? /* @__PURE__ */ jsxs("div", { className: "compare-handle pointer-events-auto", "aria-hidden": "true", children: [
+              /* @__PURE__ */ jsx("span", { className: "compare-handle__ring" }),
+              /* @__PURE__ */ jsx(
                 "svg",
                 {
-                  xmlns: "http://www.w3.org/2000/svg",
-                  fill: "none",
                   viewBox: "0 0 24 24",
-                  strokeWidth: "1.5",
+                  fill: "none",
                   stroke: "currentColor",
-                  className: "size-4 text-black",
-                  children: /* @__PURE__ */ jsx(
-                    "path",
-                    {
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      d: "M12 6.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 12.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 18.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Z"
-                    }
-                  )
+                  strokeWidth: "2",
+                  className: "size-4",
+                  children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 7 4 12l5 5M15 7l5 5-5 5" })
                 }
-              ) }) : null
-            ]
+              )
+            ] }) : null
           }
         ),
         /* @__PURE__ */ jsx(
@@ -296,5 +410,9 @@ function Compare({
   );
 }
 export {
-  Compare
+  COMPARE_BEAM_COLORS,
+  Compare,
+  beamPalette,
+  beamStep,
+  keyStep
 };

package/dist/components/container-scroll/ContainerScroll.d.ts

@@ -1,10 +1,32 @@
 import type { ReactNode } from "react";
+/**
+ * ContainerScroll - a scroll-driven aperture
+ *
+ * The card starts shut: a slim horizontal slit with a bright seam of light
+ * across its middle. As the section scrolls into view the slit opens
+ * vertically to the full card, the seam splits into two lips that ride the
+ * opening edges and fade, the content settles from a slight zoom into
+ * focus, and the title above blurs away to hand the stage to the card.
+ * No 3D tilt, no perspective.
+ */
 export interface ContainerScrollProps {
-    /** Additional CSS classes */
+    /** Additional CSS classes on the section */
     className?: string;
-    /** Content rendered in the title area above the card */
+    /** Title shown above the card (blurs and fades as the card opens) */
     titleContent?: ReactNode;
-    /** Content rendered inside the tilting card */
+    /** Content revealed inside the card */
     cardContent?: ReactNode;
+    /** Seam colour (any CSS colour). Defaults to a soft blue. */
+    accent?: string;
+    /** Second seam tint, blended towards the seam ends. Defaults to a soft lilac. */
+    accentSecondary?: string;
 }
-export declare function ContainerScroll({ className, titleContent, cardContent, }: ContainerScrollProps): import("react").JSX.Element;
+/**
+ * Raw scroll progress of the card track, measured at its centre (where the
+ * slit is): 0 while the slit is still in the bottom 8% of the viewport,
+ * 1 once it has risen to just above the middle of the viewport.
+ */
+export declare function apertureProgress(top: number, height: number, viewport: number): number;
+/** Smoothstep: a gentle start and a slow settle, so the opening reads as a lens, not a shutter. */
+export declare function apertureEase(p: number): number;
+export declare function ContainerScroll({ className, titleContent, cardContent, accent, accentSecondary, }: ContainerScrollProps): import("react").JSX.Element;