Jules Charles
Toutes les études de cas

Étude de cas, design et interaction

Planètes

Un collage en papier découpé : on attrape les planètes, on les déplace, et elles se font scotcher là où on les lâche.

Cadre
Expérience, collage interactif
Mon rôle
Design et développement
Format
Page interactive
Année
2026
Ouvrir le projet

Le contexte

Planètes est un collage interactif, présenté comme un guide de terrain en papier découpé. Une expérience pour donner de la matière à une page web.

Le problème

Le web est souvent lisse et parfait. Je voulais retrouver l'imperfection du papier : des bords déchirés, du scotch, des ombres, et le plaisir de manipuler des objets.

Ce que j'ai fait

  1. Chaque planète a des bords déchirés générés aléatoirement en CSS (clip-path), et une texture de papier en SVG.

  2. Au chargement, les pièces tombent sur le bureau une par une. On peut ensuite les attraper et les déplacer à la souris, au doigt ou au clavier.

  3. À chaque dépôt, un morceau de scotch vient coller la pièce, et l'ancien se déchire quand on la reprend.

HTMLCSS clip-pathSVGJavaScript

Le résultat

12Pièces de papier à déplacer
0Image : papier, scotch et planètes sont en CSS et SVG
3Façons de déplacer une pièce : souris, doigt ou clavier

Un peu d'imperfection rend une interface plus mémorable qu'un rendu trop parfait.

Ce que j'en retiens

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.