MultiClipper

A Next.js web application that allows users to upload video clips, generate 10 identical copies, add text overlays with drag-and-drop positioning, and export all 10 clips in 9:16 vertical format as a zip file.

Features

• Upload video files (MP4, MOV, AVI, etc.)
• Generate 10 identical copies of the uploaded video
• Display all 10 videos in a grid playing simultaneously (muted)
• Add universal captions that apply to all clips
• Add individual captions that override universal captions per clip
• Drag-and-drop text positioning on each video
• Real-time preview of text overlays
• Export all 10 clips in 9:16 format as a ZIP file

Prerequisites

• Node.js 18+ and npm
• FFmpeg installed on your system

Installing FFmpeg

macOS:

brew install ffmpeg

Linux (Ubuntu/Debian):

sudo apt-get update
sudo apt-get install ffmpeg

Windows: Download from FFmpeg website and add to PATH.

Installation

1. Clone the repository:

cd MultiClipper

2. Install dependencies:

npm install

Development

Run the development server:

npm run dev

Open http://localhost:3000 in your browser.

Building for Production

npm run build
npm start

Project Structure

MultiClipper/
├── app/
│   ├── page.tsx                 # Main page
│   ├── layout.tsx               # Root layout
│   ├── api/
│   │   └── process-batch/
│   │       └── route.ts         # Batch processing API
│   └── globals.css              # Global styles
├── components/
│   ├── VideoUploader.tsx        # Video upload component
│   ├── VideoGrid.tsx            # Grid of 10 video players
│   ├── VideoPlayer.tsx          # Individual video player
│   ├── CaptionEditor.tsx        # Caption editing controls
│   ├── DraggableText.tsx        # Draggable text overlay
│   └── ExportButton.tsx         # Export functionality
├── lib/
│   ├── videoProcessor.ts        # FFmpeg video processing
│   └── zipUtils.ts              # ZIP file creation
└── types/
    └── video.ts                 # TypeScript types

Usage

1. Upload Video: Click or drag and drop a video file
2. View Grid: See all 10 clips playing simultaneously
3. Add Captions:
   • Enter a universal caption to apply to all clips
   • Or add individual captions for specific clips
4. Position Text: Drag the text overlay on any clip to position it
5. Export: Click "Export All Clips (ZIP)" to download all 10 processed videos

Technical Details

• Framework: Next.js 14 with App Router
• Video Processing: FFmpeg via fluent-ffmpeg
• File Upload: Next.js API routes with FormData
• UI: React with Tailwind CSS
• Drag & Drop: react-draggable
• ZIP Creation: jszip

Notes

• Video processing happens server-side using FFmpeg
• All videos are converted to 9:16 aspect ratio (1080x1920)
• Text positioning uses percentage-based coordinates
• Maximum file size: 100MB (configurable in next.config.js)

Future Enhancements

• Font styling options (family, size, color, weight)
• Style templates/presets
• Multiple text overlays per clip
• Video trimming/cropping controls
• Animation effects for text