Caso de estudo de Gabriel Espinheira, engenheiro full-stack sénior
SnapForge, imagens de lançamento sem upload
Uma app web gratuita que coloca uma captura ou uma gravação de ecrã numa moldura de dispositivo ou de browser e exporta uma imagem 4K ou um vídeo curto, tudo dentro do separador do browser. Construí-a a dirigir agentes de programação: primeiro commit a 09/10/2026, versão 0.2.0 a 11/10/2026.
Ainda no início: versão 0.2.0, com código privado.
Três dias, em números
7
molduras de dispositivos e janelas
12
modelos que montam uma cena inteira
4.096
píxeis no lado mais comprido de um PNG
0
ficheiros enviados para um servidor
142
testes em 29 ficheiros
24
commits de 09/10 a 11/10/2026
Contado a partir do repositório a 12/10/2026, na versão 0.2.0.
Uma imagem de produto, sem o upload
Um lançamento precisa de mostrar bem os seus ecrãs: num telemóvel ou num portátil, sobre um fundo, às vezes em movimento. O Shots faz mockups no browser, e o Screen Studio dá acabamento a gravações de ecrã no Mac. Os dois são bons, e os dois definiram a fasquia que procurei.
O SnapForge junta os dois trabalhos numa app web gratuita e mantém cada ficheiro no computador de onde veio, porque uma captura de lançamento costuma mostrar trabalho que ninguém viu ainda. Os mockups vêm primeiro e já funcionam; a edição de gravações no browser e um gravador para macOS estão planeados. Três promessas moldam cada funcionalidade:
- Gratuito
- sem conta, sem nada para instalar, todas as funcionalidades no browser
- Privado
- sem servidor de renderização: os ficheiros são descodificados, renderizados e exportados dentro do separador, e os rascunhos ficam no armazenamento do próprio browser
- Exato
- uma imagem sai no tamanho que definir, até 4096 píxeis de lado, com fundo transparente quando o quiser
Tudo o que uma imagem de produto precisa
Molduras, modelos, fundos, movimento e exportação, num só editor. Cada imagem abaixo é um painel do editor ao vivo ao lado de uma exportação que ele fez.
Dispositivos renderizados em 3D
O iPhone, o iPad, o MacBook e o iMac renderizam a partir de modelos 3D através do Three.js, iluminados por um estúdio de produto suave construído em código, e o Pixel é um modelo original. As imagens e os vídeos correm no próprio ecrã. O ecrã guarda até ao dobro do detalhe da exportação, com filtragem anisotrópica, para que o texto num telemóvel inclinado fique nítido.
Doze modelos, um só desfazer
Um modelo define os dispositivos, os acabamentos, o layout e o fundo num só passo, e um só desfazer anula tudo. A partir daí, cada parte pode mudar: até três imagens ou vídeos numa cena, cada um na sua moldura, posicionados ao arrastar ou por um layout.
Fundos para todos os ambientes
Gradientes, cores sólidas, um desfoque dos seus próprios media, wallpapers, uma imagem sua ou uma fotografia do Unsplash. A pesquisa no Unsplash passa por um pequeno adaptador no servidor que mantém a chave de acesso fora da página; todos os outros fundos funcionam sem ele.
Movimento, codificado no separador
Zoom, órbita, flutuação e parallax correm num só relógio que conduz a pré-visualização e a exportação. O Mediabunny codifica as frames em MP4 ou WebM através do WebCodecs do próprio browser, até 1080p a 30 frames por segundo e doze segundos de duração.
Exportações no tamanho exato
Um PNG sai exatamente no tamanho que definir, até 4096 píxeis de lado, na horizontal ou na vertical, transparente se quiser. Os tamanhos guardam-se como perfis de exportação, um visual guarda-se como um preset de estilo que pode partilhar como ficheiro, e um PNG pode ir diretamente para a área de transferência.
Todas estas imagens saíram do SnapForge
Duas capturas de exemplo, um dashboard e uma app de telemóvel, em cada um dos doze modelos. Cada imagem é uma exportação direta a 1600 × 1200.
Uma cena, um renderizador
Um projeto são duas coisas guardadas à parte: os ficheiros originais, guardados tal como foram importados no IndexedDB do browser, e uma pequena cena que só se refere a eles por id. A cena guarda o fundo, até três media enquadrados, os seus estilos e movimento, e o tamanho de saída, e é tudo o que um rascunho precisa para voltar depois de recarregar.
Um só renderizador Canvas 2D desenha a pré-visualização, as miniaturas dos modelos, o PNG e cada frame de vídeo a partir da mesma cena no mesmo instante, para que uma exportação não se afaste do que estava no ecrã. A inclinação passa por um só quad WebGL com coordenadas de textura corrigidas em perspetiva, e os dispositivos renderizam através do Three.js na mesma frame.
A pré-visualização e a exportação são o mesmo código.
- 01ImportarLargar, colar ou procurar: PNG, JPEG e WebP, MP4 e MOV.
- 02Bytes originaisGuardados tal como importados no IndexedDB, à parte do projeto.
- 03CenaUm pequeno documento versionado que se refere aos media por id.
- 04Um renderizadorCanvas 2D, com WebGL para a inclinação e Three.js para os dispositivos.
- 05Pré-visualizar e exportarA mesma cena e o mesmo instante: pré-visualização, PNG, MP4 e WebM.
Seis decisões, com as suas razões
A maioria protege uma coisa: os ficheiros que traz. As outras mantêm uma edição reversível e uma exportação honesta.
Os originais ficam intactos
Os ficheiros importados são guardados byte a byte e nunca reescritos. A cena só aponta para eles, por isso um corte ou uma mudança de moldura pode sempre ser desfeita, e os media que nenhum projeto usa são apagados em vez de encherem o armazenamento do browser.
Um gesto, um desfazer
O histórico guarda instantâneos inteiros da cena com ids dos ficheiros, nunca os media. Um arrastar é um passo, por muitas frames que dure, e um modelo que muda dispositivos, layout e fundo também é um passo.
Cada carregamento é validado
O esquema da cena limita cada número, cor e id, e um rascunho é verificado contra ele sempre que abre. Os projetos guardados por versões antigas são migrados em memória, com os media deixados como estavam.
O vídeo é verificado antes de descarregar
Um codificador tem quinze segundos antes de a exportação parar com um erro claro, e as marcas de tempo das frames são verificadas depois da codificação. Um browser que perde frames recebe uma mensagem, nunca um ficheiro estragado.
Ficheiros de estilo sem os seus ecrãs
Um preset de estilo é um pequeno ficheiro que qualquer pessoa pode importar noutro projeto. Leva o visual, e os media só quando o escolhe: uma versão inicial deixava fugir para o ficheiro a captura por trás de um fundo desfocado, e a correção está coberta por um teste.
Estatísticas só depois do sim
O PostHog carrega depois de aceitar e só regista visualizações de páginas. A pesquisa no Unsplash envia as palavras que escreve e nunca os seus ficheiros, dez pedidos por hora por visitante, através de servidores fixos, sem redirecionamentos e com um limite de oito segundos.
Verificado em dois motores de browser
Cada funcionalidade correu em Chromium e WebKit reais, não só em testes unitários: três importações, um recarregamento que recupera o rascunho e PNGs exatos de 3840 × 2160 e 2160 × 3840 nos dois motores. Os ficheiros MP4 e WebM exportados foram descodificados de volta em trinta frames durante um segundo a 1920 × 1080. Onde o WebKit falhou, o repositório di-lo e o editor recusa a exportação.
Uma decisão difícil: primeiro o browser, o gravador depois
Problema
O acabamento que as pessoas conhecem do Screen Studio, zooms que seguem os cliques e um cursor que desliza, precisa de um gravador que registe cada clique e posição do cursor durante a gravação. Isso significa uma app nativa para macOS com permissões de Acessibilidade e de Monitorização de Entrada, e os primeiros planos punham essa app de desktop à frente do editor.
Opções
Construir primeiro o gravador em Electron, e nada é utilizável até a captura, as permissões e o editor funcionarem. Ou começar no browser, que já consegue descodificar, renderizar e codificar vídeo, e acrescentar o gravador quando o editor valer a pena.
Escolha
O site é o produto, e nada do que faz precisa de Electron. A cena e o renderizador são código partilhado que uma app de desktop pode reutilizar mais tarde, com as suas gravações e dados de cliques a chegar através do mesmo armazenamento local.
Custo
Uma gravação importada não traz dados de cliques nem do cursor, por isso os zooms automáticos ainda não podem existir. A exportação de vídeo fica pelos 1080p, 30 frames por segundo e doze segundos, e depende dos codificadores de cada browser: o Chromium passa MP4 e WebM, e o WebKit só passa cenas WebM simples, por isso o SnapForge rejeita o resto com um erro.
Uma decisão mais pequena: o Pixel, por medição
A Google não publica um modelo 3D do Pixel 11, por isso a sua geometria é construída em código a partir das especificações publicadas, 152,8 × 72 × 8,6 mm com um ecrã de 6,3 polegadas a 1080 × 2424, e as margens, a barra das câmaras, o furo da câmara frontal e os botões são medidos a partir de renders do produto. É uma aproximação, e o repositório di-lo.
Três dias, um plano por funcionalidade
O primeiro commit foi a 09/10/2026 e a versão 0.2.0 saiu a 11/10/2026: 24 commits, todos meus, e o trabalho aconteceu em sessões de agentes. Os meus registos locais têm 8 sessões do Claude Code e 4 do Codex no repositório.
Cada funcionalidade começou como um plano no repositório, catorze ao todo, com as verificações que definem o que está feito. O registo de verificação lista o que foi provado num browser real e o que não foi, como a pesquisa ao vivo no Unsplash, que espera por uma chave de acesso minha.
Ainda é cedo. A gravação e a edição de vídeo estão planeadas, não construídas, e o código é privado. O site de marketing, as páginas legais e as barreiras de qualidade vieram do Fabricator, a fábrica com que o meu estúdio monta os seus sites.
Precisa de alguém responsável pela construção?
Estou disponível para uma função a tempo inteiro ou para um projeto por contrato. Leio todas as mensagens pessoalmente e respondo em 2 dias úteis.
- Função a tempo inteiro
Um engenheiro sénior na sua equipa
Remoto no horário europeu, ou híbrido e presencial em Lisboa.Falar sobre uma função - Projeto por contrato
O seu produto, de ponta a ponta
Web, desktop e mobile em TypeScript, Next.js, Convex e Expo, incluindo funcionalidades de IA.Falar sobre um projeto
