How to Clone CapCut

Create a CapCut-style short-video editor called Reelcraft as a Next.js (App Router) + Tailwind + Prisma + SQLite project. Scope it to a templates-first captioned-reels maker.

## Product
Make vertical (9:16) videos two ways: from a template (slot clips into placeholders) or on a simple timeline. Auto-captions from audio, music, text overlays, export. Freemium: free exports watermarked + 720p, Pro is clean 1080p plus AI tools.

## Screens
- Marketing landing: looping vertical-video hero, feature strip, pricing toggle (monthly/yearly, yearly highlighted), FAQ accordion
- Templates: grid of vertical templates with hover preview and 'use template'
- Editor: top 9:16 preview, bottom horizontal timeline (trim/split/reorder clips), tool bar (Templates, Captions, Music, Text, Stickers, Filters), Export
- Captions panel: editable segments with text, timing and a style picker (karaoke highlight, word-by-word pop)
- My Videos: grid of renders with re-edit/download
- Profile: subscription, account

## Prisma schema
User (id, email, name, isPro, trialEndsAt, aiCredits), Template (id, title, category, durationSeconds, thumbnailUrl, definitionJson, isPremium), Project (id, userId, title, timelineJson, thumbnailUrl, updatedAt), Render (id, projectId, status, outputUrl, watermarked)

## Logic
- Timeline model in JSON: ordered clips with in/out trims, a captions track (segments with text+timing+style), a music track, text overlays with timing; preview by syncing an HTML5 <video> to the model
- Undo/redo and autosave by treating the timeline model as immutable state mutated through pure operations
- Auto-captions: a single async function (transcribe) that currently mocks segments after a timeout - structure it for a Whisper-style API; gate the AI styles behind isPro
- Captions are editable: each segment's text, timing and style can be tweaked after generation
- Render: an async job (renderVideo) that currently mocks an output URL - structure it so a server-side ffmpeg/Remotion pipeline drops in; free renders are watermarked + 720p, Pro clean 1080p
- Templates: definitionJson describes placeholder slots; 'use template' clones it into a new project timeline
- 'Start free trial' sets isPro with trialEndsAt = now + 7 days (mock checkout; structure it so Stripe replaces it)

## Style
Bold creator energy, dark UI: near-black editor, electric-cyan + lime accents, rounded controls, crisp 9:16 preview, tactile timeline. Inter. Mobile-first portrait, usable on laptop.
On laptop the timeline widens with a zoom control; on phone the tool bar is scrollable chips and the timeline is finger-draggable.
Reserve the cyan/lime accents for the playhead, the active tool and the Export button so the dark UI stays calm.

Seed: 8 templates across categories, a demo Pro user with 2 projects and a couple of completed renders.

Build a production-quality CapCut-style short-video editor, scoped to a templates-first captioned-reels maker. Mobile-first PWA driving a server-side render pipeline; keep the timeline model portable to a React Native port.

## Stack
- Next.js 14 App Router + TypeScript + Tailwind + shadcn/ui, next-pwa
- Preview: HTML5 video synced to a typed TimelineModel; overlays composited in the preview layer (real export is server-side, so preview can be approximate)
- Rendering: a job queue invoking server-side ffmpeg (or Remotion) workers; renders are async with status + progress
- Supabase: Postgres, Auth, Storage for clips/templates/renders
- Stripe Billing: Pro monthly + yearly, trial, customer portal
- AI: provider-agnostic services for transcription (Whisper-style) and generation (Replicate/fal)

## Critical architecture
- TimelineModel is the source of truth: typed tracks (video/audio/caption/text) with clips carrying in/out trims, timing and style; edits mutate it immutably for undo/redo and autosave; the server renderer consumes the SAME model so preview and export agree
- Rendering and transcription are async, queued and metered: a render/transcribe row tracks status; workers update it; credits/Pro checks happen server-side; clients can never trigger a clean 1080p render or an AI job without entitlement
- Templates are TimelineModels with placeholder slots; 'use template' deep-clones and rebinds slots to the user's clips
- Be explicit that smooth on-device 1080p editing/export is the hardest part - we deliberately keep on-device editing lightweight and render on the server

## Schema
profiles (id, is_pro, trial_ends_at, ai_credits), templates (id, title, category, duration_seconds, thumb_path, definition jsonb, is_premium), projects (id, user_id, title, timeline jsonb, thumb_path, updated_at), renders (id, project_id, status, output_path, watermarked, error), ai_jobs (id, user_id, type, status, credits_spent). RLS everywhere; per-user storage; signed URLs.

## Implementation order
1. Scaffold, Supabase schema + RLS, auth, clip upload to storage
2. TimelineModel + editor: tracks, trim/split/reorder, text + music tracks, preview sync, undo/redo, autosave
3. Templates: definition model, gallery, 'use template' clone-and-rebind
4. Auto-captions via transcription service (segments track) with editable styles; gate AI styles behind Pro
5. Render queue: server ffmpeg/Remotion worker consuming TimelineModel; watermark+720p free, clean 1080p Pro; status UI
6. Paywall + Stripe Checkout with trial; webhook sets is_pro; PWA polish

