---
name: showcase-before-after
description: Before/After UI showcase — split-screen wipe reveal comparing two product states, UI redesigns, or workflow improvements. Routed from remotion-pro orchestrator.
source: melgarafael/growthOS
---

# Showcase: Before/After UI

**Status: Stub — Full implementation in Wave 3**

This showcase is planned for Wave 3 development. The stub reserves the skill slot, documents the specification, and displays the correct response to users who request it.

---

## Overview

The Before/After UI showcase creates a compelling comparison video that reveals a transformation using a split-screen wipe effect. Shows two states side-by-side or sequentially — old vs new, manual vs automated, before vs after your product. Ideal for redesigns, productivity gains, and transformation narratives.

Best for: UI redesigns, workflow comparisons, productivity improvements, A/B test results, product transformations.

---

## Components Used

| Component | Purpose |
|---|---|
| `SplitScreenWipe` | Animated wipe that reveals the "after" state from the "before" |
| `ScreenshotOverlay` | Layers and transitions between the two screen states |
| `BrowserFrame` | Optionally wraps both screens in browser frames |
| `AnimatedText` | Labels ("Before", "After"), stats, and result callouts |

---

## Scene Flow

```
Hook (2-3s)
  └── Problem statement or "before" label fades in

Before Screen (3-5s)
  └── "Before" screenshot appears in BrowserFrame
      AnimatedText labels it clearly
      
Wipe Reveal (2-3s)
  └── SplitScreenWipe sweeps across (left-to-right or center-out)
      Both states briefly visible simultaneously

After Screen (3-5s)
  └── "After" state revealed
      AnimatedText highlights key improvements
      
Result (2-3s)
  └── Stat or outcome callout (e.g., "60% faster")

CTA (3-4s)
  └── Branded CTA with product name or URL
```

**Total Duration:** 15–30 seconds

---

## Required Config

```yaml
# From video-profile.yaml or briefing
before:
  screenshot: "assets/screenshots/before.png"
  label: "Before"
  caption: "Manual process — 2 hours"

after:
  screenshot: "assets/screenshots/after.png"
  label: "After"
  caption: "With our tool — 5 minutes"

wipe_direction: left-to-right | right-to-left | center-out
result_stat: "95% time saved"
device_frame: browser | none
cta_text: "Start your free trial"
primary_color: "#7C3AED"
```

---

## Stub Response

When a user requests this showcase, display:

```
⚡  BEFORE/AFTER UI SHOWCASE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
This showcase is coming in Wave 3 of a video pipeline.

What it will produce:
  • Split-screen wipe reveal comparison
  • Before and after screenshots with device frames
  • Result stat callout (e.g., "95% faster")
  • Branded CTA closing sequence
  • Duration: 15–30 seconds

To be notified when this is ready, check the 
changelog or watch the remotion/ directory for updates.

In the meantime, you can use the existing remotion-video skill
for general Remotion composition work.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
```