Ambient Animation System

The background is never static. Three layers create a feeling of gentle, living movement behind the conversation.

Layer 1: Gradient Mesh

Three soft blurred blobs drift continuously on 12 to 15 second loops. They overlap and blend, creating an organic, shifting color field.

The blob color tracks the current data category. As facts, preferences, and constraints are captured, the ambient color shifts to match.

• Fact (green): property data, public records
• Preference (gold): borrower goals, priorities
• Constraint (blue): limits, requirements

Layer 2: Particle Current

Tiny dots rise slowly from the bottom of the screen. 45 canvas particles + 6 CSS motes at varying speeds and opacities. They accelerate briefly when a new data point is captured.

Layer 3: Category Background

A semi-transparent wash sits beneath the mesh. It transitions color (0.8s ease) each time a new category is captured. The mesh blobs render above it, so the drift is always visible.

Stacking Order

• z-0: Category background wash
• z-1: Gradient mesh blobs + particle canvas
• z-2: Chat content (transparent)
• z-20: Header, input bar

Design Intent

The ambient system makes the screen feel alive without competing with content. It rewards the user subconsciously: each piece of information they share changes the environment. The room colors as clarity accumulates.

Movement is slow enough to be calming, never distracting. The effect compounds: by the end of a session, the background has visibly shifted from neutral to the colors of the user's data.