Fanstía
Volver a proyectos
En curso2026

CineGen Premium 2.0

Convierte noticias en vídeos profesionales con IA, 100% en el navegador. Sin backend, sin servidor, sin costos.

RolSolo builder
AutoresRuFFyGTLP
Captura de CineGen Premium 2.0

Descripción

Aplicación web que convierte temas o noticias en vídeos renderizados directamente en el navegador con FFmpeg.wasm. Gemini AI analiza el contenido y genera los términos de búsqueda visuales, que se buscan automáticamente en Unsplash, Pexels o Pixabay. El usuario personaliza el storyboard, ajusta resolución (720p/1080p/4K) y aspect ratio (16:9, 9:16, 1:1, 4:5), y renderiza el MP4 final localmente. Sin backend, sin servidor, sin costos recurrentes, con privacidad total (los proyectos se guardan en localStorage).

La historia

Es la versión 'serie A' de AutoVideo: misma idea (noticia → vídeo), pero en vez de generar audio narrado y montar con FFmpeg en backend, renderiza el MP4 final con FFmpeg.wasm dentro del navegador. La diferencia clave: CineGen produce un slideshow con transiciones Ken Burns sobre imágenes estáticas, mientras que AutoVideo genera un vídeo narrado con TTS. Son dos aproximaciones distintas al mismo problema. CineGen es la opción 'low friction' — abres la web, metes una noticia, y en 30 segundos tienes un MP4 descargable. La UI está cuidada: tema oscuro/OLED, animaciones con Framer Motion, paleta de comandos ⌘K, atajos de teclado, i18n en ES/EN/PT. El roadmap tiene cosas interesantes por hacer (TTS, subtítulos, música, templates, export a redes sociales, PWA offline), por eso está en 'wip' y no en 'live'.

Cómo se construyó

React 19 + TypeScript con Vite como build tool. Estado global con Zustand. Animaciones con Framer Motion. Data fetching con TanStack Query. Renderizado de vídeo 100% local con FFmpeg.wasm (no requiere backend). Gemini AI genera los términos de búsqueda visuales a partir del tema. Búsqueda de imágenes en múltiples fuentes (Unsplash, Pexels, Pixabay) con API keys configurables. i18n con i18next (ES, EN, PT). Tests con Vitest, lint con ESLint, format con Prettier.

Resultados

  • Renderizado 100% en el navegador con FFmpeg.wasm, sin backend
  • Múltiples fuentes de imágenes (Unsplash, Pexels, Pixabay)
  • 5 resoluciones: 720p, 1080p, 4K
  • 4 aspect ratios: 16:9, 9:16, 1:1, 4:5
  • 3 temas: Dark, Light, OLED
  • 3 idiomas: ES, EN, PT
  • Paleta de comandos ⌘K y atajos de teclado
  • Persistencia local con localStorage (sin servidor)

Stack

React 19TypeScriptViteZustandFramer MotionFFmpeg.wasmGemini AITanStack Queryi18nextESLint + Prettier + Vitest

Enlaces