What is KubeezCut?

KubeezCut is a fully client-side, multi-track video editor that runs without a backend. Your media never leaves your machine — everything from decoding to rendering to export happens locally inside the browser tab, powered by modern web platform APIs.

• GPU-accelerated — effects, compositing, and transitions run as WebGPU compute shaders
• Frame-accurate — custom Clock engine with WebCodecs-based export
• Non-destructive — full undo/redo, keyframe animation, and project bundling
• Private by design — no server, no cloud, no account required

Media generation — Kubeez is the media generation platform for creating AI-generated assets you can bring into KubeezCut (see Generate media in Screenshots).

Screenshots

Landing images live in public/assets/landing/:

Export — Encoding runs in the browser (WebCodecs: MP4, WebM, MOV, MKV; see Export under Features). Output size matches your project canvas; the Video settings screenshot above is where preset resolutions and custom width/height are chosen.

Features

Timeline & Editing

• Multi-track timeline — video, audio, text, image, and shape tracks
• Track groups with mute / visible / locked gate propagation
• Trim, split, join, ripple delete, and rate stretch tools
• Rolling edit, ripple edit, slip, and slide tools
• Per-track Close Gaps — removes dead space between clips
• Filmstrip thumbnails and audio waveform visualization
• Pre-compositions (nested sub-comps, 1 level deep)
• Timeline markers for organizing long edits
• Source monitor with mark in/out via playhead or skimmer, plus insert/overwrite edits
• Configurable undo/redo history depth

GPU Effects

All visual effects run as WebGPU shaders — zero CPU overhead during preview.

Blend Modes

25 GPU-accelerated blend modes — normal, darken, multiply, color burn, linear burn, lighten, screen, color dodge, linear dodge, overlay, soft light, hard light, vivid light, linear light, pin light, hard mix, difference, exclusion, subtract, divide, hue, saturation, color, luminosity.

Transitions

• All-GPU pipeline — dissolve, sparkles, glitch, light leak, pixelate, chromatic aberration, radial blur
• Standard transitions — fade, wipe, slide, 3D flip, clock wipe, iris (with directional variants)
• Adjustable duration and alignment per transition

Keyframe Animation

• Bezier curve editor with preset easing functions
• Easing presets: linear, ease-in/out, cubic-bezier, spring
• Auto-keyframe mode for hands-free recording
• Graph editor, dopesheet, and split view

Export

In-browser export via WebCodecs — no server required.

Media Import

• Files are referenced via the File System Access API — never copied
• OPFS proxy generation for smooth preview on high-bitrate sources
• Media relinking for moved or missing files
• Scene detection and optical flow analysis

Transcription

• Browser-based speech-to-text via Whisper (runs in a Web Worker, fully local)
• Models: Tiny, Base, Small, Large v3 Turbo
• Auto-generate caption text items from transcripts
• Multi-language support

More

• Native SVG shapes — rectangle, circle, triangle, ellipse, star, polygon, heart
• Text overlays with custom fonts, colors, and positioning
• GPU scopes — waveform, vectorscope, histogram
• Transform gizmo — drag, resize, rotate directly in the preview
• Layer masks with keyframeable geometry transforms
• Project bundles — export/import projects as ZIP files
• IndexedDB content-addressable storage with auto-save
• Customizable keyboard shortcuts with preset import/export

Quick Start

Prerequisites: Node.js 18+ and Chrome or Edge 113+

git clone https://github.com/MeepCastana/KubeezCut.git
cd KubeezCut
npm install
npm run dev

Open http://localhost:5173 in Chrome.

Workflow

1. Create a project from the projects page
2. Import media by dragging files into the media library
3. Build your edit — drag clips to the timeline, trim, arrange, add effects and transitions
4. Animate with the keyframe editor
5. Preview in real time with GPU compositing
6. Export directly from the browser — no upload, no wait

Browser Support

Chrome or Edge 113+ is required. KubeezCut relies on WebGPU, WebCodecs, OPFS, and the File System Access API — all of which need a modern Chromium browser.

Brave users — Brave disables the File System Access API by default. Navigate to brave://flags/#file-system-access-api, set it to Enabled, and relaunch.

Keyboard Shortcuts

See the in-app shortcuts dialog for the complete list.

Tech Stack

Development

