JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mouse Movement Recorder</title>
    <style>
        body { font-family: sans-serif; padding: 20px; overflow: hidden; background: #f4f4f9; }
        #status { font-weight: bold; margin-bottom: 10px; color: #333; }
        #output { 
            width: 100%; height: 150px; margin-top: 10px; 
            font-family: monospace; font-size: 12px; 
            background: white; border: 1px solid #ccc; overflow-y: auto; word-break: break-all;
        }
        #ghost-cursor {
            width: 12px; height: 12px; background: red; border-radius: 50%;
            position: absolute; pointer-events: none; display: none;
            box-shadow: 0 0 5px rgba(255,0,0,0.5); z-index: 9999;
        }
        .info { color: #666; font-size: 0.9em; }
    </style>
</head>
<body>

    <div id="status">Click anywhere to start recording...</div>
    <div class="info" id="screen-info"></div>
    <div id="output">Coordinates will appear here...</div>
    <div id="ghost-cursor"></div>

    <script>
        let state = 'WAITING'; // WAITING, RECORDING, FINISHED
        let startTime, timerInterval;
        let originX = 0, originY = 0;
        let currentMouseX = 0, currentMouseY = 0;
        let records = [];

        const statusEl = document.getElementById('status');
        const outputEl = document.getElementById('output');
        const screenEl = document.getElementById('screen-info');
        const ghost = document.getElementById('ghost-cursor');

        // Track current mouse position constantly to have it ready for the 10ms interval
        window.addEventListener('mousemove', (e) => {
            currentMouseX = e.clientX;
            currentMouseY = e.clientY;
        });

        window.addEventListener('click', (e) => {
            if (state === 'WAITING') {
               ...