L’overlay est le pattern le plus puissant — et le plus dangereux — du design d’interface. Un modal bien fait concentre l’attention, clarifie une décision, et disparaît sans laisser de trace. Un modal mal fait piège l’utilisateur, casse son flux, et détruit la confiance qu’il avait dans le produit.
Le problème, c’est que la plupart des overlays sont des interruptions déguisées en fonctionnalités. Une popup newsletter avant même d’avoir lu la première ligne. Un modal de confirmation empilé dans un modal de settings. Un overlay sans bouton fermer. Chaque mauvais overlay est un micro-sabotage de l’expérience.
The overlay is the most powerful — and most dangerous — pattern in interface design. A well-made modal focuses attention, clarifies a decision, and disappears without a trace. A poorly made one traps the user, breaks their flow, and destroys the trust they had in the product.
The problem is that most overlays are interruptions disguised as features. A newsletter popup before you’ve read the first line. A confirmation modal stacked inside a settings modal. An overlay with no close button. Every bad overlay is a micro-sabotage of the experience.
Ce qu’il ne faut pas faire
Avant de construire, regardons les trois péchés capitaux des overlays — chacun illustre un pattern qu’on retrouve encore partout en 2026.
What not to do
Before building, let’s look at the three cardinal sins of overlays — each illustrates a pattern still found everywhere in 2026.
Le premier affiche un popup newsletter 0,8 seconde après le “chargement” — l’utilisateur n’a même pas commencé à lire. Le deuxième empile trois couches de modals : settings → changement de mot de passe → confirmation — l’utilisateur est perdu dans la profondeur. Le troisième est un modal cookie sans bouton fermer, sans clic backdrop, avec un lien “Gérer les préférences (bientôt)” désactivé — un piège pur et simple.
Le point commun : chaque overlay sert les intérêts du produit, pas ceux de l’utilisateur.
The first shows a newsletter popup 0.8 seconds after “loading” — the user hasn’t even started reading. The second stacks three modal layers: settings → password change → confirmation — the user is lost in depth. The third is a cookie modal with no close button, no backdrop click, with a disabled “Manage preferences (coming soon)” link — a pure trap.
The common thread: each overlay serves the product’s interests, not the user’s.
Étape 1 — Le modal dialog, bien fait
Le modal est l’overlay le plus courant — et le plus mal implémenté. Un bon modal respecte un contrat strict avec l’utilisateur :
- Focus trap : le Tab ne s’échappe jamais du modal
- Touche Escape : ferme immédiatement
- Clic backdrop : ferme aussi (sauf cas critique)
- Animation spring : le modal arrive avec de la physique, pas un fade plat
- Retour du focus : quand le modal se ferme, le focus revient sur l’élément déclencheur
Ces cinq règles ne sont pas des bonus — c’est le minimum syndical. Un modal sans focus trap est inaccessible. Un modal sans Escape est frustrant. Un modal sans animation spring est mort.
Step 1 — The modal dialog, done right
The modal is the most common overlay — and the most poorly implemented. A good modal respects a strict contract with the user:
- Focus trap: Tab never escapes the modal
- Escape key: closes immediately
- Backdrop click: closes too (except in critical cases)
- Spring animation: the modal arrives with physics, not a flat fade
- Focus return: when the modal closes, focus returns to the trigger element
These five rules aren’t bonuses — they’re the bare minimum. A modal without a focus trap is inaccessible. A modal without Escape is frustrating. A modal without spring animation is lifeless.
Clique “Supprimer” sur le troisième item, puis observe : le backdrop flou focalise l’attention, le modal arrive avec un spring naturel, et tu peux fermer avec Escape, clic backdrop, ou le bouton Annuler. Le focus est piégé dans le modal — essaie de Tab en dehors.
L’anatomie visuelle du modal
Le contenu du modal compte autant que son comportement. Chaque choix visuel guide (ou trompe) l’utilisateur :
- L’icône contextuelle — Un triangle d’avertissement pour une suppression, un check pour une confirmation. L’icône dans un carré arrondi coloré donne le ton avant que l’utilisateur ait lu le texte.
- Le titre, pas la question — “Supprimer les paramètres ?” est mieux que “Êtes-vous sûr ?”. Le titre doit nommer l’action, pas interroger vaguement.
- La description sobre — Une phrase, deux maximum. Le détail de ce qui sera perdu, pas un paragraphe juridique.
- Boutons : position et couleur — L’action destructive est à droite (sens de lecture, c’est le dernier élément lu). Elle est rouge, pleine, sans ambiguïté. Le bouton “Annuler” est à gauche, bordure grise, discret — c’est la sortie de secours, pas le choix par défaut. Inverser les deux est un dark pattern.
- Le backdrop — Un
blur(4px)+ opacité noire à 40%. Trop transparent et l’utilisateur ne comprend pas que le contenu est bloqué. Trop opaque et on perd le contexte.
La différence est frappante quand on met les deux côte à côte. Clique “Tout supprimer” des deux côtés pour comparer :
The difference is striking when you put them side by side. Click “Delete all” on both sides to compare:
Comparez les deux versions : titre vague vs action nommée, pas d’icône vs signal visuel immédiat, boutons identiques vs hiérarchie claire. Les deux modals font la même chose — mais un seul inspire confiance.
Quand utiliser un modal
- Actions destructives — Suppression, désinscription, annulation
- Confirmations critiques — Paiement, envoi irréversible
- Formulaires courts — Login, feedback, partage
- Alertes système — Erreur bloquante, mise à jour requise
Quand NE PAS utiliser un modal
- Information consultative — Utilise un tooltip ou un popover
- Listes d’options — Utilise un menu ou un bottom sheet
- Contenu long — Utilise une page dédiée
- Au chargement — Jamais. L’utilisateur n’a rien demandé.
Click “Delete” on the third item, then observe: the blurred backdrop focuses attention, the modal arrives with a natural spring, and you can close with Escape, backdrop click, or the Cancel button. Focus is trapped inside the modal — try Tabbing outside.
The visual anatomy of a modal
The modal’s content matters as much as its behavior. Every visual choice guides (or misleads) the user:
- The contextual icon — A warning triangle for deletion, a checkmark for confirmation. The icon in a colored rounded square sets the tone before the user reads the text.
- The title, not a question — “Delete settings?” is better than “Are you sure?”. The title should name the action, not vaguely interrogate.
- The sober description — One sentence, two at most. What will be lost, not a legal paragraph.
- Buttons: position and color — The destructive action goes on the right (reading direction — it’s the last element read). It’s red, filled, unambiguous. The “Cancel” button is on the left, gray border, discreet — it’s the emergency exit, not the default choice. Swapping them is a dark pattern.
- The backdrop — A
blur(4px)+ 40% black opacity. Too transparent and the user doesn’t understand the content is blocked. Too opaque and you lose context.
When to use a modal
- Destructive actions — Deletion, unsubscribe, cancellation
- Critical confirmations — Payment, irreversible send
- Short forms — Login, feedback, sharing
- System alerts — Blocking error, required update
When NOT to use a modal
- Informational content — Use a tooltip or popover
- Option lists — Use a menu or bottom sheet
- Long content — Use a dedicated page
- On page load — Never. The user didn’t ask for it.
Étape 2 — Le bottom sheet mobile
Sur mobile, le modal centré est un anachronisme. Le pouce est en bas de l’écran, et le modal est en plein milieu — hors de portée. La solution : le bottom sheet, l’overlay natif de iOS et Android.
Le vrai bottom sheet n’est pas un simple div qui glisse du bas. C’est un composant physique avec trois propriétés clés :
- Snap points : le sheet se cale sur des hauteurs prédéfinies (preview, moitié, plein écran)
- Vélocité : un swipe rapide vers le bas ferme immédiatement, un swipe lent snap au point le plus proche
- Drag handle : la barre horizontale en haut signale que c’est draggable
Glisse le sheet vers le haut pour voir le contenu étendu, ou vers le bas pour fermer. La vélocité du geste change le comportement.
Step 2 — The mobile bottom sheet
On mobile, the centered modal is an anachronism. The thumb is at the bottom of the screen, and the modal is smack in the middle — out of reach. The solution: the bottom sheet, the native overlay of iOS and Android.
The real bottom sheet isn’t just a div that slides from the bottom. It’s a physical component with three key properties:
- Snap points: the sheet snaps to predefined heights (preview, half, full screen)
- Velocity: a fast swipe down closes immediately, a slow swipe snaps to the nearest point
- Drag handle: the horizontal bar at the top signals it’s draggable
Drag the sheet up to see extended content, or down to close. Gesture velocity changes the behavior.
Le sheet a trois positions : fermé, moitié (grille de partage), et plein (avec le champ de copie de lien). Le passage de l’une à l’autre se fait par drag avec un spring physique — pas d’animation linéaire.
Les clés d’un bon bottom sheet
- Drag handle visible — La barre horizontale est un affordance essentiel
- Snap points logiques — Chaque hauteur correspond à un niveau de contenu
- Vélocité > position — Un swipe rapide prend le dessus sur la position actuelle
- Pas de scroll interne avant le snap max — Le drag et le scroll ne doivent pas entrer en conflit
- Backdrop semi-transparent — L’utilisateur voit le contexte derrière
The sheet has three positions: closed, half (share grid), and full (with the copy link field). Transitioning between them uses drag with a physics spring — no linear animation.
Keys to a good bottom sheet
- Visible drag handle — The horizontal bar is an essential affordance
- Logical snap points — Each height corresponds to a content level
- Velocity > position — A fast swipe overrides the current position
- No internal scroll before max snap — Drag and scroll must not conflict
- Semi-transparent backdrop — The user sees context behind
Étape 3 — Le morph panel
Et si l’overlay ne venait pas d’un coin de l’écran, mais de l’élément lui-même ? Le morph panel supprime la distance entre le déclencheur et le contenu : la card se transforme directement en panneau de détails.
C’est la shared element transition — le même élément change de forme, de taille et de contenu, avec une animation layout qui maintient la continuité visuelle. Le cerveau ne perçoit pas de rupture parce qu’il suit le même objet du début à la fin.
Ce n’est pas un accordéon. L’accordéon révèle du contenu caché sur place, en poussant les éléments voisins vers le bas — il reste dans le flux du document. Le morph panel, lui, transitionne vers une nouvelle vue : l’élément source se transforme visuellement en panneau détaillé, souvent en overlay, avec une animation de continuité spatiale (position, taille, border-radius). L’accordéon dit « il y a plus ici » ; le morph panel dit « allons voir de plus près ».
Step 3 — The morph panel
What if the overlay didn’t come from a screen edge, but from the element itself? The morph panel removes the distance between trigger and content: the card transforms directly into a detail panel.
This is the shared element transition — the same element changes shape, size, and content, with a layout animation that maintains visual continuity. The brain perceives no disruption because it follows the same object from start to finish.
This is not an accordion. An accordion reveals hidden content in place, pushing sibling elements down — it stays in the document flow. The morph panel transitions to a new view: the source element visually transforms into a detail panel, often as an overlay, with a spatial continuity animation (position, size, border-radius). An accordion says “there’s more here”; a morph panel says “let’s take a closer look.”
Clique sur un élément : l’icône, le titre et la description restent les mêmes — ils s’animent vers leur nouvelle position. Le contenu étendu (tags, description) apparaît en fondu après la transition. L’animation layoutId de Motion fait tout le travail : elle interpole automatiquement la taille, la position et le border-radius.
Quand utiliser le morph panel
- Listes avec détails — L’élément s’expand pour montrer plus d’info
- Galeries — L’image s’agrandit en gardant sa position d’origine
- Dashboards — Une card de résumé s’expand en panneau détaillé
- Mobile — Remplace le push de navigation par une expansion in-place
Click an item: the icon, title, and description stay the same — they animate to their new position. Extended content (tags, description) fades in after the transition. Motion’s layoutId does all the work: it automatically interpolates size, position, and border-radius.
When to use the morph panel
- Lists with details — The item expands to show more info
- Galleries — The image enlarges while keeping its origin position
- Dashboards — A summary card expands into a detail panel
- Mobile — Replaces navigation push with in-place expansion
Étape 4 — La command palette
Pour les power users, l’overlay le plus efficace n’est ni un modal ni un panneau — c’est un champ de recherche qui contrôle tout. La command palette, popularisée par VS Code (⌘K), Figma, et Linear, est l’overlay keyboard-first par excellence.
Elle combine trois superpouvoirs : recherche floue (tape n’importe quel mot-clé), navigation clavier (flèches + Enter), et raccourcis affichés (l’utilisateur apprend progressivement les shortcuts).
Step 4 — The command palette
For power users, the most efficient overlay is neither a modal nor a panel — it’s a search field that controls everything. The command palette, popularized by VS Code (⌘K), Figma, and Linear, is the ultimate keyboard-first overlay.
It combines three superpowers: fuzzy search (type any keyword), keyboard navigation (arrows + Enter), and displayed shortcuts (the user progressively learns the shortcuts).
Ouvre la palette et commence à taper — les résultats se filtrent en temps réel. Utilise les flèches pour naviguer et Enter pour exécuter. Chaque commande affiche son raccourci clavier — l’utilisateur apprend les shortcuts naturellement, sans documentation.
Les clés d’une bonne command palette
- Ouverture instantanée — ⌘K, pas de latence perceptible
- Fuzzy search — “thm” trouve “Changer le thème”
- Résultats groupés — Actions, Préférences, Outils
- Raccourcis visibles — L’utilisateur apprend en utilisant
- Pas de résultat = feedback — “Aucun résultat” est mieux qu’un vide silencieux
- ESC pour fermer — Non négociable
Open the palette and start typing — results filter in real-time. Use arrows to navigate and Enter to execute. Each command shows its keyboard shortcut — the user learns shortcuts naturally, without documentation.
Keys to a good command palette
- Instant opening — ⌘K, no perceptible latency
- Fuzzy search — “thm” finds “Change theme”
- Grouped results — Actions, Preferences, Tools
- Visible shortcuts — The user learns by using
- No result = feedback — “No results” is better than silent emptiness
- ESC to close — Non-negotiable
Aller plus loin — Patterns créatifs
Les fondamentaux sont posés. Mais l’overlay peut aller au-delà du rectangle qui apparaît par-dessus — il peut avoir de la matière, de la spatialité, du caractère. Voici trois explorations qui poussent le concept.
Going further — Creative patterns
The fundamentals are set. But the overlay can go beyond the rectangle that appears on top — it can have materiality, spatiality, character. Here are three explorations that push the concept.
Le flip 3D — L’envers du décor
Et si l’overlay était littéralement au dos de l’interface ? Le flip 3D utilise perspective + rotateY(180deg) + backface-visibility: hidden pour créer un conteneur à deux faces. Le clic fait pivoter l’ensemble de 180° — révélant le panneau caché derrière. Comme retourner une carte.
C’est le pattern parfait pour les panneaux de settings ou de configuration : le contenu principal et ses réglages sont physiquement liés, recto-verso.
The 3D flip — Behind the scenes
What if the overlay was literally on the back of the interface? The 3D flip uses perspective + rotateY(180deg) + backface-visibility: hidden to create a two-faced container. The click rotates it 180° — revealing the hidden panel behind. Like flipping a card.
This is the perfect pattern for settings or configuration panels: the main content and its controls are physically linked, front and back.
Clique l’icône de réglages — l’interface entière pivote pour montrer les paramètres au dos. Le retour se fait avec la flèche ou Escape. L’animation spring donne de la masse au mouvement — on sent le poids de la rotation.
Click the settings icon — the entire interface rotates to show the settings on the back. Return with the arrow or Escape. The spring animation gives mass to the movement — you feel the weight of the rotation.
Le menu radial — L’éventail d’options
Au lieu d’un menu rectangulaire, les options se déploient en arc de cercle autour du bouton déclencheur. Chaque item est positionné via cos(angle) × radius et sin(angle) × radius — de la trigonométrie pure. Le stagger de 40ms entre chaque item crée un effet de flutter séquentiel.
C’est le pattern des menus contextuels dans les apps créatives (Figma, Blender) et des FAB expandables (Material Design). Tous les items sont équidistants du centre — optimal selon la loi de Fitts.
The radial menu — The option fan
Instead of a rectangular menu, options fan out in a semicircle around the trigger button. Each item is positioned via cos(angle) × radius and sin(angle) × radius — pure trigonometry. The 40ms stagger between items creates a sequential flutter effect.
This is the pattern for contextual menus in creative apps (Figma, Blender) and expandable FABs (Material Design). All items are equidistant from the center — optimal according to Fitts’s Law.
Clique le bouton + : cinq options se déploient en arc. Le bouton pivote de 45° pour devenir un ✕. Chaque item a sa propre couleur et son propre label — l’identification est instantanée.
Click the + button: five options fan out in an arc. The button rotates 45° to become an ✕. Each item has its own color and label — identification is instant.
Le split reveal — Le rideau qui s’ouvre
Plutôt que de superposer un overlay par-dessus le contenu, le split reveal écarte le contenu pour révéler ce qui se cache en dessous. Comme un rideau de théâtre, la page se divise en deux et les moitiés glissent vers le haut et le bas, révélant le panneau de notifications.
Le contenu n’est pas masqué — il est déplacé. L’utilisateur sait exactement où il est parti et peut le faire revenir en fermant le panneau.
The split reveal — The opening curtain
Rather than layering an overlay on top of content, the split reveal parts the content to reveal what’s hidden beneath. Like a theater curtain, the page splits in two and the halves slide up and down, revealing the notification panel.
Content isn’t hidden — it’s displaced. The user knows exactly where it went and can bring it back by closing the panel.
Clique la cloche — le dashboard se divise, les notifications apparaissent en dessous avec un stagger progressif. Le contexte n’est pas perdu : l’utilisateur voit le contenu s’écarter et peut le ramener d’un clic.
Click the bell — the dashboard splits, notifications appear underneath with a progressive stagger. Context isn’t lost: the user sees the content part and can bring it back with a click.
Le bon overlay au bon moment
L’overlay parfait est celui que l’utilisateur utilise sans remarquer. Il arrive quand on en a besoin, se ferme comme on s’y attend, et ne laisse pas l’impression d’avoir été interrompu.
- Action critique → Modal dialog avec focus trap et Escape
- Options contextuelles mobile → Bottom sheet avec snap points
- Détails d’un élément → Morph panel, zéro rupture visuelle
- Navigation rapide → Command palette, clavier-first
- Paramètres / config → Flip 3D, recto-verso physique
- Actions rapides → Menu radial, arc trigonométrique
- Panneau caché → Split reveal, le contenu s’écarte
La question n’est jamais “quel overlay utiliser ?” mais “est-ce qu’un overlay est nécessaire ?”. La meilleure interruption est celle qui n’existe pas. Et quand elle doit exister, elle doit être si fluide qu’elle ressemble à une continuation naturelle de l’action — pas à une barrière entre l’utilisateur et son objectif.
The right overlay at the right time
The perfect overlay is one the user uses without noticing. It arrives when needed, closes as expected, and doesn’t leave the impression of being interrupted.
- Critical action → Modal dialog with focus trap and Escape
- Contextual mobile options → Bottom sheet with snap points
- Item details → Morph panel, zero visual disruption
- Fast navigation → Command palette, keyboard-first
- Settings / config → 3D flip, physical front-and-back
- Quick actions → Radial menu, trigonometric arc
- Hidden panel → Split reveal, content parts away
The question is never “which overlay to use?” but “is an overlay necessary?”. The best interruption is one that doesn’t exist. And when it must exist, it should be so fluid it feels like a natural continuation of the action — not a barrier between the user and their goal.