Concat

Un'alternativa gratuita a CapCut che lavora sul tuo computer

Cosa fa

Programma di montaggio video gratuito e open source, che lavora sul computer dell'utente senza caricare i video online.

Come guadagna

Progetto open source su GitHub con oltre 11.000 stelle, che non dichiara incassi. Ha licenza AGPL: puoi partire dal suo codice, ma se offri la tua versione online devi pubblicare anche il tuo codice modificato. Idee nostre per guadagnare: modelli e effetti a pagamento, versione per scuole e associazioni.

Rendilo tuo

Non competere con un montatore completo: fai uno strumento per un solo tipo di video, come i video degli annunci immobiliari.
Modelli pronti in italiano per i social delle attività.

Le frasi da scrivere all'AI

1. Base del sito e grafica

Crea un'app web in italiano chiamata "Monta Facile": un montaggio video semplice che lavora nel browser sul computer dell'utente: si mettono in fila le clip, si tagliano inizio e fine, si aggiungono titoli e musica, e si esporta un unico video, senza caricare nulla online. Usa React, Vite, TypeScript e Tailwind CSS.

Pagine da creare:
1. Pagina principale: trascina le clip
2. Linea del tempo con le clip in fila, da riordinare e tagliare
3. Titoli e testi sopra il video, musica di sottofondo
4. Esportazione con avanzamento
5. Pagina Pro

Stile: da montaggio: sfondo grafite #1F2937, linea del tempo con clip colorate, cursore rosso #EF4444, carattere "Inter", anteprima grande in alto. Nessuna immagine generica di stock.

Tutto deve funzionare perfettamente da telefono. Tutti i testi in italiano, chiari e senza parole tecniche.

2. Database, account e sicurezza

Collega il progetto a Supabase e attiva la registrazione con email e password.

Crea queste tabelle:
- nessun video viene caricato: il progetto resta nel browser
- "profili": piano

Regole di sicurezza obbligatorie:
- i video restano sul computer dell'utente
- il piano non si modifica dal browser

Usa esattamente il codice SQL che trovi nei "Dettagli tecnici" di questa scheda: eseguilo nel SQL Editor di Supabase prima di continuare, poi collega le pagine alle tabelle.

3. Clip in fila ed esportazione

L'utente trascina le clip; per ognuna si leggono durata e risoluzione. Sulla linea del tempo si riordinano trascinandole e si tagliano trascinando i bordi; l'anteprima usa il player del browser con i tempi di inizio e fine.

L'esportazione usa ffmpeg.wasm: ogni clip viene tagliata e portata alla stessa risoluzione e frequenza dei fotogrammi, poi tutte vengono unite in un unico file (codice nei Dettagli tecnici). Titoli e musica si aggiungono nello stesso passaggio.

Il progetto (ordine, tagli, titoli) si salva nel browser per riprenderlo dopo, ma i video restano solo sul computer.

4. Formati e Pro

Esportazione in orizzontale 16:9, verticale 9:16 per i social o quadrato, fino a 1080p.

Pro: esportazione in 4K, transizioni (dissolvenza), più tracce audio, sottotitoli da file SRT, e nessuna filigrana.

5. Pagamenti con Stripe

Aggiungi un pagamento singolo di 9,99 € una volta sola. Il pagamento sblocca il 4K, le transizioni, più tracce audio, i sottotitoli e toglie la filigrana.

A pagamento riuscito il webhook imposta "piano" a "pro" nella tabella "profili", sulla riga dell'utente indicata in client_reference_id.

Per la sessione di pagamento e il webhook segui la guida "Pagamenti con Stripe" di Fattibile.

6. Controlli specifici di questo progetto

Oltre ai controlli della guida "Controllo finale", verifica in particolare:
1. Unione: monta 3 clip girate con telefoni diversi (risoluzioni e orientamenti diversi): il video finale deve avere un formato unico e l'audio sincronizzato.
Correggi quello che non va e scrivimi cosa hai cambiato.

Dettagli tecnici

Tagliare e unire le clip

Ogni clip viene tagliata e uniformata (risoluzione, fotogrammi, audio), poi ffmpeg le unisce in un unico video con il filtro concat.

import { FFmpeg } from "@ffmpeg/ffmpeg";
import { fetchFile } from "@ffmpeg/util";

type Clip = { file: File; inizio: number; fine: number };   // secondi

export async function esporta(clip: Clip[], larghezza = 1920, altezza = 1080, onAvanzamento?: (p: number) => void) {
  const ffmpeg = new FFmpeg();
  if (onAvanzamento) ffmpeg.on("progress", ({ progress }) => onAvanzamento(Math.round(progress * 100)));
  await ffmpeg.load();

  const ingressi: string[] = [];
  const filtri: string[] = [];
  for (let i = 0; i < clip.length; i++) {
    const nome = "clip" + i;
    await ffmpeg.writeFile(nome, await fetchFile(clip[i].file));
    ingressi.push("-ss", String(clip[i].inizio), "-to", String(clip[i].fine), "-i", nome);
    // Stessa misura (con bande nere se serve), 30 fotogrammi, audio stereo 48 kHz
    filtri.push(
      "[" + i + ":v]scale=" + larghezza + ":" + altezza + ":force_original_aspect_ratio=decrease," +
      "pad=" + larghezza + ":" + altezza + ":(ow-iw)/2:(oh-ih)/2,setsar=1,fps=30[v" + i + "];" +
      "[" + i + ":a]aresample=48000,aformat=channel_layouts=stereo[a" + i + "]",
    );
  }
  const unione = clip.map((_, i) => "[v" + i + "][a" + i + "]").join("") + "concat=n=" + clip.length + ":v=1:a=1[v][a]";

  await ffmpeg.exec([
    ...ingressi,
    "-filter_complex", filtri.join(";") + ";" + unione,
    "-map", "[v]", "-map", "[a]",
    "-c:v", "libx264", "-preset", "veryfast", "-crf", "23", "-c:a", "aac", "-b:a", "160k",
    "finale.mp4",
  ]);
  return new Blob([await ffmpeg.readFile("finale.mp4")], { type: "video/mp4" });
}

Pezzi comuni a tutti i progetti

Glossario

ffmpeg.wasm: Il programma FFmpeg per lavorare i video, adattato per girare dentro il browser.
Linea del tempo: La striscia su cui si mettono in fila le clip di un montaggio.