npm run dev            # Dev server on port 5173
npm run dev:quiet      # Dev server without debug panel
npm run dev:compare    # Run dev + perf preview side-by-side
npm run build          # Production build
npm run lint           # ESLint
npm run test           # Vitest (watch mode)
npm run test:run       # Vitest (single run)
npm run test:coverage  # Coverage report
npm run routes         # Regenerate TanStack Router route tree
npm run verify         # Full CI gate: boundaries + lint + tests + build

Architecture checks (enforced pre-push)

npm run check:boundaries           # Feature isolation boundaries
npm run check:deps-contracts       # Deps contract seam routing
npm run check:legacy-lib-imports   # Block direct @/lib/* usage
npm run check:deps-wrapper-health  # Unused pass-through deps wrappers
npm run check:edge-budgets         # Feature seam coupling budgets

Performance workflow

npm run perf           # Build + serve a production-like local target (port 4173)
npm run dev:compare    # Compare dev (5173) vs prod-like (4173) side-by-side

Use npm run perf to distinguish real regressions from dev-mode noise (React overhead, HMR, debug instrumentation).

Repository Layout

src/
├── app/                     # App bootstrap, providers, debug panel
├── domain/                  # Framework-agnostic domain logic
│   └── timeline/            # Transitions engine, registry, and renderers
├── infrastructure/          # Browser/storage/GPU adapters
├── lib/
│   ├── gpu-effects/         # WebGPU effect pipeline + shader definitions
│   ├── gpu-transitions/     # WebGPU transition pipeline + shaders
│   ├── gpu-compositor/      # WebGPU blend mode compositor
│   ├── gpu-scopes/          # Waveform, vectorscope, histogram renderers
│   ├── masks/               # Mask texture management
│   ├── analysis/            # Optical flow and scene detection
│   ├── thumbnails/          # GPU-accelerated thumbnail renderer
│   ├── fonts/               # Font loading
│   ├── shapes/              # Shape path generators
│   └── migrations/          # Versioned data migration system
├── features/
│   ├── editor/              # Editor shell, toolbar, panels, stores
│   ├── timeline/            # Multi-track timeline, actions, services
│   ├── preview/             # Preview canvas, transform gizmo, GPU scopes
│   ├── player/              # Playback engine (Clock, composition)
│   ├── composition-runtime/ # Rendering sequences, items, audio, transitions
│   ├── export/              # WebCodecs export pipeline (Web Worker)
│   ├── effects/             # GPU effect system and UI panels
│   ├── keyframes/           # Keyframe animation, Bezier editor, easing
│   ├── media-library/       # Media import, metadata, OPFS proxies, transcription
│   ├── project-bundle/      # Project ZIP export/import
│   ├── projects/            # Project management
│   └── settings/            # App settings, keyboard shortcut editor
├── shared/                  # Shared UI, state, and utilities
├── components/ui/           # shadcn/ui base components
├── config/hotkeys.ts        # Keyboard shortcut definitions
├── routes/                  # TanStack Router (file-based, auto-generated)
└── types/                   # Shared TypeScript types

Built on / Inspired by

KubeezCut is a combined fork — built on top of FreeCut as its base, with selected features and UX patterns adapted from OpenCut, plus our own optimizations on top of both.

• FreeCut — base architecture. Fully client-side, non-linear editing, project bundling, and the foundation for our multi-track timeline, preview engine, and export pipeline.
• OpenCut — source of the smooth timeline drag-and-drop UX (drag line indicators, track hit-detection, drop zone behavior) and several UI patterns we adapted into our editor.

Our additions on top:

• Kubeez AI integration — first-class image / video / music / TTS generation powered by the Kubeez API (model picker, variant resolution, credits tracking, auto-routing edit models for reference media).
• WebGPU effects & transitions pipeline — all visual effects and transitions run as WebGPU compute shaders rather than CSS filters.
• Performance optimizations — RAF-throttled drag-drop, stale-while-revalidate model caching, generation ID extraction robustness, smart music/dialogue polling (all-songs-ready gating), and GPU pipeline device reuse.
• Professional workflow additions — keyframe Bezier editor, GPU scopes (waveform / vectorscope / histogram), pre-compositions, project bundle ZIP export/import, frame-accurate WebCodecs export.

If you like KubeezCut, please go star FreeCut and OpenCut too — this project would not exist without their work.

License

MIT — free to use, modify, and distribute.