[FEATURE]: Improve dual video synchronization using frame-based updates

[Priyanshu1-62]

Target File: src/components/ComparisonPreview.tsx

Feature description

• Replace timeupdate-based synchronization with requestVideoFrameCallback() (falling back to requestAnimationFrame() where unavailable) to achieve smoother frame-level synchronization between the comparison videos.

Problem this solves

• The comparison view synchronizes the right video with the left using the timeupdate event.
• Since this event is throttled by browsers and does not fire for every rendered frame, the right video can temporarily lag behind the left during playback, especially on high refresh rate displays or while seeking.

Proposed solution

• Replace the timeupdate-based synchronization with requestVideoFrameCallback() to synchronize videos on every rendered frame,
• Add a fallback to requestAnimationFrame() for browsers that do not support the API.

Benefits

• Provides smoother, frame-accurate synchronization between the comparison videos.
• Reduces visible playback drift on high refresh rate displays and during rapid seeking.
• Avoids relying on the browser's throttled timeupdate event for synchronization.

Additional context

• Labels: GSSoC'2026, type: feature, type: performance
• I want to work on this issue.

[Priyanshu1-62]

/assign

[github-actions]

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

[github-actions]

👋 Thanks for opening an issue, @Priyanshu1-62!

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 @Priyanshu1-62, just a friendly reminder that this issue has had no activity for 2 days. Please leave an update or let us know if you need help! ⏰