"Design from the distance between eye, screen, pen, and paper."
The scene beside paper
The primary scene is not a desk with three monitors. It is a phone or tablet propped beside paper while one hand holds a pen. Layout begins from that physical arrangement.
Make it interface state
Give the passage a readable measure, generous line height, large serif type, and a user-controlled size. Keep controls reachable without letting them squeeze the text into a narrow card inside another card.
When help becomes interference
Desktop-first chrome produces tiny prose and sideways attention on mobile. Fixed pixels ignore eyesight and viewing distance. A beautiful notebook metaphor that makes copying harder has failed its only job.
Test from the hand outward
Do not judge “The Notebook-Side Screen” from a browser screenshot alone. Put a pen in one hand and touch the screen only when necessary; trace type size, button distance, scrolling, rotation, and failure. If one enhancement is denied, the passage must remain readable and transcribed state writable.
Verify it
Sketch the passage at phone and tablet widths beside an actual sheet of paper. Include a small phone, large tablet, bright and dark rooms, and keyboard-only use. Count how often the feature steals the eyes from the pen instead of merely admiring its appearance.
Disappearing still needs state
Hiding chrome, acquiring wakefulness, and attaching a photo must all be reversible. Exit, release, deletion, and failure copy let technology disappear while remaining able to explain itself when needed.