---
title: "SplitReveal — Free Framer component · Best of Framer"
description: "Free Framer component · by Bipin Sharma · Interactive. SplitReveal is a lightweight, responsive before-and-after image comparison component for Framer."
canonical: "https://framer.elliotli.dev/component/splitreveal"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/SplitReveal

# SplitReveal

Before & After Split Reveal Images

[View on Framer](https://framer.com/marketplace/components/splitreveal/?via=elliot-li)

![SplitReveal preview image 1](https://framer.elliotli.dev/og/component/splitreveal/58048c33c497e882/1600x991.jpg)

## Summary

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

## Description

**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.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #2180

## Details

- **Author**: Bipin Sharma
- **Published**: 2026-07-29
- **Updated**: 2026-07-29
- **Added**: 2026-07-29
- **Categories**: Interactive

## More like this

-   [Drawing component](/component/drawing-component) — Ariel Barrios · Free — Just a free drawing component
-   [Code Comparison](/component/code-comparison) — Syauqizaidan Khairan Khalaf · $5 — Before and after code side by side
-   [Voice Testimonials](/component/voice-testimonials) — valorsic studio · $15 — Voiceover & typewriter reviews
-   [Product Tour Pro](/component/product-tour-pro) — Oddframe · $10 — Showcase Products Step by Step