2019: React.js; Menus & Music

In a year when I became an uncle for the first time, I wanted to create something like the toy keyboards I played with as a child— a visual and musical curiosity experience. At the time of writing, I was taking electives in American Sign Language and basic Chinese.

The result: a visual & musical keyboard written in React.js, compiled in-browser, with load time under a half-second.

View in another window ➡️


  • Visual effects and animation are achieved in-browser with a mix of CSS and JavaScript.
  • Custom glyphs, such as sign language, are achieved with embedded web fonts.
  • The bottom menu is optimized for touch, rendered by React.js, and resized to screen width for a natural feel across all devices.


  • Complete site loads in 3 HTTP requests — browser render starts at 0.4 seconds.
  • Supporting content, a background image and music file, are limited to 2 requests.
  • All other content— custom fonts for sign-language symbols, emoji, and other glyphs are compiled into the first request for availability on first browser paint.
  • Custom JavaScript written in React.js and Babel are compiled in-browser. Pre-compiling for additional speed could allow for a small savings in render speed, but given the simplicity of this experiment, compiling in-browser allowed for a complex toolchain to be put to use without a complex build process.