.badge background: #1e2a3e; padding: 6px 14px; border-radius: 60px; font-size: 0.8rem; font-weight: 500; color: #b9e6ff; font-family: monospace; border: 1px solid #2d4055;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <title>osu! replay viewer · live visualization</title> <style> * box-sizing: border-box; user-select: none; /* smoother drag/scrub interactions */ osu replay viewer
// animation loop (requestAnimationFrame) let lastFrameTime = 0; function startAnimation() if (animationId) cancelAnimationFrame(animationId); function animate(now) if (!isPlaying) return; if (lastFrameTime === 0) lastFrameTime = now; let delta = Math.min(100, now - lastFrameTime); if (delta > 0) let step = delta * 1.0; // 1x speed, can modify let newTime = currentTime + step; if (newTime >= totalDuration) newTime = totalDuration; setCurrentTime(newTime); isPlaying = false; playPauseBtn.innerHTML = '▶ PLAY'; cancelAnimationFrame(animationId); animationId = null; lastFrameTime = 0; return; .badge background: #1e2a3e