[BUG] Image Overlays are silently dropped during GIF exports

[Abhishek2005-ard]

Describe the Bug

The application features an "Image Overlay" tool that allows users to position a custom image or logo over their video. However, if the user selects GIF as the export format, the overlay is completely ignored, and the exported GIF will not contain the uploaded image.

This happens because the GIF export pipeline in exportVideo uses a dedicated two-pass logic (palettegen and paletteuse) to generate high-quality GIFs. However, this custom branch entirely skips the buildArguments() function and the filter_complex string, meaning the overlayInputName and overlayOptions variables are never passed to FFmpeg.

Steps to Reproduce

1. Upload a video file to the editor.
2. Scroll down to the "Image Overlay" section and upload an image (e.g., a logo).
3. Position the overlay on the video preview.
4. Go to the "Output format" section and select GIF.
5. Click Export.
6. View the resulting GIF—the image overlay is completely missing.

Expected Behavior

The exported GIF should retain the image overlay in the exact position, size, and opacity specified by the user, just like it does for MP4, WebM, and MKV exports.

Proposed Fix

In src/lib/ffmpeg.ts (inside exportVideo), the vfWithPaletteUse filter string needs to be updated to incorporate the overlay filter when an overlay image is provided, before passing the video stream to paletteuse. Additionally, the overlay image needs to be mapped as an input stream to the FFmpeg execution arguments for the second pass.

For example, the filter chain could be updated to:
[0:v][2:v]overlay=W-w-20:H-h-20[with_overlay]; [with_overlay][1:v]paletteuse

Environment

• File: src/lib/ffmpeg.ts
• Module: exportVideo (GIF Two-pass export block)

Would you like me to submit a PR to resolve this?

[Abhishek2005-ard]

/assign

[github-actions]

👋 Thanks for opening an issue, @Abhishek2005-ard!

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!

[github-actions]

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