Adjust typing animation and command display spacing

Refactor HTML structure for command input to use a single inline container with `white-space: pre` to precisely control spacing, and adjust JavaScript to add a trailing space to the typed text and increase the pause before the enter key press in the auto-type animation.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 6def8112-39d2-4641-b93b-f39108179f33
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 3f816ee5-1289-41ac-aa73-2bd1494876d3
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/42ae33dd-8759-4196-85a5-434465c72ece/6def8112-39d2-4641-b93b-f39108179f33/roUqm0y
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
keshavananddev
2026-04-24 03:55:18 +00:00
parent 4d0c742b02
commit 8b307b42b3
3 changed files with 19 additions and 16 deletions

View File

@@ -57,7 +57,8 @@ function typeIntro(target: string, onDone?: () => void) {
function nextChar() {
if (i >= target.length) {
typedEl.textContent = resolved;
// append a trailing space so the caret rests one char past the prompt
typedEl.textContent = resolved + ' ';
onDone?.();
return;
}
@@ -81,7 +82,7 @@ function typeIntro(target: string, onDone?: () => void) {
}
if (reduceMotion) {
typedEl.textContent = COMMAND;
typedEl.textContent = COMMAND + ' ';
inputEnabled = true;
} else {
setTimeout(() => typeIntro(COMMAND, () => {
@@ -254,8 +255,8 @@ async function autoTypeHelp() {
await sleep(60);
}
// PHASE 3 — quick read pause + ripple from the box itself
await sleep(220);
// PHASE 3 — let the user read "-h" before it fires, then ripple from the box
await sleep(850);
const boxRect = commandBox.getBoundingClientRect();
spawnRipple(boxRect.right - 24, boxRect.top + boxRect.height / 2);