Modale de liste d'attente
Une modale animée pour liste d'attente, avec un mouvement soigné et une gestion propre du focus.
Cette expérimentation de modale se concentre sur une idée simple : rendre l'interruption intentionnelle. L'animation d'ouverture reste subtile, le contenu demeure lisible et le formulaire conserve la priorité visuelle.
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogContent>
<DialogHeader>
<DialogTitle>Rejoindre la liste d'attente</DialogTitle>
</DialogHeader>
<form className="grid gap-3">
<Input type="email" placeholder="vous@entreprise.com" />
<Button type="submit">Me prévenir</Button>
</form>
</DialogContent>
</Dialog>
);Le résultat est une modale qui ne se contente pas d'apparaître. Elle s'installe proprement, garde le focus au bon endroit et disparaît sans friction visuelle.
Autres expérimentations
Découvrez deux autres expérimentations du lab.