Improve real-time typing indicators — character-by-character vapor display

[happyseaurchin]

What Exists

Basic real-time text sharing is implemented. Users can see each other's submitted text.

What's Needed

Visual typing indicators showing text forming in real-time (the "vapor" state):

• Character-by-character display of what other users are typing
• Visual distinction between vapor (forming), liquid (submitted), and solid (committed) text
• Smooth animations for text appearing/transitioning between states

Design Context

Text moves through three states:

• Vapor: Ephemeral keystrokes, visible to nearby users
• Liquid: Submitted intention, enters LLM synthesis
• Solid: Committed narrative, permanent record

The vapor display should feel alive — text forming, flickering, coalescing. Not a static "user is typing..." indicator.

Technical Notes

• Supabase real-time is already configured for live updates
• React components should stay under 200 lines
• See the shelf architecture diagram: https://xstream.machus.ai/about.html

Labels

enhancement help wanted ui