4f: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"] 50: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"] 51:T1f7d,"use client"; import * as React from "react"; import gsap from "gsap"; import { CustomEase } from "gsap/CustomEase"; gsap.registerPlugin(CustomEase); const EASE_CURTAIN = CustomEase.create( "pt_curtain", "M0,0 C0.38,0.05 0.48,0.58 0.65,0.82 0.82,1 1,1 1,1", ); const EASE_SLIDE = CustomEase.create( "pt_slide", "M0,0 C0.178,0.031 0.279,0.802 0.345,0.856 0.421,0.918 0.374,1 1,1", ); interface PageData { namespace: string; label: string; title: string; subtitle: string; accent: string; bg: string; path: string; } const PAGES: PageData[] = [ { namespace: "home", label: "01", title: "Design", subtitle: "Where ideas become interfaces.", accent: "#818cf8", bg: "#0c0c12", path: "/home", }, { namespace: "motion", label: "02", title: "Motion", subtitle: "Breath between states.", accent: "#fb7185", bg: "#120c0e", path: "/motion", }, { namespace: "code", label: "03", title: "Code", subtitle: "Precision in every keystroke.", accent: "#34d399", bg: "#0c1210", path: "/code", }, { namespace: "ship", label: "04", title: "Ship", subtitle: "Done is better than perfect.", accent: "#fbbf24", bg: "#121009", path: "/ship", }, ]; type TransitionVariant = "curtain" | "slide"; function runCurtainTransition( currentEl: HTMLElement, nextEl: HTMLElement, duration: number, ): Promise { gsap.set(nextEl, { clipPath: "inset(100% 0% 0% 0%)", opacity: 1, position: "absolute", top: 0, left: 0, width: "100%", height: "100%", zIndex: 10, force3D: true, }); return new Promise((resolve) => { const tl = gsap.timeline({ onComplete: resolve }); tl.to( currentEl, { y: "-30%", opacity: 0.4, scale: 0.8, duration, force3D: true, ease: EASE_CURTAIN, }, 0, ).to( nextEl, { clipPath: "inset(0% 0% 0% 0%)", duration, force3D: true, ease: EASE_CURTAIN, }, 0, ); }); } function runSlideTransition( currentEl: HTMLElement, nextEl: HTMLElement, duration: number, ): Promise { gsap.set(nextEl, { opacity: 1, position: "absolute", top: 0, left: 0, width: "100%", height: "100%", x: "100%", zIndex: 10, force3D: true, }); return new Promise((resolve) => { const tl = gsap.timeline({ onComplete: resolve }); tl.to( currentEl, { x: "-50%", scale: 0.8, opacity: 0.4, duration, force3D: true, ease: EASE_SLIDE, }, 0, ).to(nextEl, { x: 0, duration, force3D: true, ease: EASE_SLIDE }, 0); }); } interface PageTransitionDemoProps { variant?: TransitionVariant; duration?: number; } export default function PageTransitionDemo({ variant = "curtain", duration, }: PageTransitionDemoProps) { const effectiveDuration = duration ?? (variant === "slide" ? 1.5 : 0.7); const [currentIndex, setCurrentIndex] = React.useState(0); const isTransitioningRef = React.useRef(false); const wrapperRef = React.useRef(null); const currentContainerRef = React.useRef(null); const configRef = React.useRef({ variant, duration: effectiveDuration }); React.useEffect(() => { configRef.current = { variant, duration: effectiveDuration }; }, [variant, effectiveDuration]); const goTo = React.useCallback( async (nextIndex: number) => { if (isTransitioningRef.current) return; if (nextIndex === currentIndex) return; const wrapper = wrapperRef.current; const currentEl = currentContainerRef.current; if (!wrapper || !currentEl) return; isTransitioningRef.current = true; setCurrentIndex(nextIndex); const nextPage = PAGES[nextIndex]; const nextEl = document.createElement("div"); nextEl.style.cssText = "position:absolute;inset:0;overflow:hidden;"; nextEl.innerHTML = `

${nextPage.label} — ${nextPage.path}

${nextPage.title}

${nextPage.subtitle}

`; wrapper.appendChild(nextEl); const { variant: v, duration: d } = configRef.current; const runner = v === "slide" ? runSlideTransition : runCurtainTransition; await runner(currentEl, nextEl, d); nextEl.remove(); gsap.set(currentEl, { clearProps: "clipPath,position,top,left,width,height,zIndex,opacity,x,y,scale,transform", }); isTransitioningRef.current = false; }, [currentIndex], ); const page = PAGES[currentIndex]; return (

{/* Page viewport */}

{/* Current page — centred minimal layout */}

{page.label} — {page.path}

{page.title}

{page.subtitle}

{/* Centered navbar overlay */}

{PAGES.map((p, i) => ( ))}

); } export { PageTransitionDemo }; 4e:["$","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,["$","$L4f",null,{"namespace":"@unlumen-ui","registryDependencies":["@unlumen-ui/page-transition"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"registry/demo/components/unlumen/page-transition/index.tsx","content":"$51","type":"registry:example"}],"className":"h-[70svh] min-h-80"}]]}]