Experience the most versatile image comparison component for Framer.
Whether you are a photographer showcasing "Before & After" edits, a designer presenting a brand refresh, or a developer highlighting code transformations, Omni-Angle provides a high-end, interactive experience that fits any site aesthetic.
Unlike standard sliders, Omni-Angle breaks the horizontal barrier, allowing you to set the comparison line at any degree while maintaining perfect drag physics.
Key Features
360° Rotation: Set your comparison angle to vertical, horizontal, or any diagonal degree.
3 Visual Themes:
Glassy: Modern frosted-glass look with high-end backdrops.
Neumorphic: Soft, extruded UI for clean, tactile designs.
Minimal: Bold and direct, focusing entirely on the content.
Dynamic Labels: Responsive "Before/After" tags that intelligently fade to avoid handle overlap.
Safe-Zone Logic: Smart padding ensures your labels never get clipped by rounded corners.
High Performance: Optimized with clip-path masks and framer-motion for buttery smooth 60FPS interactions.
Component Properties
PropertyDescriptionBefore/After ImagesEasy image upload slots for both comparison layers.VariantSwitch between Glassy, Neumorphic, and Minimal presets.AngleA 0° to 360° slider to rotate the comparison axis.Handle ColorCustom color picker for the handle line and icons.Handle SizeAdjust the diameter of the interactive drag pill.Start PositionSet where the slider starts (default is 50%).RadiusAdjust the corner roundness of the entire container.LabelsToggle to show/hide "Before" and "After" text overlays.
How to Use
Drag and Drop: Place the component into any Frame in your project.
Upload Content: Set your "Before" and "After" images in the properties panel.
Choose Your Vibe: Select a theme variant that matches your site's design system.
Set the Angle: Use the Angle slider to create unique diagonal comparisons for a more dynamic look.
Go Live: No code or extra setup required!
Muhammad Hassan
