Remotion compositions that animate the three rate limit strategies in Appwrite Firewall: fixed window, sliding window, and token bucket. Each composition mirrors the strategy illustrations from the Appwrite Console, using the same geometry, colors, and Inter typeface, and renders in a dark and a light variant.
The GIFs produced by this project are used in the Appwrite blog post on choosing a rate limit strategy.
| ID | What it shows |
|---|---|
fixed-window-dark / fixed-window-light |
Requests filling a clock-aligned window, one request going over the limit, and the counter resetting for everyone at the boundary |
sliding-window-dark / sliding-window-light |
A window anchored to the first request that slides forward with time while older requests age out of the count |
token-bucket-dark / token-bucket-light |
Tokens refilling at a steady rate, each request spending one token, and a burst draining accumulated tokens |
All compositions render at 1460x822, 30 fps.
pnpm install
# preview in Remotion Studio
pnpm exec remotion studio src/index.ts
# render a GIF (15 fps output)
pnpm exec remotion render src/index.ts fixed-window-dark out/fixed-window-dark.gif --codec=gif --every-nth-frame=2Render all six:
for id in fixed-window-dark fixed-window-light sliding-window-dark sliding-window-light token-bucket-dark token-bucket-light; do
pnpm exec remotion render src/index.ts "$id" "out/$id.gif" --codec=gif --every-nth-frame=2
donesrc/theme.tsholds the light and dark color tokens and the shared accent colors (#10b981for passed requests,#f59e0bfor rate limit tokens).src/shared.tsxhas the shared SVG building blocks: frame wrapper, request dots, window bands, and labels.src/FixedWindow.tsx,src/SlidingWindow.tsx,src/TokenBucket.tsxare the three animated diagrams.public/fonts/bundles the Inter woff2 files loaded at render time.