API Gateway Token-Bucket Rate Limiter (2D)
2D lane diagram of a credential-stuffing burst hitting an API gateway. Toggle a token-bucket rate limiter on and off and watch the bucket fill level, backend load/health and legitimate-login success respond live.
This 2D companion drives the same token-bucket rate-limiting model as the 3D version through a flat three-lane diagram built for reading the mechanics rather than orbiting a scene: clients on the left fire legitimate logins and, when you launch it, a credential-stuffing burst; a gateway lane in the middle shows the bucket's token level as a fill bar that drains on every admitted request and refills at a fixed rate; and a backend lane on the right shows server health degrading — and legitimate logins starting to fail alongside the attack traffic — once admitted load exceeds capacity. Toggling "No protection" vs. "Token bucket" with the attack running makes the trade-off directly visible: unprotected, the backend saturates and even real users get rejected; rate-limited, the attack is throttled at the gateway and legitimate-login success stays high.
2D lane diagram of a token-bucket API gateway rate limiter: tokens refill at a fixed rate and are spent one per admitted request, a live chart tracks backend load against capacity, and a side-by-side comparison shows legitimate-login success with and without the limiter while a credential-stuffing burst runs.
2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install