MDX_BASlider

Visual Proof, Performance Driven.

Get MDX_BASlider

MODAX SYSTEM

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.

02 Key Features

🧊

Glassmorphic System

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

03 Properties

ENUMDEFAULT: URL

Before Source

Select image input mode for before image

04 User Guide

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.

No-code setup with powerful interaction built-in

Fully customizable visual system for branding

Optimized performance with smooth 60fps motion

Technical Notes

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