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/1o6_421saitt-.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/1o6_421saitt-.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:T115e,import React, { useEffect, useRef } from 'react'; import { motion, Variants } from 'framer-motion'; export type TransitionType = | 'double-stairs' | 'shutter-stairs' | 'split-stairs' | 'horizontal-split' | 'vertical-split' | 'slash' | 'lattice' | 'curtain-shred' | 'pixel' | 'pixel-wave' | 'pixel-spiral' | 'vortex' | 'cross-fade' | 'expand-grow' | 'push-slide' | 'pop-over' | 'depth-forward' | 'liquid-wave'; export interface PageTransitionProps { type?: TransitionType; isVisible: boolean; onComplete?: () => void; className?: string; } export const PageTransition: React.FC = ({ type = 'double-stairs', isVisible, onComplete, className = '', }) => { const pathRefs = useRef<(SVGPathElement | null)[]>([]); useEffect(() => { if (type !== 'liquid-wave' || !isVisible) return; let animId: number; const numPoints = 12; const numPaths = 3; const startTime = performance.now(); const delays = Array.from({ length: numPaths }, (_, i) => Array.from({ length: numPoints }, () => i * 0.08 + Math.random() * 0.15) ); const animateFrame = (now: number) => { const elapsedSec = (now - startTime) / 1000; pathRefs.current.forEach((path, i) => { if (!path) return; const stepX = 100 / (numPoints - 1); const pointsY = delays[i].map((delay) => { const rawProgress = Math.max(0, Math.min(1, (elapsedSec - delay) / 0.65)); const easeProgress = rawProgress < 0.5 ? 2 * rawProgress * rawProgress : 1 - Math.pow(-2 * rawProgress + 2, 2) / 2; return 100 - easeProgress * 110; }); let d = `M 0 100 V ${pointsY[0]}`; for (let j = 0; j < numPoints - 1; j++) { const currentX = j * stepX; const nextX = (j + 1) * stepX; const cpX = currentX + stepX * 0.5; d += ` C ${cpX} ${pointsY[j]} ${cpX} ${pointsY[j + 1]} ${nextX} ${pointsY[j + 1]}`; } d += ` V 100 H 0 Z`; path.setAttribute('d', d); }); if (now - startTime < 1300) { animId = requestAnimationFrame(animateFrame); } else if (onComplete) { onComplete(); } }; animId = requestAnimationFrame(animateFrame); return () => cancelAnimationFrame(animId); }, [isVisible, type, onComplete]); if (!isVisible && type !== 'liquid-wave') return null; if (type === 'double-stairs') { const COLUMNS = 5; const variants: Variants = { initial: (i: number) => ({ y: i % 2 === 0 ? '-100%' : '100%' }), enter: (i: number) => ({ y: '0%', transition: { duration: 0.8, ease: [0.76, 0, 0.24, 1], delay: i * 0.05 }, }), exit: (i: number) => ({ y: i % 2 === 0 ? '100%' : '-100%', transition: { duration: 0.8, ease: [0.76, 0, 0.24, 1], delay: i * 0.05 }, }), }; return ( { if (onComplete) onComplete(); }} > {[...Array(COLUMNS)].map((_, i) => ( ))} ); } if (type === 'liquid-wave') { return ( ); } return ( ); }; 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","framer-motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/framer-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":"framer-motion"}]]}]}]]}],["$","$L51",null,{"namespace":"@amicro","registryDependencies":[]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/ui/transitions/page-transition.tsx","content":"$53","type":"registry:ui","target":"components/amicro/page-transition.tsx"}],"className":"h-[70svh] min-h-80"}]]}]