62:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 63:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 64:T198e,"use client"; import * as React from "react"; import { useReducedMotion } from "../hooks/use-reduced-motion"; export interface AnimatedBeamProps { /** Ref of the element that contains both endpoints (defines the SVG coordinate space). */ containerRef: React.RefObject; /** Ref of the start element. */ fromRef: React.RefObject; /** Ref of the end element. */ toRef: React.RefObject; /** Curvature of the beam. Positive bows up, negative bows down. Default: 0. */ curvature?: number; /** Reverse the travel direction of the light. Default: false. */ reverse?: boolean; /** Duration of one travel pass in seconds. Default: 3. */ duration?: number; /** Delay before the animation starts, in seconds. Default: 0. */ delay?: number; /** Width of the beam stroke. Default: 2. */ width?: number; /** Gradient start color. */ gradientStart?: string; /** Gradient end color. */ gradientStop?: string; /** Color of the static resting line. */ pathColor?: string; /** Opacity of the static resting line. Default: 0.15. */ pathOpacity?: number; /** Offset the start point (px). */ startXOffset?: number; startYOffset?: number; /** Offset the end point (px). */ endXOffset?: number; endYOffset?: number; } /** * Draws an SVG line between two DOM elements and animates a traveling light * along it — ideal for "how it works" / integration diagrams. * * The path is recomputed from the elements' bounding rects on mount and on any * container/window resize (via ResizeObserver), so it stays accurate through * responsive reflow. Under reduced motion the gradient is drawn statically. */ export function AnimatedBeam({ containerRef, fromRef, toRef, curvature = 0, reverse = false, duration = 3, delay = 0, width = 2, gradientStart = "#7c3aed", gradientStop = "#22d3ee", pathColor = "currentColor", pathOpacity = 0.15, startXOffset = 0, startYOffset = 0, endXOffset = 0, endYOffset = 0, }: AnimatedBeamProps) { const id = React.useId().replace(/[:]/g, ""); const reduced = useReducedMotion(); const [dimensions, setDimensions] = React.useState({ width: 0, height: 0 }); const [path, setPath] = React.useState(""); const updatePath = React.useCallback(() => { const container = containerRef.current; const from = fromRef.current; const to = toRef.current; if (!container || !from || !to) return; const containerRect = container.getBoundingClientRect(); const fromRect = from.getBoundingClientRect(); const toRect = to.getBoundingClientRect(); setDimensions({ width: containerRect.width, height: containerRect.height }); const startX = fromRect.left - containerRect.left + fromRect.width / 2 + startXOffset; const startY = fromRect.top - containerRect.top + fromRect.height / 2 + startYOffset; const endX = toRect.left - containerRect.left + toRect.width / 2 + endXOffset; const endY = toRect.top - containerRect.top + toRect.height / 2 + endYOffset; const controlX = (startX + endX) / 2; const controlY = (startY + endY) / 2 - curvature; setPath(`M ${startX},${startY} Q ${controlX},${controlY} ${endX},${endY}`); }, [ containerRef, fromRef, toRef, curvature, startXOffset, startYOffset, endXOffset, endYOffset, ]); React.useEffect(() => { updatePath(); const container = containerRef.current; if (!container || typeof ResizeObserver === "undefined") { window.addEventListener("resize", updatePath); return () => window.removeEventListener("resize", updatePath); } const observer = new ResizeObserver(updatePath); observer.observe(container); if (fromRef.current) observer.observe(fromRef.current); if (toRef.current) observer.observe(toRef.current); return () => observer.disconnect(); }, [updatePath, containerRef, fromRef, toRef]); // Traveling light: reversing swaps the offset animation direction. const values = reverse ? { a: "1;-0.2", b: "1.2;0", c: "1.3;0.1", d: "1.5;0.2" } : { a: "-0.2;1", b: "0;1.2", c: "0.1;1.3", d: "0.2;1.5" }; return ( ); } 61:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L62",null,{"namespace":"@stacklyui","registryDependencies":["@stacklyui/use-reduced-motion"]}]]}],null]}],["$","$L63",null,{"files":[{"path":"../../packages/ui/src/components/animated-beam.tsx","content":"$64","type":"registry:ui","target":"components/stackly/animated-beam.tsx"}],"className":"h-[70svh] min-h-80"}]]}]