Animation · Interaction

Words that answer.

Motion is a word arriving. Interaction is a word replying: it leans on hover, lands on click, follows a drag.

Ten kinds

Every event has a reply.

All live, all keyboard-ready. With reduced motion, each reply changes without moving.

hover
Letters near your pointer rise and thicken, like an eye landing.
data-typo-on="hover"Keys: arrow left and right
click
One press: the word lands, letter by letter.
data-typo-on="click"Keys: Enter or Space
double click
The word rewrites itself in its stroke order.
data-typo-on="dblclick"Keys: Enter
right click
Letters scatter and regroup. Use sparingly; the menu is the reader's.
data-typo-on="context"Keys: Menu, Shift F10 or Enter
drag
Pull it and the letters trail behind. Let go and they come home.
data-typo-on="drag"Keys: arrows
tap
Ink drops where you touch; nearby letters dip like water.
data-typo-on="press"Keys: Enter or Space
long press
The longer you hold, the heavier the ink. Patience, rewarded.
data-typo-on="hold"Keys: hold Space
scroll
The word gathers as it scrolls into view.
data-typo-on="scroll"Keys: scroll as usual
focus and keys
Tab in for a brush underline. Type one of its letters and it jumps.
data-typo-on="focus"Keys: Tab, then letters
typing
Each letter lands as you type it.
Type a worddata-typo-on="type"

A reply says the page noticed. Keep it small and true.

Match the gesture. Save surprise for the second visit.

Begin within a tenth of a second, then settle slowly. Never make the reader wait.

Anything a pointer can do, a keyboard can too.

With reduced motion, the word replies by weight or a line.