Dynamic Multi-Step Island
Click the pill button. Notice how the component seamlessly FLIP-animates its physical layout to become the modal container, bypassing traditional popup dialogs.
Installation
npx kinetic-ui-cli@latest add multi-step-island
How It Works
Traditional web design uses standard "Popup Dialogs" which abruptly appear in the center of the screen. The MultiStepIsland bypasses this by utilizing framer-motion's powerful layoutId prop. When the user clicks the pill button, React unmounts the button and mounts the large modal container, but because they share the same layoutId="island-container", Framer Motion intercepts the DOM change and automatically calculates a flawless FLIP (First, Last, Invert, Play) animation to physically stretch and morph the button into the modal.
Usage Guide
1. Import the Component
Import the component into your React or Next.js page:
import { MultiStepIsland } from "@/components/creative/multi-step-island";
2. Implementation Example
Render the component and customize its behavior by passing props:
import { MultiStepIsland } from "@/components/creative/multi-step-island";
export default function Example() {
return (
<div className="w-full flex items-center justify-center p-8">
<MultiStepIsland
/>
</div>
);
}