Imaginez ouvrir Google et voir le logo, la barre de recherche et tous les boutons s’écraser au sol comme des objets qu’on lâche dans le vide. Pas un bug – une expérience JavaScript conçue il y a plus de quinze ans, qui continue de circuler sur le web. Google Gravity est peut-être l’easter egg le plus mémorable de l’histoire du navigateur, et pourtant Google n’y est pour rien.
Google Gravity, c’est quoi exactement?
Google Gravity est un easter egg interactif qui applique les lois de la gravité à la page d’accueil du moteur de recherche. Concrètement, dès que la page se charge, chaque élément – logo, barre de recherche, boutons, liens – tombe vers le bas de l’écran comme si la gravité venait d’être activée. Vous pouvez attraper ces éléments avec votre souris, les lancer, les faire rebondir. La barre de recherche reste fonctionnelle.
Ce projet n’a aucun lien officiel avec Google. C’est un programme tiers, entièrement écrit en JavaScript, conçu par un développeur indépendant pour montrer ce qu’un navigateur moderne est capable de faire. Google n’a ni commandé ni intégré cette expérience – la firme de Mountain View a simplement laissé son moteur de recherche servir de décor.
Le résultat ressemble à un mini-jeu de destruction physique, avec la page Google comme terrain de jeu. C’est là toute la force du concept : prendre quelque chose que tout le monde reconnaît immédiatement, et en subvertir complètement le comportement attendu.
Origine et histoire de Google Gravity
Le projet naît en 2009, sous les doigts de Ricardo Cabello, développeur espagnol mieux connu sous son alias Mr.doob. À l’époque, les navigateurs commencent à peine à gérer JavaScript de façon performante, et Cabello cherche à pousser les limites de ce qu’un simple script peut faire dans un onglet de navigateur.
Google Gravity est l’une des premières soumissions à Chrome Experiments, la vitrine de Google dédiée aux projets créatifs exploitant JavaScript, HTML5 et WebGL. Le projet y fait sensation. En 2012, le Chrome Blog le met en avant comme exemple emblématique de la créativité web – ce qui lui vaut une audience massive et une légitimité inattendue pour un programme jamais commandé par Google.
En 2014, tout s’arrête. Google abandonne sa Web Search API, l’interface qui permettait à Google Gravity de simuler une vraie page de recherche fonctionnelle. La version originale devient inaccessible. Mais l’idée survit : des répliques fidèles continuent de circuler, et Mr.doob maintient une version de son projet sur son propre domaine.
Comment ouvrir Google Gravity depuis un navigateur?
La méthode classique repose sur le bouton « J’ai de la chance ». Vous tapez Google Gravity dans la barre de recherche, vous ne validez pas avec Entrée, et vous cliquez directement sur le bouton « J’ai de la chance » qui apparaît sous le champ de recherche. Google vous redirige alors directement vers la page de l’expérience, sans passer par les résultats de recherche.
Problème : ce bouton a quasiment disparu de l’interface Google au fil des années, et il n’existe pas du tout sur mobile. Sur smartphone, vous ne verrez jamais apparaître « J’ai de la chance » sur la page d’accueil de Google. La méthode traditionnelle ne fonctionne donc que sur navigateur desktop.
Pour y accéder directement, quelle que soit votre plateforme, rendez-vous sur le site de Mr.doob via l’URL de son projet Chrome Experiments. Le site elgoog.im propose également une réplique fidèle, accessible aussi bien sur ordinateur que sur mobile. Ces deux alternatives contournent totalement la dépendance à la Search API et fonctionnent de manière autonome.
Google Gravity repose sur une mécanique JavaScript surprenante
Sous le capot, Google Gravity utilise Box2D, un moteur de physique 2D à l’origine développé pour les jeux vidéo. Le script JavaScript identifie chaque élément DOM majeur de la page – logo, barre de recherche, boutons, liens de navigation – et les convertit en objets physiques rigides, appelés « rigid bodies » dans la terminologie Box2D.
Chaque élément reçoit des propriétés physiques précises : masse, friction et restitution (le coefficient de rebond). Des joints invisibles maintiennent initialement chaque élément à sa position d’origine, comme si la page était figée. Dès que vous bougez la souris, ces joints se libèrent simultanément et Box2D applique une force gravitationnelle vers le bas sur l’ensemble des objets.
Le script met ensuite à jour, plusieurs dizaines de fois par seconde, les propriétés CSS de chaque élément HTML – plus précisément les valeurs `transform: translate()` et `rotate()`. C’est cette boucle d’animation continue qui donne l’illusion de physique en temps réel. Le navigateur ne simule rien nativement : tout repose sur du JavaScript qui recalcule et repositionne chaque élément à chaque frame. Pour 2009, c’était une démonstration de force technique remarquable.
Quelles sont les principales variantes de Google Gravity?
Deux variantes principales se sont imposées au fil du temps, chacune avec sa propre mécanique.
Google Gravity Space – aussi appelé Floating Google – a été créé en octobre 2012 par Mr.doob lui-même. Techniquement, la base de code est très proche de la version originale, mais la composante gravitationnelle est supprimée. Les éléments de la page flottent librement dans tous les sens, sans direction privilégiée, comme en apesanteur. L’effet visuel est radicalement différent : là où la version originale simule une chute brutale et des rebonds, Google Space produit une dérive lente et presque hypnotique. C’est le même moteur physique, mais avec une gravité réglée à zéro.
Google Gravity Slime joue sur un registre complètement différent. JavaScript y modifie le rendu des éléments pour leur donner un comportement liquide – les blocs de texte et les boutons se déforment, coulent, s’étirent comme du slime. L’effet est moins précis physiquement que Box2D, mais visuellement plus spectaculaire pour qui aime les animations organiques. Cette variante est développée par des tiers, pas par Mr.doob.
Du point de vue du joueur, ces trois versions proposent des expériences distinctes. La version originale, c’est le run classique – rapide, immédiat, satisfaisant à lancer. Google Space ressemble davantage à un bac à sable zen. Google Slime, lui, penche vers l’expérimentation visuelle pure. Aucune des trois ne propose de vrai système de score ou d’objectif – ce sont des mécaniques de jeu ouvertes, sans win condition.
Peut-on rejouer à Google Gravity aujourd’hui?
La version originale hébergée sur Chrome Experiments a disparu en 2014. Inutile d’espérer la retrouver à son adresse d’origine. Mais l’expérience reste accessible via deux canaux fiables.
Mr.doob maintient son projet directement sur son site personnel. L’URL pointe vers une version autonome qui ne dépend plus de la Web Search API – elle simule la page Google sans requêtes réelles. Le site elgoog.im (littéralement « Google » épelé à l’envers) propose une réplique très fidèle, compatible desktop et mobile, avec les variantes Space et d’autres expériences similaires regroupées au même endroit.
Sur mobile, la version via elgoog.im fonctionne correctement avec le tactile : vous pouvez lancer les éléments avec le doigt. L’expérience est légèrement moins précise qu’à la souris, mais largement suffisante pour comprendre le concept. Sur desktop, Chrome et Firefox gèrent les deux versions sans friction.
Google Gravity illustre la puissance créative du web
En 2009, montrer qu’un navigateur pouvait simuler de la physique en temps réel via JavaScript relevait presque du tour de passe-passe. Flash dominait les expériences interactives avancées sur le web. Chrome Experiments a changé la donne en prouvant que HTML5 et JavaScript pouvaient faire jeu égal – et Google Gravity était l’un des arguments les plus convaincants de cette démonstration.
L’impact culturel dépasse la prouesse technique. Google Gravity a popularisé l’idée que l’interface d’un site web, aussi sérieuse soit-elle, pouvait devenir un terrain de jeu. Cette logique d’easter egg interactif – cacher une expérience ludique dans un produit grand public – s’est largement diffusée depuis. Des studios de jeux vidéo aux applications SaaS, beaucoup ont intégré des clins d’oeil techniques dans leurs produits en s’inspirant de cette culture.
Le projet de Mr.doob a aussi eu un effet pédagogique réel pour des milliers de développeurs qui ont décortiqué son code pour comprendre comment Box2D fonctionnait dans un contexte web, ou comment manipuler le DOM à grande vitesse sans faire crasher le navigateur.
Comment reproduire Google Gravity soi-même?
Le code source de Google Gravity est accessible publiquement sur le repository de Mr.doob. Si vous voulez comprendre la logique ou vous en inspirer, voici les grandes étapes techniques.
La première étape consiste à capturer les éléments DOM cibles – tous les blocs visuels significatifs de la page – et à récupérer leur position initiale via `getBoundingClientRect()`. Vous construisez ensuite un monde Box2D avec une gravité définie (typiquement 9.8 sur l’axe Y), puis vous créez un rigid body Box2D pour chaque élément HTML, avec une forme rectangulaire correspondant à ses dimensions réelles.
La boucle d’animation repose sur `requestAnimationFrame()`. À chaque frame, Box2D calcule les nouvelles positions et angles de chaque corps physique. Vous lisez ces valeurs et les appliquez directement en CSS avec `element.style.transform = ‘translate(x, y) rotate(angle)’`. Le sol est simulé par un corps statique positionné en bas du viewport.
Pour la détection de la souris, vous pouvez créer un rigid body kinématique qui suit le curseur et entre en collision avec les autres objets – c’est ce qui permet de « saisir » et lancer les éléments. Des bibliothèques JavaScript modernes comme Matter.js ou Rapier peuvent remplacer Box2D avec une syntaxe plus contemporaine, si vous partez de zéro aujourd’hui. Le principe reste identique : moteur physique + manipulation CSS en temps réel.
Google Gravity face aux autres easter eggs Google : lequel vaut le détour?
Google a accumulé une collection d’easter eggs au fil des années. « Do a barrel roll » fait pivoter la page de résultats à 360 degrés. La recherche « Thanos » permettait autrefois de faire disparaître la moitié des résultats d’un claquement de doigts. « Zerg rush » envoyait des « O » dévorer les résultats de recherche un par un. Ces easter eggs sont amusants trente secondes – puis c’est tout.
Google Gravity tient sur la durée pour une raison simple : vous pouvez interagir avec lui. Ce n’est pas une animation passive que vous regardez se dérouler. Vous lancez des éléments, vous les rattrapez, vous observez comment ils rebondissent selon leur masse simulée. Il y a une vraie mécanique de jeu, même rudimentaire. C’est là la différence entre un effet visuel et une expérience interactive.
Pour un développeur, Google Gravity a aussi une valeur pédagogique qu’aucun autre easter egg Google n’approche : il montre concrètement ce qu’on peut faire avec un moteur physique dans un navigateur, sans plugin, sans framework lourd. Pour un curieux qui n’a jamais ouvert une console JavaScript, c’est simplement la preuve qu’une page web peut se comporter comme un jeu. Quinze ans après sa création, ce double niveau de lecture reste intact – et c’est exactement ce qui en fait une expérience qui tient dans le temps.