Framecraft Studio

Resumo curto

Framecraft é uma aplicação web para criar mockups e composições premium para portfólios, cases e redes sociais. O projeto nasceu de uma necessidade pessoal: ter mais controle sobre a apresentação dos meus trabalhos sem depender de marcas-d’água, limitações de exportação ou assinaturas de outras ferramentas.

Contexto

Apresentar um projeto digital vai além de mostrar a interface funcionando. Perspectiva, dispositivo, proporção, fundo e hierarquia visual influenciam como o trabalho é percebido.

As ferramentas que eu utilizava resolviam parte desse processo, mas limitavam recursos importantes ou inseriam sua própria identidade no resultado. Decidi construir uma alternativa orientada ao meu fluxo de trabalho e preparada para evoluir como produto.

O desafio

Criar uma experiência que oferecesse controle visual suficiente sem transformar o editor em uma interface intimidadora.

A aplicação também deveria funcionar sem cadastro, salvar projetos automaticamente, suportar diferentes dispositivos e exportar imagens prontas para múltiplos canais.

A solução

O Framecraft reúne em um único editor:

Mockups para desktop, tablet e celular.
Controle de escala, perspectiva, rotação, sombra e desfoque.
Fundos, cores e imagens personalizadas.
Textos e stickers editáveis.
Upload de adesivos próprios.
Camadas com ordenação, bloqueio e visibilidade.
Guias magnéticas e atalhos de teclado.
Biblioteca de projetos salva localmente.
Templates reutilizáveis e totalmente editáveis.
Exportação PNG em múltiplas resoluções e formatos sociais.

Decisões de produto

Valor antes do cadastro
Os projetos são armazenados em IndexedDB. O usuário pode experimentar todo o fluxo principal sem criar uma conta.

Templates como ponto de partida
Os templates preservam a imagem atual e mantêm todos os atributos editáveis. Eles aceleram a composição sem retirar autoria.

Consistência nos detalhes
Dialogs nativos foram substituídos por componentes próprios. Estados de salvamento, erros e confirmações seguem a mesma linguagem visual do editor.

Evolução compatível
Novos atributos de elementos possuem migração para composições anteriores, evitando quebrar projetos já salvos.

Stack

Next.js
React
TypeScript
Tailwind CSS
Zustand
IndexedDB
html-to-image
Vercel

Resultado

O projeto evoluiu de um editor de mockups para uma base funcional de produto criativo. Hoje, ele já faz parte do meu próprio processo de apresentação e possui uma arquitetura pronta para receber autenticação, sincronização na nuvem, planos e colaboração.

Mais do que substituir uma ferramenta paga, o Framecraft transformou uma etapa fragmentada do meu trabalho em uma experiência única, consistente e reutilizável.