El repte: Contingut visual per a músics independents
Per a projectes musicals com Bitter Parade, la presència visual és tan vital com la música mateixa. A l'era de YouTube i TikTok, publicar una cançó sense un vídeo acompanyant és perdre oportunitats. Però crear lyric videos de qualitat sol requerir hores d'edició en After Effects, Premiere o contractar un professional.
Necessitàvem una manera de generar visualitzadors atractius i sincronitzats per a tot un àlbum, ràpidament i sense fricció. Així va néixer Lyrics Video Creator.
La solució: Lyrics Video Creator
Hem desenvolupat una eina web interna que permet transformar una pista d'àudio i una imatge de portada en un vídeo professional amb lletres animades en qüestió de minuts. Oblida't de les línies de temps complexes.
Com funciona?
- Puja el teu àudio i art: Acceptem MP3/WAV i qualsevol imatge per al fons.
- Enganxa la lletra: Simplement copia i enganxa el text de la cançó.
- Sincronitza jugant: Prem la barra espaiadora al ritme de la música per marcar quan apareix cada línia. És com jugar al Guitar Hero.
- Exporta a 1080p: El renderitzat es fa al núvol o en local, generant un fitxer MP4 llest per pujar.
Sota el capó: Stack Tecnològic
Utilitzem Remotion per renderitzar components de React com a fotogrames de vídeo. Això ens permet utilitzar tot el poder de CSS (inclòs Tailwind CSS v4) i animacions web per crear efectes visuals complexos que serien molt tediosos de fer a mà.
Tecnologies clau:
- Next.js 15: El framework React per a la producció, gestionant el routing i l'API.
- Remotion: El motor que converteix React en MP4.
- Zustand: Gestió d'estat ultra-ràpida per a la reproducció i sincronització.
- Wavesurfer.js: Visualització de l'ona d'àudio per a una referència visual precisa.
- Radix UI + Lucide: Components accessibles i iconografia consistent.
