KORG Drum Machine - well, I tried


This is my bravest attempt with CSS styling, what do you think about it?

Total time: Total time: 3 days.
Some things that were challenging and took me most of the time:

  • I tried to simulate a real drum machine over a velvet cloth like the one you find inside musical equipment cases, aluminium case texture, bezel texture, and plastic-leather texture, all with lights and shadows using radial gradients.

  • The display with a 14 segment typefont, light glow, shadow segments that are “off”. Trying to use that font took me like 8 hours, but now I know that I can host custom fonts on Cloudinary and codepen likes it.

  • Drum pads with light when pressed (I would probably work on release it state) using conditional rendering

Overall I think this project push me to another level, I have to say that I love React.

I want to read your opinions.

i like it colors everyting beautiful but just hit the play have delay have a good working broo all the way up dont stop ! :slight_smile:

Hi @wakababa, thanks for your opinion.

Welcome to our community, it’s nice to see your first comment is in my post !

Yes, there is a little delay, maybe because it is fetching sounds from another server or maybe its react. I need to learn that kind of optimization.