feat: canvas-based live preview — show crop/rotation/color changes instantly

[magic-peach]

Currently there is no visual feedback when the user changes framing, rotation, brightness, contrast, or saturation — the only way to see the result is to run a full FFmpeg export. This makes iteration extremely slow.

What to build

Add a canvas-based live preview that updates instantly as the user changes settings:

• Use the HTML5 <video> element as the source and draw frames onto a <canvas> using ctx.drawImage()
• Apply CSS filters (brightness(), contrast(), saturate()) to the canvas for color adjustment preview
• Apply CSS transform: rotate() for rotation preview
• Apply canvas clip/letterbox logic to preview the selected aspect ratio / framing (fit vs fill)
• The preview should update on every requestAnimationFrame while the video is paused, and continuously while playing

Files to modify

• src/components/VideoPreview.tsx — replace or augment the <video> element with a <canvas> overlay
• src/hooks/useVideoEditor.ts — pass the current recipe to the preview component

Acceptance criteria

• Rotation changes (0/90/180/270°) are reflected in the preview without exporting
• Brightness / contrast / saturation sliders update the preview in real time
• The aspect ratio framing (fit/fill) is visually indicated in the preview
• Performance: no layout thrashing; use requestAnimationFrame
• The export result still uses FFmpeg (the canvas is preview-only)

---

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]

👋 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!

[github-actions]

Claude encountered an error —— View job

---

I'll analyze this and get back to you.

[Pranav-IIITM]

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

[github-actions]

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

[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 editor architecture, FFmpeg workflow, preview rendering flow, responsive UI structure, and state management patterns used throughout the application.

I understand that this task involves implementing a high-performance canvas-based live preview system that provides immediate visual feedback for transformations such as rotation, framing, and color adjustments without requiring a full FFmpeg export.

My approach would include:

• integrating a canvas rendering layer alongside the existing video preview
• using requestAnimationFrame for efficient frame updates during playback and paused-state previews
• rendering frames with ctx.drawImage() while applying real-time visual transformations
• applying brightness, contrast, and saturation adjustments using CSS/canvas filter pipelines
• implementing rotation preview handling for 0° / 90° / 180° / 270°
• visually reflecting aspect ratio framing and fit/fill behavior within the preview
• ensuring preview rendering remains lightweight and avoids layout thrashing

I’ll also ensure:

• the preview stays synchronized with current editor recipe values
• playback interactions remain smooth during live updates
• the implementation remains responsive across different viewport sizes
• light and dark mode styling remain visually consistent
• the actual export pipeline continues using FFmpeg only
• the required local screen recording is included in the PR

Looking forward to contributing to Reframe.

[jagzgotspark]

Hi @magic-peach , I'd like to work on this issue contributing under GSSoC'26.
please assign me this issue.

[github-actions]

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