The Nebula Button: Bringing AI to Life with Particles

A good button makes you want to press it. TAMSIV's AI button is a living nebula that invites conversation.

Design Intent

The button had to communicate three things without words: "I'm here," "I'm ready," "talk to me." I thought of nebulae — those cosmic clouds that seem alive without being threatening.

Technical Architecture

Entirely built on the native Animated API. No Lottie, no Skia. 8 blurry circles moving in sinusoids, creating areas of light density. Colors between accent blue (#137fec) and a soft purple.

The 4 States

• Inactive: slow particles, calm breathing
• Listening: amplitude increases, brightness rises
• Processing: particles converge, rapid rotation
• Responding: particles pulse with TTS audio

Transitions use Animated.spring for an organic feel.

Mandatory 60fps

useNativeDriver: true, reduction from 16 to 8 particles, GPU-accelerated transform, zero React re-renders. Result: constant 60fps even on 3GB RAM devices.

The Psychology of Movement

Speed in the inactive state: ~4 seconds per cycle, like a calm breathing rhythm. When testers told me "it looks like it's waiting for me to talk," I knew it was a success.