Layrcut

Browser-based layout studio for memes and social reels.

Compose multi-panel video layouts, add text, grade color, and export high-quality MP4 — sized for Instagram, TikTok, X, LinkedIn, and Facebook. Everything runs in the browser; media stays on your device.

---

Features

• Platform aspect ratios using official recommendations:

  Platform	Ratio	Export
  Instagram Reels	9:16	1080×1920
  Instagram Post	4:5	1080×1350
  TikTok	9:16	1080×1920
  X / Twitter	16:9	1920×1080
  LinkedIn	1:1	1080×1080
  Facebook	1:1	1080×1080

• Multi-panel layouts — side-by-side, grid, stack, large+two, and more
• Freehand frames — move and resize video panels on the canvas
• Text overlays — multi-text with font, size, color, bold/italic/underline, drag to place
• Color grading — temperature/tint wheel, brightness / contrast / saturation, plus presets (Cinematic, Vibrant, Warm sun, Cool blue, Soft fade, Moody, Fresh)
• High-quality export — H.264 CRF 18 · AAC 192kbps via FFmpeg.wasm
• Local media — import videos; metadata cached in IndexedDB
• Responsive UI — desktop three-pane studio; mobile bottom sheets for Media / Layouts / Edit

Stack

Layer	Choice
App	Vite · React 19 · TypeScript
UI	Tailwind CSS 4 · Radix primitives · Lucide
State	Zustand
Export	@ffmpeg/ffmpeg (WebAssembly)
Persistence	IndexedDB

Quick start

Requirements: Node.js 20+ (22 recommended; see .nvmrc)

git clone https://github.com/dipankar-js/layrcut.git
cd layrcut
nvm use   # optional
npm install
npm run dev

Open the local URL shown in the terminal. You’ll land on a short marketing page — Start creating (or /#studio) opens the editor.

Scripts

Command	Description
npm run dev	Start the Vite dev server
npm run build	Type-check and production build
npm run preview	Preview the production build
npm run lint	Lint with Oxlint

Usage

1. From the landing page, open the studio.
2. Pick a platform in the top bar (logo + ratio).
3. Import videos from the Media panel (or Media sheet on mobile).
4. Choose a layout, then add clips to frames (drag or Add to frame).
5. Move / resize frames; add and style text.
6. Apply a grade preset or fine-tune with the color wheel.
7. Export → high-quality MP4 downloads to your machine.

Shortcuts

Key	Action
Space	Play / pause preview
Delete / Backspace	Clear selected frame or remove selected text

Project structure

src/
  components/   # UI: stage, media, inspector, grade wheel, export
  engine/       # FFmpeg export, color math, text → PNG, presets
  layouts/      # Platform ratios + layout templates
  store/        # Zustand stores (media, project, playback, UI)
  pages/        # Studio page shell

Privacy

Layrcut processes video in your browser. Files are not uploaded to a Layrcut server. Export uses FFmpeg core loaded from a CDN (@ffmpeg/core via jsDelivr) and runs locally with WebAssembly. Cross-origin isolation headers (COOP / COEP) are set in Vite so SharedArrayBuffer works for FFmpeg.

License

MIT © 2026 Dipankar

Contributing

Issues and pull requests are welcome. For larger changes, open an issue first to discuss the approach.