"use client"; import { useRef, useState, useEffect } from "react"; import gsap from "gsap"; export interface MorphTransitionProps extends React.ComponentPropsWithoutRef<"div"> { global?: boolean; trigger?: boolean; onHalfComplete?: () => void; onComplete?: () => void; pageColorA?: string; pageColorB?: string; titleA?: string; titleB?: string; contentA?: React.ReactNode; contentB?: React.ReactNode; buttonLabel?: string; duration?: number; borderColor?: string; } export function MorphTransition({ global = false, trigger = false, onHalfComplete, onComplete, pageColorA = "#7fff5e", pageColorB = "#ff5c71", titleA = "HOME", titleB = "ABOUT", contentA, contentB, buttonLabel = "Morph →", duration = 0.55, borderColor = "#1e1e1e", className = "", style, ...props }: MorphTransitionProps) { const overlayRef = useRef(null); const [page, setPage] = useState<"A" | "B">("A"); const [isRunning, setIsRunning] = useState(false); const morph = () => { if (isRunning || !overlayRef.current) return; setIsRunning(true); const tl = gsap.timeline({ onComplete: () => { setIsRunning(false); onComplete?.(); }, }); // Grow circle from center tl.set(overlayRef.current, { display: "block", scale: 0, opacity: 1 }) .to(overlayRef.current, { scale: 4, duration: duration, ease: "power3.in", }) .call(() => { setPage((prev) => (prev === "A" ? "B" : "A")); onHalfComplete?.(); }) .to(overlayRef.current, { scale: 12, opacity: 0, duration: duration, ease: "power3.out", }) .set(overlayRef.current, { display: "none", scale: 0, opacity: 1 }); }; useEffect(() => { if (trigger) { morph(); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [trigger]); // If in global mode, render only the full-screen absolute/fixed transition morph circle if (global) { return (

); } // Local demo container return (

{/* Demo viewport */}

{/* Morph overlay */}

{/* Content */}

Page {page}

{page === "A" ? ( contentA ?? (

{titleA}

) ) : ( contentB ?? (

{titleB}

) )}

); }

Component Showcase

Choose Installation Method

AI Automation Agent Prompt