Motion Craft
Creating animations with purpose and personality
New to Contra
Motion is building their profile!
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
1
13
Smooth UI animations transform simple interactions into something truly satisfying. Those micro-moments of delight really do matter. Take theme toggles, for example—a seamless transition between light and dark modes can turn a simple preference into a delightful experience.
#Rive (https://www.linkedin.com/search/results/all/?keywords=%23rive&origin=HASH_TAG_FROM_FEED) #ToggleAnimation (https://www.linkedin.com/search/results/all/?keywords=%23toggleanimation&origin=HASH_TAG_FROM_FEED) #MotionDesign (https://www.linkedin.com/search/results/all/?keywords=%23motiondesign&origin=HASH_TAG_FROM_FEED) #InteractionDesign (https://www.linkedin.com/search/results/all/?keywords=%23interactiondesign&origin=HASH_TAG_FROM_FEED)
1
0
38
I built a Tetris engine inside Rive. Here's what's under the hood.
3,000+ lines of Lua. Zero game framework. Just Rive's state machine, data binding, and scripting.
What's running:
🟦 All 7 tetrominoes with proper SRS rotation and wall kicks
🎲 7-bag randomizer — guaranteed piece distribution
👻 Ghost piece, lock delay, soft drop, hard drop
⚠️ Danger system reacting to stack height in real time
📈 Level progression with speed scaling
🏆 High score persistence
2
17
567