Motion Web
Série de protótipos de animação para uma Netz navegável, testados um a um em canvas. Dois deles já saíram do laboratório: a corrente que atravessa as palavras do topo e os pacotes que percorrem a malha atrás desta galeria.
De onde veio
O site falava de rede e não parecia uma. A identidade tinha nó, ponto e conexão no discurso, e na tela era mais um site escuro com um verde bonito.
A pergunta que abriu a série foi simples: dá para a marca se mover como aquilo que ela diz ser?
Na bancada
Abrimos uma série de protótipos numerados, cada um testando uma ideia sozinha em canvas, sem compromisso de virar página. Corrente atravessando a palavra. Pacote encontrando caminho pela malha e acendendo o nó em que chega. Recorte em diagonal.
A regra era rodar de verdade no navegador. Animação que só existe em vídeo esconde o custo dela, e o custo é o que decide se aquilo vira interface ou fica no laboratório.
Onde isso serve
Serve como camada de marca para qualquer projeto em que a interface precise dizer alguma coisa antes do texto ser lido. Um sistema de motion próprio é o tipo de diferencial que não se copia com um tema comprado.
Dois protótipos já saíram do laboratório e estão em produção nesta própria página: a corrente atravessa as palavras do topo, e os pacotes percorrem a malha atrás da galeria de experimentos.
O que aprendemos
A marca aguenta movimento quando o movimento significa alguma coisa. Os protótipos que viraram interface foram os que carregavam a ideia de rede; os puramente decorativos cansaram na segunda visita.
O outro aprendizado foi de método: protótipo de motion precisa rodar no navegador desde o primeiro dia. Em vídeo tudo funciona, e o custo só aparece quando alguém abre no celular.
O que ainda está aberto
Falta trazer para cá os protótipos que ficaram de fora, rodando ao vivo em vez de virar imagem, com o custo de performance medido em cima de cada um. É o próximo passo desta página.