Toutes les études de cas

Étude de cas, design et interaction

The Long Gallery

Un musée imaginaire en 3D : on avance dans un couloir de tableaux en faisant défiler la page.

Cadre
Expérience, musée fictif
Mon rôle
Design et développement
Format
Galerie interactive
Année
2026
Ouvrir le projet

Le contexte

The Long Gallery est un musée imaginaire : un long couloir où sont accrochés huit tableaux inventés, avec leurs artistes et leurs dates. Je voulais transformer le défilement d'une page en promenade.

Le problème

Sur le web, une galerie est presque toujours une grille de vignettes. On y perd ce qui fait une visite : la distance, la marche, le moment où l'on s'approche d'une œuvre.

Ce que j'ai fait

  1. J'ai construit le couloir en 3D avec des transformations CSS : le défilement fait avancer la caméra, les tableaux apparaissent au loin puis s'effacent une fois dépassés.

  2. Les huit tableaux et leurs cadres dorés sont dessinés entièrement en CSS, avec des dégradés et des ombres, sans aucune image.

  3. Un clic sur un tableau, ou la touche Entrée, amène devant lui, et une plaque indique la salle en cours. Pour les visiteurs qui demandent moins d'animations, les déplacements deviennent instantanés.

HTMLCSSJavaScript

Le résultat

8Tableaux dessinés en CSS, sans image
0Librairie 3D : tout est en CSS
13 KoPoids de la page, sans les polices

Un projet similaire ?
Parlons-en.

Vous aimeriez un projet dans cet esprit ? Décrivez-le-moi en quelques lignes : je réponds sous 24 heures avec mes questions et une première estimation.