Story Splitter

Overview

Story Splitter is a privacy-focused video splitting tool that runs entirely in your browser. Built as a Progressive Web App, it leverages FFmpeg.wasm to provide professional-grade video processing without any server-side processing, uploads, or data collection. Whether you need to split long videos for social media stories or create multiple segments from a single video, Story Splitter handles it all locally on your device.

The app works completely offline after the first visit, can be installed on any device, and maintains your video's original quality through intelligent stream copying.

Key Features

• Zero Quality Loss: Uses FFmpeg's stream copy (-c copy) to split videos without re-encoding, preserving original quality
• 100% Client-Side Processing: All video processing happens in your browser - no uploads, no servers, no tracking
• Progressive Web App: Install on desktop or mobile, works completely offline, auto-updates
• Smart Video Splitting: Automatic segment calculation with manual adjustment via draggable markers
• Universal Format Support: Works with MP4, AVI, MOV, MKV, WebM, and all FFmpeg-supported formats
• Modern UI: Beautiful gradient design with real-time progress tracking and batch download capabilities

Technical Implementation

Architecture Overview

Story Splitter is built as a single-page React application that leverages WebAssembly for video processing. The architecture is designed around three core principles: client-side processing, offline-first functionality, and zero quality loss.

Frontend

• React 18 with hooks for modern, reactive UI
• TypeScript with strict mode for type safety
• Vite for lightning-fast development and optimized production builds
• Tailwind CSS v4 for utility-first styling with a custom prismatic gradient theme
• Lucide React for beautiful, consistent icons

The UI features a custom video player with full playback controls, drag-and-drop file upload, and real-time preview of segment durations as split points are adjusted.

Video Processing Engine

• FFmpeg.wasm: Full FFmpeg implementation running in the browser via WebAssembly
• SharedArrayBuffer: Enables multi-threaded processing for performance
• Stream Copy Mode: Uses -c copy flag to avoid re-encoding, ensuring zero quality loss
• Intelligent Segmentation: Automatically calculates optimal split points and validates segments

PWA Features

• Service Worker: Caches all assets including FFmpeg.wasm for offline functionality
• Web App Manifest: Enables installation on desktop and mobile devices
• Auto-Update Mechanism: Notifies users when new versions are available
• Offline-First: Works without internet connection after first visit
• FFmpeg Caching: FFmpeg.wasm cached for 1 year to ensure offline video processing

Browser Compatibility

The app requires modern browser features:

• SharedArrayBuffer support (with proper COOP/COEP headers)
• WebAssembly for FFmpeg execution
• Service Workers for PWA functionality
• Supports Chrome 90+, Firefox 85+, Safari 15.2+, Edge 90+

Challenges & Solutions

1. SharedArrayBuffer Security Requirements: Modern browsers require specific COOP and COEP headers for SharedArrayBuffer

   • Solution: Configured proper headers in development and production environments, with fallback detection for unsupported browsers

2. FFmpeg.wasm Loading and Caching: Loading FFmpeg.wasm on every visit would be slow and require internet connection

   • Solution: Implemented aggressive service worker caching with 1-year cache duration for FFmpeg assets

3. Memory Management: Processing large videos in the browser can cause memory issues

   • Solution: Used stream copy mode to avoid full video decoding, implemented proper cleanup, and provided memory usage guidance

4. Split Point Validation: Short segments (< 1 second) can cause issues with video players

   • Solution: Automatic validation that merges segments shorter than 1 second with adjacent segments

Performance Optimizations

• Stream Copy Processing: Avoiding re-encoding reduces processing time by up to 100x for large videos
• Service Worker Caching: All assets cached for instant loading on repeat visits
• Lazy Loading: FFmpeg.wasm loaded only when needed
• Optimized Build: Vite's code-splitting and tree-shaking for minimal bundle size
• Progress Tracking: Real-time progress feedback prevents perceived slowness

Security & Privacy Features

• No Data Collection: Zero analytics, tracking, or telemetry
• No Server Communication: Videos never leave your device
• No User Accounts: No login required, no personal data stored
• Open Source: Full source code available for security audit
• HTTPS Only: Enforced secure connections in production
• Content Security Policy: Strict CSP headers to prevent XSS attacks

What I Learned

• FFmpeg.wasm Integration: Learned how to effectively run FFmpeg in the browser, including handling SharedArrayBuffer requirements and optimizing for performance
• Progressive Web Apps: Gained deep understanding of service workers, manifest configuration, and offline-first architecture
• WebAssembly Performance: Discovered the power of WebAssembly for CPU-intensive tasks in the browser
• Stream Copy Optimization: Understanding when to avoid re-encoding is crucial for maintaining quality and performance
• Rapid Development: Built the entire app in under 2 hours using AI-assisted development with Windsurf and Claude Sonnet 4.5

Future Plans

• Advanced Editing Features: Add trimming, cropping, and basic filters
• Batch Processing: Support multiple video files at once
• Custom Presets: Save and reuse common split configurations
• Format Conversion: Optional re-encoding with quality/size trade-offs
• Audio Extraction: Extract audio tracks as separate files
• Frame-Accurate Splitting: Keyframe detection for precise cuts
• Dark/Light Theme Toggle: Currently dark mode only
• i18n Support: Internationalization for global audience

Design & Development

The app was designed and developed using modern AI-assisted tools:

• Logo & Favicon: Generated using Gemini and Nano Banana
• UI Design: Prismatic Aurora Burst gradient with glassmorphism effects
• Development: Built using Windsurf editor and Claude Sonnet 4.5
• Development Time: Less than 2 hours from concept to deployment

This project demonstrates the power of combining modern web technologies (React, TypeScript, WebAssembly) with AI-assisted development tools to rapidly build production-ready applications.