![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 321 298" xmlns="http://www.w3.org/2000/svg"><g d="M 0 127.6 L 0 198.236 C 69.918 157.411 140.39 117.479 209.241 74.874 C 214.505 71.183 211.14 62.953 212.401 57.158 L 214.186 0 Z M 36.457 218.743 C 55.115 228.693 74.988 236.979 92.149 249.378 C 94.656 248.338 100.812 244.377 104.7 242.246 L 267.162 147.746 L 267.668 253.248 L 320.922 223.106 L 319.414 51.287 L 36.461 218.743 Z M 132.672 262.993 L 190.445 298.159 L 237.167 271.032 L 236.666 202.204 Z" fill="transparent" height="298.15866666666676px" id="oYPaEMfJR" width="320.9215952380952px"><path d="M 0 127.6 L 0 198.236 C 69.918 157.411 140.39 117.479 209.241 74.874 C 214.505 71.183 211.14 62.953 212.401 57.158 L 214.186 0 Z M 36.457 218.743 C 55.115 228.693 74.988 236.979 92.149 249.378 C 94.656 248.338 100.812 244.377 104.7 242.246 L 267.162 147.746 L 267.668 253.248 L 320.922 223.106 L 319.414 51.287 L 36.461 218.743 Z" fill="rgb(255, 255, 255)" height="253.2480238095239px" id="Ps7e7nkBH" width="320.9215952380952px"/><path d="M 0 60.788 L 57.773 95.954 L 104.495 68.828 L 103.994 0 Z" fill="rgb(255, 255, 255)" height="95.95444047619047px" id="GI6IQNK9l" transform="translate(132.672 202.204)" width="104.49528571428569px"/></g></svg>)
MODAX
🛠 Core Features & Technical Capabilities
✦
↔↕ Dual OrientationVertical (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 EngineUpload 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 SystemTitle, description, and optional CTA button with four position modes: Above, Below, Overlay, and Glass Overlay. Alignment control applies across all modes.
✦
✨ Scroll Auto-RevealIntersectionObserver-based reveal animation — sweeps 0→100% then settles at a configured position. Three speed presets. Trigger Once toggle. No scroll event listeners.
✦
📱 Swipe MomentumRing 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 StylesPill (3-bar rounded rectangle), Circle (round button), Arrow (left/right chevrons). All use accent color with glow blur beneath.
✦
🏷️ Badge LabelsBefore/After rail labels in Text (plain uppercase) or Badge (solid accent fill, white text, pill shape) style.
✦
🌙 Dark ModeAuto (follows Framer canvas/published theme), Light (forced), Dark (forced). CSS class injection — zero JavaScript state. Neumorphic shadows on dark surface.
✦
⌨️ Keyboard AccessibleFull aria-slider with valuemin, valuemax, valuenow, valuetext. Arrow key navigation adapts to orientation. Configurable Tab Index. Accent glow focus ring.
✦
Intelligent Clipping SystemUtilizes framer-motion for hardware-accelerated clipPath transitions, ensuring zero-lag interactions.
✦
Art-Directed Aspect RatioFeatures a lockAspectRatio toggle allowing designers to define custom ratios (e.g., 1.5, 16:9) that persist across breakpoints.
✦
Built-in ResilienceIncludes a Skeleton Loading State with a "Media Missing" diagnostic fallback to prevent layout shifts during asset loading.
✦
Accent Color ControlSynchronizes the slider handle, internal tracks, and visual guides to match brand identity.
✦
Frame Padding & RadiusAllows for a "windowed" look with inner and outer radius calculations to maintain professional nesting.
✦
Accessibility FirstNative support for keyboard navigation and ARIA attributes, making it a professional-grade "infrastructure layer".
✦
Reduced Cognitive LoadUsers don't have to look back and forth between two images; they physically "wipe" the old state away to reveal the new.
✦
Space EfficiencyIt occupies the space of a single image while delivering the data of two, perfect for mobile-first SaaS and Portfolio sites.
✦
Haptic InteractionThe physics-based spring (stiffness: 350, damping: 35) provides a "premium feel" that encourages users to stay on the page longer.
✦
⚡ GPU AcceleratedwillChange: clip-path on image layer, willChange: transform on thumb. Both promoted to compositor layer for 60fps drag on all devices.
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.
