5d:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/1rc641binzbjp.js","/creators-assets/_next/static/immutable/chunks/12ci1vsd8nj4u.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/2ply_q-h6u_2z.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/1pb7yncyfm9fe.js","/creators-assets/_next/static/immutable/chunks/1j6jg0y72xk13.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/26nhnsanh2piz.js","/creators-assets/_next/static/immutable/chunks/03itqfxm4gmj8.js","/creators-assets/_next/static/immutable/chunks/114fkj16mhe97.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/16inv17cv83xq.js","/creators-assets/_next/static/immutable/chunks/2760bhhttj0zo.js","/creators-assets/_next/static/immutable/chunks/3_z6gb0g1nigd.js","/creators-assets/_next/static/immutable/chunks/3vlbhrh3-zofo.js","/creators-assets/_next/static/immutable/chunks/120bipr4k16wv.js","/creators-assets/_next/static/immutable/chunks/3ea2l_ol8wqqa.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/3edl5e308nytq.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/1zr4ew02k6y_l.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/08ajsjh8ypdt2.js","/creators-assets/_next/static/immutable/chunks/1ddgh6mv1wg4x.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/3t6k2_m2gc3-k.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/0w6oa8_ba59u4.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/3c3kl-ixsd844.js"],"PostDetailCard"] 5e:Tb39,

Morph Deck is a responsive Framer component for interactive card decks that fan out and expand, with an overlapping fanned layout, click-to-expand morph, cards that dock beneath the open one, your own components as the cards, hover lift, a blur-in entrance, and multiple independent decks per page.

Use Cases

Works well for:

portfolio highlights
project and case-study showcases
product feature cards
service or pricing cards
team and people cards
photography and gallery decks
testimonial and review sets
feature tours
"what we do" sections

Perfect when you want a card section that invites a click and opens into detail, instead of a flat grid or a plain carousel.

--------------------------------------------------------------

Customization

Fully customizable via the properties panel:

connected cards (your own components, up to 8)
overlap
tilt
open size
dock offset
overflow (clip or spill)
padding
hover lift
hover scale
morph spring (open and close motion)
entrance on or off
entrance trigger (in view or on load)
entrance stagger
entrance duration
entrance rise
entrance blur
canvas preview (fan or expanded)

Each card is your own component with Collapsed and Expanded variants, the card design stays yours. The deck only handles the fan, the morph, and the docking.

--------------------------------------------------------------

Responsive Behavior

Desktop: full fan with hover lift; click a card to expand it while the rest dock beneath it.
Tablet: same structure, sized to the component's width.
Mobile: hover is dropped and cards open on tap; layout adjusts for narrow widths.

Morph Deck fits itself to whatever container you place it in.

--------------------------------------------------------------

Preview: https://morph-deck-preview.framer.website/

Included: The component and its DeckCard overrides, plus the live preview with tutorial.

Note: hover lift is pointer-only (cards open on tap or touch), and each card needs two variants named exactly Collapsed and Expanded.

5a:[["$","$L5d",null,{"post":{"id":"019f918c-9652-77ad-87c7-926845e46813","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"64ab2b22-4ac4-4ae8-bdc3-691afb8ee6b1","name":"Kullen Jahnke","slug":"kullen","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/534579/avatar-0ElvrFI1uFRAsMmJsB8iv8CRDfqXKY.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"kPvfibDkGbZbvfoeYPfw","resolved":true,"title":"Morph Deck","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Morph Deck","marks":[{"type":"bold"}]},{"type":"text","text":" is a responsive Framer component for interactive card decks that fan out and expand, with an overlapping fanned layout, click-to-expand morph, cards that dock beneath the open one, your own components as the cards, hover lift, a blur-in entrance, and multiple independent decks per page."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Use Cases","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Works well for:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"portfolio highlights"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"project and case-study showcases"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"product feature cards"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"service or pricing cards"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"team and people cards"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"photography and gallery decks"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"testimonial and review sets"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"feature tours"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"\"what we do\" sections"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Perfect when you want a card section that invites a click and opens into detail, instead of a flat grid or a plain carousel."}]},{"type":"paragraph","content":[{"type":"text","text":"--------------------------------------------------------------"}]},{"type":"paragraph","content":[{"type":"text","text":"Customization","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Fully customizable via the properties panel:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"connected cards (your own components, up to 8)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"overlap"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"tilt"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"open size"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"dock offset"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"overflow (clip or spill)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"padding"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"hover lift"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"hover scale"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"morph spring (open and close motion)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"entrance on or off"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"entrance trigger (in view or on load)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"entrance stagger"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"entrance duration"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"entrance rise"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"entrance blur"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"canvas preview (fan or expanded)"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Each card is your own component with Collapsed and Expanded variants, the card design stays yours. The deck only handles the fan, the morph, and the docking."}]},{"type":"paragraph","content":[{"type":"text","text":"--------------------------------------------------------------"}]},{"type":"paragraph","content":[{"type":"text","text":"Responsive Behavior","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Desktop:","marks":[{"type":"bold"}]},{"type":"text","text":" full fan with hover lift; click a card to expand it while the rest dock beneath it."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Tablet:","marks":[{"type":"bold"}]},{"type":"text","text":" same structure, sized to the component's width."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Mobile:","marks":[{"type":"bold"}]},{"type":"text","text":" hover is dropped and cards open on tap; layout adjusts for narrow widths."}]},{"type":"paragraph"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Morph Deck fits itself to whatever container you place it in."}]},{"type":"paragraph","content":[{"type":"text","text":"--------------------------------------------------------------"}]},{"type":"paragraph","content":[{"type":"text","text":"Preview: ","marks":[{"type":"bold"}]},{"type":"text","text":"https://morph-deck-preview.framer.website/","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://morph-deck-preview.framer.website/","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Included:","marks":[{"type":"bold"}]},{"type":"text","text":" The component and its DeckCard overrides, plus the live preview with tutorial."}]},{"type":"paragraph","content":[{"type":"text","text":"Note:","marks":[{"type":"bold"}]},{"type":"text","text":" hover lift is pointer-only (cards open on tap or touch), and each card needs two variants named exactly "},{"type":"text","text":"Collapsed","marks":[{"type":"code"}]},{"type":"text","text":" and "},{"type":"text","text":"Expanded","marks":[{"type":"code"}]},{"type":"text","text":"."}]}]},"introduction":"Custom click-to-expand card deck","slug":"morph-deck","author":{"framerUserId":"64ab2b22-4ac4-4ae8-bdc3-691afb8ee6b1","name":"Kullen Jahnke","slug":"kullen","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/534579/avatar-0ElvrFI1uFRAsMmJsB8iv8CRDfqXKY.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/64ab2b22-4ac4-4ae8-bdc3-691afb8ee6b1/019f9165-1916-70ea-8407-8e6383a8cfb1.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":2714,"height":2035}}],"post":null,"createdAt":"2026-07-24T00:35:37.242Z","updatedAt":"2026-07-27T19:46:24.949Z","publishedAt":"2026-07-24T00:35:37.238Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://morph-deck-preview.framer.website/","price":"10","paymentUrl":"https://contra.com/payment-link/DyP1ioD6-morph-deck-or-click-to-expand-card-deck-framer-component","workshop":false,"categories":[{"id":"c3e183d1-597a-4479-8a6f-244ae3c96f40","name":"Cards","slug":"cards"}],"lastSaveId":"WDqtyyLl3OvNcfqdEvLz","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":13,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-07-24T00:35:37.682Z","updatedAt":"2026-07-24T00:35:37.682Z","reported":false}}],"$L5f"]

Suggested for you