Google Gravity Pool Mr Doob

Google Gravity and the Ball Pool are classic web experiments created by developer Mr.doob (Ricardo Cabello). These experiments famously turned the static Google homepage into an interactive physics playground. 🕳️ Google Gravity

This experiment reimagines the Google search page as a collection of physical objects subject to gravity.

The Effect: Once you move your mouse or the page loads, the logo, search bar, and buttons tumble to the bottom of the screen.

Interaction: You can grab any element with your cursor and toss it around. The pieces bounce and collide with realistic physics.

Searching: In the original version, you could actually perform searches, and the results would drop into the pile like falling blocks. 🎱 Ball Pool

While often associated with "Google Gravity," the Ball Pool is a separate, equally popular experiment by Mr.doob.

How it Works: The screen starts as an empty white space. When you click, colorful balls appear and settle at the bottom.

Physics Fun: You can "shake" your browser window to watch the balls bounce wildly or drag individual balls to see them interact with others.

Purpose: It was designed to showcase what modern web browsers could do with JavaScript and physics engines without needing extra plugins. 🚀 How to Try Them Yourself

Since Google has updated its search engine many times, these original experiments are now hosted on dedicated project sites:

Direct Search: Go to Google, type "Google Gravity," and click I'm Feeling Lucky.

Mr.doob’s Site: Visit the official projects directly at mrdoob.com for the original experience.

Archived Versions: Sites like elgooG maintain enhanced versions that still support modern search features.

💡 Pro Tip: If you're on a phone or tablet, tilting your device will cause the pieces to slide and tumble in the direction of the tilt. If you'd like to find more hidden tricks like these: Try searching for Google Space (also by Mr.doob). Look up Google Underwater or Google Sphere.

Ask me for a list of active Google Easter eggs you can use right now in your search bar. Which experiment Ball Pool by Mr.doob - Experiments with Google

Google Gravity and Ball Pool: A Technical Retrospective of Mr.doob’s Browser Experiments Google Gravity

are seminal web experiments created by computer-graphics programmer Ricardo Cabello , popularly known as google gravity pool mr doob

. Released in early 2009, these projects served as early masterclasses in interactive web design, showcasing the then-emerging capabilities of JavaScript 1. Google Gravity: The Physics of Interface

Google Gravity reimagines the world’s most familiar interface—the Google Search page—as a collection of physical objects subject to Newtonian laws. Mechanism:

Upon loading, the DOM (Document Object Model) elements—including the logo, search bar, and buttons—lose their fixed positions and "collapse" to the bottom of the viewport. Interactivity:

Users can click and drag individual page components, tossing them against the edges of the browser window where they bounce and collide with realistic physics. Historical Legacy: Originally featured on Chrome Experiments

, it became an internet classic for turning a static search utility into a playful physics playground. 2. Ball Pool: Foundations of Fluid Motion Released just before Google Gravity in February 2009,

focuses on high-performance particle physics within the browser. User Interaction:

The experiment allows users to create colored spheres by clicking in empty space or "shake" the browser window to disturb the existing pool of balls. Simulation Depth:

It utilizes a physics engine to handle continuous collision detection and velocity damping, ensuring that hundreds of objects can interact smoothly without overlapping or "leaking" through boundaries. 3. Underlying Technology and Engineering

Mr.doob utilized a combination of cutting-edge web standards and custom physics logic to achieve these effects: Mr.doob - Experiments with Google

Part 7: Variations and Spin-Offs

The success of Google Gravity Pool Mr Doob led to dozens of spin-offs. You might also enjoy:

🔍 Google Gravity (by Mr. Doob)

What it is:
A playful JavaScript experiment where the Google homepage collapses under simulated gravity. Elements (search box, buttons, logos) fall, break apart, bounce, and can be dragged or thrown around the screen.

Experience:

Verdict:
✅ Fun factor: High — it’s a delightful “break the interface” toy.
✅ Technical wow: For 2009–2010, this was mind-blowing in a browser. Still impressive.
⚠️ Practical use: None. It’s pure entertainment.

Rating: ⭐⭐⭐⭐½ (4.5/5) — loses half a star because it’s short-lived novelty.

Part 8: Why Doesn’t Google Officially Own This?

Given the popularity of "Google Gravity Pool Mr Doob," why hasn't Google turned it into a permanent setting?

The answer is brand safety and UX. While Mr. Doob has worked for Google, his experiments are personal projects. Google’s official stance is that their homepage must be load fast, accessible, and predictable. A gravity pool that breaks the layout would confuse blind users (screen readers) and cause performance issues on low-end devices. Furthermore, the "broken" logo violates Google’s visual identity guidelines. Google Gravity and the Ball Pool are classic

That said, Google has famously embraced the spirit of these experiments with official Easter eggs like:

But nothing as chaotic as Mr. Doob’s gravity pool.

Part 2: What is the "Pool" in Google Gravity Pool?

This is where the keyword gets interesting. The standard Google Gravity is chaotic—everything falls in a pile at the bottom of the window. But "Google Gravity Pool" refers to a specific variation or a subsequent experiment where Mr. Doob (or inspired developers) contained the falling objects inside a virtual pool table or a "pocket" environment.

In the "pool" version, the gravity doesn't just pull things straight down. Instead, the Google elements fall into a confined well or a simulated "pool of water" or "pool table felt." The key characteristics of the Pool version include:

Most users searching for "Google Gravity Pool Mr Doob" are looking for the version where you can drag the Google logo and watch it slide across a frictionless "pool surface" before knocking over the search button like a billiard ball.

