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
Interactive Piano — Rive + React + Web Audio
A playable piano where Rive animation and real audio are tightly in sync. Keyboard playable, MIDI playable, octave switchable.
Real Salamander samples with runtime pitch-shifting — just 13 files for the whole keyboard. Every key press goes through Rive ViewModel bindings, not DOM tricks.
The fun constraint: the animation shows one octave and a half. MIDI spans two. Solution: play all notes, animate only what’s visible.
Big thanks to @Joey Judkins for the amazing tutorial and inspiration that got this started.
Play it here: https://rive-viewer.vercel.app/piano-play/e9511875-63ce-40d9-bf58-8f437761bdc2
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
Related posts
My @Rive racing game breakdown! 🚗💨
I thought I'd share a short breakdown exploring the systems and ideas behind the project so far!
Very cool breakdown 👌 Always interesting seeing how different people structure interaction systems in Rive.
My entry for the Rive Game Challenge! 🚀
A fully functional 2D incremental clicker where you manage a grid, harvest resources, and automate an economy to fight a spreading virus.
• Designed with a solid GDD for balanced incremental math & upgrades.
• Grid Mechanics: Plant seeds & collect wood. Beware the dynamic "Rot" hazard that infects healthy tiles!
• Custom AI (Scripting): Smart targeting logic. The Sower plants, Reaper harvests, and Slime hunts the Rot.
• Economy: Reinvest wood to level up helpers for speed & massive Critical Hits.
• Tech Stack: Global state script for grid arrays, Data Binding for real-time UI, and State Machines for seamless animations.
Play it here: https://www.eduxdux.com/game
What if your facial expression became your controller? 🎮
I created a shooting game that trains your facial muscles by using your own expressions as the controller.
- 😊 Smile to power up your shots
- 😮 Open your mouth to fire a laser
- ⚡ Real-time 2D x 3D integration with Rive + React + Three.js
- 🎶 Sound, light, and animation working in sync
Trending
maxearnings
The next frontier of payments is live on Contra. How are you maximizing revenue?
micrographics
Micrographics started as utility - barcodes, packaging, instruction labels. How would you use them?
aidesignflow
AI tools are redefining how designer work. What does your workflow look like?
aivideo
AI video tools are moving at warp speed. What tools are you using?
whennotai
As AI accelerates, creative judgment matters more. What part of your work stays human?