Continuando os investimentos na criação de laboratórios do Forked Reality, comecei a brincar com algumas animações pra dar um toque especial na tela de geração. É uma evolução daquela tela de geração que mostrei no final do post anterior. Eu tinha gostado dela, até tem uma animação na barra de progresso. Mas aí fui parar nesse site louquíssimo na página de exemplos da lib PixiJS, e quis fazer algo do tipo para animar mais a tela de geração - que pode demorar até alguns minutos para completar.
Tentei primeiro instalar essa biblioteca PixiJS pra ver se conseguia reproduzir um outro efeito, em outra página. Mas aí resolvi experimentar fazer uma animação bem mais simples, sem lib, nesse grid que aparece no fundo da tela de geração.
Eu comecei pedindo pro Claude criar umas 5 variantes de efeitos de distorção e criar storybooks pra cada um deles, pra eu poder testar e escolher o que mais gostasse. Acabei indo com um chamado “pulse”, e aí iterei um pouco mais pra adicionar também o efeito de cores nas linhas também. Infelizmente, não lembrei de tirar prints desse processo de playground, que também acabou sendo interessante.
E aí, depois de um pouco de tentativa e erro, consegui chegar num resultado que gostei bastante.
Provavelmente tem alguma maneira muito mais limpa e eficiente de implementar isso, mas a implementação acabou saindo com a api de Canvas 2D, que eu nunca tinha usado. A lib ia adicionar alguns MB.
Só falta alguém usar e criar um lab agora.