Diplo Flip — Responsive dual-trigger card

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.