← Tutte le idee Marketing e social

Logo Animation AI

Trasforma un logo fermo in un'animazione curata in pochi secondi

Cosa fa

Si carica il logo e l'AI crea un'animazione elegante da usare in apertura dei video, nelle storie o sul sito.

Come guadagna

Startup appena presentata su BetaList, che non dichiara incassi. Idee nostre per guadagnare con un progetto simile: pagamento per animazione o abbonamento per agenzie.

Rendilo tuo

  • Per le attività locali che fanno video sui social: logo animato in apertura.
  • Pacchetto con 5 stili e i formati per Instagram, TikTok e YouTube.

Le frasi da scrivere all'AI

1. Base del sito e grafica

Crea un'app web in italiano chiamata "Logo in Movimento": carica il logo e ottieni animazioni eleganti da usare in apertura dei video, nelle storie o sul sito: comparse, rivelazioni, rimbalzi, scie di luce, in vari formati e con il colore di sfondo scelto. Usa React, Vite, TypeScript e Tailwind CSS.

Pagine da creare:
1. Pagina iniziale con esempi di loghi animati e prezzi
2. Carica il logo (PNG trasparente o SVG)
3. Galleria di stili di animazione con anteprima del proprio logo
4. Personalizzazione: durata, colori, sfondo, suono
5. Esportazione: MP4, video con trasparenza, GIF

Stile: da studio grafico: sfondo grigio scuro #18181B, anteprime grandi, accento giallo #FACC15, carattere "Inter". 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:
- "loghi": file nello Storage, colori principali ricavati, collegati all'utente
- "animazioni": logo, stile, impostazioni, file esportati

Regole di sicurezza obbligatorie:
- ogni utente vede solo i suoi loghi e animazioni
- si caricano solo loghi propri o dei propri clienti
- i crediti non si modificano 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. Animazioni disegnate nel browser

Le animazioni si disegnano su canvas con funzioni di movimento morbide (codice nei Dettagli tecnici): 12 stili (comparsa con dissolvenza, rivelazione con maschera, rimbalzo, rotazione 3D, scia di luce, particelle che si uniscono...). L'anteprima è immediata con il logo vero, e il sito propone i colori dello sfondo ricavandoli dal logo.

L'esportazione registra la tela con MediaRecorder (WebM) e la converte in MP4 con ffmpeg.wasm, in 16:9, 9:16 e 1:1; per i programmi di montaggio anche un video con trasparenza.

Pulsante "Proponimi" che sceglie i 3 stili più adatti al logo (forme, colori, settore indicato).

4. Personalizzazione e formati

Durata (2–6 secondi), colore o sfondo sfumato, slogan sotto il logo, suono breve da una libreria senza diritti.

Ogni esportazione costa un credito; le anteprime sono gratis. Libreria delle animazioni create per scaricarle di nuovo.

5. Pagamenti con Stripe

Aggiungi pacchetti di crediti: 5 animazioni a 9 €, 20 animazioni a 25 €. Ogni nuovo utente riceve 1 crediti gratis. Ogni animazione esportata costa un credito; le anteprime sono gratis. Mostra sempre in alto quanti crediti restano e, quando finiscono, un riquadro per comprarne altri.

A pagamento riuscito il webhook aggiunge i crediti del pacchetto con la funzione aggiungi_crediti.

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. Qualità: esporta un'animazione in 1080p e guardala su un monitor grande: il logo deve essere nitido e l'animazione fluida.
Correggi quello che non va e scrivimi cosa hai cambiato.

Dettagli tecnici

Un'animazione di comparsa e la sua registrazione

Il logo entra con un piccolo rimbalzo e una dissolvenza; la tela viene registrata con MediaRecorder per ottenere il video.

// Movimento morbido con un leggero rimbalzo finale
const rimbalzo = (t: number) => 1 + 2.7 * Math.pow(t - 1, 3) + 1.7 * Math.pow(t - 1, 2);

export function disegnaFotogramma(ctx: CanvasRenderingContext2D, logo: ImageBitmap, t: number, sfondo: string) {
  const { width: L, height: A } = ctx.canvas;
  ctx.fillStyle = sfondo;
  ctx.fillRect(0, 0, L, A);
  const p = Math.min(1, t / 0.8);                         // l'entrata dura l'80% dell'animazione
  const scala = 0.6 + 0.4 * rimbalzo(p);
  const larghezza = L * 0.4 * scala;
  const altezza = (logo.height / logo.width) * larghezza;
  ctx.globalAlpha = Math.min(1, p * 1.5);
  ctx.drawImage(logo, (L - larghezza) / 2, (A - altezza) / 2, larghezza, altezza);
  ctx.globalAlpha = 1;
}

export async function registra(tela: HTMLCanvasElement, logo: ImageBitmap, secondi: number, sfondo: string): Promise<Blob> {
  const ctx = tela.getContext("2d")!;
  const registratore = new MediaRecorder(tela.captureStream(60), { mimeType: "video/webm;codecs=vp9", videoBitsPerSecond: 8_000_000 });
  const pezzi: Blob[] = [];
  registratore.ondataavailable = (e) => pezzi.push(e.data);
  registratore.start();

  const inizio = performance.now();
  await new Promise<void>((fine) => {
    const passo = () => {
      const t = (performance.now() - inizio) / 1000 / secondi;
      disegnaFotogramma(ctx, logo, Math.min(1, t), sfondo);
      if (t < 1.15) requestAnimationFrame(passo); else fine();   // un attimo fermo alla fine
    };
    passo();
  });
  registratore.stop();
  await new Promise((ok) => (registratore.onstop = ok));
  return new Blob(pezzi, { type: "video/webm" });   // poi in MP4 con ffmpeg.wasm
}

Pezzi comuni a tutti i progetti

Glossario

Storage
Lo spazio di Supabase dove si salvano i file, come foto e audio, con le sue regole di accesso.
Funzione di easing
Una formula che rende un movimento morbido e naturale, invece che a velocità costante.
MediaRecorder
La funzione del browser che registra un video da una tela o da una videocamera.