— Lab · 2026 · React · html2canvas · Babel Standalone

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.

— Demo ao vivo
Todo o lab
Ano
2026
Stack
React
html2canvas
Babel Standalone
Vercel
No ar
Abrir demo ao vivo
Código-fonte
GitHub

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.

— Próximos passos

Conta-nos o que só existiu em palavras.

Iniciar projeto

ou escreve para info@amplifiedcreations.com · responde um membro sénior da equipa