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"] 5e:T842,

In-Depth DetailsThe Stacked Cards Interaction Component is a dynamic, touch-friendly Framer component that displays multiple cards in a layered stack. When hovered, the cards spread out smoothly, and on click, the top card rotates and transitions to reveal the next one creating an engaging, modern motion experience.

Key Features:

Hover Spread Animation: Cards elegantly fan out horizontally when hovered for a layered visual depth.
Click Rotation: The top card rotates away and brings the next one forward, creating a natural browsing interaction.
Customizable Layout: Control card width, height, image height, spread distance, and rotation angle for design flexibility.
Adaptive Content: Each card supports image, title, and description with customizable fonts and colors.
Progress Counter: Optional floating counter shows the current card position (e.g., “2 / 5”).
Interactive Visuals: Uses Framer Motion for fluid transitions and easing effects.
Fully Stylable: Adjust backgrounds, border colors, shadows, and typography directly in the Framer UI.

Best Use Cases:

Portfolios: Display design or photography works with sleek transitions.
Product Cards: Highlight multiple items with a tactile, interactive feel.
Testimonials or Case Studies: Rotate through client stories elegantly.
Visual Galleries: Great for storytelling with smooth user engagement.

Why It’s Valuable:

This component blends motion design and interactivity making static galleries feel alive. It’s perfect for creators, agencies, and startups looking to add premium motion storytelling to their site without code.

5a:[["$","$L5d",null,{"post":{"id":"019a7351-5b43-7569-9889-3b1c13b4baca","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"e4272783-54be-4a87-8cb3-dda23e78001c","name":"decsy","slug":"decsy","avatar":"https://framerusercontent.com/avatars/users/e4272783-54be-4a87-8cb3-dda23e78001c/nZoHu2ny-","followed":false,"followsYou":false},"media":[],"resources":[{"id":"nzOUvT3k3aQ6X37rPvP5","resolved":true,"title":"Inter-Stacked Cards","body":"$5e","bodyJson":null,"introduction":"","slug":"inter-stacked-cards","author":{"framerUserId":"e4272783-54be-4a87-8cb3-dda23e78001c","name":"decsy","slug":"decsy","avatar":"https://framerusercontent.com/avatars/users/e4272783-54be-4a87-8cb3-dda23e78001c/nZoHu2ny-","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/nzOUvT3k3aQ6X37rPvP5/inter-stacked-cards-ih3bXR9teE6Toogm4qMjNLL1tepTsv","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-11-04T10:07:26.231Z","updatedAt":"2025-11-11T14:28:13.583Z","publishedAt":"2025-11-11T14:28:22.979Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://streamlined-clarity-443804.framer.app/","price":"10","paymentUrl":"https://buy.polar.sh/polar_cl_m3bXiuXfjIPOulDGNvf1IPHwdoUT6MrwiwPqE2VP66s","workshop":true,"categories":[{"id":"c3e183d1-597a-4479-8a6f-244ae3c96f40","name":"Cards","slug":"cards"}],"lastSaveId":"OdOh2Lo2NNoInU4kUmvW","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":3,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-11-11T14:28:22.979Z","updatedAt":"2025-11-11T14:28:22.979Z","reported":false}}],"$L5f"]

Suggested for you