Dual Face Card: Free Interactions Component by Bava Studio

A sleek, responsive flip card that smoothly rotates to reveal content on the other side, perfect for showcasing product details, team members, or interactive information blocks.

About this Component

Flip3D is a versatile and interactive card component designed for creators who want dynamic, two-sided content without writing any code. Perfect for portfolios, product showcases, or engaging UI sections.

✨ Features:

Choose flip interaction: Hover or Click
Optional Invert Flip for reverse animation
Smooth built-in animation powered by Framer Motion
Fully customizable content for both sides
Supports X-axis or Y-axis rotation

🛠 How to Use:

1. Add to Canvas

Prepare front and back sides as Frames/Images/stacks.
Import the Flip3D component into your Framer project.
Connect the front and Back sides.
Edit Properties to your needs.

3. Set Interaction

Select the card on the canvas.
From the right-side property panel, choose Flip On Hover or Flip On Click.
Optionally, toggle Invert Flip to reverse the rotation direction.
Choose the rotation Axis (X or Y) and customize the transition for smooth animation.

And that’s it! Your card now flips beautifully with full control over interaction and animation.