fancy-ui-react 0.3.0 → 0.4.0

package/dist/components/animated-tooltip/AnimatedTooltip.js

@@ -1,133 +1,202 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState, useCallback, useRef } from "react";
+import { useState, useRef, useCallback, useEffect } from "react";
 import { cn } from "../../utils.js";
-import { useComposedRefs } from "../../internals/dom/use-composed-refs.js";
+import { useLiveRef } from "../../internals/dom/use-live-ref.js";
+import { linear } from "../../internals/motion/easing.js";
+import { useReducedMotion } from "../../internals/motion/media-query.js";
 import { usePresence } from "../../internals/motion/presence.js";
-function cubicOut(t) {
-  const f = t - 1;
-  return f * f * f + 1;
+/* empty css                     */
+function tooltipId(itemId) {
+  return `animated-tooltip-${itemId}`;
+}
+function transformFor(mouseX, size, reduced) {
+  const lean = reduced ? 0 : Math.max(-1, Math.min(1, mouseX / (size / 2)));
+  const rotation = lean * 7;
+  const translation = lean * 14;
+  return `translateX(calc(-50% + ${translation}px)) rotate(${rotation}deg)`;
 }
-function tooltipScale(node) {
-  const style = getComputedStyle(node);
-  const targetOpacity = +style.opacity;
-  const transform = style.transform === "none" ? "" : style.transform;
-  const sd = 1 - 0.6;
-  const od = targetOpacity;
+function partOffset(i, activeIndex, reduced) {
+  if (activeIndex < 0 || reduced) return 0;
+  const d = i - activeIndex;
+  const distance = Math.abs(d);
+  if (distance === 1) return Math.sign(d) * 6;
+  if (distance === 2) return Math.sign(d) * 2;
+  return 0;
+}
+function sink(_node, params) {
+  if (!params || params.entering) {
+    return { delay: 0, duration: 0, easing: linear, css: () => "" };
+  }
+  const still = params.still;
   return {
     delay: 0,
-    duration: 200,
-    easing: cubicOut,
-    css: (t, u) => `
-			transform: ${transform} scale(${1 - sd * u});
-			opacity: ${targetOpacity - od * u}
-		`
+    duration: still ? 120 : 160,
+    easing: (t) => t * t,
+    css: (t) => still ? `opacity: ${t};` : `opacity: ${t}; transform: translateY(${(1 - t) * 4}px) scale(${0.97 + 0.03 * t});`
   };
 }
-function poseAt(event) {
-  const rect = event.currentTarget.getBoundingClientRect();
-  const halfWidth = rect.width / 2;
-  const mouseX = event.clientX - rect.left - halfWidth;
-  const value = mouseX / 100 * 50;
-  return { rotation: value, translation: value };
-}
-function transformFor(pose) {
-  return `translateX(calc(-50% + ${pose.translation}px)) rotate(${pose.rotation}deg)`;
-}
-function tooltipId(itemId) {
-  return `animated-tooltip-${itemId}`;
-}
-function AvatarItem({ item, hovered, onHoverStart, onHoverEnd }) {
-  const pose = useRef({ rotation: 0, translation: 0 });
-  const tooltip = useRef(null);
-  const spec = useRef(null);
-  const presence = usePresence(hovered, {
-    onEnterEnd: () => {
-      spec.current = null;
-    }
-  });
-  const attach = useCallback((node) => {
-    tooltip.current = node;
-    if (node) {
-      node.style.transform = transformFor(pose.current);
-      return;
-    }
-    spec.current = null;
-  }, []);
-  const tooltipRef = useComposedRefs(
-    attach,
-    presence.register((node) => spec.current ??= tooltipScale(node))
+function AvatarItem({
+  item,
+  active,
+  shift,
+  reduced,
+  onEnter,
+  onMove,
+  onLeave,
+  onFocusIn,
+  onTip
+}) {
+  const presence = usePresence(active);
+  const cardRef = presence.register(sink, (entering) => ({ entering, still: reduced }));
+  const tipNode = useRef(null);
+  const itemId = item.id;
+  const attachTip = useCallback(
+    (node) => {
+      if (node) {
+        tipNode.current = node;
+        onTip(itemId, node, null);
+        return;
+      }
+      onTip(itemId, null, tipNode.current);
+      tipNode.current = null;
+    },
+    [itemId, onTip]
   );
-  function draw(next) {
-    pose.current = next;
-    if (tooltip.current) tooltip.current.style.transform = transformFor(next);
-  }
-  function handleMouseEnter(event) {
-    draw(poseAt(event));
-    onHoverStart(item.id);
-  }
-  function handleMouseMove(event) {
-    if (!hovered) return;
-    draw(poseAt(event));
-  }
-  function handleFocus() {
-    draw({ rotation: 0, translation: 0 });
-    onHoverStart(item.id);
-  }
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: "group relative -mr-4",
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: onHoverEnd,
-      onMouseMove: handleMouseMove,
-      onFocus: handleFocus,
-      onBlur: onHoverEnd,
+      className: cn("at-item group relative", active && "at-active", shift !== 0 && "at-parted"),
+      style: { "--_at-shift": `${shift}px` },
+      "data-active": active ? "" : void 0,
+      "data-part": shift < 0 ? "before" : shift > 0 ? "after" : void 0,
+      onMouseEnter: (event) => onEnter(item.id, event),
+      onMouseLeave: onLeave,
+      onMouseMove: onMove,
+      onFocus: () => onFocusIn(item.id),
+      onBlur: onLeave,
       tabIndex: 0,
-      "aria-describedby": hovered ? tooltipId(item.id) : void 0,
+      "aria-describedby": active ? tooltipId(item.id) : void 0,
       children: [
-        presence.mounted && /* @__PURE__ */ jsxs(
+        presence.mounted && /* @__PURE__ */ jsx(
           "div",
           {
-            ref: tooltipRef,
+            ref: attachTip,
             id: tooltipId(item.id),
             role: "tooltip",
-            className: "pointer-events-none absolute -top-16 left-1/2 z-50 flex flex-col items-center justify-center rounded-md bg-black px-4 py-2 text-xs whitespace-nowrap shadow-xl",
-            children: [
-              /* @__PURE__ */ jsx("div", { className: "absolute right-1/2 -bottom-px z-30 me-1 h-px w-2/5 translate-x-1/2 bg-gradient-to-r from-transparent via-emerald-500 to-transparent" }),
-              /* @__PURE__ */ jsx("div", { className: "absolute -bottom-px left-1/2 z-30 ms-1 h-px w-2/5 -translate-x-1/2 bg-gradient-to-r from-transparent via-sky-500 to-transparent" }),
-              /* @__PURE__ */ jsx("div", { className: "relative z-30 text-base font-bold text-white", children: item.name }),
-              /* @__PURE__ */ jsx("div", { className: "text-xs text-white", children: item.designation })
-            ]
+            className: "at-tip pointer-events-none absolute left-1/2 z-50",
+            children: /* @__PURE__ */ jsxs("div", { ref: cardRef, className: "at-card", children: [
+              /* @__PURE__ */ jsx("span", { className: "at-pointer", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx("div", { className: "at-name", children: item.name }),
+              /* @__PURE__ */ jsx("span", { className: "at-rule", "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { className: "at-glint" }) }),
+              /* @__PURE__ */ jsx("div", { className: "at-role", children: item.designation })
+            ] })
           }
         ),
-        /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: item.image,
-            alt: item.name,
-            className: "relative !m-0 size-14 rounded-full border-2 border-white object-cover object-top !p-0 transition duration-500 group-hover:z-30 group-hover:scale-105"
-          }
-        )
+        /* @__PURE__ */ jsxs("div", { className: cn("at-avatar", active && !reduced && "at-lifted"), children: [
+          /* @__PURE__ */ jsx("span", { className: "at-glow", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { className: "at-disc", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { className: "at-ring", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: item.image,
+              alt: item.name,
+              className: "at-img relative !m-0 rounded-full object-cover object-top !p-0"
+            }
+          )
+        ] })
       ]
     }
   );
 }
-function AnimatedTooltip({ items, className }) {
-  const [hoveredIndex, setHoveredIndex] = useState(null);
-  const handleHoverStart = useCallback((itemId) => {
-    setHoveredIndex(itemId);
-  }, []);
-  const handleHoverEnd = useCallback(() => {
-    setHoveredIndex(null);
+function AnimatedTooltip({ items, className, accent, size = 56 }) {
+  const reduced = useReducedMotion();
+  const [hoveredId, setHoveredId] = useState(null);
+  const mouseX = useRef(0);
+  const hovered = useRef(null);
+  const tips = useRef(/* @__PURE__ */ new Map());
+  const reducedRef = useLiveRef(reduced);
+  const sizeRef = useLiveRef(size);
+  const draw = useCallback(
+    (itemId) => {
+      const node = tips.current.get(itemId);
+      if (node)
+        node.style.transform = transformFor(mouseX.current, sizeRef.current, reducedRef.current);
+    },
+    [reducedRef, sizeRef]
+  );
+  const onTip = useCallback(
+    (itemId, node, previous) => {
+      if (node) {
+        tips.current.set(itemId, node);
+        draw(itemId);
+        return;
+      }
+      if (tips.current.get(itemId) === previous) tips.current.delete(itemId);
+    },
+    [draw]
+  );
+  const activate = useCallback(
+    (itemId) => {
+      hovered.current = itemId;
+      setHoveredId(itemId);
+      draw(itemId);
+    },
+    [draw]
+  );
+  const handleMouseEnter = useCallback(
+    (itemId, event) => {
+      const rect = event.currentTarget.getBoundingClientRect();
+      mouseX.current = event.clientX - rect.left - rect.width / 2;
+      activate(itemId);
+    },
+    [activate]
+  );
+  const handleMouseMove = useCallback(
+    (event) => {
+      if (hovered.current === null) return;
+      const rect = event.currentTarget.getBoundingClientRect();
+      mouseX.current = event.clientX - rect.left - rect.width / 2;
+      draw(hovered.current);
+    },
+    [draw]
+  );
+  const handleLeave = useCallback(() => {
+    hovered.current = null;
+    mouseX.current = 0;
+    setHoveredId(null);
   }, []);
-  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-row items-center", className), children: items.map((item) => /* @__PURE__ */ jsx(
+  const handleFocusIn = useCallback(
+    (itemId) => {
+      mouseX.current = 0;
+      activate(itemId);
+    },
+    [activate]
+  );
+  useEffect(() => {
+    if (hovered.current !== null) draw(hovered.current);
+  }, [draw, reduced, size]);
+  const activeIndex = hoveredId === null ? -1 : items.findIndex((item) => item.id === hoveredId);
+  const rootStyle = {
+    "--_at-size": `${size}px`,
+    ...accent ? {
+      "--at-accent": accent,
+      "--at-accent-2": `color-mix(in oklab, ${accent} 62%, white)`
+    } : {}
+  };
+  return /* @__PURE__ */ jsx("div", { className: cn("at-root flex flex-row items-center", className), style: rootStyle, children: items.map((item, i) => /* @__PURE__ */ jsx(
     AvatarItem,
     {
       item,
-      hovered: hoveredIndex === item.id,
-      onHoverStart: handleHoverStart,
-      onHoverEnd: handleHoverEnd
+      active: hoveredId === item.id,
+      shift: partOffset(i, activeIndex, reduced),
+      reduced,
+      onEnter: handleMouseEnter,
+      onMove: handleMouseMove,
+      onLeave: handleLeave,
+      onFocusIn: handleFocusIn,
+      onTip
     },
     item.id
   )) });

package/dist/components/bento-grid/BentoFrame.d.ts

@@ -0,0 +1,16 @@
+import type { HTMLAttributes, ReactNode } from "react";
+/**
+ * Internal: the nested double frame both BentoGridItem and BentoGridCard are
+ * drawn in. Not exported from index.ts — the two public tiles own their
+ * content, this owns the chrome (outer hairline frame, inner lit panel, the
+ * accent glow that rises from the bottom on hover, and the bottom-edge light
+ * line).
+ */
+export interface BentoFrameProps extends HTMLAttributes<HTMLDivElement> {
+    /** Classes for the outer frame (the grid item itself). */
+    className?: string;
+    /** Classes for the inner panel. */
+    panelClass?: string;
+    children?: ReactNode;
+}
+export declare function BentoFrame({ className, panelClass, children, ...rest }: BentoFrameProps): import("react").JSX.Element;

package/dist/components/bento-grid/BentoFrame.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils.js";
+/* empty css                */
+function BentoFrame({
+  className = "",
+  panelClass = "",
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("bento-tile relative flex rounded-2xl p-1.5", className), ...rest, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "bento-panel relative isolate flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden rounded-[10px]",
+        panelClass
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "bento-glow" }),
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "bento-edge" }),
+        children
+      ]
+    }
+  ) });
+}
+export {
+  BentoFrame
+};

package/dist/components/bento-grid/BentoGrid.d.ts

@@ -1,6 +1,10 @@
 import type { HTMLAttributes, ReactNode } from "react";
 export interface BentoGridProps extends HTMLAttributes<HTMLDivElement> {
     className?: string;
+    /** Tiles fade up in a stagger the first time the grid scrolls into view. */
+    reveal?: boolean;
+    /** Colour of the hover glow, the lit bottom edge, the icon ring and the CTA arrow. Any CSS colour; writes `--bento-accent`. */
+    accent?: string;
     children?: ReactNode;
 }
-export declare function BentoGrid({ className, children, ...rest }: BentoGridProps): import("react").JSX.Element;
+export declare function BentoGrid({ className, reveal, accent, children, style, onFocus, ...rest }: BentoGridProps): import("react").JSX.Element;

package/dist/components/bento-grid/BentoGrid.js

@@ -1,14 +1,83 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
 import { cn } from "../../utils.js";
-function BentoGrid({ className = "", children, ...rest }) {
+import { useElementRef } from "../../internals/dom/use-element-ref.js";
+import { useInView } from "../../internals/motion/in-view.js";
+import { useReducedMotion } from "../../internals/motion/media-query.js";
+import { staggerDelay } from "../../internals/motion/stagger.js";
+/* empty css               */
+const STEP = 70;
+const CAP = 420;
+function BentoGrid({
+  className = "",
+  reveal = true,
+  accent,
+  children,
+  style,
+  onFocus,
+  ...rest
+}) {
+  const [node, nodeRef] = useElementRef();
+  const [shown, setShown] = useState(false);
+  const reduced = useReducedMotion();
+  const revealing = reveal && !reduced;
+  useEffect(() => {
+    if (!node) return;
+    const root = node;
+    function apply() {
+      const kids = Array.from(root.children).filter(
+        (el) => el instanceof HTMLElement
+      );
+      kids.forEach((el, i) => {
+        el.style.setProperty("--bento-i", String(i));
+        el.style.setProperty(
+          "--bento-delay",
+          `${staggerDelay(i, kids.length, STEP, "first", CAP)}ms`
+        );
+      });
+    }
+    apply();
+    const mo = new MutationObserver(apply);
+    mo.observe(root, { childList: true });
+    return () => {
+      mo.disconnect();
+      for (const el of Array.from(root.children)) {
+        if (el instanceof HTMLElement) {
+          el.style.removeProperty("--bento-i");
+          el.style.removeProperty("--bento-delay");
+        }
+      }
+    };
+  }, [node]);
+  useInView(node, {
+    enabled: revealing && !shown,
+    once: true,
+    // Any pixel, not a fraction: a grid taller than ~12 viewports could never
+    // show 8% of itself at once, and would stay hidden for good.
+    threshold: 0,
+    rootMargin: "0px 0px -6% 0px",
+    onChange: (v) => {
+      if (v) setShown(true);
+    }
+  });
+  function handleFocus(event) {
+    setShown(true);
+    onFocus?.(event);
+  }
+  const mergedStyle = accent === void 0 ? style : { ...style, "--bento-accent": accent };
   return /* @__PURE__ */ jsx(
     "div",
     {
+      ref: nodeRef,
       className: cn(
-        "mx-auto grid max-w-7xl grid-cols-1 gap-4 md:auto-rows-[18rem] md:grid-cols-3",
+        "fancy-bento mx-auto grid max-w-7xl grid-cols-1 gap-4 md:auto-rows-[18rem] md:grid-cols-3",
+        revealing && "bento-reveal",
         className
       ),
+      "data-state": revealing ? shown ? "shown" : "armed" : void 0,
+      style: mergedStyle,
+      onFocus: handleFocus,
       ...rest,
       children
     }

package/dist/components/bento-grid/BentoGridCard.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
-import { cn } from "../../utils.js";
+import { BentoFrame } from "./BentoFrame.js";
 function BentoGridCard({
   name,
   description: desc,
@@ -12,34 +12,42 @@ function BentoGridCard({
   ...rest
 }) {
   return /* @__PURE__ */ jsxs(
-    "div",
+    BentoFrame,
     {
-      className: cn(
-        "group relative col-span-3 flex flex-col justify-end overflow-hidden rounded-xl",
-        "bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]",
-        "transform-gpu dark:bg-black dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset] dark:[border:1px_solid_rgba(255,255,255,.1)]",
-        className
-      ),
+      className: ["group col-span-3", className].join(" "),
+      panelClass: "justify-end",
       ...rest,
       children: [
-        background,
-        /* @__PURE__ */ jsxs("div", { className: "pointer-events-none z-10 flex transform-gpu flex-col gap-1 p-6 transition-all duration-300 group-hover:-translate-y-10", children: [
-          /* @__PURE__ */ jsx("div", { className: "size-12 origin-left transform-gpu text-neutral-700 transition-all duration-300 ease-in-out group-hover:scale-75", children: icon }),
-          /* @__PURE__ */ jsx("h3", { className: "text-xl font-semibold text-neutral-700 dark:text-neutral-300", children: name }),
-          /* @__PURE__ */ jsx("p", { className: "max-w-lg text-neutral-400", children: desc })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute bottom-0 flex w-full translate-y-10 transform-gpu flex-row items-center p-4 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100", children: /* @__PURE__ */ jsxs(
-          "a",
-          {
-            href,
-            className: "pointer-events-auto inline-flex items-center rounded-md px-3 py-1.5 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-100 dark:text-neutral-200 dark:hover:bg-neutral-800",
-            children: [
-              cta,
-              " →"
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 transform-gpu transition-all duration-300 group-hover:bg-black/[.03] group-hover:dark:bg-neutral-800/10" })
+        background && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 -z-10 overflow-hidden", children: background }),
+        /* @__PURE__ */ jsxs("div", { className: "bento-lift pointer-events-none relative z-10 flex flex-col gap-1 p-6", children: [
+          icon && /* @__PURE__ */ jsx("div", { className: "bento-icon mb-3 size-11 [&_svg]:size-5", children: icon }),
+          /* @__PURE__ */ jsx("h3", { className: "text-lg font-medium tracking-tight text-neutral-900 dark:text-neutral-100", children: name }),
+          /* @__PURE__ */ jsx("p", { className: "max-w-lg text-sm leading-relaxed text-neutral-500 dark:text-neutral-400", children: desc }),
+          /* @__PURE__ */ jsxs(
+            "a",
+            {
+              href,
+              className: "bento-cta pointer-events-auto mt-3 inline-flex w-fit items-center gap-1.5 rounded-md text-sm font-medium text-neutral-900 outline-none focus-visible:ring-2 focus-visible:ring-[var(--bento-accent,#8e9cff)] focus-visible:ring-offset-2 focus-visible:ring-offset-transparent dark:text-neutral-100",
+              children: [
+                cta,
+                /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    "aria-hidden": "true",
+                    viewBox: "0 0 16 16",
+                    className: "size-3.5 text-[var(--bento-accent,#8e9cff)]",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "1.6",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    children: /* @__PURE__ */ jsx("path", { d: "M3 8h9.5M8.5 4l4 4-4 4" })
+                  }
+                )
+              ]
+            }
+          )
+        ] })
       ]
     }
   );

package/dist/components/bento-grid/BentoGridItem.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
-import { cn } from "../../utils.js";
+import { BentoFrame } from "./BentoFrame.js";
 function BentoGridItem({
   className = "",
   header,
@@ -10,19 +10,19 @@ function BentoGridItem({
   ...rest
 }) {
   return /* @__PURE__ */ jsxs(
-    "div",
+    BentoFrame,
     {
-      className: cn(
-        "group/bento shadow-input row-span-1 flex flex-col justify-between space-y-4 rounded-xl border border-transparent bg-white p-4 transition duration-200 hover:shadow-xl dark:border-white/[0.2] dark:bg-black dark:shadow-none",
-        className
-      ),
+      className: ["group/bento row-span-1", className].join(" "),
+      panelClass: "justify-between gap-4 p-4",
       ...rest,
       children: [
         header,
-        /* @__PURE__ */ jsxs("div", { className: "transition duration-200 group-hover/bento:translate-x-2", children: [
-          icon,
-          title && /* @__PURE__ */ jsx("div", { className: "my-2 font-sans font-bold text-neutral-600 dark:text-neutral-200", children: title }),
-          description && /* @__PURE__ */ jsx("div", { className: "font-sans text-xs font-normal text-neutral-600 dark:text-neutral-300", children: description })
+        /* @__PURE__ */ jsxs("div", { className: "bento-lift relative", children: [
+          (icon || title) && /* @__PURE__ */ jsxs("div", { className: "mb-1.5 flex items-center gap-2.5", children: [
+            icon && /* @__PURE__ */ jsx("div", { className: "bento-icon size-8 [&_svg]:size-4", children: icon }),
+            title && /* @__PURE__ */ jsx("div", { className: "min-w-0 font-sans text-[15px] font-medium tracking-tight text-neutral-900 dark:text-neutral-100", children: title })
+          ] }),
+          description && /* @__PURE__ */ jsx("div", { className: "font-sans text-[13px] leading-relaxed text-neutral-500 dark:text-neutral-400", children: description })
         ] })
       ]
     }

package/dist/components/border-beam/BorderBeam.d.ts

@@ -1,25 +1,70 @@
 /**
- * BorderBeam - Animated beam effect that travels around the border
+ * BorderBeam - a single comet of light riding a container's border
  *
- * Place inside a container with `position: relative` and `overflow: hidden`.
- * The beam will animate around the container's border.
+ * A white-hot head leads a long, feathered tail that fades from `colorFrom`
+ * to `colorTo` to nothing. The hairline under it stays dim except within
+ * the comet's reach, a soft bloom sits on the edge, and a faint spill of
+ * light falls just inside the container.
+ *
+ * Place it as the last child of a container with `position: relative`
+ * (and usually `overflow: hidden`). It inherits the container's
+ * `border-radius`; set `--border-beam-radius` if the path needs a radius
+ * the browser cannot read from the box itself.
  */
 export interface BorderBeamProps {
     /** Additional CSS classes */
     className?: string;
-    /** Size of the beam in pixels */
+    /** Diameter of the pool of light around the comet's head, in pixels */
     size?: number;
-    /** Animation duration in seconds */
+    /** Time for one full lap of the border, in seconds */
     duration?: number;
     /** Border width in pixels */
     borderWidth?: number;
-    /** Anchor position (0-100) */
+    /**
+     * Where along the border the comet starts, as a percentage of the
+     * perimeter (0-100, clockwise from the top-left corner). With reduced
+     * motion, this is where it rests.
+     */
     anchor?: number;
-    /** Gradient start color */
+    /** Colour of the comet's head and the start of its tail */
     colorFrom?: string;
-    /** Gradient end color */
+    /** Colour the tail fades into */
     colorTo?: string;
-    /** Animation delay in seconds */
+    /**
+     * Delay in seconds. The comet runs from the first frame, already
+     * `delay` seconds behind where it would otherwise be, so stacked beams
+     * spread out along the border.
+     */
     delay?: number;
+    /** Length of the tail as a share of the perimeter (0-1) */
+    tail?: number;
+    /** Strength of the bloom and the inner spill of light (0-1) */
+    glow?: number;
+    /** Travel counter-clockwise instead of clockwise */
+    reverse?: boolean;
+}
+/** Number of overlapping pieces the sharp tail is drawn with. More pieces
+ * bend around the corners more smoothly. */
+export declare const TAIL_SEGMENTS = 18;
+/** The blurred bloom is forgiving: fewer, longer pieces are enough. */
+export declare const BLOOM_SEGMENTS = 8;
+export interface TailSegment {
+    /** Position along the tail, 0 = right behind the head, 1 = tail end */
+    t: number;
+    /** Opacity of this piece */
+    alpha: number;
+    /** Thickness factor (1 at the head, tapering towards the end) */
+    thickness: number;
 }
-export declare function BorderBeam({ className, size, duration, borderWidth, anchor, colorFrom, colorTo, delay, }: BorderBeamProps): import("react").JSX.Element;
+/** Evenly spaced pieces with an eased fade and a tapering thickness. */
+export declare function tailSegments(count: number): TailSegment[];
+/**
+ * Turn `delay` into a phase: how far into its lap the comet is at first
+ * paint (a negative `animation-delay`), and where it rests when motion is
+ * reduced (a percentage of the perimeter).
+ */
+export declare function beamPhase(duration: number, delay: number, anchor: number, reverse: boolean): {
+    offset: number;
+    park: number;
+};
+export declare function BorderBeam({ className, size, duration, borderWidth, anchor, colorFrom, colorTo, delay, tail, glow, reverse, }: BorderBeamProps): import("react").JSX.Element;