Savings jar

Use it for

• Savings, budgeting and fundraising products
• Confirming a deposit or a top up with a moment of delight
• Progress toward a goal that a person adds to step by step

Avoid

• Precise financial screens, where the number matters more than the show
• Frequent, high volume actions, where the coin flight slows people down

How it works

One requestAnimationFrame loop owns the scene: it eases the liquid level and the shown balance toward their targets and rebuilds two SVG wave paths from summed sine waves each frame. A coin follows a cubic ease in x and a gravity curve in y; when it reaches the surface the wave amplitude jumps, four droplets fly out with the Web Animations API and the balance steps up. The goal ring is a stroke-dashoffset written from the same eased value, so the ring, the number and the jar always agree.

Accessibility

Add is a real button and a polite live region announces the new balance and when the goal is reached. The loop pauses off screen. Reduced motion skips the coin flight, waves and splash: the jar, ring and balance jump straight to the new value.