## Quality bar
- Preview scrubbing stays smooth on a mid phone; the timeline doesn't jank with 10+ clips
- No clean render or AI job is reachable without server-verified entitlement
- Conversion + funnel events to PostHog (template_used, caption_generated, render_started, paywall_shown, trial_started)

Start with step 1, then show me the TimelineModel types and the render-queue design before building the editor.

Design the complete UI for a CapCut-style short-video editor called Reelcraft. React + Tailwind + shadcn/ui + lucide-react. Aesthetic: bold creator energy on a dark canvas - near-black editor surfaces, electric-cyan and lime accents, rounded controls, a crisp vertical 9:16 preview that's always the focal point, a tactile horizontal timeline. Inter type, confident and punchy.

## Screens

### 1. Marketing landing
- Hero with a looping vertical sample reel in a phone frame, bold headline 'Make scroll-stopping videos in minutes', glowing CTA
- Feature strip (Templates, Auto-captions, Music, AI tools), pricing toggle (monthly $7.99 / yearly $49.99 with badge), FAQ accordion, dark footer

### 2. Templates gallery
- Grid of vertical template cards that preview-play on hover, category chips (Trends, Promo, Vlog, Listings, Podcast), premium crowns, a 'Use template' button

### 3. Editor (the centerpiece)
- Top: a centered 9:16 video preview with a transport bar (play/pause, current time, fullscreen)
- Middle: a tool bar of icon+label chips (Templates, Captions, Music, Text, Stickers, Filters, Speed)
- Bottom: a horizontal multi-track timeline - a video track with clip thumbnails, a captions track, a music track - with a scrubber playhead, drag-to-trim handles, split and a zoom control
- Top-right: undo/redo and a prominent Export button

### 4. Captions panel
- A list of caption segments with inline text editing, a style picker (font, color, highlight, animation presets like 'word-by-word pop'), and a 'Re-generate captions' action with an AI sparkle

### 5. Export / render sheet
- Resolution selector (720p free / 1080p Pro), watermark note for free, a progress ring while rendering, then a result with download + share

### 6. Paywall modal
- Glass card over a blurred editor: benefits (No watermark, 1080p+, Premium templates, AI captions), plan selector (yearly preselected), trial note, CTA, restore link

### 7. Empty & loading states
- Editor empty state: an 'Add clips' dropzone plus a 'Start from a template' shortcut
- Caption-generating state: a shimmer over the captions track with a 'transcribing audio…' caption
- Render state: a progress ring with stages (Preparing → Rendering → Finishing) and a watermark note for free

Mobile-first portrait, but design the editor so it also works on a laptop (timeline gets wider). Use realistic content - template names, caption text in a trendy karaoke style, music track names, clip thumbnails. Make the timeline and the 9:16 preview feel premium and responsive.
Keep the dark UI calm; reserve the cyan/lime accents for the playhead, the active tool and the Export button.

Build a short-video editor app (CapCut model) called Reelcraft, scoped to a templates-first captioned-reels maker.

## Entities
- Template: title, category (trends/promo/vlog/listing/podcast), durationSeconds, thumbnailUrl, definitionJson (placeholder slots, text, music), isPremium
- Project: user, title, timelineJson (clips, captions, music, text overlays), thumbnailUrl, updatedAt
- Render: project reference, status (queued/rendering/done/failed), outputUrl, watermarked (boolean)
- UserProfile: isPro, trialEndsAt, aiCredits

## Roles & permissions
- Visitor: sees landing page and pricing only
- Free user: full editing; exports are watermarked and 720p; premium templates and AI tools are locked
- Pro user: clean 1080p exports, premium templates, AI captions/tools
- Admin: dashboard (users, Pro count, renders run, popular templates), manage templates

## Pages
1. Landing: vertical-video hero, pricing (monthly $7.99 / yearly $49.99 with trial), FAQ
2. Templates: grid of vertical templates with preview and 'use template'
3. Editor: 9:16 preview, horizontal timeline (trim/reorder clips), tool bar (Templates, Captions, Music, Text, Stickers, Filters), export
4. My Videos: grid of renders with re-edit and download
5. Profile: subscription status, account
6. Admin: templates table and a render log

## Rules
- Free exports are watermarked and capped at 720p; Pro exports are clean 1080p
- Auto-captions call an external transcription API; AI tools spend credits; final render runs as a server-side job
- Trial sets isPro true and trialEndsAt = now + 7 days; revert to free after expiry

## Look & feel
Bold creator energy, dark UI: near-black editor, cyan + lime accents, crisp 9:16 preview, tactile timeline. Mobile-first portrait, usable on laptop.

Seed with one admin user, a demo Pro user with 2 projects, 8 templates and a couple of completed renders.