Spatial Cards is a refined Framer component for presenting featured content through a stacked card interaction. It is built for moments where a standard slideshow feels too flat: product highlights, insights, feature cards, launch details, or editorial blocks.
The component combines native Framer card instances with a 3D carousel motion system. Each card uses a Liquid Gradient visual, structured text content, and a simple CTA, giving the section a polished visual rhythm without requiring a large layout.
The active card sits at the front of the stack with a button underneath. When the button is clicked, the front card lifts upward, reveals the next card behind it, then moves back in depth while the next card comes forward. The outgoing card settles behind the new active card, completing the loop.
The card design uses generous rounded corners, balanced spacing, clear hierarchy, and Inter typography. The Liquid Gradient backgrounds create visual variety between cards while keeping the system cohesive.
Motion is built around lift, depth, and settle states. The result feels more like a physical card stack than a simple opacity swap.
The component exposes practical Framer variables for editing content without breaking the design system:
Card tags, headings, supporting text, CTA labels, and CTA links
Shared Liquid Gradient shader settings
Individual shader seed values for card variation
Next button label
Next button background and text colors
Some visual choices are intentionally constrained so the card structure, spacing, and motion stay consistent.
Use it for SaaS landing pages, product showcases, feature sections, creative portfolios, launch pages, editorial layouts, and Framer templates that need a more memorable way to move through short-form content.
Reach out any time via x.com or email at contact@omermirza.com.
Spatial Cards is a refined Framer component for presenting featured content through a stacked card interaction. It is built for moments where a standard slideshow feels too flat: product highlights, insights, feature cards, launch details, or editorial blocks.
The component combines native Framer card instances with a 3D carousel motion system. Each card uses a Liquid Gradient visual, structured text content, and a simple CTA, giving the section a polished visual rhythm without requiring a large layout.
The active card sits at the front of the stack with a button underneath. When the button is clicked, the front card lifts upward, reveals the next card behind it, then moves back in depth while the next card comes forward. The outgoing card settles behind the new active card, completing the loop.
The card design uses generous rounded corners, balanced spacing, clear hierarchy, and Inter typography. The Liquid Gradient backgrounds create visual variety between cards while keeping the system cohesive.
Motion is built around lift, depth, and settle states. The result feels more like a physical card stack than a simple opacity swap.
The component exposes practical Framer variables for editing content without breaking the design system:
Card tags, headings, supporting text, CTA labels, and CTA links
Shared Liquid Gradient shader settings
Individual shader seed values for card variation
Next button label
Next button background and text colors
Some visual choices are intentionally constrained so the card structure, spacing, and motion stay consistent.
Use it for SaaS landing pages, product showcases, feature sections, creative portfolios, launch pages, editorial layouts, and Framer templates that need a more memorable way to move through short-form content.
Reach out any time via x.com or email at contact@omermirza.com.
Omer Mirza
