Blog
UX
18 gennaio 20266 min

Il pulsante nebulosa: dare vita all'IA con le particelle

Un buon pulsante fa venire voglia di essere premuto. Il pulsante IA di TAMSIV è una nebulosa vivente che invita alla conversazione.

L'intenzione del design

Il pulsante doveva comunicare tre cose senza una parola: "sono qui", "sono pronta", "parlami". Ho pensato alle nebulose — quelle nuvole cosmiche che sembrano vive senza essere minacciose.

L'architettura tecnica

Interamente sull'Animated API nativa. Niente Lottie, niente Skia. 8 cerchi sfocati che si muovono in sinusoidi, creando zone di densità luminosa. Colori tra il blu accent (#137fec) e un viola tenue.

I 4 stati

  • Inattivo: particelle lente, respiro calmo
  • Ascolto: ampiezza aumenta, luminosità sale
  • Elaborazione: particelle convergono, rotazione rapida
  • Risposta: particelle pulsano con l'audio TTS

Transizioni in Animated.spring per un feeling organico.

60fps obbligatori

useNativeDriver: true, riduzione da 16 a 8 particelle, transform accelerato dalla GPU, zero re-render React. Risultato: 60fps costanti anche su dispositivi con 3GB di RAM.

La psicologia del movimento

La velocità nello stato inattivo: ~4 secondi per ciclo, come un ritmo respiratorio calmo. Quando i tester mi hanno detto "sembra che aspetti che le parli", ho capito che era un successo.