Now let me read the slider component since we'll use it for the scrub bar:

Now I have everything I need. Let me build the app - I'll create a dark cinematic theme, a video canvas component, a scrub controller, and the main page. Let me start by updating the theme and creating the components:

Now let me create all the components:

Now let me fix a subtle issue — the VideoCanvas component needs to re-render when a file is loaded so the upload overlay hides properly. Let me update it to use state for tracking loaded status:

I need to switch hasVideoRef to state so React re-renders and hides the upload overlay:

Now update the template to use the state variable for rendering:

Now let me also add drag-and-drop support to the video canvas for a better UX:

Let me add a helper to load a file (shared between click-upload and drag-and-drop), and add drag/drop handlers:

Now add the drag/drop handlers to the container div:

The dual video scrubber app is ready. Here's what I built:

• VideoCanvas — A reusable component that renders a <video> element onto a <canvas> via requestAnimationFrame. Supports file upload via click or drag-and-drop, and exposes seekTo, play, and pause methods via a ref handle.
• ScrubController — A shared timeline control with a custom-styled Radix slider, play/pause, reset, mute buttons, timecodes, and keyboard shortcuts (Space for play/pause, arrow keys for frame-stepping).
• DualVideoPlayer — Orchestrates two VideoCanvas instances and one ScrubController, keeping them in sync with a shared animation frame loop.
• Dark cinematic theme — Updated globals.css with a deep blue-black palette and a teal-blue accent color for the scrubber and interactive elements.