# 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.

- **Source:** https://amplifiedcreations.com/pt/lab/social-image-generator
- **Publisher:** amplified creations (https://amplifiedcreations.com/)
- **Published:** 2026-05-16
- **Updated:** 2026-05-17
- **Language:** pt
- **Stack:** React, html2canvas, Babel Standalone, Vercel
- **Live demo:** https://ptthe13.github.io/amplifiedlabs/social-image-generator/
- **Source code:** https://github.com/PTthe13/amplifiedlabs/tree/main/social-image-generator

---

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.

---

Publicado por amplified creations, estúdio de tecnologia independente em Leiria e Lisboa, Portugal. Contacto: info@amplifiedcreations.com · Mais: https://amplifiedcreations.com/llms.txt