MDX_BASlider

Visual Proof, Performance Driven.

Get MDX_BASlider

Get MODAX updates

New components, tips, and discounts — straight to your inbox.

MDX_BASlider

V1.0.0

A premium drag-to-reveal comparison component with glassmorphic UI, dual orientation, and cinematic interaction for Framer.

01 Overview

MDX_BASlider is a premium before/after image comparison component designed for Framer. It provides a drag-based reveal interaction with a fully glassmorphic design system that adapts seamlessly across light, dark, image, gradient, and video backgrounds. The component focuses on separation of concerns — it handles interaction, animation, and accessibility, while designers retain full control of layout, typography, and composition inside Framer.

Product Comparison

Showcase differences between two states or versions of a design.

Media

Image Transformation

Reveal before and after edits, grading, or retouching.

Marketing

Feature Highlight

Demonstrate improvements visually with interactive engagement.

Data

Visual Contrast

Compare states such as old vs new dashboards or systems.

03 Features Stage

🧊

Glassmorphic System

Unified glass UI across card, rail, and handles using backdrop blur and frosted borders.

05 Properties Gadget

07 User Guide

Step 1 of 8

Install Component:

Add MDX_BASlider from the Framer Marketplace into your project.

Create Interactive Comparisons Instantly

Drop in a **production-ready comparison system** with cinematic interaction, glass UI, and full control over visuals and behavior.

12 Technical

The component uses Motion Values and hardware-accelerated animations to ensure smooth performance. IntersectionObserver powers scroll-triggered animations. Glassmorphism is implemented with backdrop-filter and cross-browser support. Aspect ratio is controlled using padding-based layout for Framer compatibility.

The Ultimate Comparison Utility

The MDX_BeforeAfterSlider represents more than just a visual toggle; it is a high-performance infrastructure layer designed to eliminate the friction between "showing" and "proving" value. By combining a physics-calibrated discovery engine with a resilient Media Engine that supports both uploads and dynamic URLs, this component empowers designers to deliver high-impact storytelling without compromising on speed or accessibility. Whether you are showcasing AI transformations, real estate staging, or SaaS redesigns, the slider provides a premium, "Visual DNA"-consistent experience that turns passive viewing into an interactive exploration of quality.

Get MDX_BASlider

Get MODAX Releases First

Early access to components, templates, and plugins — plus exclusive freebies and limited-time discounts.