5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5f:I[539959,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"CommentSection"] 5e:T6e3,

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

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.

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

This component is perfect for:

Portfolios & personal showcases
Product or feature highlights
Testimonials or case studies
Any section that benefits from a touch of interactivity and surprise

5a:[["$","$L5d",null,{"post":{"id":"019d4a48-6be8-7e15-88ee-e0bcb8fa1f61","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"6d5f4313-61b3-43d9-8574-e2abebb39ee8","name":"BAVA Studio","slug":"bavastudio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/66690/avatar-wMyuELvjxsFGgVhpQjHdPwaeCr2p3u.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"uorSXQO6v59znJTy4bTT","resolved":true,"title":"Dual Face Card","body":"$5e","bodyJson":null,"introduction":"Interactive 2-sided flip card","slug":"dual-face-card","author":{"framerUserId":"6d5f4313-61b3-43d9-8574-e2abebb39ee8","name":"BAVA Studio","slug":"bavastudio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/66690/avatar-wMyuELvjxsFGgVhpQjHdPwaeCr2p3u.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/uorSXQO6v59znJTy4bTT/dual-face-card-tqBAVXqXpxSLTxC9AuxIMjlofHEZjQ","metadata":{"tint":{"h":220,"s":75,"l":13},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-03-31T09:46:38.624Z","updatedAt":"2026-04-08T17:34:27.530Z","publishedAt":"2026-04-01T18:22:33.448Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/Flip3D-kOpjjM.js@JPPDTVnat8sNqVtHBWu7","previewUrl":"https://secured-takeaways-242434.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"c3e183d1-597a-4479-8a6f-244ae3c96f40","name":"Cards","slug":"cards"}],"lastSaveId":"JPPDTVnat8sNqVtHBWu7","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":8,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-01T18:22:33.448Z","updatedAt":"2026-04-01T18:22:33.448Z","reported":false}}],["$","$L5f",null,{"target":{"kind":"post","postId":"019d4a48-6be8-7e15-88ee-e0bcb8fa1f61"},"postId":"019d4a48-6be8-7e15-88ee-e0bcb8fa1f61","postAuthor":"$5a:0:props:post:author","targetCommentId":"$undefined"}]]

Suggested for you