SplitReveal is a lightweight, responsive before-and-after image comparison component for Framer.
Built to showcase visual transformations such as photo edits, UI redesigns, AI generation, makeup/beauty retouches, and 3D renders.
SplitReveal delivers smooth, hardware-accelerated comparison dragging across both desktop and mobile devices.
Bi-Directional Reveal: Switch seamlessly between Horizontal (left/right) and Vertical (top/bottom) split modes directly from Framer’s controls.
Auto-Responsive Layout: Solves collapsed height issues by letting the base image automatically drive container dimensions in "Fit Content" layouts, with optional fixed Aspect Ratio overrides (16:9, 4:3, 1:1, etc.).
Customizable Labels & Typography: Optional overlay badges with built-in Google Font support (defaults to crisp DM Mono uppercase styling) and customizable colors, font size, and background blur.
Full Design Control: Tweak divider width, divider color, drop shadows, handle size, handle color, and border radius to match your exact site design.
Performance & Accessibility: Fully static-renderer aware (useIsStaticRenderer), preserving zero visual artifacts during site exports while remaining keyboard-accessible (Arrow keys, Home, End).
Design Portfolios: Showcase UI/UX redesigns, website rebrands, and wireframe-to-final-product comparisons.
Photography & Retouching: Display photo edits, color grading, and portrait retouches side-by-side.
AI & 3D Tools: Demonstrate prompt-to-image outputs, upscaling tools, and raw vs. rendered 3D models.
E-Commerce & Products: Highlight product restored states, clean vs. dirty surfaces, or physical transformations.
SplitReveal is a lightweight, responsive before-and-after image comparison component for Framer.
Built to showcase visual transformations such as photo edits, UI redesigns, AI generation, makeup/beauty retouches, and 3D renders.
SplitReveal delivers smooth, hardware-accelerated comparison dragging across both desktop and mobile devices.
Bi-Directional Reveal: Switch seamlessly between Horizontal (left/right) and Vertical (top/bottom) split modes directly from Framer’s controls.
Auto-Responsive Layout: Solves collapsed height issues by letting the base image automatically drive container dimensions in "Fit Content" layouts, with optional fixed Aspect Ratio overrides (16:9, 4:3, 1:1, etc.).
Customizable Labels & Typography: Optional overlay badges with built-in Google Font support (defaults to crisp DM Mono uppercase styling) and customizable colors, font size, and background blur.
Full Design Control: Tweak divider width, divider color, drop shadows, handle size, handle color, and border radius to match your exact site design.
Performance & Accessibility: Fully static-renderer aware (useIsStaticRenderer), preserving zero visual artifacts during site exports while remaining keyboard-accessible (Arrow keys, Home, End).
Design Portfolios: Showcase UI/UX redesigns, website rebrands, and wireframe-to-final-product comparisons.
Photography & Retouching: Display photo edits, color grading, and portrait retouches side-by-side.
AI & 3D Tools: Demonstrate prompt-to-image outputs, upscaling tools, and raw vs. rendered 3D models.
E-Commerce & Products: Highlight product restored states, clean vs. dirty surfaces, or physical transformations.
Bipin Sharma
