Botão de IA animado em React Native com partículas

Um bom botão faz você querer pressioná-lo. O botão de IA do TAMSIV é uma nebulosa viva que convida à conversa. Não é apenas um círculo com um microfone: são 8 partículas luminosas que dançam, respiram e reagem em tempo real a cada interação.

Este botão é provavelmente o elemento da interface no qual passei mais tempo por pixel. Não porque seja o mais importante funcionalmente, mas porque é o primeiro ponto de contato entre o usuário e a inteligência artificial. Se este botão não te faz querer falar, todo o resto é inútil.

Pontos chave

• O botão nebulosa usa 8 partículas animadas através da Animated API nativa do React Native, sem Lottie ou Skia, para controle total sobre cada frame.
• 4 estados distintos (inativo, escuta, processamento, resposta) com transições em Animated.spring para um movimento orgânico.
• Desempenho garantido a 60fps mesmo em dispositivos com 3 GB de RAM graças a useNativeDriver e zero re-render React.
• O ritmo no estado inativo imita uma respiração calma (~4 segundos por ciclo), criando um efeito de presença viva.

Por que investir tanto tempo em um simples botão?

A resposta curta: porque é o primeiro contato com a IA. A resposta longa envolve psicologia, design e desempenho móvel.

De acordo com pesquisas da Interaction Design Foundation, os usuários formam uma impressão de uma interface em 50 milissegundos. Não há tempo para ler um tutorial. Não há tempo para entender a proposta de valor. 50ms para decidir se o aplicativo é "Pro" ou "amador".

O botão de IA do TAMSIV é o elemento mais visível da tela principal. É o único componente que se move quando todo o resto está estático. Ele deve comunicar três coisas sem uma única palavra: "estou aqui", "estou pronta", "fale comigo". Se tu precisas explicar ao usuário como usar um botão, o design falhou.

Explorei várias opções antes de chegar à nebulosa. Um simples círculo pulsante, muito genérico. Um microfone animado, muito literal. Uma onda sonora, muito técnica. A nebulosa nasceu de uma observação: as nuvens cósmicas parecem vivas sem serem ameaçadoras. Elas atraem o olhar sem agredir. Essa é exatamente a emoção que eu queria para o botão de IA.

Como funciona a arquitetura técnica do efeito nebulosa?

A escolha técnica mais importante foi recusar atalhos. Sem Lottie (animações pré-renderizadas), sem Skia (canvas 2D). Inteiramente na Animated API nativa do React Native. Por quê? Porque os 4 estados do botão devem se misturar dinamicamente. Uma animação Lottie é fixa: ela reproduz um arquivo de A a Z. O estado nebulosa deve reagir em tempo real.

A arquitetura é baseada em 8 círculos borrados (blurRadius) que se movem em senoides. Cada círculo tem três parâmetros independentes:

• Posição: movimento sinusoidal em X e Y com frequências ligeiramente diferentes, criando trajetórias em forma de 8 (figuras de Lissajous).
• Opacidade: oscilação entre 0.3 e 0.8 para criar zonas de densidade luminosa variável.
• Escala: variação sutil entre 0.8 e 1.2 para simular a profundidade.

