Grille. Carousel. Lightbox. Trois patterns, et c’est à peu près tout ce que le web utilise pour afficher des collections d’images.
Pourtant, il existe des layouts qui réagissent au doigt, au curseur, au mouvement — et qui rendent l’exploration bien plus engageante qu’un simple “suivant / précédent”. En voici 5, avec des démos interactives que tu peux manipuler directement. Chaque pattern a une version desktop et mobile — bascule entre les deux pour voir comment l’interaction s’adapte.
Grid. Carousel. Lightbox. Three patterns, and that’s about all the web uses to display image collections.
Yet there are layouts that respond to touch, cursor, and motion — making exploration far more engaging than a simple “next / previous”. Here are 5 of them, with interactive demos you can play with directly. Each pattern has a desktop and mobile version — switch between them to see how the interaction adapts.
1. La grille élastique
1. The elastic grid
Clique sur n’importe quelle cellule : elle prend toute la place dont elle a besoin, les autres s’écartent. Re-clique pour la passer en plein écran. Pas de modale, pas de changement de contexte — tout se passe dans le même espace.
Pourquoi ça marche : le cerveau comprend immédiatement la relation spatiale. L’image ne “s’ouvre” pas dans une couche séparée — elle se déploie là où elle est. Zéro charge cognitive.
Click any cell: it takes up all the space it needs, and the others move aside. Click again to go full screen. No modal, no context switch — everything happens in the same space.
Why it works: the brain immediately grasps the spatial relationship. The image doesn’t “open” in a separate layer — it expands right where it is. Zero cognitive load.
2. Le filmstrip à momentum
2. The momentum filmstrip
Un carousel classique snap d’une image à l’autre. Le filmstrip, lui, a de l’inertie : quand tu swipes, les cartes continuent de glisser naturellement puis décélèrent, comme un objet physique. Les cartes en périphérie se tournent légèrement — comme des pochettes de disques dans un bac.
Pourquoi ça marche : le momentum reproduit un comportement physique. L’interaction devient instinctive : on “lance” les cartes, on les rattrape, on explore par le geste plutôt que par des boutons.
A classic carousel snaps from one image to the next. The filmstrip has inertia: when you swipe, the cards keep sliding naturally and then decelerate, like a physical object. Cards on the edges tilt slightly — like vinyl records in a crate.
Why it works: momentum mimics physical behavior. The interaction becomes instinctive: you “fling” the cards, catch them, and explore through gesture rather than buttons.
3. L’accordéon panoramique
3. The panoramic accordion
Les images sont placées côte à côte en lames verticales. Au survol (desktop) ou au tap (mobile), une lame s’ouvre et révèle le panorama complet. Les autres se compriment pour lui laisser la place.
Pourquoi ça marche : toutes les images restent visibles en permanence. L’utilisateur a une vue d’ensemble et peut explorer sans perdre le contexte. Parfait pour comparer des ambiances, des paysages, ou des variantes d’un même produit.
Images are placed side by side as vertical slats. On hover (desktop) or tap (mobile), a slat opens and reveals the full panorama. The others compress to make room.
Why it works: all images remain visible at all times. The user has an overview and can explore without losing context. Perfect for comparing moods, landscapes, or variations of the same product.
4. La loupe vivante
4. The living lens
Une grille dense de miniatures. Sur desktop, le curseur agit comme une loupe magnétique : les cellules proches grossissent avec un effet fisheye, du tilt 3D et un boost de luminosité. Sur mobile, glisse ton doigt sur la grille pour le même effet. Tap sur une cellule pour l’ouvrir en détail.
Pourquoi ça marche : on peut afficher beaucoup d’images dans peu d’espace sans sacrifier l’exploration. Le zoom local permet de “scanner” rapidement la grille tout en gardant le contexte global.
A dense grid of thumbnails. On desktop, the cursor acts as a magnetic lens: nearby cells enlarge with a fisheye effect, 3D tilt, and a brightness boost. On mobile, drag your finger across the grid for the same effect. Tap a cell to open it in detail.
Why it works: you can display many images in a small space without sacrificing exploration. The local zoom lets you quickly “scan” the grid while keeping the global context.
5. Le wallet stack
5. The wallet stack
Inspiré d’Apple Wallet : les cartes sont empilées, chaque carte dépasse juste assez pour montrer son header. Au tap, une carte se déplie et les autres se compressent. Swipe vers le bas pour refermer.
Pourquoi ça marche : tout le monde connaît ce pattern grâce à iOS — mais personne ne l’utilise pour naviguer du contenu visuel. La pile invite naturellement à explorer, le dépliage récompense le tap.
Inspired by Apple Wallet: cards are stacked, each one peeking out just enough to show its header. On tap, a card unfolds and the others compress. Swipe down to close.
Why it works: everyone knows this pattern thanks to iOS — but nobody uses it for browsing visual content. The stack naturally invites exploration, and the unfolding rewards the tap.
Ces 5 patterns sont implémentés avec Motion et du CSS. Pas de librairie exotique — juste des springs, des transforms et un peu d’imagination. Chacun peut remplacer un carousel dans un contexte différent : galerie produit, portfolio, storytelling, comparatif.
La prochaine fois que tu poses un <Carousel />, demande-toi si tes images ne méritent pas mieux.
These 5 patterns are built with Motion and CSS. No exotic library — just springs, transforms, and a bit of imagination. Each one can replace a carousel in a different context: product gallery, portfolio, storytelling, comparison.
Next time you drop in a <Carousel />, ask yourself if your images don’t deserve better.