MDX Before / After Slider is a production-ready drag-to-reveal image comparison component built exclusively for Framer. It is the only comparison slider on the Framer marketplace that supports dual-axis orientation — vertical (left/right drag) and horizontal (top/bottom drag). The component was designed for agencies, freelancers, studios, and product teams that need a complete presentation system rather than a basic image comparison widget. It includes configurable content layers, scroll-triggered reveal animation, swipe momentum physics, badge labels, handle style options, dark mode support, and keyboard accessibility. Every capability is configurable directly through the Framer property panel without touching code. Semantic correctness is enforced throughout the component: 0% = Before image fully visible 100% = After image fully visible The slider rail thumb and the image split line remain perfectly synchronized in both orientations.

The component uses pointer capture to maintain drag interaction even when the cursor leaves the component boundary. A dual pointer handler system separates rail dragging and image dragging logic while synchronizing both through a shared percentage motion value. Theme and shadow styles are injected through a shared CSS style tag to ensure multiple instances share the same styling rules. IntersectionObserver powers the reveal animation without requiring scroll listeners. GPU acceleration is enabled using clip-path and transform compositor promotion. ---