Social Image Generator — um estúdio de posts para uma agência de viagens
Uma ferramenta no browser que gera posts prontos a descarregar — 1:1 e 9:16 — para uma agência de viagens. Preenche alguns campos, escolhe um layout, larga uma foto, descarrega PNG.
Construímos esta ferramenta para um cliente de uma agência de viagens amplificada que precisava de produzir conteúdo para Instagram e Facebook rapidamente, sem ter de abrir o Figma ou o Canva de cada vez.
A ferramenta corre inteiramente no browser — sem backend, sem passo de build. React 18 carregado por CDN, Babel Standalone para JSX, html2canvas para exportação PNG. Implementada na Vercel, atrás de um simples código de acesso.
O que faz
- 5 composições de layout (foto a toda a largura, painel, postal, editorial, cartão encaixado)
- 3 direções visuais com sistemas de cor distintos
- 3 tratamentos tipográficos (serifa editorial em itálico, sans moderno, display em maiúsculas)
- Todos os campos de conteúdo são opcionais — campos vazios desaparecem da saída
- Exporta 1080×1080 (feed) e 1080×1920 (stories/reels) em PNG
Uma correção interessante
box-shadow num elemento com transform: rotate() em CSS renderiza incorretamente no html2canvas. Trocar por filter: drop-shadow() produz o mesmo resultado visual e captura corretamente.