Most product animations just… play. These ones listen and react. You've gotta love @Rive! I built

Most product animations just… play. These ones listen and react. You've gotta love @Rive! I builtMost product animations just… play. These ones listen and react. You've gotta love @Rive! I built

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

Aavirash Mitra

pro

• 1d

Most product animations just… play. These ones listen and react. You've gotta love @Rive!

I built two interactive Rive animations for my website — same isometric car, two completely different ways to explore it.

The Slider — drag to peel back the car’s exterior and reveal the internals underneath. Engine, radiator, suspension — it all appears as you scrub. The state machine uses a single numeric input bound to the drag position, so the reveal is continuous, not a toggle.

The Hotspot Explorer — tap any component and get its detail. Each part is its own input in the state machine, so users discover things in whatever order they want.

The fun part was designing for both modes from the same illustration. Every layer — shell, engine, springs, wheels — had to work independently so the state machines could control them. One asset system, two interaction models.

Rive motiondesign Rive Animation Motion Design Visual Design

Sharon Olusanya

• 8h

Love this!

Aavirash Mitra

pro

• 6h

Thanks Sharon :)

R. Qule

max

• May 29

Most tech landing pages rely on more sections, more copy, and more effects.

Blendr took the opposite approach.

We built a landing page experience around a custom 3D product model, cinematic animation, and a cleaner structure that lets the visuals carry the story naturally.

Sometimes stronger design means explaining less.

This was created with a design subscription from FANCY — and yes, we’re currently open to new projects.