The component supports image-to-image, video-to-video, and mixed media comparisons. A draggable handle allows smooth horizontal control, while keyboard navigation enables accessible fine adjustments. Optional labels help clarify context without cluttering the layout.
Visual styling is fully customizable, including handle size, colors, line thickness, labels, and border radius. Media playback options such as autoplay, looping, and muting are supported for video content. An editor-only placeholder ensures clarity during setup inside Framer.
Visual comparisons and design changes
Product or feature highlights
Creative showcases and portfolios
Media-rich landing sections
Demonstration and presentation layouts
Use clear, visually aligned media for the most accurate comparison.
Keep labels short and unobtrusive.
For video comparisons, enable muting by default to avoid unexpected audio.
Test keyboard interaction to ensure accessibility across devices.