Interactive Match Flame Animation: Rive Project Showcase

Interactive Match Flame Animation: Rive Project ShowcaseInteractive Match Flame Animation: Rive Project Showcase

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

Vitaliy Skrypnyk

• 8h

Match - Interactive Flame in Rive

The idea was simple: make a match feel alive in the browser. The flame reacts to your cursor movement, sways, flickers - and when you click, it goes out. Smoke curls up and drifts away. Everything is built in Rive using state machines and cursor tracking. No code libraries, just pure animation logic. Sometimes the best way to learn interaction is to build something tiny and make it feel real.

Rive interactivedesign motiondesign

Karina

pro

• Jun 20

Animation loops are nice, but for me, interactions are what bring characters to life.

Rive Interactive Character challenge has just begun so I wanted to share one of my favorite features: bone rigging.

For beginners looking to join the challenge, I’m sharing a quick walkthrough in the comments below 👇

It covers how to set up a simple character rig using IK, making it easier to animate and control movement.

Best of luck to everyone joining the challenge!

characterchallenge Rive

Karina

pro

• Jun 20

Tutorial:

Sirojiddin Makhammatov

• Jun 21

Meet MrSquare, the interactive learning companion inside Tetragon app. For the Rive Interactive Character Challenge, I integrated MrSquare directly into Tetragon, my math and physics learning app built with Kotlin in Android Studio. MrSquare isn't just an animation — he reacts to user actions, correct and incorrect answers, learning progress, and achievements in real time. My goal was to make the character feel like a natural part of the learning experience rather than a decorative element. Character animation and state machine created in Rive, then integrated into a native Android application using Kotlin. Download Tetragon here: https://lnkd.in/dnwUngGH @rive_app #Rive #Kotlin #AndroidDevelopment #AndroidStudio #MotionDesign #InteractiveDesign #EdTech #MathEducation #PhysicsEducation #GameDevelopment