5c:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/3jpuro209qqra.js","/creators-assets/_next/static/immutable/chunks/077g_l9cwe8hz.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/2ouyrs2yz196q.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/3orcs6a8eyfvz.js","/creators-assets/_next/static/immutable/chunks/3-tcb9ouhlqkm.js","/creators-assets/_next/static/immutable/chunks/3n0g19afc7srh.js","/creators-assets/_next/static/immutable/chunks/41zrh_r6fdtfq.js","/creators-assets/_next/static/immutable/chunks/120zfy8hqrcwf.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/1p31g3z3kho5v.js","/creators-assets/_next/static/immutable/chunks/17w9c6wazundy.js","/creators-assets/_next/static/immutable/chunks/2885u7skzba5_.js","/creators-assets/_next/static/immutable/chunks/1u1uuj9mj0hoo.js","/creators-assets/_next/static/immutable/chunks/1fo1h_o5odhhk.js","/creators-assets/_next/static/immutable/chunks/2iw_-bo8jogap.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/0v-er0xp5q011.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/2rwbpl35w01v4.js","/creators-assets/_next/static/immutable/chunks/37uei1iwbnu3m.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/44oc0x6k7mw-i.js","/creators-assets/_next/static/immutable/chunks/0djs9po3g19ek.js","/creators-assets/_next/static/immutable/chunks/1_ej2mmnwnp37.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/2_qutx8yar-up.js","/creators-assets/_next/static/immutable/chunks/0bcmpcsc4ih7d.js"],"PostDetailCard"] 5d:Tb83,

Editorial Cards is an interactive Framer code component that creates a layered editorial-style card experience with progressive reveal, hover motion, drag interaction, and flexible card positioning.

It is built for layouts where cards should feel tactile and alive rather than static. Cards can either start already visible on the canvas or appear partially from outside the frame, inviting interaction. Outside cards first peek in, then fully reveal on click, creating a staged storytelling effect.

Key features

Progressive reveal interaction
Cards can enter one by one instead of appearing all at once.
Peek-from-edge behavior
Cards can start outside the canvas and peek in from any side.
Click to reveal
Peeking cards expand into their full placed position when clicked.
Custom card layout
Set individual card position, rotation, stacking order, and start behavior.
Hover motion
Revealed cards can lift and scale slightly on hover for a more premium feel.
Drag support
Cards can be dragged, making the composition feel tactile and dynamic.
Focus through dimming
Non-hovered cards can fade back while the active card gets visual priority.
Canvas-based workflow
Connect your own Framer layers/components directly into the card slots.

Controls included

Layout Settings

For each card, you can control:

Start Location — on canvas or outside
X Position (%)
Y Position (%)
Rotation
Peek From — left, right, top, bottom
Z-Index

Animation

Animation Duration

Hover

Hover Lift
Hover Scale

Focus

Dim Others
Dim Opacity

Best for

This component works best when you want a layout to feel:

editorial
layered
cinematic
tactile
less template-like
more art-directed and interactive

Notes

Works with connected Framer component instances through the Children / Cards slot.
Best results come from using cards with varied sizes, image treatments, and slight rotation differences.
Ideal for hero sections and showcase blocks where visual rhythm matters.

59:[["$","$L5c",null,{"post":{"id":"019dce42-6891-79f9-a7bc-87cbbbd28fac","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"5e9178ac-0cf1-46cd-ab75-b55e8e406d28","name":"Helen Statsevich","slug":"helen-st","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/5e9178ac-0cf1-46cd-ab75-b55e8e406d28/rpwevai5","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"jvqSctaJTchfv6dq6nNE","resolved":true,"title":"EditorialCards","body":"$5d","bodyJson":null,"introduction":"Interactive editorial cards moving in","slug":"editorialcards","author":{"framerUserId":"5e9178ac-0cf1-46cd-ab75-b55e8e406d28","name":"Helen Statsevich","slug":"helen-st","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/5e9178ac-0cf1-46cd-ab75-b55e8e406d28/rpwevai5","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/jvqSctaJTchfv6dq6nNE/editorialcards-HCJecD43E3Ub5rpldYZQ0H6iMo4SkP"}],"post":null,"createdAt":"2026-04-09T21:02:39.886Z","updatedAt":"2026-05-18T12:22:45.269Z","publishedAt":"2026-04-27T09:25:51.889Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://cardsout.framer.website","price":"10","paymentUrl":"https://contra.com/payment-link/MbZPiltO-editorial-cards-component-for-framer","workshop":false,"categories":[{"id":"3a855006-6097-4489-b33b-8024cb26633e","name":"Interactions","slug":"interactions"}],"lastSaveId":"PVXRGSfNJxeOhfFC353e"}}],"contests":[],"categories":[],"tags":[],"likes":{"count":30,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-27T09:25:51.889Z","updatedAt":"2026-04-27T09:25:51.889Z","reported":false}}],"$L5e"]

Suggested for you