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:T1281,'use client'; import React, { useEffect, useRef, useState } from 'react'; import { useInView } from 'motion/react'; type Type = 'curved' | 'slide'; type Dir = 'top' | 'bottom' | 'left' | 'right'; export interface TransitionProps { intro: React.ReactNode | ((triggerExit: () => void) => React.ReactNode); children: React.ReactNode; introDuration?: number; transitionDuration?: number; type?: Type; direction?: Dir; className?: string; skip?: boolean; autoExit?: boolean; trigger?: boolean; onFinished?: () => void; } const easeInOutCubic = (t: number) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2; export const Transition: React.FC = ({ intro, children, introDuration = 1.5, transitionDuration = 0.9, type = 'curved', direction = 'bottom', className = 'bg-neutral-900 dark:bg-white', skip = false, autoExit = true, trigger, onFinished, }) => { const [showIntro, setShowIntro] = useState(!skip); const [animating, setAnimating] = useState(false); const [progress, setProgress] = useState(0); const ref = useRef(null); const inView = useInView(ref, { margin: '-100px', once: true }); const rafRef = useRef(null); const timersRef = useRef([]); const propsRef = useRef({ transitionDuration, onFinished }); useEffect(() => { propsRef.current = { transitionDuration, onFinished }; }, [transitionDuration, onFinished]); const [triggerExit] = useState(() => { return () => { setAnimating(true); let startTime: number | null = null; const tick = (now: number) => { if (!startTime) startTime = now; const elapsed = (now - startTime) / 1000; const raw = Math.min(elapsed / propsRef.current.transitionDuration, 1); const eased = easeInOutCubic(raw); setProgress(eased); if (raw < 1) { rafRef.current = requestAnimationFrame(tick); } else { setAnimating(false); setShowIntro(false); setProgress(0); rafRef.current = null; propsRef.current.onFinished?.(); } }; rafRef.current = requestAnimationFrame(tick); }; }); const startTransition = triggerExit; useEffect(() => { if (skip) { onFinished?.(); return; } if (inView && autoExit) { const t = window.setTimeout( () => startTransition(), introDuration * 1000, ); timersRef.current.push(t); } const currentTimers = timersRef.current; return () => { currentTimers.forEach(clearTimeout); if (rafRef.current) cancelAnimationFrame(rafRef.current); }; }, [skip, inView, introDuration, autoExit, onFinished, startTransition]); useEffect(() => { if (!autoExit && trigger && showIntro) { startTransition(); } }, [trigger, autoExit, showIntro, startTransition]); const getCurvedClip = (p: number) => { const startRadius = 160; const radius = Math.max(0, startRadius * (1 - p)); switch (direction) { case 'top': return `circle(${radius}% at 50% 0%)`; case 'bottom': return `circle(${radius}% at 50% 100%)`; case 'left': return `circle(${radius}% at 0% 50%)`; case 'right': default: return `circle(${radius}% at 100% 50%)`; } }; const getSlideTransform = (p: number) => { const pct = Math.round(p * 100); switch (direction) { case 'bottom': return `translateY(${pct}%)`; case 'top': return `translateY(${-pct}%)`; case 'left': return `translateX(${-pct}%)`; case 'right': default: return `translateX(${pct}%)`; } }; return (

{children}

{showIntro && (

{typeof intro === 'function' ? intro(triggerExit) : intro}

)}

); }; export default Transition; 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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L51",null,{"namespace":"@scrollxui","registryDependencies":[]}]]}],null]}],["$","$L52",null,{"files":[{"path":"components/ui/transition.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]