Experience Music Virtually: AR Piano in Figma X Contra Challenge

Experience Music Virtually: AR Piano in Figma X Contra ChallengeExperience Music Virtually: AR Piano in Figma X Contra Challenge

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

Back to feedPost

Rudy Agnel

• Feb 27

It’s been a long time coming, but I’m finally back Participating in the Figma X Contra Challenge. #FigmaMakeathon

This is an AR Piano. The goal was simple: make music accessible. Using your camera, you can interact with a virtual keyboard in real-time. Whether you're a virtuoso or just want to make some noise, it's ready for you.

Check it out and let me know what you think: https://jam-open-06670559.figma.site

figmamakeathon

Kendrick Fatusin

• Mar 2

This AR Piano sounds incredible! Making music accessible is a brilliant goal, and the camera interaction is super clever. Can't wait to check it out.

Rudy Agnel

• Mar 2

Thank you! You can actually play it here https://jam-open-06670559.figma.site/

Rudy Agnel

• Feb 27

This is the social post links

LI: https://www.linkedin.com/posts/rudypagnel_figmamakeathon-activity-7433161045944451074-d-LR?utm_source=social_share_send&utm_medium=member_desktop_web&rcm=ACoAAB41EnsBjPwdzc6GjvXxonBGxMqW1qLNkLY X: https://x.com/rudypagnel/status/2027395656227414315

Ali Hamza

• Feb 28

Oh wow!! This is actually veryy interesting!!

Rudy Agnel

• Feb 28

Thank you! Appreciate it!

Kiera Sexton

• Feb 27

Woahhhhhh mind blown

Rudy Agnel

• Feb 27

Thank you!

Erin Horner

pro

• Feb 27

I just spent way too much time playing in synth mode. This is so fun!!

Rudy Agnel

• Feb 27

Thank you! I'm glad you are having fun!

Steph Untch

• Feb 27

This is so cool!!!

Rudy Agnel

• Feb 27

Thank you!

Zoë Colivas

pro

• Feb 27

Oh wow!! Now I need to learn how to play the piano. This actually insanely impressive!!

Rudy Agnel

• Feb 27

😊 Thanks, Zoe!

Akinkunmi Ayo

pro

• Feb 27

this is SICK!!!

Rudy Agnel

• Feb 27

Thank you!!!

Nabeel A. ✦

max

• Feb 27

looks awesome man! 🔥

Rudy Agnel

• Feb 27

Thanks, man! 🔥

Jesus Custodio II

• Feb 27

very cool!

Rudy Agnel

• Feb 27

Thank you!

Khunsa ✪‌

• Feb 28

Man you coookedd

Rudy Agnel

• Feb 28

Thanks, man!

Noor H

• Feb 28

Love this idea so much!!! even usually it looks pretty cool

Rudy Agnel

• Feb 28

Thank you!

Vera Truong

• Feb 28

So much fun, I love the ability to make music accessible! Would you say that the proximity of your hands from the camera has to be somewhat the same for both so that the keys always work?

Rudy Agnel

• Feb 28

Thank you! I'd say it calculates the distance between the hands and the camera, the height, and the angle. So you can play the key slightly closer to the camera or farther from the camera.

Sherifdeen Adebayo

max

• Feb 28

Awesomeeeee 🫡🔥

Rudy Agnel

• Feb 28

Thank you!

Ridwan Salisu-Thalith

• Feb 28

This is insanely cool. I really love it!

Rudy Agnel

• Feb 28

Thanks, man!

Ayesha S

• Feb 28

Omg!that's is soo cool

Rudy Agnel

• Feb 28

Thank you so much!

Victrex Graphics

• Feb 28

So cool🔥

Rudy Agnel

• Feb 28

Thank you!

Stephanie Asoegwu

pro

• Feb 28

An AR Piano you can play with just your camera?! This is genuinely mind-blowing. Making music accessible through AR is such a powerful idea — the Figma Makeathon is the perfect stage for this. Keep going!

Rudy Agnel

• Feb 28

Thank you! Appreciate it!

Maryam Ghaznavi

• Feb 28

This is something amazing!

Rudy Agnel

• Feb 28

Thank you so much!

Kristine Vilnite

max

• Feb 28

This is soo awwesooome!! 🎼 🎹 🤍

Rudy Agnel

• Feb 28

Thank you! Appreciate it.

Oluwatobiloba Momoh

• Feb 28

awesome work

Rudy Agnel

• Feb 28

Thank you!

Greg Althoff

pro

• Feb 28

Love this idea Rudy nice work!

Rudy Agnel

• Mar 1

Thank you, Greg!

Milena P.

pro

• Mar 1

This looks awesome 😍

Rudy Agnel

• Mar 1

Thank you, Milena! 😊

Pratyay Zare

• Mar 1

This is an outstanding concept, @Rudy Agnel Reimagining a human-friendly design interface that helps bridge communication gaps for blind individuals is truly meaningful. Many people struggle due to language and accessibility barriers, and your model has the potential to make interaction...

Rudy Agnel

• Mar 1

Thank you for your kind and encouraging words! Really appreciate it. 🙌

Marina Klimi

• Mar 1

wow amazing creative and innovative design.

Good Luck

Rudy Agnel

• Mar 1

Thank you so much, Marina!

Fatin H.

pro

• Mar 1

woww amazingg!!

Rudy Agnel

• Mar 1

Thank you, Fatin!!

Lynn Zeng

pro

• Mar 1

This is so cool!

Rudy Agnel

• Mar 1

Thank you, Lynn!

Keshav Gupta

• Mar 1

This is so amazing!!

Rudy Agnel

• Mar 1

Thank you!

Designia Studio

• Mar 1

So cool 😍

Rudy Agnel

• Mar 2

Thank you!

NextGrid Digital

pro

• Mar 2

Thats soo cool...

Rudy Agnel

• Mar 2

Thank you!

Lee Black

• Mar 2

Nice idea, but I do find it hard to play. Like I can't make proper chords or hit the keys I want consistently.

Rudy Agnel

• Mar 2

Thank you. You’re right. It is hard to play. And anyone who finds it easy and fun is also right. The main idea is to bring physical interaction virtually, and people can understand it naturally. As for the chord issue, yes, it’s still a prototype. I believe yours are way better.

Lee Black

• Mar 2

Would be great to lock in hover states and I had an idea for you. Imagine making hand chord shapes and they become locked also as hover/highlight states. Keep going man! Great idea.

Rudy Agnel

• Mar 2

That's a good idea! Thank you for your suggestion, man! I will try to implement the locked and hover/highlight states.

Hector Castillo

pro

• 1d

How to make a 14MM usable for VR and AR? Easy, you make a low poly version of it and bake normal map. The result is a 170K model that even thought it is far from small relatively speaking, it made it possible to be used in production.

Blender vr ar

Abhiram Tinguria

• 1d

This is bold in a really good way — the color combo and overall vibe make it instantly stand out.

Alexander Thomas

max

• 1d

Even when designing a single screen in Figma, I can’t help but build with components. It doesn’t need to be perfect, but it creates a solid foundation.