Morphing Studio
One frame that morphs from a chat to a canvas, an editor and a phone as your process plays.
Features
- The frame changes shape for each stage with a layout spring
- A segmented control that fills like a progress bar
- Pauses under the pointer; pick any stage to jump to it
- Proper tabs for keyboard and screen readers
- Doesn't play by itself for reduced motion
Best for: Agencies and tools with a clear process: show every step without a wall of screenshots.
Installation
npm install motion lucide-react @radix-ui/react-slot class-variance-authority clsx tailwind-mergeThen copy the files from the Code tab into the same paths in your project, in TypeScript or JavaScript.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | - | The headline. |
| accent | string | - | Optional ending in serif italic. |
| description | string | - | The line under the headline. |
| stages | MorphStage[] | - | Up to four stages: label and caption, shown as chat, canvas, editor and phone. |
| primaryCta | { label: string; href: string } | - | The blue button. |
| secondaryCta | { label: string; href: string } | - | Optional second button. |
| eyebrow | ReactNode | - | Optional line above the headline. |
| className | string | - | Extra classes for the section. |
FAQ
Is the Morphing Studio product showcase section free to use?
Yes. Morphing Studio is free to copy into your own projects. Open the Code tab and paste the files into your app.
Does Morphing Studio work with Next.js and React?
Yes. It's a React client component made for the Next.js App Router, styled with Tailwind CSS and animated with Framer Motion (the motion package).
Can I use Morphing Studio in JavaScript instead of TypeScript?
Yes. Every file comes in TypeScript and JavaScript. Switch the language in the Code tab.
What does Morphing Studio need installed?
motion, lucide-react, @radix-ui/react-slot, class-variance-authority, clsx, tailwind-merge, plus the shared helpers from the Installation page.
Is Morphing Studio accessible?
Every link and button is reachable by keyboard with a visible focus ring, and the animation stays still for visitors who ask for reduced motion.