Waitlist modal
An animated waitlist modal with polished motion and clean focus handling.
This modal experiment focuses on one thing: making the interruption feel intentional. The opening motion is subtle, the content stays readable, and the form remains the visual priority.
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogContent>
<DialogHeader>
<DialogTitle>Join the waitlist</DialogTitle>
</DialogHeader>
<form className="grid gap-3">
<Input type="email" placeholder="you@company.com" />
<Button type="submit">Notify me</Button>
</form>
</DialogContent>
</Dialog>
);The result is a modal that doesn’t just appear. It settles in, keeps focus where it should be, and leaves without visual friction.
Other experiments
Explore two more experiments from the lab.