← Projetos · Case

Case · Dev Web · Mobifans

Mobi
Studio.

Abr 2026 → atual
HTML5 Canvas JavaScript Vanilla CSS3 Vite Netlify

01 — Contexto / Problema

cliente · desafio · oportunidade

A Mobifans vende capinhas personalizadas de smartphone, mas não tinha como mostrar ao cliente como a arte ficaria aplicada no aparelho antes da compra. O processo era manual, lento, e dependia de um vendedor na hora para montar um preview.

A lacuna era clara: criar uma ferramenta web que permitisse ao próprio cliente ou ao vendedor no quiosque. Poder visualizar a capinha em tempo real, com controle total de posição, escala e rotação da arte. Sem intermediários, sem espera.

Contexto

A mobifans queria trazer a experiência de personalização de volta, dado que um dos motivos para que parassem de produzir as personalizadas. Era a falta de uma ferramenta atualizada para isso e que facilitada para o uso leve.

Problema central

As ferramentas que utilizavam eram pesadas, lentas, e dependiam de terceiros. Gerando muito ruído na produção.

Oportunidade

Construir um personalizador web nativo (sem dependências pesadas) capaz de rodar em qualquer dispositivo.

02 — Meu Papel

projeto solo · full stack
Responsabilidade

Design

Baseando na identidade visual que a mobifans transpassa, sendo muito plural em diversos sentidos. Escolhi o estilo Neo-Brutalismo, criando um Design System para unificar toda direção de arte. Servindo de teste visual, visando levar essa ID para o futuro novo site da Mobifans.

Responsabilidade

Front-end

Motor Canvas 2D com 3 camadas de renderização, drag & drop, zoom por scroll, rotação, layouts dinâmicos (1/2/3/4/6 slots), histórico de undo e exportação em alta resolução via html2canvas.

Responsabilidade

Deploy

Hospedagem no Netlify com deploy automático via Git, backend serverless com Netlify Functions + Express, e configuração de CI/CD para o ciclo de versões v1.x.

03 — Processo & Solução

arquitetura · motor canvas · estampas
Wizard flow do MobiStudio Passo 01 · Seleção de Modelo
Motor Canvas com controles de edição Passo 03 · Editor Canvas

A decisão arquitetural mais importante foi abandonar React em favor de HTML estático + JavaScript Vanilla (v1.0). Isso eliminou o overhead de bundle, acelerou o carregamento e simplificou a manutenção. O motor Canvas foi construído do zero com a Canvas API 2D nativa — três camadas sobrepostas: mockup base, slots de imagem com hit-detection por área, e overlay de máscara com suporte a buracos de câmera.

Para as Estampas Prontas (v1.7), o desafio era colorizar SVGs dinamicamente sem Canvas extra ou bibliotecas externas. A solução: fetch do SVG → DOMParser → injeção de <rect> de fundo → pintura de paths com cor de foreground → XMLSerializer → Blob URL. Sem vazamento de memória, com URL.revokeObjectURL() aplicado antes de cada nova geração.

// buildColoredEstampa — colorização SVG sem Canvas extra nem bibliotecas externas async function buildColoredEstampa(svgPath, bgColor, fgColor) { const res = await fetch(svgPath); const text = await res.text(); const doc = new DOMParser().parseFromString(text, 'image/svg+xml'); const svg = doc.querySelector('svg'); // injeta rect de fundo antes de tudo const rect = doc.createElementNS('http://www.w3.org/2000/svg', 'rect'); rect.setAttribute('width', '100%'); rect.setAttribute('height', '100%'); rect.setAttribute('fill', bgColor); svg.insertBefore(rect, svg.firstChild); // pinta cada path com fgColor svg.querySelectorAll('path').forEach(p => p.setAttribute('fill', fgColor)); const blob = new Blob( [new XMLSerializer().serializeToString(doc)], { type: 'image/svg+xml' } ); return URL.createObjectURL(blob); // revogado antes da próxima chamada }
Layouts dinâmicos — 1/2/3/4/6 slots LAYOUT PERSONALIZÁVEL · 1/2/3/4/6 SLOTS
Catálogo de estampas SVG com seletor de cores CATÁLOGO DE ESTAMPAS · SELETOR DE CORES
Exportação de preview em alta resolução EXPORTAÇÃO · ALTA RESOLUÇÃO

04 — Resultado

em produção · v1.7.1

28 dias

v0.1 → v1.7.1

95+

Commits · 13 versões

De zero a produção em 28 dias. O MobiStudio foi construído do zero — sem framework, sem biblioteca de UI — e foi entregue um motor Canvas completo com drag, zoom, rotação, 6 layouts dinâmicos, estampas SVG personalizáveis por cor e exportação em alta resolução. Está em produção no Netlify com deploy automático via Git, servindo os quiosques da Mobifans.
Atualmente estou trabalhando na versão 2.0, que trará a adição de textos. E após isso, irei preparar para ser conectado ao E-Commerce.

Ver projeto ao vivo ↗

Próximo case →

Rap in
Cena.

Thumbnail Rap in Cena