Le bouton nébuleuse : donner vie à l'IA avec des particules
Un bon bouton donne envie d'être pressé. Le bouton IA de TAMSIV est une nébuleuse vivante qui invite à la conversation.
L'intention design
Le bouton devait communiquer trois choses sans un mot : "je suis là", "je suis prête", "parle-moi". J'ai pensé aux nébuleuses — ces nuages cosmiques qui semblent vivants sans être menaçants.
L'architecture technique
Entièrement sur l'Animated API native. Pas de Lottie, pas de Skia. 8 cercles flous qui se déplacent en sinusoïdes, créant des zones de densité lumineuse. Couleurs entre le bleu accent (#137fec) et un violet doux.
Les 4 états
- Inactif : particules lentes, respiration calme
- Écoute : amplitude augmente, luminosité monte
- Traitement : particules convergent, rotation rapide
- Réponse : particules pulsent avec l'audio TTS
Transitions en Animated.spring pour un feeling organique.
60fps obligatoire
useNativeDriver: true, réduction de 16 à 8 particules, transform GPU-accéléré, zéro re-render React. Résultat : 60fps constant même sur des appareils 3GB RAM.
La psychologie du mouvement
La vitesse à l'état inactif : ~4 secondes par cycle, comme un rythme respiratoire calme. Quand des testeurs m'ont dit "on dirait qu'elle attend que je lui parle", j'ai su que c'était réussi.