Google Gravity Slime Mr Doob [hot]

Google Gravity is a famous interactive web experiment created by developer Mr.doob (Ricardo Cabello) that turns the standard Google homepage into a physics-driven playground.

The Technical Magic Behind the Mess

Why do developers still study Mr. Doob’s work? Because he built these toys before WebGL was mainstream. Google Gravity Slime Mr Doob

Ricardo Cabello is also the creator of other famous browser toys often associated with "Google Gravity": Google Gravity is a famous interactive web experiment

These weren't just gimmicks—they were proof-of-concepts for what would become browser-based games, interactive ads, and 3D product configurators. Implemented as a client-side web page using JavaScript

How it works (technical summary)

• Implemented as a client-side web page using JavaScript and HTML/CSS.
• Uses a 2D physics engine (often a lightweight physics library or custom code) to simulate gravity, collisions, and constraints for DOM elements.
• Each visible page element (logo, search bar, buttons, links) is mapped to a physics body; positions are updated each animation frame and applied to element styles (CSS transforms/position).
• Event handlers allow dragging, throwing, and interacting with elements (mouse/touch).
• May use requestAnimationFrame for smooth animation and CSS transforms for performance.
• Does not require server-side components beyond hosting static assets.

: You can click and drag any element to toss it around, watch it bounce off the edges, or stack items on top of each other. Functionality

Physics Engine: The experience is powered by Box2DJS, a JavaScript port of the Box2D physics engine. This allows the page elements to calculate collisions, friction, and momentum realistically.