A mistura desses 8 círculos cria zonas de concentração luminosa que aparecem e desaparecem naturalmente, exatamente como uma nebulosa real. O sistema de cores permanece entre o azul de destaque do TAMSIV (#137fec) e um violeta suave, consistente com o tema escuro do aplicativo (#101922).

Quais são os 4 estados do botão e como eles fazem a transição?

Cada estado modifica os parâmetros das 8 partículas de forma progressiva, nunca abrupta. As transições usam Animated.spring em vez de Animated.timing para uma sensação orgânica: o spring gera um leve overshoot natural que o timing linear não pode reproduzir.

Estado inativo: a respiração

As partículas se movem lentamente. A amplitude do movimento é baixa. A luminosidade é moderada. O ciclo completo dura cerca de 4 segundos, o que corresponde ao ritmo respiratório calmo de um ser humano em repouso. Isso não é por acaso: de acordo com estudos da Respiratory Research, o ritmo respiratório médio em repouso é de 12-20 ciclos por minuto, ou seja, 3 a 5 segundos por ciclo. Ao calcar a animação nesse ritmo, o botão ativa inconscientemente uma sensação de calma e confiança.

Estado de escuta: a atenção

O usuário pressiona e fala. A amplitude das partículas aumenta em 50%. A luminosidade sobe. As partículas se afastam ligeiramente do centro, como se o botão "abrisse os ouvidos". A transição é feita em spring com um stiffness alto para uma reação imediata ao toque.

Estado de processamento: a convergência

O usuário solta. A IA processa a solicitação. As partículas convergem para o centro e a rotação acelera. O efeito visual evoca um redemoinho que "digere" a informação. Este é um feedback crucial: o usuário sabe que sua solicitação está sendo processada sem a necessidade de um spinner ou um texto "Carregando...".

Estado de resposta: a pulsação de áudio

O TTS reproduz a resposta da IA. As partículas pulsam em sincronia com a amplitude de áudio. Quanto maior o volume, maior a amplitude das partículas. É o mesmo princípio dos visualizadores de áudio do Spotify ou Apple Music, adaptado a um botão de 60x60 pontos. Eu detalhei o pipeline de áudio completo no artigo sobre o pipeline vocal.

Como garantir 60fps em dispositivos de entrada?

Animar 8 partículas com posição, opacidade e escala, isso significa 24 valores animados simultaneamente. Em um flagship, é trivial. Em um dispositivo com 3 GB de RAM e um processador Snapdragon 400, é um desafio sério.

A regra número 1: useNativeDriver: true em cada animação. Quando o native driver está ativado, a animação é totalmente gerenciada pela thread nativa (UI thread), não pela bridge JavaScript. A thread JS está livre para gerenciar a lógica de negócios (gravação de áudio, envio WebSocket, análise da resposta da IA). De acordo com a documentação do React Native, o native driver pode melhorar o desempenho da animação em 60% em média.

A regra número 2: zero re-render React. Os valores animados são Animated.Value que mudam sem acionar a reconciliação do React. O componente nunca é re-renderizado durante a animação. Sem setState, sem mudança de props animadas via state.

A regra número 3: as propriedades animadas são exclusivamente transform (translateX, translateY, scale) e opacity. Essas propriedades são aceleradas pela GPU no Android e iOS. Sem width/height/backgroundColor animados, que exigiriam um recálculo de layout a cada frame.

Resultado: 60fps constante mesmo em dispositivos de entrada testados. Inicialmente, comecei com 16 partículas antes de reduzir para 8 sem perda visual perceptível. É um compromisso clássico no desenvolvimento móvel que também aplico no ditafone vocal e na interface inline.

Que papel a psicologia do movimento desempenha no design?

O movimento na UI não é decorativo. É informativo. Cada animação deve responder a uma pergunta implícita do usuário:

• Estado inativo: "A IA está disponível?" Sim, olha, ela respira. Ela te espera.
• Estado de escuta: "Ela me ouve?" Sim, olha, ela reage à tua voz.
• Estado de processamento: "Minha solicitação está sendo considerada?" Sim, olha, ela está trabalhando.
• Estado de resposta: "É a IA que está falando?" Sim, olha, ela pulsa com o áudio.

O Disney Animation Studio formalizou este princípio em seus 12 princípios fundamentais da animação. Dois são particularmente relevantes aqui: "antecipação" (o botão se prepara antes de agir) e "follow through" (o botão continua a reagir após a ação).

O feedback mais gratificante dos testadores foi: "Parece que ela está esperando que eu fale com ela." Isso não é um elogio à animação. É um elogio à emoção. A animação conseguiu criar uma sensação de presença. E a presença é o que transforma uma ferramenta em um companheiro. Eu expliquei essa filosofia no artigo sobre personalização vocal: a IA não deve ser apenas útil, ela deve ser agradável.

Por que não usar Lottie ou Rive para este tipo de animação?

A pergunta é legítima. Lottie é a solução padrão para animações complexas em dispositivos móveis. Rive (ex-Flare) é seu concorrente mais performático. Ambos poderiam ter criado um efeito nebulosa impressionante. Mas com uma limitação crítica: as animações são pré-calculadas.

O botão de IA do TAMSIV tem estados dinâmicos que dependem de dados em tempo real. O estado "resposta" sincroniza a amplitude das partículas com o volume de áudio do TTS. Este volume muda 60 vezes por segundo. Uma animação Lottie não pode se adaptar a um fluxo de áudio em tempo real: ela reproduz uma sequência fixa.

A Animated API nativa oferece controle frame a frame. Posso modificar qualquer parâmetro a qualquer momento sem recarregar uma animação. É mais trabalho para codificar, mas o resultado é mais vivo. É a mesma lógica que no feed e na gamificação: as animações reativas aos dados são sempre mais envolventes do que as animações fixas.

Como o botão se adapta ao tema e às cores do aplicativo?

O botão nebulosa não existe isoladamente. Ele faz parte de um sistema de design coerente com o tema escuro do TAMSIV: fundo #101922, destaque #137fec, texto secundário #9ca3af.

As partículas usam um gradiente entre o azul de destaque e um violeta (#8b5cf6). Essa escolha não é estética: é funcional. O azul é a cor de destaque de toda a interface, botões, links, indicadores. O violeta é usado apenas para a IA. Essa distinção cromática permite ao usuário identificar instantaneamente os elementos relacionados à inteligência artificial sem ler texto.

Em um fundo escuro, as partículas luminosas criam um contraste natural sem a necessidade de bordas ou sombras. Este é um princípio chave do design de modo escuro: a luz se torna a ferramenta de destaque, não as linhas. Eu apliquei o mesmo princípio na pesquisa contextual com swipe e no onboarding lazy registration.

Perguntas frequentes

O botão nebulosa consome muita bateria?

Não. As animações usam exclusivamente o native driver e propriedades aceleradas por GPU (transform, opacity). O impacto na bateria é comparável a uma animação CSS padrão na web. As partículas não giram quando o aplicativo está em segundo plano.

O efeito funciona de forma diferente no iOS e Android?

O efeito visual é idêntico em ambas as plataformas graças à Animated API que abstrai as diferenças. A única variação é o blur: o iOS usa um blur nativo mais performático, o Android usa um workaround com opacidade reduzida que dá um resultado visualmente similar.

É possível personalizar as cores do botão?

Atualmente não. As cores estão ligadas ao sistema de design do TAMSIV. Uma personalização por tema é possível no futuro, mas exigiria repensar a paleta da IA para cada variação de cor.

Por que 8 partículas e não mais?

Testei de 4 a 16 partículas. Abaixo de 6, o efeito perde sua riqueza. Acima de 10, o ganho visual é insignificante, mas o custo de desempenho aumenta. 8 é o ponto ideal testado em dispositivos que vão do Samsung Galaxy A13 ao Pixel 8 Pro.

O botão é acessível para usuários com deficiência visual?

Sim. O componente inclui um accessibilityLabel descritivo e um accessibilityHint que indica o estado atual. Os leitores de tela anunciam "Botão IA, pronto para ouvir" ou "Botão IA, processamento em andamento" dependendo do estado.