"use client"; import { ChevronLeft } from "lucide-react"; import { AnimatePresence, MotionConfig, type Transition } from "motion/react"; import * as m from "motion/react-m"; import { useState } from "react"; const springConfig: Transition = { type: "spring", stiffness: 400, damping: 20, }; const itemVariants = { initial: { opacity: 0, scale: 0.75, filter: "blur(8px)" }, animate: { opacity: 1, scale: 1, filter: "blur(0)" }, exit: { opacity: 0, scale: 0.75, filter: "blur(8px)" }, }; const TAGS = ["Marketing", "Design", "Development"] as const; export default function SplitButtonInteractionDemo() { const [isOpen, setIsOpen] = useState(false); // Decoupled from isOpen so "New Project" only appears after // the open-state elements have fully exited. const [showNewProject, setShowNewProject] = useState(true); const handleOpen = () => { setShowNewProject(false); setIsOpen(true); }; const handleClose = () => { setIsOpen(false); // showNewProject becomes true only in onExitComplete below }; return ( {/* "New Project" — only rendered after open elements have fully exited */} {showNewProject && ( New Project )} {/* Back button + tags share one AnimatePresence so onExitComplete fires only after every open-state element has fully exited. */} setShowNewProject(true)} > {isOpen && ( )} {isOpen && TAGS.map((name) => ( ))} ); } function Tag({ name, onClick }: { name: string; onClick: () => void }) { return ( {name} ); }

Split Button Interaction