<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Smooth Sliding Typing</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background: #181818;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
input {
width: 80%;
padding: 10px;
margin-bottom: 20px;
font-size: 18px;
}
#screen {
width: 80%;
height: 300px;
border: 2px solid #fff;
position: relative;
background: #222;
overflow: hidden;
cursor: crosshair;
}
.char {
position: absolute;
font-size: 20px;
white-space: nowrap;
transition: all 0.2s ease-in-out; /* Smooth transition for appearance */
}
</style>
</head>
<body>
<input type="text" id="userInput" placeholder="Enter your text here" />
<div id="screen"></div>
<script>
const inputField = document.getElementById('userInput');
const screen = document.getElementById('screen');
let text = '';
let currentIndex = 0;
let lastPosition = { x: 0, y: 0 }; // Keep track of last printed position
inputField.addEventListener('input', (e) => {
text = e.target.value; // Update text from input
currentIndex = 0; // Reset typing index
screen.innerHTML = ''; // Clear the screen
});
screen.addEventListener('mousemove', (e) => {
const distance = Math.sqrt(
Math.pow(e.offsetX - lastPosition.x, 2) +
Math.pow(e.offsetY - lastPosition.y, 2)
);
// Only add a character if the mouse moves a certain distance (for smoothness)
if (distance > 15 && currentIndex < text.length) {
const char = document.createElement('span');
char.textContent = text[currentIndex];
char.className = 'char';
// Position the character based on mouse location
char.style.left = `${e.offsetX}px`;
char.style.top = `${e.offsetY}px`;
screen.appendChild(char); // Add character to the screen
currentIndex++;
// Update last position
lastPosition = { x: e.offsetX, y: e.offsetY };
}
});
</script>
</body>
</html>