Built with Rive
Mahindra BE6 — Reimagining Product Interaction Using Rive
Muthu kumar M
Mahindra BE6 — Reimagining Product Interaction Using Rive
Overview
Mahindra’s BE6 is a futuristic EV, but the official website only offers a standard static 360 spin. No animations. No feature storytelling. No sense of personality.
I wanted to explore how Rive could make the product feel more alive.
So I rebuilt the experience using screenshots from the BE6’s 3D model, converted them into PNG layers, and animated everything inside Rive to show the potential of motion-driven automotive storytelling.
Problem
The original BE6 website offered:
A simple image-based 360 view
No animation
No interactive transitions
No guided highlight of product features
No emotional connection
It didn’t match the futuristic attitude of the BE6.
Goal
Use Rive to turn a static asset into a dynamic product showcase, focusing on:
Motion design
Interaction design
Storytelling moments
Rich micro-interactions
Feature explanation through animated sequences
This was never about file-size perfection — it was about demonstrating what a motion-first automotive microsite could feel like.
What I Created
1. Intro Animation
The car enters with motion, setting a cinematic tone.
This makes the experience feel intentional and premium.
2. 360 Rotation (PNG-Based)
Using stacked PNGs taken from the original model, I built a smooth, intuitive 360 rotation using Rive’s input system and state transitions.
3. Headlight ON/OFF Toggle
The headlights animate with smooth fade and glow transitions the moment the toggle is clicked.
4. Feature Animations
Mahindra’s key BE6 features — Infinity View, AdrenoX, Ambient Glow — are animated through focus highlights, micro-motions, and smooth transitions.
These help the user understand features without reading long descriptions.
5. Interaction Logic
All logic was built with:
State Machines
Listeners
Inputs
Data Binding
This turns passive viewing into an interactive product experience.
Experience Flow
Intro sequence plays
BE6 settles into frame
User rotates the car
User toggles headlights
User taps features → corresponding animated highlights
Everything happens with smooth motion and clear feedback.
Why Rive?
Not because of file size or efficiency — that’s not the goal here.
But because:
Rive lets you combine interface, motion, and interactivity in one place
You get smooth transitions without writing heavy JS
You can tell a product story visually
It bridges the gap between “static website” and “interactive product demo”
It’s a creative tool, not just a technical one.
Outcome
The BE6 suddenly feels:
Alive
Responsive
Thoughtfully explained
Futuristic
Easy to explore
This prototype demonstrates how automotive brands can create richer digital showcases by blending motion + interaction directly inside Rive.
Conclusion
This project isn’t about vectors or micro-optimization.
It’s about rethinking how products can be brought to life online using Rive’s interactive capabilities.
Like this project
Posted Nov 27, 2025
Interactive Mahindra BE6 showcase built in Rive with custom animations, 360 spin, light controls, and feature highlights powered by state machines.
Likes
2
Views
15
