Multi-region failoverPro
Animated multi-region failover on a 2.5D stage: users stream requests through a global load balancer to two regions; the primary degrades, fails three health checks, traffic shifts smoothly to the healthy region, then it recovers, passes three checks and traffic ramps back to an even split.
Live · keyboard ready
- A reliability, infrastructure or pricing page that needs to show why running in two regions keeps a service up during an outage.
- Docs for health checks, failover policies, traffic weights or slow start, where viewers should step through detection, failover, recovery and rebalance.
- Incident write-ups and postmortems that explain how traffic moved during a regional outage.
- Use database-replication to show a primary database failing over to a replica.
- Use circuit-breaker for one service failing fast against a failing dependency.
- Use autoscale for instances added and removed with load in one place.
- Use a real status or monitoring component to report actual region health.
Installation
Pro source and install commands unlock with a Pro plan.
example.tsx
import { MultiRegionFailover } from "@/registry/components/multi-region-failover/multi-region-failover"; export function FailoverSection() { return ( <MultiRegionFailover hostname="api.acme.dev" requestsPerSecond={12000} nodes={{ primary: { label: "US East", meta: "us-east-1" }, secondary: { label: "EU West", meta: "eu-west-1" }, }} /> );}MultiRegionFailover
An animated multi-region failover on a layered 2.5D stage. Users send a steady stream of requests to a global load balancer that splits them between two regions, each a platform of six instances. The instances in the primary region fail one by one, requests there turn into errors and three health checks fail in a row, so the balancer marks the region unhealthy and shifts its weight smoothly to the healthy region. The primary recovers, has to pass three checks, and traffic ramps back until the split is even again. A step scrubber replays the story or jumps to any stage, and the weight bar, the dial on the balancer, error rate, requests per second, latency and status chips all update in sync.
PropTypeDefaultDescription
hostnamestring"api.acme.dev"The hostname the balancer answers for, shown under it and in the default description.requestsPerSecondnumber12000Total requests per second from users. Each region's counter shows its share of it.latencyMsnumber38Median latency of the primary region while the split is even. The secondary runs 4 ms slower and climbs as it takes the whole load.nodesPartial<Record<"users" | "balancer" | "primary" | "secondary", { label?: string; meta?: string; detail?: string; icon?: string | ReactNode; color?: string }>>Users, Load balancer, US East (us-east-1), EU West (eu-west-1)Overrides per node: the name, a meta line, the hover detail and an optional mark (Simple Icons path data, an image URL or a ReactNode). The region names also label the weight split and the captions.speednumber1Multiplies the pace. One outage and recovery cycle takes 21 seconds at 1. 0 holds still.pausedbooleanfalseHolds the animation, easing to rest. Paused from the start, it shows the moment traffic shifts away from the unhealthy region.accentstring–Any CSS color for the requests, lit routes, the weight dial, the split bar and the scrubber. Defaults to the theme accent. Errors and health always use the status colors.controlsbooleantrueShows the step scrubber with a pause button. Each step is a button that jumps to that stage; arrow keys move between them.captionbooleantrueShows the current stage title and one line that narrates it under the scrubber.labelstring–Accessible description. Defaults to a sentence built from the hostname and the region names.classNamestring–Class on the root figure.styleCSSProperties–Inline styles on the root figure.- The drawing is role="img" with an aria-label that tells the whole story: the split, the failing region, the failed checks, the shift to the healthy region and the gradual return. Pass label to write your own.
- Labels, counters, the moving health check chip and hover tags inside the drawing are part of that image, and the narrated caption is hidden from assistive technology, so screen readers hear one stable description instead of a changing loop.
- The scrubber is a group of real buttons named Step 1 of 6 and so on; the current step carries aria-current="step", arrow keys, Home and End move between steps, and the pause button reports its state with aria-pressed.
- Status is never color alone: every chip pairs its dot with words such as Failed checks 2/3, Out of rotation, Warming up 62% or Errors 27.3%, and failing instances also change their outline.
- One requestAnimationFrame loop writes SVG attributes, transforms, opacity and text directly, and only when a value changed; React never re-renders per frame.
- Requests are a deterministic stream: each one is routed by the balancer weight at the moment it reaches the balancer and lands on a specific instance, which flashes. Requests to a down instance stall, turn to errors and fade.
- Requests travel along real arcs at an even pace with a glide ease, so they gather at the balancer and fan out, with a shadow that slides along the floor and shrinks as they rise, which gives the 2.5D depth.
- Every frame is a pure function of one clock, so the weights, counters, checks, statuses and scrubber stay in sync, jumps land exactly, and the loop is seamless because the last frame is the balanced first frame.
- Pausing, speed changes and the gentle hover slowdown ease on a critically damped spring. The loop stops offscreen and in a hidden tab and resumes where it left off.
- With reduced motion there is no travel or loop: the stage shows a settled frame of the failover, and the scrubber switches between settled frames of each stage.
- The drawing is one SVG with a viewBox and non-scaling one pixel strokes. At 640px and wider it uses a landscape stage with the regions stacked on the right; below that a portrait stage with users on top, the balancer in the middle and the two regions side by side.
- Labels, status chips, counters, the weight split and the moving health check chip are HTML placed by percentage, so text stays at its real size at every width.
- Container queries hide the step names on phones (the caption names the current step) and the meta lines in the narrowest landscape range. Scrubber buttons keep a tall touch target.
- About 130 small SVG nodes, with a fixed pool of 15 request dots reused across the stream. Each frame writes only values that changed, and nothing runs offscreen or in a background tab.
- Geometry and arc length tables are built once per layout; resizing only rescales the moving health check chip.
- No canvas, images, filters or blur.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use it as an explanatory figure on a landing page, a docs page or a blog post about high availability, disaster recovery, global load balancing, DNS failover or health checks.
- Keep region names and codes realistic. The outage, traffic and timings are a simulation and take no live data.
- Only add a brand mark where it is true to the story, such as the load balancer provider. Brands are sample content, never an endorsement.
The full library index for assistants is at /llms.txt.