JIT
Grid - Untitled
Log in
Gemini 3.0 Pro
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DVD Bounce Animation</title> <style> body { margin: 0; padding: 0; width: 100vw; height: 100vh; background-color: #000000; overflow: hidden; font-family: sans-serif; } 
    #dvd-logo {
        position: absolute;
        top: 0;
        left: 0;
        width: 200px; /* Reference width */
        height: 88px; /* Reference height */
        will-change: transform, color;
        /* Using currentColor allows us to change the SVG fill by just changing the div's color */
        color: #ff0000; 
    }

    svg {
        width: 100%;
        height: 100%;
        fill: currentColor;
        filter: drop-shadow(0 0 5px rgba(255,255,255,0.2));
    }
</style>
</head> <body> 
<div id="dvd-logo">
    
    <svg viewBox="0 0 200 88" xmlns="http://www.w3.org/2000/svg">
        <defs>
            <style>
                .text { font-family: Arial, Helvetica, sans-serif; font-weight: 900; font-style: italic; }
            </style>
        </defs>
        
        <path d="M 20 72 Q 100 100 180 72 Q 100 85 20 72 Z" ></path>
        
        <text x="100" y="68" text-anchor="middle" class="text" font-size="70" letter-spacing="-2">DVD</text>
        <text x="100" y="84" text-anchor="middle" class="text" font-size="12" letter-spacing="6">VIDEO</text>
    </svg>
</div>

<script>
    (function() {
        const logo = document.getElementById('dvd-logo');
        
        // State
        let x = Math.random() * (window.innerWidth - 200);
        let y = Math.random() * (window.innerHeight - 88);
        let speed = 3.5; // Base speed
        let dx = speed;
        let dy = speed;
        
        // Dimensions
        let logoWidth = logo.offsetWidth;
        let logoHeight = logo.offsetHeight;
        let windowWidth = window.innerWidth;
        let windowHeight = window.innerHeight;

        // Colors
        const colors = [
            '#ff0000', // Red
            '#00ff00', // Green
            '#0000ff', // Blue
            '#ffff00', // Yellow
            '#00ffff', // Cyan
            '#ff00ff', // Magenta
            '#ff8000', // Orange
            '#8000ff'  // Purple
        ];

        function pickRandomColor() {
            const randomIndex = Math.floor(Math.random() * colors.length);
            return colors[randomIndex];
        }
        
        // Set initial color
        logo.style.color = pickRandomColor();

        function updateDimensions() {
            windowWidth = window.innerWidth;
            windowHeight = window.innerHeight;
            logoWidth = logo.offsetWidth;
            logoHeight = logo.offsetHeight;

            // Push inside if out of bounds after resize
            if (x + logoWidth > windowWidth) x = windowWidth - logoWidth;
            if (y + logoHeight > windowHeight) y = windowHeight - logoHeight;
        }

        window.addEventListener('resize', updateDimensions);

        function animate() {
            // Move
            x += dx;
            y += dy;

            let collided = false;

            // Check Horizontal Bounds
            if (x + logoWidth >= windowWidth) {
                x = windowWidth - logoWidth;
                dx = -dx;
                collided = true;
            } else if (x <= 0) {
                x = 0;
                dx = -dx;
                collided = true;
            }

            // Check Vertical Bounds
            if (y + logoHeight >= windowHeight) {
                y = windowHeight - logoHeight;
                dy = -dy;
                collided = true;
            } else if (y <= 0) {
                y = 0;
                dy = -dy;
                collided = true;
            }

            // Change color on collision
            if (collided) {
                // Ensure we pick a different color than the current one
                let newColor = pickRandomColor();
                while (newColor === logo.style.color) {
                    newColor = pickRandomColor();
                }
                logo.style.color = newColor;
            }

            // Apply transform
            logo.style.transform = `translate3d(${x}px, ${y}px, 0)`;

            requestAnimationFrame(animate);
        }

        // Start
        animate();
    })();
</script>
</body> </html>*
Updated files
v1
@megabit
Write a script for the classic "DVD Logo" bounce animation. A rectangle must move diagonally, bounce off the viewport edges, and change its color to a random value upon every collision.