Water Level Animation — Drop Balance Visualisation

What the Animation Shows

The water animation represents drops — the recognition currency of Give River. Instead of showing a static number changing, the app animates a cluster of small blue circles that float upward and fade out. Each circle represents part of a drop transaction.

The animation plays whenever drops are added to the system — for example, when you send a recognition post with drops attached.

How the Animation Works

The WaterAnimationController manages the animation state:

1. Drop circles are spawned — a random number of circles appear near the bottom-centre of the screen.
2. Each circle travels in an arc — circles start near the bottom of the screen and travel upward toward the centre, following a curved arc path (randomly left or right).
3. Circles fade as they travel — opacity decreases from fully visible to transparent over the course of the 2-second animation.
4. Circles vary in size — each circle is randomly sized between 8 and 25 pixels in diameter to create a natural, fluid look.
5. Staggered timing — circles within a batch do not all appear at once; each is delayed slightly (up to 400 ms) to create a flowing, wave-like effect.
6. Automatic cleanup — each circle removes itself from the screen when its animation completes.

When the Animation Plays

The animation is triggered programmatically by the platform when drop-related events occur — such as completing a recognition action that awards drops. You do not need to do anything to trigger it; it plays automatically.

You may also see related animations on the Add Drop screen (accessed from the top of My River), where the drop input interacts with the animation controller when you tap or long-press the drop button.

Technical Details for Context

The animation uses Flutter's TweenAnimationBuilder with Curves.ease over a 2-second duration. The arc shape is calculated using a sine wave offset, giving each drop a natural curving trajectory rather than a straight line. Drop colors are blue with 70% opacity at peak visibility.

Related Features

• Add Drop screen — where you send drops to colleagues. The water animation plays during the sending process.
• My River dashboard — displays your current drop balance. The animated chest widget on My River also responds to drop activity.
• Ugo popups — when you earn drops from completing a River Run, Ugo appears with a separate confetti and token reward popup.