Demo Page

I asked chatGPT 4 to write some code with the following parameters:
Make a red ball that follows the mouseover, that when clicked links to a demonstration video for Openai Sora (I provided the youtube link).

Here is what it produced.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mouse-Following Ball with Click Event to YouTube</title>
<style>
#box {
width: 400px;
height: 400px;
border: 2px solid black;
position: relative;
overflow: hidden;
margin: 20px;
}
.ball {
width: 50px;
height: 50px;
position: absolute;
border-radius: 50%;
background-color: red;
}
</style>
</head>
<body>

<div id="box">
<div class="ball"></div>
</div>

<script>
const box = document.getElementById('box');
const ball = document.querySelector('.ball');

box.addEventListener('mousemove', function(e) {
const boxRect = this.getBoundingClientRect();
let mouseX = e.clientX - boxRect.left;
let mouseY = e.clientY - boxRect.top;

const ballX = Math.max(0, Math.min(boxRect.width - ball.offsetWidth, mouseX - ball.offsetWidth / 2));
const ballY = Math.max(0, Math.min(boxRect.height - ball.offsetHeight, mouseY - ball.offsetHeight / 2));

ball.style.left = ballX + 'px';
ball.style.top = ballY + 'px';
});

// Add click event listener to open the specified YouTube video
box.addEventListener('click', function() {
window.open('https://www.youtube.com/watch?v=HK6y8DAPN_0', '_blank');
});
</script>

</body>
</html>

Mouse-Following Ball with Click Event to YouTube