DNS resolution
ProA browser asks for a domain and the query hops from the resolver to a root server, the TLD server and the authoritative nameserver, each pointing to the next, until an IP address comes back and the page connects. The resolver keeps the answer with a TTL ring that drains, and a second lookup is answered straight from that cache in one short hop.
Live · keyboard ready
- A docs or marketing section that explains how a domain name turns into an address and why the second visit is faster.
- Custom domain setup, DNS hosting, resolver or CDN pages that need the chain of servers and the role of TTL to click.
- Teaching material where viewers should be able to step back and forth through each hop.
- Use webhook-fanout to show one event delivered to many endpoints with retries.
- Use data-flow for a general pipeline between services.
- Use a real status or table component to report actual DNS records or propagation.
Installation
Pro source and install commands unlock with a Pro plan.
example.tsx
import { DnsResolution } from "@/components/arc/dns-resolution/dns-resolution"; export function DnsSection() { return ( <DnsResolution domain="app.acme.dev" address="203.0.113.24" ttl={300} nodes={{ resolver: { label: "Resolver", meta: "1.1.1.1" } }} /> );}DnsResolution
An animated DNS lookup on a layered 2.5D stage. The browser asks a resolver for a name, and the query arcs through the air to the root server, the TLD server and the authoritative nameserver, each pointing to the next, until the address comes back and the page draws in on the browser. The resolver stores the answer with a TTL ring that drains on its cache tier, and a second lookup is answered from that cache in one short hop. A step scrubber replays the story or jumps to any stage, and statuses, counters and the record each packet carries update in sync.
PropTypeDefaultDescription
domainstring"app.acme.dev"The name being looked up. The TLD server (.dev) and the default nameserver (ns1.acme.dev) are derived from it.addressstring"203.0.113.24"The address the nameserver answers with, shown on the answer packets, the nameserver status and the cached record.ttlnumber300Time to live of the answer in seconds. The cached record counts it down while the ring drains, then shows Expired.lookupMsnumber84Milliseconds the full lookup takes, counted up in the browser status.cachedMsnumber1Milliseconds the cached lookup takes.nodesPartial<Record<"browser" | "resolver" | "root" | "tld" | "authoritative", { label?: string; meta?: string; detail?: string; icon?: string | ReactNode; color?: string }>>Browser, Resolver, Root server, TLD server, NameserverOverrides 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 nameserver meta is also the host the TLD refers to.speednumber1Multiplies the pace. One lookup and cache cycle takes 16 seconds at 1. 0 holds still.pausedbooleanfalseHolds the animation, easing to rest. Paused from the start, it shows the cached state with every hop answered.accentstring–Any CSS color for the moving query, lit routes, the TTL ring and the scrubber. Defaults to the theme accent.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 domain, the servers, the address and the TTL.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 chain of servers, the address, the connection time and that the next lookup comes from the cache. Pass label to write your own.
- The labels, moving record chips 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 status chip pairs its dot with words such as Resolving, Try .dev, Cache hit or Connected in 84 ms.
- One requestAnimationFrame loop writes SVG attributes, transforms, opacity and text directly, and only when a value changed; React never re-renders per frame.
- Packets travel along real quadratic arcs at an even pace (arc length lookup) with a sine ease, a short lit trail and a shadow that slides along the floor and shrinks as the packet rises, which gives the 2.5D depth.
- Every frame is a pure function of one clock, so the counters, statuses, TTL ring and scrubber stay in sync, jumps land exactly, and the loop joins seamlessly when the cached record expires and the scene fades back to its start.
- 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 cached state, 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; below that a portrait stage with the servers in a column beside the browser and resolver.
- Labels, status chips, the cached record and the moving record 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 a hundred small SVG nodes. 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 record 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 DNS, custom domains, resolvers, TTLs or caching.
- Keep the domain and address realistic but fictional; 203.0.113.0/24 is reserved for documentation. The lookup is a simulation and takes no live data.
- Only add a brand mark where it is true to the story, such as a public resolver. Brands are sample content, never an endorsement.
The full library index for assistants is at /llms.txt.