5c:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/1rdgef59pv3cw.js","/creators-assets/_next/static/immutable/chunks/0zdv1ssrxkrvj.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/0gxswkth5mc6b.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/41zrh_r6fdtfq.js","/creators-assets/_next/static/immutable/chunks/36invrtoq879v.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/0j6nyijn0flqd.js","/creators-assets/_next/static/immutable/chunks/2b15v_9ruhnys.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/3h1dt97hv5ik0.js","/creators-assets/_next/static/immutable/chunks/39xjxvqtwa0x7.js","/creators-assets/_next/static/immutable/chunks/17w9c6wazundy.js","/creators-assets/_next/static/immutable/chunks/1u1uuj9mj0hoo.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/2iw_-bo8jogap.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/0w757zrv0hi6k.js","/creators-assets/_next/static/immutable/chunks/3edl5e308nytq.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/37uei1iwbnu3m.js","/creators-assets/_next/static/immutable/chunks/44oc0x6k7mw-i.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/27vyv0cqm_295.js","/creators-assets/_next/static/immutable/chunks/3n0g19afc7srh.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/1h-r9oggqjick.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3sa-o_ztvtkwe.js","/creators-assets/_next/static/immutable/chunks/2051y-i4b0nnm.js"],"PostDetailCard"] 5d:Taab,

Details

Create stunning visual transitions with the mesmerizing 3D flip image reveal component. Transform any image into an animated cascade that elegantly flips from one image to another through a choreographed sequence of rotating tiles. Each tile performs a captivating 3D rotation with customizable timing, creating a wave-like reveal effect that's perfect for before/after comparisons, portfolio showcases, and dramatic image transitions.

The component intelligently divides your images into a grid of tiles, each performing its own synchronized flip animation with staggered timing. The result is a smooth, professional transition that adds sophistication to any design. Whether you're showcasing product transformations, revealing hidden content, or simply adding visual flair to image galleries, this component delivers an unforgettable user experience.

Features

Smooth 3D tile flip animation with perspective-based rendering
Customizable grid layout with adjustable rows and columns
Staggered animation timing for wave-like reveal effects
Adjustable tile spacing and animation duration controls
Automatic image scaling and positioning for perfect coverage
Optimized performance with efficient rendering and memory management
Responsive design that adapts to any container size
Works seamlessly with any image format or resolution

Controls

Front Image – Upload the initial image to display before the flip animation
Back Image – Upload the target image that will be revealed after the flip
Columns – Set the number of tile columns in the grid (1-32)
Rows – Set the number of tile rows in the grid (1-32)
Gap – Adjust the spacing between tiles in pixels (0-20px)
Initial Delay – Control when the animation begins after loading (0-3 seconds)
Duration – Set how long each individual tile takes to flip (0.1-2 seconds)
Stagger – Adjust the delay between each tile's animation start (0-0.5 seconds)

Perfect For

Before/after image comparisons
Portfolio reveals and showcases
Product transformation displays
Interactive storytelling elements
Hero banner transitions
Creative loading animations
Brand reveal moments
Educational content transitions

59:[["$","$L5c",null,{"post":{"id":"019cc2dc-ddfb-722f-bf09-60e83a11e762","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"04c866a7-3fd7-4257-aa25-1cd7ed251101","name":"colab colab","slug":"colab-colab","avatar":null,"followed":false,"followsYou":false},"media":[],"resources":[{"id":"JWW0uVCwmcxYSHMHVldr","resolved":true,"title":"Flip Reveal 3D Image","body":"$5d","bodyJson":null,"introduction":"Animation Image","slug":"flip-reveal-3d-image","author":{"framerUserId":"04c866a7-3fd7-4257-aa25-1cd7ed251101","name":"colab colab","slug":"colab-colab","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/JWW0uVCwmcxYSHMHVldr/flip-reveal-3d-image-ybMJNMdPx8OSpntH5CK9mxym6sfcbm","metadata":{"tint":"hsl(240 50% 6%)","aspectRatio":1.3333333333333333}}],"post":null,"createdAt":"2026-02-25T00:34:23.621Z","updatedAt":"2026-03-06T09:46:47.842Z","publishedAt":"2026-03-06T11:16:20.603Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://dandy-finance-027562.framer.app/","price":"5","paymentUrl":"https://madanie232.gumroad.com/l/ceclsy","workshop":false,"categories":[{"id":"4fdfe3ed-ecd1-4761-a9df-b36c0c38e974","name":"Layout","slug":"layout"}],"lastSaveId":"WdD09BvzCpnmxKG2bDOo"}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-03-06T11:16:20.603Z","updatedAt":"2026-03-06T11:16:20.603Z","reported":false}}],"$L5e"]

Suggested for you