51: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 52: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 53:T1858,"use client"; import { useRef, useState, type ReactNode } from "react"; import { useIsomorphicLayoutEffect } from "../../internals/dom/ssr"; import { useFancyId } from "../../internals/use-id"; import { cn } from "../../utils"; export interface TracingBeamProps { /** Additional CSS classes */ className?: string; /** Content the beam traces alongside */ children?: ReactNode; } function mapRange( value: number, inMin: number, inMax: number, outMin: number, outMax: number ): number { return ((value - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin; } /** * TracingBeam - Vertical SVG beam that highlights scroll progress alongside content. */ export function TracingBeam({ className = "", children }: TracingBeamProps) { const tracingBeamRef = useRef(null); const contentRef = useRef(null); const gradientRef = useRef(null); // One gradient per instance: the stroke references it by functional IRI, so a // shared literal id would make every beam after the first paint the first // beam's spring. const gradientId = useFancyId("tracing-beam-gradient"); // State that re-renders markup (circle classes/shadow, svg path, viewBox) — // mirrors the Svelte component's $state driving template expressions. const [svgHeight, setSvgHeight] = useState(0); // The raw scroll progress is a fresh float on every scroll event and feeds // nothing but the three circle expressions below, so only the threshold it // crosses reaches React; the value itself stays in the ref. const [beamStarted, setBeamStarted] = useState(false); // Mutable animation state — per-frame spring values never round-trip through // React state; the rAF loop writes the gradient's y1/y2 attributes directly. const stateRef = useRef({ svgHeight: 0, scrollYProgress: 0, scrollPercentage: 0, springY1: 0, springY2: 0, springVelY1: 0, springVelY2: 0, rafId: 0, }); useIsomorphicLayoutEffect(() => { const s = stateRef.current; function targetY1(): number { return ( mapRange(s.scrollYProgress, 0, 0.8, s.scrollYProgress, s.svgHeight) * (1.4 - s.scrollPercentage) ); } function targetY2(): number { return ( mapRange(s.scrollYProgress, 0, 1, s.scrollYProgress, s.svgHeight - 500) * (1.4 - s.scrollPercentage) ); } function applySpring() { const gradient = gradientRef.current; if (gradient) { gradient.setAttribute("y1", String(s.springY1)); gradient.setAttribute("y2", String(s.springY2)); } } function updateSpring() { const tension = 80; const friction = 26; const precision = 0.01; const tY1 = targetY1(); const tY2 = targetY2(); const forceY1 = tension * (tY1 - s.springY1); s.springVelY1 = (s.springVelY1 + forceY1 * 0.001) * (1 - friction * 0.001); s.springY1 += s.springVelY1; const forceY2 = tension * (tY2 - s.springY2); s.springVelY2 = (s.springVelY2 + forceY2 * 0.001) * (1 - friction * 0.001); s.springY2 += s.springVelY2; applySpring(); const settled = Math.abs(s.springVelY1) < precision && Math.abs(tY1 - s.springY1) < precision && Math.abs(s.springVelY2) < precision && Math.abs(tY2 - s.springY2) < precision; if (!settled) { s.rafId = requestAnimationFrame(updateSpring); } } function updateScrollProgress() { const el = tracingBeamRef.current; if (!el) return; const rect = el.getBoundingClientRect(); const windowHeight = window.innerHeight; const elementHeight = rect.height; s.scrollPercentage = (windowHeight - rect.top) / (windowHeight + elementHeight); s.scrollYProgress = (rect.y / windowHeight) * -1; setBeamStarted(s.scrollYProgress > 0); cancelAnimationFrame(s.rafId); s.rafId = requestAnimationFrame(updateSpring); } function updateSVGHeight() { const el = contentRef.current; if (!el) return; s.svgHeight = el.offsetHeight; setSvgHeight(s.svgHeight); } window.addEventListener("scroll", updateScrollProgress, { passive: true }); window.addEventListener("resize", updateScrollProgress, { passive: true }); updateScrollProgress(); const resizeObserver = new ResizeObserver(updateSVGHeight); if (contentRef.current) { resizeObserver.observe(contentRef.current); } updateSVGHeight(); return () => { cancelAnimationFrame(s.rafId); window.removeEventListener("scroll", updateScrollProgress); window.removeEventListener("resize", updateScrollProgress); resizeObserver.disconnect(); }; }, []); const circleHasShadow = !beamStarted; const circleBg = beamStarted ? "bg-white" : "bg-emerald-500"; const circleBorder = beamStarted ? "border-neutral-300" : "border-emerald-600"; const svgPath = `M 1 0V -36 l 18 24 V ${svgHeight * 0.8} l -18 24V ${svgHeight}`; return (

{children}

); } 50:["$","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,["$","$L51",null,{"namespace":"@fancy-ui","registryDependencies":["https://fancy-ui.rama.app/r/internals.json","https://fancy-ui.rama.app/r/internals-dom.json","https://fancy-ui.rama.app/r/utils.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"react/src/components/tracing-beam/TracingBeam.tsx","content":"$53","type":"registry:ui","target":"@ui/fancy/components/tracing-beam/TracingBeam.tsx"},{"path":"react/src/components/tracing-beam/index.ts","content":"\"use client\";\n\nexport { TracingBeam } from \"./TracingBeam\";\nexport type { TracingBeamProps } from \"./TracingBeam\";\n","type":"registry:ui","target":"@ui/fancy/components/tracing-beam/index.ts"}],"className":"h-[70svh] min-h-80"}]]}]