Spatial Cards

Get this component in the complete Shader Components Bundle. Access all four paid shader-driven Framer components—worth $39 separately—for $25.

Get the Shader Components Bundle →

Description

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.

How it Works

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.

Design and Motion

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.

Customization

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.

Great For

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.