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:T692,

Fully customizable and perfect for portfolios, product showcases, and interactive galleries—no coding required.

Key Features and controls

Interactive cards → Hover to reveal card titles; click to open custom links.
Flexible content → Display between 2 and 20 cards, with per-breakpoint control for desktop, tablet, and mobile.
Animation Trigger → Choose how the initial animation starts: on scroll, on click, after a delay, or instantly.
Animation Intensity → Adjust animation speed for smoother or snappier transitions.
Customizable visuals → Adjust card size, spacing, border radius, shadow, blur, and hover border/background color.
Typography options → Works seamlessly with Framer’s native fonts for overlay text.
Images → Upload and assign a unique image to each card.
Titles & Links → Set hover titles and link destinations.
Responsive layout → Adjust card size, spacing, and number of cards per breakpoint.

How it works

Drag the component onto your Framer canvas.
Add 2–20 cards, assigning images, titles, and links.
Adjust card size, spacing, and number of cards per breakpoint.
Customize visuals, borders, and typography.
Choose how the initial animation triggers.
Preview live and publish—fully interactive, no code needed.

5a:[["$","$L5d",null,{"post":{"id":"019a9bf6-f89e-76d5-b46e-ce64b96c40ff","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"7013df66-84fd-4a37-be78-6f9225c89cf3","name":"Rafael Rodrigues","slug":"rodrigues-rafael","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/416135/avatar-8TT0w47HHXGjq8p6uuwWgeARyCboIU.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"hqZFZUiOTDqdOKUtEELH","resolved":true,"title":"Card Deck Spread","body":"$5e","bodyJson":null,"introduction":"A dynamic card deck gallery for Framer","slug":"card-deck-spread","author":{"framerUserId":"7013df66-84fd-4a37-be78-6f9225c89cf3","name":"Rafael Rodrigues","slug":"rodrigues-rafael","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/416135/avatar-8TT0w47HHXGjq8p6uuwWgeARyCboIU.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/hqZFZUiOTDqdOKUtEELH/card-deck-spread-t6F5NhFmx3PYnms8gr9GyERrbz3G2K","metadata":{"tint":{"h":240,"s":17,"l":64},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-10-23T14:39:26.574Z","updatedAt":"2026-03-23T15:24:18.783Z","publishedAt":"2025-11-19T11:54:05.342Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://re.chujiqiqi.com/m/CardDeckSpread-i9eD.js@Gk6fOPV6EhlGClhOxXwt","previewUrl":"https://particular-grocery-189981.framer.app/","price":null,"paymentUrl":null,"workshop":true,"categories":[{"id":"c3e183d1-597a-4479-8a6f-244ae3c96f40","name":"Cards","slug":"cards"}],"lastSaveId":"Gk6fOPV6EhlGClhOxXwt","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":20,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-11-19T11:54:05.342Z","updatedAt":"2025-11-19T11:54:05.342Z","reported":false}}],["$","$L5f",null,{"target":{"kind":"post","postId":"019a9bf6-f89e-76d5-b46e-ce64b96c40ff"},"postId":"019a9bf6-f89e-76d5-b46e-ce64b96c40ff","postAuthor":"$5a:0:props:post:author","targetCommentId":"$undefined"}]]

Suggested for you