Desenvolvimento web · estudo de caso
Visualizador 360° de motos elétricas
Arraste para girar a moto: um visualizador 360° feito com sete imagens por cor, Canvas e JavaScript puro.
Visão geral
O projeto em poucas palavras
Antes de o site da Motokão ganhar o tema em WordPress descrito em Motokão Moto Center, ele existiu como um protótipo estático em HTML, CSS e JavaScript. A peça mais interessante desse protótipo é o visualizador 360° das motos elétricas TUI Mais e TUI Pop: a pessoa escolhe o modelo e a cor e arrasta a imagem para ver a moto de vários ângulos.
Desafio
O ponto de partida
A loja passou a vender motos elétricas, e uma única foto não mostra o que alguém quer ver antes de perguntar: como é por trás, de lado, o tamanho do assento. Um modelo 3D completo seria pesado, difícil de manter e exagerado para uma loja local. A solução precisava funcionar no celular, carregar rápido e não depender de bibliotecas.
Solução
Sete quadros e uma ilusão de giro
Cada cor de cada modelo tem sete imagens da moto, em ângulos diferentes. O visualizador desenha o quadro correspondente num Canvas e troca de quadro conforme a pessoa arrasta: a cada 52 pixels de movimento horizontal avança um quadro, com um ritmo que parece natural tanto com o mouse quanto com o dedo.
Os detalhes que dão acabamento à interação:
Entrada unificada por eventos de ponteiro, que cobre mouse, toque e caneta com o mesmo código.
Teclado: o visualizador recebe o foco e gira com as setas para a esquerda e para a direita, e um rótulo descreve a interação para leitores de tela.
Modelo e cor: trocar de cor carrega as imagens daquela cor, e a ficha do modelo (destaques, itens inclusos e especificações) é montada a partir de um único objeto de dados, sem repetir HTML.
Nitidez: o Canvas se ajusta ao tamanho da tela e à densidade de pixels do aparelho.
Plano B: se as imagens de uma cor não carregarem, o visualizador desenha 36 quadros de uma ilustração da moto no próprio Canvas, para que a interação nunca fique vazia.
Resultados
Resultado
Uma interação leve, com cerca de 16 KB de JavaScript, que ajuda a explorar o produto sem esconder as informações que importam para decidir. A ideia foi levada ao site final da Motokão, e o protótipo continua como registro do raciocínio.
Aprendizados
O que guiou as decisões
Nem todo efeito pede uma biblioteca. Para uma loja local, sete imagens bem escolhidas e um Canvas resolveram o problema com menos código, menos peso e mais controle sobre o comportamento. E um bom plano B — mesmo para algo que “sempre vai carregar” — evita que uma falha silenciosa estrague a experiência.
