MODAX

Before

After

Modern Living Transformation

Drag to reveal how unfinished space becomes a luxary interior.

MDX_BeforeAfterSlider

Visual Proof, Performance Driven.

Get MDX_BeforeAfterSlider

Get MDX_BeforeAfterSlider

Get MDX_BeforeAfterSlider

Get MODAX updates

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

Product Refinement

Showcase the transition from raw manufacturing prototypes to studio-ready luxury goods with pixel-perfect detail.

Explore MODAX Components

32 layout combinations · Preview card to read the full guide

Product Refinement

Showcase the transition from raw manufacturing prototypes to studio-ready luxury goods with pixel-perfect detail.

Explore MODAX Components

32 layout combinations · Preview card to read the full guide

Product Refinement

Showcase the transition from raw manufacturing prototypes to studio-ready luxury goods with pixel-perfect detail.

Explore MODAX Components

32 layout combinations · Preview card to read the full guide

Aesthetic Precision

Deliver high-impact visual proof of results in clinical and aesthetic medicine through side-by-side transformation clarity.

Explore MODAX Components

32 layout combinations · Preview card to read the full guide

Aesthetic Precision

Deliver high-impact visual proof of results in clinical and aesthetic medicine through side-by-side transformation clarity.

Explore MODAX Components

32 layout combinations · Preview card to read the full guide

Aesthetic Precision

Deliver high-impact visual proof of results in clinical and aesthetic medicine through side-by-side transformation clarity.

Explore MODAX Components

32 layout combinations · Preview card to read the full guide

Asset Craftmanship

Asset Craftsmanship,Reveal the technical artistry behind game assets by sliding between untextured wireframe meshes and final cinematic renders.

Explore MODAX Components

32 layout combinations · Preview card to read the full guide

Asset Craftmanship

Asset Craftsmanship,Reveal the technical artistry behind game assets by sliding between untextured wireframe meshes and final cinematic renders.

Explore MODAX Components

32 layout combinations · Preview card to read the full guide

Asset Craftmanship

Asset Craftsmanship,Reveal the technical artistry behind game assets by sliding between untextured wireframe meshes and final cinematic renders.

Explore MODAX Components

32 layout combinations · Preview card to read the full guide

Neural Upscaling

Prove the power of AI enhancement tools by comparing low-resolution legacy images with hyper-detailed, upscaled 4K results.

Explore MODAX Components

32 layout combinations · Preview card to read the full guide

Neural Upscaling

Prove the power of AI enhancement tools by comparing low-resolution legacy images with hyper-detailed, upscaled 4K results.

Explore MODAX Components

32 layout combinations · Preview card to read the full guide

From Logic to Luxary

Bridge the gap between engineering and final production. This view highlights the transition from a technical 2D blueprint or CAD wireframe to a photorealistic, textured 3D product render.

Explore MODAX Components

32 layout combinations · Preview card to read the full guide

From Logic to Luxary

Bridge the gap between engineering and final production. This view highlights the transition from a technical 2D blueprint or CAD wireframe to a photorealistic, textured 3D product render.

Explore MODAX Components

32 layout combinations · Preview card to read the full guide

Surface Restoration

Highlight the microscopic difference in surface quality, from oxidized paint to high-gloss ceramic coated finishes.

Explore MODAX Components

32 layout combinations · Preview card to read the full guide

Surface Restoration

Highlight the microscopic difference in surface quality, from oxidized paint to high-gloss ceramic coated finishes.

Explore MODAX Components

32 layout combinations · Preview card to read the full guide

🛠 Core Features & Technical Capabilities

✦

↔↕ Dual Orientation

Vertical (left/right drag) and Horizontal (top/bottom drag). Toggle with a single property control. Rail, split line, momentum, keyboard, and reveal animation all adapt automatically.

✦

🖼 Smart Media Engine

Upload or URL for both images. Cover and Contain fit modes. Contain mode generates a blurred backdrop fill automatically. Five aspect ratio presets plus custom input.

✦

📝 Content Layer System

