typodojo
Open the studio

Animation · Interaction

Words that answer.

Motion is a word arriving on its own. Interaction is a word replying to you: it leans when you hover, lands when you click, follows when you drag. On a screen, the reply is part of the type.

Try every kindtypodojo.js

Ten kinds

Every event has a reply.

Each one below is live. Each also has a way in by keyboard, and with reduced motion each reply becomes a change you can see without anything moving.

  • hover

    The letters near your pointer rise and grow heavier, the way an eye lands on a word.

    data-typo-on="hover"Keys: arrow left and right

  • click

    One press, one reply: the word lands, letter after letter.

    data-typo-on="click"Keys: Enter or Space

  • double click

    Asked twice, the word writes itself again, stroke by stroke, in the order it was drawn.

    data-typo-on="dblclick"Keys: Enter

  • right click

    The letters scatter and find their places again. Use it sparingly; the menu belongs to the reader everywhere else.

    data-typo-on="context"Keys: Menu, Shift F10 or Enter

  • drag

    Pull the word and the letters follow in a line, each a little behind the one before. Let go and they come home.

    data-typo-on="drag"Keys: arrows

  • tap

    A drop of ink where you touch, and the letters near it dip, like water.

    data-typo-on="press"Keys: Enter or Space

  • long press

    The longer you hold, the heavier the ink. Let go and it settles. Patience, rewarded.

    data-typo-on="hold"Keys: hold Space

  • scroll

    The word gathers itself as it comes into view. Your scrolling is the timeline.

    data-typo-on="scroll"Keys: scroll as usual

  • focus and keys

    Tab to it and a brush underlines it. Type a letter it holds and that letter jumps.

    data-typo-on="focus"Keys: Tab, then letters

  • typing

    What you write is set as you write it, each new letter landing on the line.

    data-typo-on="type"

Four rules for words that answer.

A reply is a promise: something happened, and the page noticed. Keep the promise small and keep it honest.

Answer what was asked

The reply should match the gesture. A hover leans, a click lands, a drag follows. Surprise is for the second visit.

Fast to start, slow to settle

Begin within a tenth of a second, then take your time coming to rest. The reader should never wait for the word.

Every gesture has a key

Anything a pointer can do, a keyboard can too. Every kind here shows its keys.

Still is an answer

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