Agent-Activity-Effects

Key Techniques Used

1. Agent Step Tracker

A panel animates through 4 phases:

Search → Read → Reason → Compose

• Expanding ring animation on the active step
• Checkmark appears when a step is completed

2. Live Search Query Reveal

• Search queries appear one by one
• Uses staggered animationDelay
• Simulates real-time URL fetching (similar to Claude)

3. Terminal Log

A simulated code terminal displayed below the steps:

• Shows fake API calls
• Displays token counts
• Reveals reasoning steps
• Uses cascading fadeIn delays

Creates a "work happening behind the scenes" effect.

4. Streaming Text Response

After the agent completes:

• Response prints character-by-character
• Uses setInterval / setTimeout loop
• Includes a blinking cursor effect

5. Progress Bar Sweep

For non-search steps:

• CSS progressSweep keyframe animation
• Progress bar sweeps back and forth