Title, description, and optional CTA button with four position modes: Above, Below, Overlay, and Glass Overlay. Alignment control applies across all modes.

✦

✨ Scroll Auto-Reveal

IntersectionObserver-based reveal animation — sweeps 0→100% then settles at a configured position. Three speed presets. Trigger Once toggle. No scroll event listeners.

✦

📱 Swipe Momentum

Ring buffer tracks last 5 pointer samples on release. Flick velocity carries forward with spring deceleration. Works on mouse and touch. Dead zone prevents accidental momentum.

✦

🎨 Three Handle Styles

Pill (3-bar rounded rectangle), Circle (round button), Arrow (left/right chevrons). All use accent color with glow blur beneath.

✦

🏷️ Badge Labels

Before/After rail labels in Text (plain uppercase) or Badge (solid accent fill, white text, pill shape) style.

✦

🌙 Dark Mode

Auto (follows Framer canvas/published theme), Light (forced), Dark (forced). CSS class injection — zero JavaScript state. Neumorphic shadows on dark surface.

✦

⌨️ Keyboard Accessible

Full aria-slider with valuemin, valuemax, valuenow, valuetext. Arrow key navigation adapts to orientation. Configurable Tab Index. Accent glow focus ring.

✦

Intelligent Clipping System

Utilizes framer-motion for hardware-accelerated clipPath transitions, ensuring zero-lag interactions.

✦

Art-Directed Aspect Ratio

Features a lockAspectRatio toggle allowing designers to define custom ratios (e.g., 1.5, 16:9) that persist across breakpoints.

✦

Built-in Resilience

Includes a Skeleton Loading State with a "Media Missing" diagnostic fallback to prevent layout shifts during asset loading.

✦

Accent Color Control

Synchronizes the slider handle, internal tracks, and visual guides to match brand identity.

✦

Frame Padding & Radius

Allows for a "windowed" look with inner and outer radius calculations to maintain professional nesting.

✦

Accessibility First

Native support for keyboard navigation and ARIA attributes, making it a professional-grade "infrastructure layer".

✦

Reduced Cognitive Load

Users don't have to look back and forth between two images; they physically "wipe" the old state away to reveal the new.

✦

Space Efficiency

It occupies the space of a single image while delivering the data of two, perfect for mobile-first SaaS and Portfolio sites.

✦

Haptic Interaction

The physics-based spring (stiffness: 350, damping: 35) provides a "premium feel" that encourages users to stay on the page longer.

✦

⚡ GPU Accelerated

willChange: clip-path on image layer, willChange: transform on thumb. Both promoted to compositor layer for 60fps drag on all devices.

One Component. Infinite Possibilities.

Explore how MDX_BeforeAfterSlider adapts to every industry.

AI Generation Reveal

Compare a raw text prompt or low-res sketch against the final AI-generated masterpiece to showcase model power.

Digital Staging

Slide between an empty room and a fully furnished 3D-rendered interior to help buyers visualize potential.

Photo Restoration

Demonstrate the precision of retouching or color grading by wiping away the "Original" to reveal the "Enhanced" state

Product Variations

Switch between two different material finishes or colorways (e.g., Matte vs. Gloss) on a single product shot.

Legacy vs. Modern UI

Perfect for case studies showing a "Before" outdated interface vs. the "After" MODAX-powered redesign.

Product Refinement

Showcase the transformation from raw manufacturing prototypes to studio-ready luxary goods with pixel perfect detail.

Aesthetic Precision

Deliver high-impact visual proof of results in clinical and aesthetic medicine through side-by-side transformation clarity.

Asset Craftmanship

Asset Craftmanship, Reveal the technical artistry behind game assets by sliding between untextured wireframe meshes and final cinematic rendered.

Neural Upscaling

Prove the power of AI enhancement tools by comparing low-resolution legacy images with hype-detailed, upscaled results.

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_BeforeAfterSlider

Get MDX_BeforeAfterSlider

Get MDX_BeforeAfterSlider

Get MODAX Releases First

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

Create a free website with Framer, the website builder loved by startups, designers and agencies.