Pawfection
O site tinha que abrir a porta da van.
Um site de arquivo único, com roteador por hash, feito para mostrar em vez de contar. A peça central é uma linha do tempo horizontal, com máquina de estados própria, que conta a trajetória da fundadora enquanto a câmera acompanha sozinha; ao lado, um slideshow do interior da van com fotos reais do veículo. O que só o negócio saberia ficou marcado como [CONFIRMAR], em vez de inventado.
- Design e front-end
- Site · Animação · Conceito
Contexto
O que estava no ar
- A van entrava como detalhe de rodapé
- Foto de banco no lugar do serviço real
- Nada mostrava o interior do veículo
- O diferencial do negócio ficava invisível
Desafio
Banho e tosa móvel vende uma experiência invisível.
Um cão por vez, sem gaiola e sem viagem de carro, dentro de uma van equipada estacionada na garagem do cliente. Descrever isso em texto não convence ninguém.
Pesquisa
- As informações públicas do negócio, na página do Facebook: a base de tudo o que o site afirma.
- Fotos reais do veículo, por dentro e por fora, no lugar de imagem de banco.
- O que só o negócio saberia, como a foto real da groomer, as legendas dos posts e o número de licença, ficou como [CONFIRMAR].
Decisões
Uma linha do tempo que se conduz sozinha
- A primeira versão tinha barra de rolagem horizontal e cards alternando acima e abaixo: era preciso rolar a página para ler cada parada.
- Uma máquina de estados própria conduz a patinha de marco em marco, com a câmera acompanhando e dois a três marcos sempre à vista.
- A barra de rolagem horizontal saiu: quem quer pular usa o clique.
- O controle manual sai do caminho crítico; o clique é atalho, não obrigação.
A van por dentro, em foto real
- O diferencial do negócio está dentro de uma van que o cliente nunca viu por dentro.
- Um slideshow "step inside the van" com as fotos reais do veículo.
- São três fotos do interior, as reais, sem nenhuma imagem de banco para completar.
- Mostrar em vez de contar.
Recorte com borda orgânica
- O primeiro recorte, com mask-image, deixou a foto fantasmagórica.
- Opacidade cheia na foto e uma borda orgânica assimétrica.
- Sai o esfumado longo: a foto encontra o fundo numa transição curta.
- Derreter só 5 a 8% da borda.
Demonstração
Página de serviços. O violeta da marca no título e no botão, chapado. 
Borda orgânica assimétrica e derretimento de 5% só na aresta. 
A home inteira. Onde só o negócio teria a resposta, como a foto real da groomer e as legendas dos posts, o site diz [CONFIRMAR].
Conceito de prospecção, não encomendado. Não é o site oficial da Pawfection.
Interações
- Em cada um dos seis marcos, a mesma frase: a patinha viaja, entra no círculo, pausa, revela o card, sai e segue.
- A câmera acompanha sozinha, e um clique leva a qualquer ponto da linha.
- Nenhuma biblioteca de animação: a máquina de estados é própria.
Implementação
- Um arquivo só: a SPA inteira, com roteador por hash, em seis telas.
- Imagens otimizadas com sharp; conferência com Playwright.
- Construído uma seção por vez (o hero primeiro, o resto em sequência), mesmo quando dava para adiantar.
O que foi construído
- Site de página única, com seis telas
- Linha do tempo animada da trajetória da fundadora
- Slideshow do interior da van, em foto real
- Imagens tratadas, recortadas e otimizadas
- Campos [CONFIRMAR] onde só o negócio teria a resposta
Tecnologia
- sharp
- HTML
- CSS
- JavaScript
- Playwright
Resultado
Conceito não encomendado, montado a partir de informação pública. Os campos [CONFIRMAR] seguem à espera do que só o negócio sabe, e este não é o site oficial da Pawfection.
6
marcos na linha do tempo animada
1
arquivo: a SPA inteira, com roteador por hash
3
fotos reais do interior da van, nenhuma de banco
0
bibliotecas de animação: a máquina de estados é própria
Aprendizados
- Recortar foto é onde o acabamento aparece ou desaparece, e a diferença estava em derreter só 5 a 8% da borda.
- Padrão repetido denuncia copiar-e-colar: a profundidade veio de camadas de CSS, não de ladrilho.
- Controle manual no caminho crítico obriga a trabalhar para ler; a segunda versão deixou a linha do tempo se conduzir.
