<?xml version="1.0" encoding="utf-8"?>
Open full project

In one of my projects, I created a unique card flip interaction inspired by Apple’s WWDC 2024. This interaction features a visually engaging card flip with a glowing cursor effect that activates on hover, enhancing the user experience with subtle yet dynamic motion. Additionally, a realistic flip sound was integrated to provide an immersive, tactile feel whenever a user clicks to reveal the card’s reverse side. Designed solely on Figma, this project allowed me to explore the boundaries of interaction design within a minimalist interface, bringing together visual appeal and interactivity in a seamless experience.

Disclaimer: While this version performs optimally on desktop, the absence of hover functionality on mobile devices means that mobile users may not experience the interaction in its full intended form.

Tools used

Figma

Topics

Share

Share your insights — leave a project review and help others grow their skills

Reviews

8 reviews


Thanks for your sub, Subham!

I love the experience on the desktop! you should make a tutorial of how to make an astonishing hovering effect like this!

You could think on mobile that you could access the gyroscope and create the same effect. I don't know how this technically works, but might be an amazing idea.

Great vibes only!

Hi Cristian! Thank you so much for the kind words and thoughtful feedback! I’m thrilled you loved the desktop experience, especially the hovering effect. A tutorial sounds like a fantastic idea—I’ll definitely consider creating one to share the process! Using the gyroscope for mobile is an intriguing suggestion. It could provide a dynamic and interactive element similar to the desktop effect. I’ll explore this further to see how it can be implemented seamlessly. Great vibes indeed! 😊
You rock! 🫶🏼

a super cool interaction. I love it


This is a creative exploration of interaction design. The card flip with glowing cursor and sound feedback makes the experience more dynamic and engaging.

I like how you took inspiration from Apple’s WWDC and applied it in your own way. The details, like the tactile flip sound, show attention to user delight.

It is also good that you noted the mobile limitation. That shows awareness of platform differences and how interaction design can change across devices.

Overall, this is a nice experiment that balances minimal design with engaging motion.

Hey Hamad, Thanks for the lovely and detailed feedback ❤️

This is a super cool interaction that you've recreated in Figma. I will consider animating the shadow beneath as well to add up to the realism of the entire animation.

Thank you! Yes, you’re absolutely right – animating the shadow beneath would definitely enhance the realism of the interaction. I’ll consider reanimating it in the future to incorporate that additional depth. Thanks for pointing out such a notable and hard-to-pick detail. I really appreciate your keen eye!
(edited)

Excellent animation! Really love what you have done here! Play with shadowing a bit and it will be spot on!


I am generally curious how you made this, is there a guide you could share of something similar being created?

Hey Srdjan! I appreciate your curiosity! While I don’t have a guide ready at the moment, I can definitely share a tutorial link with you soon.
Awesome, looking forward to it :)

This is all nice but horrible on mobile. If there was a fallback for mobile then I am all for it.

Thanks Michal Kuczek, for catching that! I appreciate your attention to detail. I see now that the description should clarify how mobile users experience the design. I’ll add more details to address the mobile experience and any fallback solutions to ensure it works seamlessly across devices.

Well done! Would be great to see the version with animated shadow.


71 Claps
Average 4.7 by 15 people
5 claps
4 claps
3 claps
2 claps
1 claps
<?xml version="1.0" encoding="utf-8"?>