Morph Transition
Circular clip expands from center masking the page swap between routes.
Component Showcase
Morph Transition
Circular clip expands from center masking the page swap between routes.
GSAPClip
Choose Installation Method
Select how you want to add this component to your project
Run command in your project root
$ npx @melonui-dev/cli add morph-transition
How to import and use
app/page.tsx
import { MorphTransition } from "@/components/morph-transition";
export default function Page() {
return (
<main className="flex min-h-screen items-center justify-center bg-[#050505] p-8">
<MorphTransition />
</main>
);
}AI Automation Agent Prompt
Feed this prompt to Claude, ChatGPT, or Gemini to quickly write custom integrations, layouts, or configure props for this component on your system.
I want to integrate the MelonUI "Morph Transition" component into my React/Next.js project.
Component description: "Circular clip expands from center masking the page swap between routes."
CLI Installation command: `npx @melonui-dev/cli add morph-transition`
Tags/Technologies used: GSAP, Clip
Please write a premium, responsive React page component in Next.js that:
1. Imports `MorphTransition` from `@/components/morph-transition`.
2. Places it inside a visually stunning layout matching a dark-mode, glassmorphism design system.
3. Outlines its props and options with clean code structure and comments.