feat: before/after comparison slider — split view of original vs adjusted video

[magic-peach]

Colour/brightness adjustments are currently invisible until export. A before/after comparison view would let users see exactly how much their adjustments change the visual output.

What to build

Add a split-view slider to the video preview when any colour adjustment (brightness, contrast, saturation) is non-zero:

• Left side: original video frame (no CSS filters)
• Right side: adjusted frame (CSS filters applied)
• A draggable vertical divider lets the user scrub between the two views
• Show a label "Before" / "After" on each side

This is a pure CSS/canvas solution — no FFmpeg needed.

Files to modify

• src/components/VideoPreview.tsx — add split-view overlay and draggable divider
• Create src/components/BeforeAfterSlider.tsx

Acceptance criteria

• Slider appears only when at least one colour adjustment is non-zero
• Divider is draggable across the full width of the preview
• Both sides update in sync as the video plays
• Accessible via keyboard (left/right arrow keys move the divider)
• Works in light and dark mode

---

Screen Recording Required

Your PR for this issue must include a screen recording showing the feature working on your local machine (bun run dev → http://localhost:3000). PRs without a recording will not be merged.

See CONTRIBUTING.md for how to record.

[github-actions]

Claude encountered an error —— View job

---

I'll analyze this and get back to you.

[github-actions]

👋 Thanks for opening an issue, @magic-peach!

Our maintainers will review this shortly 🚀

Before you start working

• 📖 Read the CONTRIBUTING.md guide
• 💬 Wait for a maintainer to assign you the issue before starting work
• 🔍 Search for existing issues to avoid duplicates

For GSSoC'26 contributors

If you're contributing under GirlScript Summer of Code 2026, please mention it in your comment when requesting assignment:

"I'd like to work on this — contributing under GSSoC'26"

Architecture notes

Reframe is a static Next.js app with output: "export". Key points:

• All video processing uses FFmpeg.wasm (client-side, no server)
• headers() in next.config.ts won't work — use vercel.json instead
• not-found.tsx requires public/404.html + vercel.json routes config

Happy contributing! ⭐ Star the repo if you find it useful!

[Pranav-IIITM]

Hi, I am a GSSoC 2026 contributor and would like to work on this issue.

/assign under GSSoC

[github-actions]

Hey @Pranav-IIITM, you already have 5 issues assigned to you. Please complete or unassign one before picking up more. 🙏

[Nightkilller]

Hi @magic-peach,

I would like to work on this issue under GSSoC'26.

I reviewed the feature requirements and I understand the need for an interactive before/after comparison slider for visualizing colour adjustments directly within the video preview.

I plan to:

• implement a split-view comparison component with synchronized original and adjusted previews
• add a draggable divider with smooth interaction handling
• support keyboard accessibility using arrow key controls
• ensure the comparison updates dynamically as adjustment values change
• maintain responsiveness and compatibility across both light and dark themes

I’ll also include the required screen recording demonstrating the feature working locally.

Please assign this issue to me under GSSoC'26. Thank you!

[srinidhi-2006-bit]

Hi @magic-peach

I’m a GSSoC’26 contributor and I would like to work on this issue.

I already have strong familiarity with the Reframe codebase since I’ve successfully completed and merged multiple contributions in this project, including PRs that closed assigned issues. This gives me a solid understanding of the video preview system, editor state management, responsive UI structure, and interaction patterns used throughout the application.

I understand that this task involves implementing an interactive before/after comparison slider that allows users to visually compare original and adjusted video output in real time without requiring FFmpeg processing.

My approach would include:

• creating a reusable BeforeAfterSlider.tsx component
• implementing a split-view overlay with synchronized original and filtered previews
• adding a draggable vertical divider with smooth pointer interactions
• supporting keyboard accessibility using left/right arrow controls
• conditionally rendering the comparison view only when adjustment values are non-zero
• ensuring playback synchronization between both preview layers
• maintaining responsiveness and compatibility with both light and dark themes

I’ll also ensure:

• the slider interaction remains smooth during video playback
• accessibility best practices are followed for keyboard and screen-reader users
• the implementation stays visually aligned with the current editor UI
• the required local screen recording is included in the PR

Looking forward to contributing to Reframe.

[rahul616sama]

Hi @magic-peach I'd love to work on this — contributing under GSSoC'26. I'm an active contributor on this repo (PR #546 — visual range slider for TrimControl). Can I be assigned? 🙏

[github-actions]

Hey @rahul616sama, this issue has been assigned to you! 🎉 Please make progress within 5 days or it will be automatically unassigned due to inactivity.