← Back to portfolio

Case Study — Web Development

TyperSpeed

A typing program that tracks your speed as you write, and changes the color and spacing of the text to reflect it.

Web Development Interaction Design
Typing into the input box and watching the type react in real time.

A p5.js program that tracks your typing along three measures: average speed, fastest speed, and slowest speed. You answer a short prompt in the input box, and the text responds as you write. The default text color is black. Once an average speed has been calculated, each word turns red in sequence, changing at your average speed. A word typed faster than your average turns orange, and a word typed slower turns blue. The spacing of the type shifts too, with the distance between characters expanding as you speed up and closing as you slow down. At the end you get a summary of your speeds. The prompts are borrowed from the Oxford All Souls Exam.

Back to portfolio