Patatap: Turn Your Keyboard Into a Sound Machine

Patatap turns your keyboard into a musical instrument. Press any letter from A to Z and you get a sound plus a burst of animation exploding across the screen. Press another, and another, and suddenly you’re playing a rhythm you did not plan. It calls itself a portable animation and sound kit, and the entire tutorial is: press a key.

What is Patatap?

Patatap was made by Jono Brandel with the Japanese music duo Lullatone, and that collaboration is the whole reason it works. The visuals are clean and confident, bold shapes, tight timing, a limited color palette, and the sounds are actually good. Not stock beeps. Real, warm, deliberately chosen little percussion hits and blips that sound like they came off a record.

Twenty-six keys, twenty-six paired sound-and-shape combinations. That’s the whole design. There is no menu, no settings page, no onboarding. You arrive and you are already playing.

The site’s own instruction, tucked in the corner, is a masterclass in brevity: press any key, A to Z or spacebar, and turn up speakers.

The technical trick underneath is that the animations are drawn live rather than played back as video, which is why they land in perfect sync with the audio every single time. Nothing lags. Nothing stutters. A shape blooms at the exact instant you hear the hit, and that tightness is what makes it feel like an instrument instead of a website with sound effects.

What can you do on Patatap?

• Play all 26 keys. Every letter has its own sound and its own animation. It keeps a little counter of how many you’ve discovered, which is a quietly effective way to make you try all of them.
• Hit the spacebar to change everything. Space swaps the palette: new colors, new sound set, same keys. It’s like being handed a different instrument mid-jam.
• Find rhythms with both hands. Roll your fingers across the keys like a drum pattern. Two or three keys in a loop and you’ve got a groove going.
• Tap it on a phone. On touchscreens you tap instead of type, and it works just as well.
• Let a kid loose on it. Patatap is possibly the single best “here, hold this” website for a bored child. Zero instructions required.

Tips to get the most out of it

Turn the volume up properly. The sounds have real low end and real detail. On laptop speakers at 20% you’re hearing about a third of what’s there.

Cycle every palette before you settle. Each one has a completely different character, some are percussive and punchy, some are melodic and soft. The one you land on first is probably not your favorite.

Play with two hands like a drum kit. Assign your left hand a low, thumping key and your right hand two lighter ones. Suddenly you’re not pressing buttons, you’re playing.

Watch the shapes, not the keyboard. The animations are synced tightly enough that the visual becomes part of the instrument. Looking down at your fingers breaks the spell.

Record it if you make something good. There’s no save button, so a phone camera pointed at the screen is the only way to keep a performance. Do it, the visuals are half of what you made.

Heads up on the flashing. The site itself warns that it contains flashing images, so it’s worth knowing before you full-screen it or hand it to someone who’s sensitive to that.

If you like Patatap, also try…

• Chrome Music Lab: a whole set of experiments that let you play your way into understanding music.
• Weave Silk: drag your mouse, generate impossibly pretty symmetrical art.
• Pink Trombone: another “just start touching it” instrument, except the instrument is a human throat.
• Neal.fun: a whole collection of small toys built with the same instant-delight philosophy.

There’s more where that came from in Design & Creativity and Music & Audio.

Open Patatap, turn up the speakers, and mash something. You’ll be there longer than you planned.