About Rate Limiter Viz
Show, don't tell, how rate limiting works
Turn a dry docs page into a live demo. This Framer component simulates Token Bucket, Leaky Bucket and Sliding Window rate limiters in real time, so developers instantly see when requests get a 200 and when they get a 429.
What's inside
Animated glass bucket: canvas-rendered liquid fill and particle inflow that tracks remaining capacity.
Live controls: sliders for request rate, bucket capacity and refill rate, plus a Trigger 50-Request Spike button to demo bursts.
Metrics and traffic matrix: accepted, throttled and drop % counters with a 10x5 grid of 200 vs 429 responses.
Response stream: scrolling HTTP log with rate limit headers. Hover to pause.
Copy Implementation: one click copies an Upstash-style snippet for the selected algorithm.
3 preset themes: Midnight Glow (slate with cyan and magenta), Terminal Green (monospaced phosphor) and Vercel / Supabase Minimal (monochrome with emerald), plus a Custom accent.
Performance: simulation runs in requestAnimationFrame, React updates are throttled, and it pauses when scrolled off screen. Stacks to one column on mobile.
