MODAX

Three Card Types

Choose the layout that fits your content:

Hybrid — Image + title + body text. Perfect for rich editorial cards.

Text Only — Pure content, no image. Great for quotes, tips, or steps.

Image Only — Full-bleed visual with an optional glass overlay title and CTA.

360° Omni-Swipe Physics

Every card can be dismissed with a natural drag gesture — in any of 4 directions.

→ Swipe right
← Swipe left
↑ Swipe up
↓ Swipe down

The stack loops endlessly, so your content always stays in reach. Physics-based exit animations make every swipe feel satisfying.

Tired of Scrolling Fatigue?

Why make users scroll 5,000 pixels when you can deliver focus in a single viewport?

Meet MDX_StackCards. A premium swipeable card stack for Framer — built for engaging content, product showcases, onboarding flows, and more.

Swipe this card in any direction to explore every feature.

Swipe Any Direction

Premium Stack Cards

MDX_StackCards

Cinematic Presentation. Engineered Control.

Get MDX_StackCards

Core Capabilities & Features

✦

⚡Bilinear Physics-based

Framer Motion spring animations on every card transition. Drag inertia, threshold detection, and fly-off exit vectors feel native on any device.

✦

🎨 Theme-aware

Light, Dark, and Auto modes. Auto follows the Framer site theme in real-time via MutationObserver — no manual toggling.

✦

📐 Fully Typed

Complete TypeScript interfaces for all props, card items, and internal components. Full IntelliSense in Framer's code editor.

✦

♿ Accessible

ARIA roles, keyboard navigation (Enter / Space), and focusable CTAs throughout. Meets the standards Framer's review team checks.

✦

📱 Responsive

Cards constrain to viewport width on mobile. Swipe threshold and font sizes scale proportionally with card width.

✦

🔒 SSR-safe

All browser-only APIs (window, document, ResizeObserver) are guarded. The component renders safely in server-side contexts.

✦

Swipe Interaction

The top card responds to drag gestures in all four directions — left, right, up, and down. A configurable threshold determines when a drag becomes a swipe. Once the threshold is crossed, the card exits with a physics-driven fly-off animation in the direction of the drag. The deck cycles endlessly — swiping the last card brings the first back to the top.

✦

Three Card Types

Each card in the deck can independently use one of three layout types:

Hybrid — Full image with title and body text, configurable layout direction

Text Only — Pure typography — title and body text, no image

Image Only — Full-bleed image with an optional glass-morphism overlay for the title and CTA

✦

Image Controls

Hybrid and Image Only cards expose five independent image controls per card:

Source — Upload from Framer's asset panel or supply a remote URL

Fit — Cover fills the frame. Contain shows the full image with letterboxing

Position — 9 focal point presets to keep subjects in frame as card dimensions change

Zoom — Scale factor from 0.5× to 3× for fine-grained crop control

Layout Direction — Image Top, Bottom, Left, or Right relative to text content (Hybrid only)

✦

Rich Text Formatting

Body text supports an inline markdown subset. No HTML, no code — just plain text with simple markers that render as formatted output on the card. See Section 5 for the full syntax reference.

✦

Call-to-Action Button

Every card supports an optional CTA button with two navigation modes. URL mode opens any link in a new tab or the same tab. Section mode smoothly scrolls the page to any element by its HTML ID — ideal for connecting card content to sections of the same Framer page.

✦

Theme System

Three theme modes — Light, Dark, and Auto. Auto mode uses a MutationObserver on the document body to detect when the Framer site theme changes and updates all card colours instantly without a re-render cycle. All colours are driven by CSS class selectors, not inline styles, ensuring correct cascade in all Framer theme contexts.

✦

Solo Design Mode

A designer-exclusive mode that renders a single isolated card at a specified index directly on the Framer canvas. Eliminates the need to swipe through the deck to inspect or adjust individual cards. A red badge confirms the mode is active.

✦

Visual DNA

A centralised property group controls the physical dimensions that apply to every card in the stack: width, height, corner radius, and deck spread behaviour (fan vs. flat stack). Change once — all cards update.

One Component. Infinite Possibilities.

Explore how MDX_StackCards adapts to every industry.

Product Showcases

Highlight features or benefits of products in an engaging way.

User Testimonials

Display customer feedback with accompanying images for authenticity.

Content Discovery

Encourage users to explore different pieces of content, such as articles, recipes, or portfolio items, through an interactive interface.

Interactive Storytelling

Create immersive narratives by combining text and visuals in a swipeable format.

Onboarding Flows

Guide new users through key features or steps in an app with a series of informative cards.

Social Media Highlights

Showcase user-generated content or social media posts in a dynamic, swipeable format.

Event Promotion

Feature upcoming events, speakers, or sessions in a visually appealing card stack to drive interest and attendance.

Educational Content

Present educational material, such as flashcards or quick tips, in an interactive way that encourages learning and retention.

Team Collaboration

Use the card stack to share ideas, feedback, or project updates in a visually engaging format during team meetings or brainstorming sessions.

Portfolio Display

Creatives can use the card stack to showcase their work, allowing potential clients or employers to easily browse through projects with accompanying descriptions and images.

Elevate Your Canvas

Ready to transform your site’s user experience and eliminate scrolling fatigue for good?

The MDX_StackCards is more than just a UI component—it is a conversion-driven layout engine designed for designers who refuse to compromise on performance or aesthetics. By integrating this bilinear, aspect-ratio-stabilized deck into your project, you provide your audience with a tactile, engaging way to explore content that feels natural on every device. Stop settling for static lists and start building immersive interfaces that captivate and retain.

Get MDX_StackCards