Hey everyone, I wanted to share a major upgrade we just shipped for AetherCut, an app focused on keeping video editing 100% privacy-first and local. Most mobile video editors force a massive compromise: you either build a lightweight app that pushes heavy rendering to a cloud server, or you fight hardware constraints to keep everything local. We chose the hard way. By pairing React with native browser WebCodecs and MediaRecorder APIs, we route all video processing directly to the device’s own GPU. If you open your browser DevTools while editing, you’ll see zero outbound video data. We just rolled out a massive mobile editor upgrade focusing on localized timelines and transition matrices. Here is what we built and how we handled it under the hood: 🚀 What's New in the Mobile Upgrade Native Capture & Dual-Handle Trimming: Record clips directly inside the app (front/rear camera) and trim frames immediately with a custom dual-handle slider UI. On-Device Reel Assembly: Join multiple clips into one reel locally. Every clip is cut to its own trim completely client-side. Timeline Reordering: Added drag-and-drop reordering by long-pressing clip tabs (or using precision ◀ ▶ arrows) backed by a one-tap Undo state stack. Each clip tab dynamically renders a first-frame thumbnail. Per-Boundary Transitions: Instead of global effects, users can set hard cuts, crossfades, slides (push), or wipes per boundary. Includes directional control (up/down/left/right) and precise timing intervals from 0.2s to 1s. UI Polish: Animated CSS/Canvas previews on every transition button so users choose by sight. The app also remembers your favorite style for smart defaults next time. 🛠️ The Technical Hurdles (For the Devs) Managing memory and state when handling multiple high-definition video assets simultaneously on mobile is brutal. State vs. GPU Synchronization: We had to ensure that React’s component state tightly mirrors the low-level WebCodecs decode/encode pipeline without introducing UI blocking loops. Transition Matrices: Calculating real-time directional slide and wipe transitions locally on lower-end mobile devices required strict optimization of our rendering loops to prevent frame drops. UI Layout Quirks: We fought some interesting mobile styling bugs during testing—specifically a modal centering issue caused by Radix ScrollArea’s display: table viewport and various viewport overflows on compact screens. 📱 Try It Out https://play.google.com/store/apps/details?id=app.aethercut.twa&pcampaignid=web_share The app is fully production-ready and passing 100+ automated regression tests. If you want to check out the layout or audit the network traffic yourself, you can grab it here:   submitted by   /u/Sad-Cartographer-328 [link]   [comments]