O botão nebulosa: dando vida à IA com partículas
Um bom botão dá vontade de ser pressionado. O botão de IA do TAMSIV é uma nebulosa viva que convida à conversa.
A intenção do design
O botão deveria comunicar três coisas sem uma palavra: "estou aqui", "estou pronta", "fale comigo". Pensei nas nebulosas — essas nuvens cósmicas que parecem vivas sem serem ameaçadoras.
A arquitetura técnica
Totalmente na Animated API nativa. Sem Lottie, sem Skia. 8 círculos borrados que se movem em senoides, criando zonas de densidade luminosa. Cores entre o azul de destaque (#137fec) e um violeta suave.
Os 4 estados
- Inativo: partículas lentas, respiração calma
- Ouvindo: amplitude aumenta, luminosidade sobe
- Processando: partículas convergem, rotação rápida
- Respondendo: partículas pulsam com o áudio TTS
Transições em Animated.spring para uma sensação orgânica.
60fps obrigatório
useNativeDriver: true, redução de 16 para 8 partículas, transform acelerado por GPU, zero re-render React. Resultado: 60fps constante mesmo em dispositivos com 3GB de RAM.
A psicologia do movimento
A velocidade no estado inativo: ~4 segundos por ciclo, como um ritmo respiratório calmo. Quando os testadores me disseram "parece que ela está esperando eu falar com ela", eu soube que tinha dado certo.