SplitReveal

SplitReveal is a lightweight, responsive before-and-after image comparison component for Framer.

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. Key Features 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 ). Common Use Cases 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.

Before & After Split Reveal Images