---
title: "SplitWipe — Framer component · Best of Framer"
description: "$8.00 · Framer component · by Alexander Moreno · Backgrounds. The SplitWipe Showcase is a premium, production-ready Framer component designed to display visual projects through a highly…"
canonical: "https://framer.elliotli.dev/component/splitwipe"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/SplitWipe

# SplitWipe

Dynamic split-scroll image showcase

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

![SplitWipe preview image 1](https://framer.elliotli.dev/og/component/splitwipe/37ef85bca96553fc/1600x1200.jpg)

## Summary

The SplitWipe Showcase is a premium, production-ready Framer component designed to display visual projects through a highly engaging, scroll-triggered reveal.

## Description

**The SplitWipe Showcase** is a premium, production-ready Framer component designed to display visual projects through a highly engaging, scroll-triggered reveal. As users scroll, the current slide smoothly splits open to reveal the next one, creating a seamless and cinematic browsing experience.

**✨ Key Features:**

-   **Scroll-Driven Animations:** Smooth, hardware-accelerated clip-path animations powered by Framer Motion.
    
-   **Fully Responsive:** Uses modern CSS Container Queries to automatically adapt from a 50/50 vertical split on Desktop to a horizontal stack on Tablet and Mobile.
    
-   **Per-Project Customization:** Total control over every individual slide. Upload custom center logos, and define unique banner background and text colors per project to match distinct brand identities.
    
-   **Production-Ready & Bug-Free:** Built with clean React code, unique ID generation to prevent SVG conflicts, and robust fallbacks for Framer's image handling.
    

**🛠 How to Use:**

1.  Drag and drop the component onto your Desktop breakpoint.
    
2.  Important: Set the component's Height to **Viewport (100vh)** and Width to **Fill (1fr)** or 100%.
    
3.  In the properties panel, add your projects. For each item, you can define the left/right images, title, custom logo, and distinct color schemes.
    
4.  Adjust the "Breakpoint Tablet/Mobile" property to control exactly when the layout switches to the stacked mobile view.
    

**💡 Performance Tip:** To keep the animation buttery smooth (60FPS) across all devices, it is recommended to keep the number of showcase items between 3 and 10 per instance.

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

-   All · #7334

## Details

- **Author**: Alexander Moreno
- **Price**: $8.00
- **Published**: 2026-05-06
- **Updated**: 2026-05-05
- **Added**: 2026-04-16
- **Categories**: Backgrounds

## More like this

-   [Live_Backgrounds.exe](/component/live-backgrounds-exe) — S̶̈́͂IX BILLIÖ̴́N HERSELF · $19 — Animated backgrounds, 19 presets
-   [Drumskin](/component/drumskin) — KOJA Studios · Free — Interactive dot grid background
-   [Eclipse Ring](/component/eclipse-ring) — Lunaut Studio · $9 — A total eclipse for your hero
-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background