Payout path flow

Use it for

• Affiliate, marketplace and payments products that move money between people
• Hero sections that explain where funds come from and where they land
• Any many to one flow, like events into a pipeline or leads into a CRM

Avoid

• Real balances, where the number must come from the server and never animate past it
• More than five or six sources, where the curves crowd into a knot

How it works

A ResizeObserver measures each partner button and the card, then writes cubic Bezier paths into an SVG that covers the scene. One requestAnimationFrame loop spawns coin elements on a schedule and places them with getPointAtLength, while a second copy of each path uses stroke-dasharray and stroke-dashoffset as a short glowing trail behind the coin. When a coin lands the card pulses through the Web Animations API and the total eases toward the new sum, written through a ref.

Accessibility

Partners are real buttons: hover or focus highlights their path and a click or tap sends a payout right away. The coins are decorative and hidden from screen readers, and the loop stops off screen. Reduced motion parks one still payout on each path and adds clicked amounts to the total at once.