Aller au contenu

playground interactive grid experiment

1 min de lecture

121 billes qui réagissent au curseur. L’idée de cette expérimentation, c’est de créer quelque chose d’interactif et fun : tu passes ta souris, les billes s’attirent. Tu touches l’écran sur mobile, elles convergent vers ton doigt. Tu laches, elles reviennent en place avec un petit rebond. Simple, direct, mais ça marche bien.

Le code derrière utilise JavaScript pour générer la grille dynamiquement, CSS Grid pour la mise en page, et GSAP pour gérer toutes les animations. C’est propre et efficace : effet magnétique au survol, gestion tactile native sur mobile, physique d’élasticité pour le retour.

Une expérimentation qui mixe design et code pour créer une micro interaction engageante. Le genre de truc qu’on a envie de toucher encore et encore parce que c’est fluide et réactif. C’est ça qui m’intéresse : coder des expériences qui donnent envie d’interagir.

Réponse : nice
Réponse : mais dans un site concrètement tu mettrais ça où ?
Moi : pourquoi pas en bas d’une page ?
Moi : Je vais en faire d’autres
En train d’écrire…

Voir d’autres web experiments ici

// d'autres vidéos

J'ai codé une bêta de « like » en octobre pour créer de l'engagement : n'hésite pas à la tester en cliquant sur le cœur !
47

// les plus aimés bêta

Top 10 des articles les plus aimés

Classés par le nombre de cœurs laissés par les lecteurs.

  1. Numéro 147 cœursweb experiments1 minplayground interactive grid experiment121 billes qui réagissent au curseur. L'idée de cette expérimentation, c'est de créer quelque chose d'interactif…Vous lisez cet article
  2. Numéro 229 cœursweb experiments2 minMini Town Builder experimental en three.jsPour tester three.js et ces possibilité j'ai voulu faire un mini jeu RTS isometrique de village…Lire l'article
  3. Numéro 325 cœursblog13 minPourquoi quitter Instagram (et Mark Zuckerberg, accessoirement) et les alternatives éthiques en 2026 ?Pixelfed, Flashes, Glass, Cara, Loops, Mastodon, Bluesky : les alternatives éthiques à Instagram et à X…Lire l'article
  4. Numéro 425 cœursweb experiments2 minAfficher le moment de la journée selon l’heure de notre ordinateurLe principe de ce projet est d'afficher l'image dont l'horaire déclaré est le plus proche de…Lire l'article
  5. Numéro 524 cœursblog2 minLe site WTF de la semaine : Pointer Pointer ! Mais c’est quoi?Tu ne voulais pas passer 10 minutes à cliquer sur un site juste pour voir si…Lire l'article
  6. Numéro 622 cœursévénements2 minMaman, je passe sur Arte!Cocher une ligne de plus sur ma bucket liste des trucs improbables : cette année, Château…Lire l'article
  7. Numéro 719 cœursweb experiments3 minUn livre de code un peu vintage ?Aujourd'hui on m'a envoyé le super real d'un livre de code (un peu) vintage. Il combine…Lire l'article
  8. Numéro 818 cœursPortfolio2 minLes Vacances Romantiques du Château Perché Festival 2026 #sitewebJ’avais posé les bases d’un site volontairement rétro pour l'édition de l'année dérniere : fenêtres flottantes…Lire l'article
  9. Numéro 918 cœursblog3 minGénérateur de signature Gmail professionnelle en quelques clics, enfin disponible!Créer une signature Gmail professionnelle et attrayante peut vite devenir un vrai casse-tête. Beaucoup d'outils gratuits…Lire l'article
  10. Numéro 1017 cœursblog6 minSites de festivals: inspirations web design 2025L’art du web design pour les sites de festivals Créer un site web pour un festival…Lire l'article

// continuer

// classé dans

© 2026 Quentin Renaux. Développé avec passion & trop de café.