import { AnimatePresence, motion } from "framer-motion"; import React from "react"; import { CircleCheck, Mail } from "lucide-react"; import confetti from "canvas-confetti"; export default function App() { const [step, setStep] = React.useState<"one" | "two" | "three">("one"); return ( <main className="relative w-full min-h-screen flex items-start md:items-center justify-center px-4 py-10"> <div className="relative"> <motion.div layoutId="input" className="w-[196px] h-[68px] flex items-center justify-center relative" style={{ borderRadius: 40 }} > <div className="absolute -z-10 left-4"> <motion.div layoutId="icon"> <Mail className="text-zinc-500" /> </motion.div> </div> <motion.button layoutId="button" className="bg-zinc-800 border-2 border-white/30 ring-2 ring-zinc-950 py-3 px-10" style={{ borderRadius: 40 }} onClick={() => setStep("two")} > <motion.span layoutId="text-input" className="font-semibold text-white" > Get Started </motion.span> </motion.button> </motion.div> <AnimatePresence> {step === "two" && ( <motion.div className="absolute inset-0 w-full h-full flex items-center justify-center" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} > <div className="relative w-[450px] shrink-0"> <motion.input layoutId="input" className="bg-white border-2 border-zinc-200 outline-none ring-0 py-5 pr-40 pl-14 w-full" style={{ borderRadius: 40 }} placeholder="Email address" /> <div className="flex items-center justify-center absolute top-0 bottom-0 left-6"> <motion.div layoutId="icon"> <Mail className="text-zinc-500" /> </motion.div> </div> <div className="absolute right-2 top-0 bottom-0 flex items-center justify-center"> <motion.button layoutId="button" className="bg-zinc-800 border-2 border-white/30 ring-2 ring-zinc-950 py-3 px-10" style={{ borderRadius: 40 }} onClick={() => { setStep("three"); setTimeout(showConfetti, 500); }} > <motion.span layoutId="text-input" className="font-semibold text-white" > Sign Up </motion.span> </motion.button> </div> </div> </motion.div> )} </AnimatePresence> <AnimatePresence> {step === "three" && ( <motion.div className="absolute inset-0 w-full h-full flex items-center justify-center" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} > <motion.button layoutId="button" className="bg-zinc-800 border-2 border-white/30 ring-2 ring-zinc-950 p-3" style={{ borderRadius: 60 }} onClick={() => setStep("one")} > <motion.span layoutId="icon" className="font-semibold text-white block" > <CircleCheck className="size-6" /> </motion.span> </motion.button> </motion.div> )} </AnimatePresence> </div> </main> ); } const showConfetti = () => { // https://magicui.design/docs/components/confetti const scalar = 2; const triangle = confetti.shapeFromPath({ path: "M0 10 L5 0 L10 10z", }); const square = confetti.shapeFromPath({ path: "M0 0 L10 0 L10 10 L0 10 Z", }); const coin = confetti.shapeFromPath({ path: "M5 0 A5 5 0 1 0 5 10 A5 5 0 1 0 5 0 Z", }); const tree = confetti.shapeFromPath({ path: "M5 0 L10 10 L0 10 Z", }); const defaults = { spread: 360, ticks: 60, gravity: 0, decay: 0.96, startVelocity: 20, shapes: [triangle, square, coin, tree], scalar, }; const shoot = () => { confetti({ ...defaults, particleCount: 30, }); confetti({ ...defaults, particleCount: 5, }); confetti({ ...defaults, particleCount: 15, scalar: scalar / 2, shapes: ["circle"], }); }; setTimeout(shoot, 0); setTimeout(shoot, 100); setTimeout(shoot, 200); };

Get Started Interaction

Code

Stacks

Inspiration

X ( Twitter ) Post