Google Gravity (Mr.doob) — Detailed overview and how to use it

What it is

Key technical elements

How it typically works (implementation steps)

  1. Capture the target elements:
    • Query the DOM for elements to animate (logo, search input, buttons, footer links).
  2. Prepare elements for physics:
    • Set style: position: absolute; left/top based on their current boundingClientRect; set will-change: transform.
    • Store each object’s physical properties: mass, width/height, position, velocity, restitution.
  3. Build the physics loop:
    • On each frame: apply gravity (vy += g * dt), integrate velocities into positions (pos += vel * dt), handle damping.
  4. Collision detection and response:
    • Check each object against viewport bounds; when colliding, invert/scale velocity by restitution and apply friction.
    • Optionally check pairwise collisions and resolve by separating overlapping objects and exchanging momentum.
  5. Mouse interaction:
    • Track mouse position; apply attractive/repulsive force or implement dragging constraints when clicking an element.
  6. Render:
    • Update element transforms with CSS: transform: translate3d(xpx, ypx, 0) rotate(angle).
  7. Cleanup:
    • Restore original page behavior when experiment ends (re-enable normal positioning and handlers).

How to try it (actionable ways)

Design and UX tips

Legal and ethical notes

Learning value

Quick starter code snippet (conceptual)

for each element:
  rect = element.getBoundingClientRect()
  set element.style.position = 'absolute' at rect.left/top
  body =  x: rect.left, y: rect.top, vx:0, vy:0, mass:1
loop(timestamp):
  dt = time since last frame
  for each body:
    body.vy += gravity * dt
    body.x += body.vx * dt
    body.y += body.vy * dt
    if body hits bottom: body.y = floor; body.vy *= -restitution
    element.style.transform = `translate3d($body.xpx, $body.ypx, 0) rotate($angledeg)`
  requestAnimationFrame(loop)

(Implement full collision handling, mouse forces, and performance optimizations in real code.)

Further exploration

If you’d like, I can generate a runnable HTML + JS example you can open locally that recreates a simple Google Gravity effect. Which option do you prefer: a minimal demo, a matter.js-based version, or a version with drag-and-drop and touch support? Part 7: Variations and Spin-Offs The success of

Google Gravity are two of the most iconic interactive web experiments created by

(Ricardo Cabello), a pioneer in creative coding and the creator of the 3D library.

These experiments were originally part of Google's "Chrome Experiments" to showcase the capabilities of modern browsers (like HTML5 and JavaScript) without the need for plugins like Flash. Google Gravity

This experiment presents a functional version of the Google homepage that instantly collapses as if hit by gravity. The Experience: When you visit the Google Gravity page

, all UI elements (the logo, search bar, and buttons) fall to the bottom of the screen. Interactivity:

You can click and "throw" any element around the screen, and they will bounce off each other with realistic physics. Hidden Feature:

It is still a functional search engine. If you type a query and press enter, the search results will also drop from the top and pile up on the floor. How to find it: You can search "Google Gravity" on Google and click the "I'm Feeling Lucky" button to jump directly to it. Often associated with the "pool" part of your query, is a minimalist physics simulation. The Experience:

A screen full of colorful balls that react to your mouse movements and browser window. Key Interactions: Move individual balls around.

Move your browser window quickly to watch the balls bounce wildly. Click on empty space to spawn new balls. Double-click to clear the screen. Other Variations by Mr.doob Mr.doob | Three.js Quake

2009 / 11 / 04. Checkboxes Ball 2009 / 11 / 04. Google Sphere 2009 / 05 / 28. Google Gravity 2009 / 03 / 18. Ball Pool 2009 / 02 / Ball Pool - Mr.doob

Hello! This is how it works: 1. Drag a ball. 2. Click on the background. 3. Shake your browser. 4. Double click. 5. Play! Google Gravity - Mr.doob

Sign in. Google Search I'm Feeling Lucky. Advertising Programs Business Solutions Privacy & Terms +Google About Google. Experiment Description Google Space

A zero-gravity version where elements float aimlessly, similar to being in orbit. Google Sphere

The search elements rotate around the center of the screen in a 3D orbital pattern. technical details on how these were built, or are you trying to find a specific version of these experiments? Mr.doob | Three.js Quake

2009 / 11 / 04. Checkboxes Ball 2009 / 11 / 04. Google Sphere 2009 / 05 / 28. Google Gravity 2009 / 03 / 18. Ball Pool 2009 / 02 / Ball Pool - Mr.doob

Hello! This is how it works: 1. Drag a ball. 2. Click on the background. 3. Shake your browser. 4. Double click. 5. Play! Google Gravity - Mr.doob

Sign in. Google Search I'm Feeling Lucky. Advertising Programs Business Solutions Privacy & Terms +Google About Google. mrdoob/three.js: JavaScript 3D Library. - GitHub

Method 2: The "I'm Feeling Lucky" Trick (The Classic Way)

This method works intermittently depending on your region and whether you have "Instant Results" turned on.

  1. Go to google.com.
  2. Make sure Google Instant Predictions are turned off:
    • Go to Settings (bottom right corner) -> Search settings.
    • Find "Autocomplete with trending searches" or "Google Instant predictions" and turn it OFF.
    • Save preferences.
  3. Type "Google Gravity" into the search box.
  4. Do NOT press Enter. Instead, look at the buttons below the search bar.
  5. Click the "I'm Feeling Lucky" button.
  6. Google will redirect you to the Mr. Doob Google Gravity page.
x