Innovative MIDI Piano & Drum Controller: Framer Hackathon EntryInnovative MIDI Piano & Drum Controller: Framer Hackathon Entry
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Here's my submission for the Framer × Contra Hackathon! After 4+ hours playing with Framer Workshop, I finally built the MIDI piano and drum controller I had in mind. It features realistic piano and drum sounds, octave shift & pitch bend controls, customizable key mappings for both piano and drum pads, numbered drum pads, power toggle functionality, & a custom display panel etc. The process was challenging with all the audio synthesis and UI work, but incredibly rewarding when everything came together exactly as I wanted. Im not a pianist, but I built this out of joy for musicians out there. I hope you enjoy it Thanks to Framer & Contra for this opportunity to create something unique! Preview: https://midi-piano.framer.ai/ Remix: https://framer.link/5z5mFE2 #framerhackathon #Framer #Contra
Sarineh's avatar
@Sekh Soyeb Ali what?!?? 🤯😱 this is pretty darn awesome!
Soyeb's avatar
@Sarineh Issagholian Haha thank you so much! 🙏 Means a lot - super happy you think it's awesome 🤩
Erika's avatar
@Sekh Soyeb Ali this is amazing!
Soyeb's avatar
Soyeb's avatar
@Adewale Adeyemo Thanks a lot🙏🔥
Dakshi's avatar
@Sekh Soyeb Ali Wow, this is incredibly creative! Hats off to you for such brilliant thinking and execution. ✨👏🏻👏🏻👏🏻
Soyeb's avatar
@Dakshi Parashar Really appreciate your kind words ✨ Means a lot! 🙌
Milena's avatar
@Sekh Soyeb Ali That looks so cool! Great job!
Soyeb's avatar
@Milena P. Glad you like it, thank you 😃
Qalandar's avatar
@Sekh Soyeb Ali wow you have achieved
Soyeb's avatar
@Qalandar Bux Grateful for the kind words 🙏
FlutterflowDevs's avatar
FlutterflowDevs logo
@Sekh Soyeb Ali Really impressive work! I’m curious—between handling audio synthesis and building the UI controls, which part required the most problem-solving?
Soyeb's avatar
@FlutterflowDevs Honestly, I don’t really know how the audio synthesis works - I just prompted the Workspace and it did the magic ✨. My main focus was on the UI - I designed the piano board manually in Framer and set up the controls myself. The prompting part isn’t as easy as it looks though -...
FlutterflowDevs's avatar
FlutterflowDevs logo
@Sekh Soyeb Ali That makes sense! Thanks for sharing the process — the trial-and-error with prompts definitely sounds like a tricky part. You’ve done a really great job on the UI; the piano board and controls look super clean. I’ll definitely check it out and maybe give a remix a try to...
Okoye's avatar
@Sekh Soyeb Ali so amazing
Soyeb's avatar
@Okoye chukwuemeka Thanks a ton! Really appreciate the love 💙
Soyeb's avatar
@Chidiebere Peter Thanks a lot! Glad you liked it 🙏
Back to feed
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started