Nebula Product Design Showcase with Responsive Motion Details

Nebula Product Design Showcase with Responsive Motion DetailsNebula Product Design Showcase with Responsive Motion Details

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

Vinicius Hilario

• 9h

Nebula is finally here! 🎧

I spent quite a bit of time working on this one, especially on the visual details, transitions and making the mobile and desktop versions feel connected.

There were quite a few things to tweak before getting it where I wanted, but I'm really happy with how it turned out.

Sharing the final result here. Hope you enjoy watching it as much as I enjoyed creating it!

#ProductDesign #UIUXDesign #MotionDesign

mobileappdesign productdesign motiondesign UI Design Mobile Design Motion Design Claude Emotion CSS Visual Studio Code

Tran Tien Van

pro

• 8h

The "Up next" and "Now playing" cards floating out of the phone frame are a lovely way to show the hierarchy, and the violet glow behind the album art ties the player back to the library screen. Since you built it with Emotion CSS, how did you keep the transitions in sync between the mobile and desktop versions?

Vinicius Hilario

• 8h

Thanks! Glad you noticed that!

I focused on keeping the motion and timing consistent across both versions, while adapting each layout to its screen. I wanted everything to feel like one seamless experience, whether on mobile or desktop.