Diplo Flip

Diplo Flip is a high-performance interactive card component that flips dynamically based on the direction of cursor entry.

Diplo Flip is a high-performance interactive card component that flips dynamically based on the direction of cursor entry. With built-in interaction controls, you can seamlessly switch between hover and click modes—making it perfect for both desktop and mobile experiences. Ideal for portfolios, product showcases, and modern UI layouts where interaction matters. Smart Interaction Toggle Switch between Hover and Click modes instantly Hover mode for smooth desktop interactions Click mode optimized for mobile and accessibility Built-in UI control for easy testing and demos Directional Flip Intelligence Detects cursor entry direction (top, bottom, left, right) Flips along the corresponding axis Creates a more natural and responsive feel Elevates your UI with subtle but powerful motion Smooth, Premium Motion Fluid 3D flip animations Customizable duration and easing Perspective depth for a realistic effect Optimized for performance and responsiveness Customizable Design Controls Front and back images Border radius Shadow styling Perspective intensity Animation timing & easing Built for Real Projects Works seamlessly inside Framer Fully responsive across breakpoints Keyboard accessible (Enter / Space support) Lightweight and easy to integrate How It Works Diplo Flip detects how the cursor enters the card and rotates it along the matching axis. Combined with the ability to toggle between hover and click interactions, it delivers a flexible and intuitive experience across all devices.

Responsive dual-trigger card