---
title: "Diplo Flip — Free Framer component · Best of Framer"
description: "Free Framer component · by Georgios Lavdas · Cards. Diplo Flip is a high-performance interactive card component that flips dynamically based on the direction of cursor entry."
canonical: "https://framer.elliotli.dev/component/diplo-flip"
---

[Home](/)/[Components](/components)/[Cards](/components/category/cards)/Diplo Flip

# Diplo Flip

Responsive dual-trigger card

[View on Framer](https://framer.com/marketplace/components/diplo-flip/?via=elliot-li)

![Diplo Flip preview image 1](https://framer.elliotli.dev/og/component/diplo-flip/2b60d0bb45d0a72c/1600x1200.jpg)

## Summary

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

## Description

## 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.

## Rank history [How rankings work →](/terms#rankings)

-   All · #922

## Details

- **Author**: Georgios Lavdas
- **Published**: 2026-04-16
- **Updated**: 2026-04-08
- **Added**: 2026-03-31
- **Categories**: Cards

## More like this

-   [BlogX Blog Card](/component/blogx-blog-card) — Themomarket · $8 — Blog Framer Component
-   [FluxPrice](/component/fluxprice) — Jeshan Athulesh · $49 — Elevate your SaaS conversion rate in minutes with FluxPrice.
-   [Feature Ribbon Cards](/component/feature-ribbon-cards) — Studio Digital · Free — Interactive image feature cards
-   [Dynamic Pricing Calc](/component/dynamic-pricing-calc) — Dmitry Vorobey · $12 — Pricing cards with live calculator