Advanced Spacecraft Cockpit HMI Web App with React & Framer

Advanced Spacecraft Cockpit HMI Web App with React & FramerAdvanced Spacecraft Cockpit HMI Web App with React & Framer

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

Afuna Rashad

• 14h

Built a full spacecraft cockpit HMI as a web app — full instrument cluster, tactical radar, media center, and live system monitoring. Built with React + Framer Motion.

Composing Web Design HTML5 Replit vehiclehmiwithrive React

Afuna Rashad

• 14h

Wow

JAVIER | DSpot

max

• Mar 18

We are combining 3 main HMI experiences from 2 vehicles into a unified entry. Having a lot of fun on this one! Expect the official entry soon. Can you guess what they are? WIP 👇 🔊

vehiclehmiwithrive car Rive

Edgar Yan

pro

• Mar 18

uf bro this one is a killer! the matrix grid is a cool idea!

Paweł Andrzejewski

pro

• Mar 18

Car interfaces keep gaining features, but experience gets lost in complexity. With River, we stripped that back: only surface what the driver needs, when they need it.

We wanted the HMI to belong to the car, not sit on top. So we designed both as one system: car, interior, cluster, main display, app.

Rive was key to bringing the whole system to life. We used joysticks and blend states to animate the cluster gauges, solos to play back a pre-rendered Blender navigation scene on the central display, and state machine inputs to bring the whole prototype to life.

We then built a companion app and plugged it into a manufacturer's API to test against real vehicle data. The app works like a key: gives you access and gets out of the way. Just the right function at the right moment.

One ecosystem where every screen earns its place.

Completed work