Designing Interfaces for Vertical Writing Systems
Components
The interaction primitives of a vertical interface · buttons, toggles, dialogs, lists · each answering a design question the horizontal web never had to. Real, accessible React components you copy into your project with one command. Below, four of them replay as they behave on the reading axis.
Or copy them straight into your project. Run init once for the tokens, then add any component.
Applications
What happens when vertical-first thinking is applied to actual product categories.
What This Project Explores
Open questions, and the principles derived from trying to answer them.
Should a sheet animate from screen geometry or reading direction?
How should mixed CJK and Latin content behave in the same column?
Where does the navigation rail belong in a vertical-first interface?
How does text selection work when reading flows top-to-bottom, right-to-left?
Where does the IME candidate window appear when input is vertical?
What do the arrow keys mean in a vertical, RTL interface?
How does drag-and-drop reordering work when list items are columns?
How should AI chat interfaces adapt to vertical writing systems?
Respect Reading Flow
Begin with how the reader moves, not convention.
Motion Has Meaning
Animation reinforces reading direction, never decoration.
Interaction Before Typography
Behavior is the goal; typography enables it.
Mixed Language First
Design for mixed scripts, not the average.
Accessibility Is Fundamental
Keyboard, touch, screen reader, reduced motion, built in.
Research Never Ends
Document open questions beside resolved ones.
Playground
The full playground, embedded. Language, writing and reading direction, theme, device, and type size · every control updates the canvas live.