Social Image Generator — un estudio de posts para una agencia de viajes
Una herramienta en el navegador que genera posts listos para descargar — 1:1 y 9:16 — para una agencia de viajes. Rellena unos campos, elige un layout, suelta una foto, descarga PNG.
Lo construimos para un cliente de una agencia de viajes amplificada que necesitaba producir contenido para Instagram y Facebook con rapidez, sin tener que abrir Figma o Canva cada vez.
La herramienta funciona enteramente en el navegador — sin backend, sin paso de build. React 18 cargado desde CDN, Babel Standalone para JSX, html2canvas para exportar PNG. Desplegada en Vercel, detrás de un sencillo código de acceso.
Qué hace
- 5 composiciones de layout (foto a sangre, panel, postal, editorial, tarjeta encajada)
- 3 direcciones visuales con sistemas de color distintos
- 3 tratamientos tipográficos (serifa editorial en cursiva, sans moderno, display en mayúsculas)
- Todos los campos de contenido son opcionales — los campos vacíos desaparecen del resultado
- Exporta 1080×1080 (feed) y 1080×1920 (stories/reels) en PNG
Un arreglo interesante
box-shadow sobre un elemento con transform: rotate() en CSS se renderiza incorrectamente en html2canvas. Cambiarlo por filter: drop-shadow() produce el mismo resultado visual y se captura correctamente.