El botón nebulosa: dando vida a la IA con partículas
Un buen botón invita a ser presionado. El botón de IA de TAMSIV es una nebulosa viva que invita a la conversación.
La intención de diseño
El botón debía comunicar tres cosas sin una palabra: "estoy aquí", "estoy lista", "hábleme". Pensé en las nebulosas, esas nubes cósmicas que parecen vivas sin ser amenazantes.
La arquitectura técnica
Completamente en la API Animated nativa. Sin Lottie, sin Skia. 8 círculos borrosos que se mueven en sinusoides, creando zonas de densidad luminosa. Colores entre el azul acento (#137fec) y un violeta suave.
Los 4 estados
- Inactivo: partículas lentas, respiración tranquila
- Escucha: la amplitud aumenta, la luminosidad sube
- Procesamiento: las partículas convergen, rotación rápida
- Respuesta: las partículas pulsan con el audio TTS
Transiciones en Animated.spring para una sensación orgánica.
60fps obligatorio
useNativeDriver: true, reducción de 16 a 8 partículas, transform acelerado por GPU, cero re-renderizado de React. Resultado: 60fps constantes incluso en dispositivos con 3GB de RAM.
La psicología del movimiento
La velocidad en estado inactivo: ~4 segundos por ciclo, como un ritmo respiratorio tranquilo. Cuando los probadores me dijeron "parece que está esperando que le hable", supe que había tenido éxito.