A quirky animation snippet with a sneaky bug.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Spot the Bug - Tiny Animation</title>
<style>
body { display:flex; align-items:center; justify-content:center; height:100vh; background:#111; color:#fff; margin:0; }
#stage { width:200px; height:200px; position:relative; }
.orb { width:40px; height:40px; border-radius:50%; background:#4af; position:absolute; top:80px; left:0; }
</style>
</head>
<body>
<div id="stage">
<div class="orb" id="dot"></div>
</div>
<script>
// Simple loop that animates the orb across the stage
const dot = document.getElementById('dot');
let t = 0;
function animate(){
t += 0.05;
const x = (Math.sin(t) * 80) + 60; // quirky path
dot.style.left = x + 'px';
requestAnimationFrame(animate);
}
// Start immediately
animate();
</script>
</body>
</html>
Reply with what is broken and how you would fix it.
