Interactive Hover
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.
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!
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.
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.
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?
This is all nice but horrible on mobile. If there was a fallback for mobile then I am all for it.
Well done! Would be great to see the version with animated shadow.
You might also like

Fundraising Website

NEWFASHON™ - Landing page

Mobile onboarding flow

MamaFlow

FOURm - Landing Page for High-Conversion Fitness Startup
