ClipWise

AI-powered video editor built with React 19, Remotion, and Cloudflare Workers. Features a multi-track timeline, AI agents for image/video generation, motion graphics, and local FFmpeg processing.

Features

Multi-Track Timeline Editor

• 6-track timeline: T1 (captions), V3 (top overlay), V2 (overlay), V1 (base video), A1/A2 (audio)
• Drag-and-drop clip placement, move, resize, split, and delete
• Ripple delete with auto-snap
• Tab-based timeline for managing multiple sequences
• Resizable panels (assets, properties, AI agents, timeline)

AI Agents

Three AI agents accessible from the right panel:

Director — Video editing assistant

• Natural language video editing commands via Gemini
• Auto-captioning with word-level timestamps (Whisper transcription)
• Dead air / silence removal
• Motion graphics generation (AI writes Remotion JSX, renders to video)
• Chapter generation

Picasso — Image generation

• Text-to-image generation with prompt enhancement
• Aspect ratio selection (16:9, 9:16, 1:1, 21:9)
• Dual quality tier: Fast (FLUX Klein ~$0.006/img) or Quality (Qwen 2512 ~$0.02/img)

DiCaprio — Video generation & transformation

• Image-to-video animation with dual tier: Fast (LTX-2 Distilled ~$0.09) or Quality (Kling v1.6 ~$0.15)
• Video style transfer (LTX-2 19B)
• Video background removal (Bria/Ben v2)

Motion Graphics (Remotion)

• 11 pre-built templates (text, engagement, data, branding, mockup, showcase)
• AI-generated dynamic animations with support for titles, steps, features, stats, charts, countdowns, emoji, GIFs, Lottie, and 3D scenes
• Live preview via @remotion/player

Asset Library

• Upload video, image, and audio files
• Auto-generated thumbnails
• GIPHY search and trending GIFs
• Animated GIF creation from images with motion effects
• Audio extraction from video

Video Processing

• Local FFmpeg server for all processing (trim, render, transcode)
• Whisper-based transcription (local CPU, OpenAI API fallback, Gemini fallback)
• Session-based asset management with persistent storage

Tech Stack

Layer	Technology
Frontend	React 19, Tailwind CSS 3, Lucide icons
Video Engine	Remotion 4.x, FFmpeg (local server)
Backend API	Hono on Cloudflare Workers
AI Models	Gemini 2.5 Flash Lite, fal.ai (FLUX, Qwen, Kling, LTX-2, Bria)
Storage	Cloudflare R2 (production), local filesystem (dev)
Database	Cloudflare D1
Platform	Mocha (getmocha.com)

Getting Started

Prerequisites

• Node.js 18+
• FFmpeg installed locally
• Python 3 with openai-whisper and torch (optional, for local transcription)

API Keys

Create a .dev.vars file at the project root:

GEMINI_API_KEY=your_google_ai_key
FAL_API_KEY=your_fal_ai_key
GIPHY_API_KEY=your_giphy_key
OPENAI_API_KEY=your_openai_key   # optional, fallback transcription

Key	Required	Service
GEMINI_API_KEY	Yes	Google AI — editing commands, prompt enhancement, animation generation
FAL_API_KEY	Yes	fal.ai — image generation, video generation, style transfer, bg removal
GIPHY_API_KEY	No	GIPHY — GIF search
OPENAI_API_KEY	No	OpenAI — fallback Whisper transcription

Installation

npm install --legacy-peer-deps

Development

Run both commands in separate terminals:

npm run dev              # Vite dev server
npm run ffmpeg-server    # Local FFmpeg server (port 3333)

Other Commands

npm run build            # TypeScript + Vite production build
npm run lint             # ESLint
npm run check            # Full validation: type check + build + deploy dry-run
npm run knip             # Check for unused dependencies
npm run cf-typegen       # Generate Cloudflare worker types

Optional: Local Whisper

For free, local transcription (recommended):

pip3 install openai-whisper torch

The base model is used by default. Runs on CPU only (MPS/Apple GPU not supported).

Architecture

src/
├── react-app/           # Frontend SPA
│   ├── components/      # Timeline, VideoPreview, AssetLibrary, AI panels
│   ├── hooks/           # useProject (central state), useFFmpeg, useVideoSession
│   └── pages/Home.tsx   # Main editor layout
├── worker/index.ts      # Hono API on Cloudflare Workers (Gemini integration)
├── remotion/            # Motion graphics
│   ├── templates/       # 11 pre-built templates
│   └── DynamicAnimation.tsx  # AI-generated animations
scripts/
└── local-ffmpeg-server.js    # FFmpeg processing, asset management, AI integrations

AI Models & Costs

Image Generation (Picasso)

Tier	Model	Cost
Fast	fal-ai/flux-2/klein/9b	~$0.006/image
Quality	fal-ai/qwen-image-2512	~$0.02/image

Video Generation (DiCaprio — Animate)

Tier	Model	Cost
Fast	fal-ai/ltx-2-19b/distilled/image-to-video	~$0.09/video
Quality	fal-ai/kling-video/v1.6/standard/image-to-video	~$0.15/video

Other AI Services

Function	Model	Cost
Video restyle	fal-ai/ltx-2-19b/video-to-video	~$0.05-0.15
Background removal	fal-ai/ben/v2/video	~$0.02
Editing commands & prompts	gemini-2.5-flash-lite	Free tier available

License

Private. Built on Mocha.