Technical Specification: Browser-Based Video Cropper & Resizer

Overview

This is a high-performance, client-side video processing tool that utilizes FFmpeg.wasm to allow users to crop and resize videos directly within their web browser. No files are uploaded to a server, ensuring total user privacy and instant processing.

Core Features

• Drag-and-Drop Interface: Intuitive file ingestion for MP4, WebM, and MOV files.
• Visual Cropping Tool: An interactive preview area where users can draw a crop box or drag handles to define the area to keep.
• Aspect Ratio Presets: One-click buttons for popular ratios (16:9, 9:16, 1:1, 4:3).
• Custom Dimension Resizing: Manual input fields for width and height (pixels).
• FFmpeg Processing Engine: Real-time console feedback during transcoding.
• Instant Download: Automatic generation of the modified video file for client-side download.

UI/UX Design

• Aesthetic: Clean, professional, and utilitarian. Uses a strictly Light Mode theme with a palette of soft grays, white backgrounds, and deep blue call-to-action buttons.
• Layout:
  • Header: Simple, bold centered title and a short descriptive tagline.
  • Main Work Area: Split-pane design. Left side contains the original video preview with an interactive overlay for cropping. Right side contains settings (Preset selection, Custom Dimensions, Resolution, Start/Process button).
  • Results Section: Once processed, a result card appears below the main area showing the download button and a short success message.
• Animations:
  • Smooth transition when a file is loaded.
  • Subtle loading spinner/progress bar overlay while FFmpeg is working.
  • Micro-interactions for button hover states (slight lift and shade change).
• Responsiveness: Must be 100% mobile-responsive, ensuring the crop tool handles touch input for mobile devices correctly.

Constraints & Technical Requirements

• Single-File Architecture: The entire application (HTML, CSS, JavaScript) must reside in a single HTML file. External dependencies (FFmpeg.wasm) must be fetched from CDNs at runtime.
• No Dark Mode: Implement in a crisp light theme only. No toggle switch for dark mode.
• No Footer: The interface should be focused purely on the tool; do not include links, legal disclaimers, or SEO footers at the bottom of the page.
• Sandbox Ready: The code must be clean and modular enough to function perfectly inside a sandboxed iframe without breaking security policies (CORS, etc.).
• Self-Contained Logic: All logic, state management (handling video blobs), and UI updates must be handled within standard browser APIs.