Put typy's next word beside the target at matching size #257

Merged

teahubxyz merged 1 commits from typy/inline-preview-254 into main

2026-10-24 23:50:30 +00:00

teahubxyz commented

2026-10-24 23:48:41 +00:00

Owner

The user reached the 80s after the responsiveness fix and requested a similarly sized, fainter next word to the right.

Change

Put the upcoming word on the same baseline to the right of the current target, with identical font size, weight, and tracking.
Use a fainter preview color and remove the small separate “up next” label.
Anchor the active word independently of preview length. Long previews truncate within the available space.
Keep long active words fitted on phones; turning preview off restores the centered target.
Refit immediately when preview settings change, including a paused replay.

Verification

Existing six normal-motion responsiveness checks pass: instant targets, no idle DOM changes, 160 WPM spaced input in both advancement modes, and 390/360 px long-word layouts.
Independent desktop and phone inspection passed. Both words measured 114 px on desktop and 43.29 px on phone with the same baseline/tracking.
Short-to-long preview changes moved the active anchor by 0 px. Toggling preview off and on restored the original anchor with 0 px drift.
No overlap, horizontal overflow, or active-word animation.
Reviewed app SHA-256: f20a03cd7cd422fb1157b28e56c224afd02ac68554e90a2ff828fe4cb99e3964.

Live release

Deployed https://typy.yolopreneur.lol/ from merged main 1810deab1d58de81c475378d5af290478c94836c, Worker revision 3569fe77691ca852. Repository CI run 2369 passed before merge. Deployment receipt: mac-f2bcf40c056f4d598e823aea392f41a4.

Live health returned the correct source/revision, and the served app and stylesheet hashes matched the reviewed files. Production checks at 1440, 390, and 360 px confirmed matching font sizes, right-hand placement, matching baseline, fainter color, no horizontal overflow, and zero target animations or browser script errors.

Refs #254.

The user reached the 80s after the responsiveness fix and requested a similarly sized, fainter next word to the right. ## Change - Put the upcoming word on the same baseline to the right of the current target, with identical font size, weight, and tracking. - Use a fainter preview color and remove the small separate “up next” label. - Anchor the active word independently of preview length. Long previews truncate within the available space. - Keep long active words fitted on phones; turning preview off restores the centered target. - Refit immediately when preview settings change, including a paused replay. ## Verification - Existing six normal-motion responsiveness checks pass: instant targets, no idle DOM changes, 160 WPM spaced input in both advancement modes, and 390/360 px long-word layouts. - Independent desktop and phone inspection passed. Both words measured 114 px on desktop and 43.29 px on phone with the same baseline/tracking. - Short-to-long preview changes moved the active anchor by 0 px. Toggling preview off and on restored the original anchor with 0 px drift. - No overlap, horizontal overflow, or active-word animation. - Reviewed app SHA-256: `f20a03cd7cd422fb1157b28e56c224afd02ac68554e90a2ff828fe4cb99e3964`. ## Live release Deployed https://typy.yolopreneur.lol/ from merged main `1810deab1d58de81c475378d5af290478c94836c`, Worker revision `3569fe77691ca852`. Repository CI [run 2369](https://teahub.xyz/teahubxyz/time/actions/runs/2369) passed before merge. Deployment receipt: `mac-f2bcf40c056f4d598e823aea392f41a4`. Live health returned the correct source/revision, and the served app and stylesheet hashes matched the reviewed files. Production checks at 1440, 390, and 360 px confirmed matching font sizes, right-hand placement, matching baseline, fainter color, no horizontal overflow, and zero target animations or browser script errors. Refs #254.

teahubxyz added 1 commit 2026-10-24 23:48:53 +00:00