☰

Google Gravity Effect

Adds a gravity effect to elements on the Google homepage.

// ==UserScript==
// @name         Google Gravity Effect
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  Adds a gravity effect to elements on the Google homepage.
// @match        *://google.com/*
// @match        *://www.google.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Load Matter.js library and wait for it to be ready
    const matterScript = document.createElement('script');
    matterScript.src = 'https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.17.1/matter.min.js';
    matterScript.onload = () => waitForElements();
    document.head.appendChild(matterScript);

    function waitForElements() {
        // Wait for the Google logo and search bar to be available in the DOM
        const checkExist = setInterval(() => {
            const logo = document.getElementById('hplogo');
            const searchBar = document.querySelector('input[name="q"]');
            const buttons = document.querySelectorAll('input[type="submit"]');
            
            if (logo && searchBar && buttons.length > 0) {
                clearInterval(checkExist);
                startGravity(logo, searchBar, buttons);
            }
        }, 100);
    }

    function startGravity(logo, searchBar, buttons) {
        const { Engine, Render, World, Bodies, Events } = Matter;
        const engine = Engine.create();

        // Setup rendering
        const render = Render.create({
            element: document.body,
            engine: engine,
            options: {
                width: window.innerWidth,
                height: window.innerHeight,
                wireframes: false,
                background: 'transparent'
            }
        });
        
        Render.run(render);

        // Create physical bodies for elements
        const logoBody = createBodyFromElement(logo);
        const searchBarBody = createBodyFromElement(searchBar);
        const buttonBodies = Array.from(buttons).map(createBodyFromElement);

        // Add elements to the world
        World.add(engine.world, [logoBody, searchBarBody, ...buttonBodies]);

        // Add ground
        const ground = Bodies.rectangle(window.innerWidth / 2, window.innerHeight + 50, window.innerWidth, 20, { isStatic: true });
        World.add(engine.world, ground);

        // Run the engine
        Engine.run(engine);

        function createBodyFromElement(element) {
            const rect = element.getBoundingClientRect();
            const body = Bodies.rectangle(rect.left + rect.width / 2, rect.top + rect.height / 2, rect.width, rect.height, {
                restitution: 0.5,
                friction: 0.3
            });

            // Sync body position with element
            Events.on(engine, 'afterUpdate', () => {
                element.style.position = 'absolute';
                element.style.left = `${body.position.x - rect.width / 2}px`;
                element.style.top = `${body.position.y - rect.height / 2}px`;
                element.style.transform = `rotate(${body.angle}rad)`;
            });

            return body;
        }
    }
})();