diff --git a/index.html b/index.html index dc9a8df..e80fb16 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,7 @@ - $ + $ diff --git a/src/main.ts b/src/main.ts index ad32657..3891b45 100644 --- a/src/main.ts +++ b/src/main.ts @@ -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); diff --git a/src/style.css b/src/style.css index 6057afb..5628272 100644 --- a/src/style.css +++ b/src/style.css @@ -71,15 +71,24 @@ body { color: var(--fg); display: flex; align-items: center; - gap: 0.6rem; + gap: 0; cursor: text; user-select: none; transition: border-color 200ms ease, box-shadow 200ms ease; position: relative; - white-space: nowrap; overflow: hidden; } +/* one inline container for all the prompt text — keeps spacing exact */ +.line { + flex: 1 1 auto; + min-width: 0; + white-space: pre; + overflow: hidden; + text-overflow: clip; + display: block; +} + .command-box:hover { border-color: var(--accent-soft); } @@ -126,21 +135,14 @@ body { .dollar { color: var(--accent); font-weight: 600; - flex-shrink: 0; } .typed { color: var(--fg); - white-space: pre; -} - -.prompt-space { - white-space: pre; } .user-input { color: var(--fg); - white-space: pre; } /* a real terminal block caret — exactly one monospace char wide, no offset */ @@ -160,7 +162,7 @@ body { } .action-btn { - margin-left: auto; + margin-left: 0.6rem; background: none; border: none; color: var(--dim); @@ -169,7 +171,7 @@ body { display: inline-flex; align-items: center; justify-content: center; - flex-shrink: 0; + flex: 0 0 auto; transition: color 180ms ease, transform 180ms ease; }