[FEATURE]: Add Dynamic Background Style Presets (Solid Color, Blur Effect & Gradients) for Canvas View

[shivani11jadhav]

🧩 Problem Description

Currently, when users adjust the aspect ratio presets (e.g., changing to vertical or square formats), the empty canvas background area remains blank or rigid. There are no interactive UI options for creators to customize the background filler space surrounding the main video frame.

🧠 Proposed Feature / Solution

I propose adding a dedicated "Background Styles" section in the configuration sidebar panel to let users dynamically customize the empty canvas area.

Implementation Plan:

1. UI Panel Integration: Add a selection group in the sidebar with options for:
   • Solid Color: A color picker tool to set any solid backdrop color.
   • Gradients: A set of pre-defined sleek gradient presets (e.g., linear transitions).
   • Blur Effect Toggle: A script logic option that clones the source video layout in the background with an applied CSS blur filter (backdrop-filter: blur()).
2. Dynamic Canvas Update: Update the core preview rendering layout wrapper to dynamically bind the selected background style rules using clean, vanilla CSS/JS.
3. Responsive Stability: Ensure the background layers scale correctly across both mobile and desktop viewports without affecting the main video aspect ratio.

🎬 Expected Behavior

• A clean "Background Customizer" section will render smoothly below the preset selector panel.
• Clicking any style preset or picking a color will instantly update the canvas backdrop surrounding the active video frame.
• No existing layout constraints or rendering calculations will break.

🚧 Working Status

I have reviewed the architecture and can immediately add this enhancement utility to the layout renderer. Please assign this to me under GSSoC 2026! 🚀

[github-actions]

👋 Thanks for opening an issue, @shivani11jadhav!

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 @shivani11jadhav, this issue has been assigned to you! 🎉 Please make progress within 5 days or it will be automatically unassigned due to inactivity.

[shivani11jadhav]

/assign gssoc

[github-actions]

Hey @shivani11jadhav, this issue is already assigned to @shivani11jadhav. Please pick another issue or wait for it to become available. You can browse open unassigned issues here: https://github.com/magic-peach/reframe/issues?q=is%3Aissue+is%3Aopen+no%3Aassignee