This page just traveled to you in a fraction of a second.
In that time your phone asked for directions, shook hands, swapped a secret code and crossed the island. Scroll to follow your own request. Every number below is yours, measured live.
DNS, TCP, TLS, BGP and anycast, an edge server, HTTP. Below is your own request, timed by your browser's Navigation Timing API and a fresh trace to the server that answered you.
A name became a number.
You know this site as yagrumo.ai. The network only understands numbers. So first, your phone asked the internet's phone book, the DNS, for the address.
The browser asked a recursive resolver for yagrumo.ai. On a cold lookup the resolver walks the tree: a root server points to the .ai servers, which point to the domain's authoritative nameserver, which returns A/AAAA records. Every answer carries a TTL, so resolvers and devices cache it.
GET https://cloudflare-dns.com/dns-query?name=yagrumo.ai&type=AFilm 3 · The Journey of a Ticket
Hello. Hello back. Great.
Before saying anything, your phone and the server made sure they could hear each other. Three quick messages, like a handshake at the door.
Over TCP that is SYN → SYN-ACK → ACK: one round trip before any data moves. Over HTTP/3 the job is done by QUIC on top of UDP, which folds the handshake and encryption into one step.
An ID check, then a secret code.
Your phone checked the site's ID card, a certificate signed by an authority it already trusts, like a notary. Then both sides invented a secret code that only they know. That's the padlock in your address bar.
The server presented a certificate chain ending at a root CA in your device's trust store. Client and server exchanged ephemeral keys (ECDHE) and derived session keys; in TLS 1.3 that takes a single round trip. Everything after is encrypted with an AEAD cipher such as AES-GCM.
Hop by hop, across the island.
Your request hopped from one network to the next. No stop knows the whole route; each one only knows the best next step. Puerto Rico's networks meet in San Juan, at the Puerto Rico Internet Exchange, so island traffic can stay on the island. To leave, it rides light through glass cables on the ocean floor, and today every one of those cables comes ashore in the metro area.
Routers forward packets using tables built by BGP, as thousands of independent networks announce what they can reach. Edge networks like Cloudflare use anycast: the same IP address is announced from hundreds of cities, so routing delivers you to a nearby copy.
The cloud is a building.
The computer that answered you is real. It sits in a data center: a building full of computers, power, cooling and fiber. Yours is in San Juan.
This page is static, so it is served straight from a CDN edge cache, close to you. An app works differently: the edge passes the request on to an origin, services running on virtual machines or containers in a cloud region, for example in Northern Virginia.
The answer came back in pieces.
The page came back in small envelopes. Your browser put them in order and built what you're looking at: the text, the styles, the 3D code and the fonts.
The server answered 200 OK with HTML, then the browser fetched every linked resource, many in parallel over the same connection. Files with a transfer size of 0 came from your cache. Here is your real waterfall:
This page is a shelf. An app is a kitchen.
A page like this one is files on a shelf. When Luis taps Order in Doña Carmen's bakery app in Cayey, the same trip happens, and then his ticket goes to work.
Ask the right way, get a clear answer.
Like a colmado's window: a menu of what you can ask for, a ticket in the right format, and a tray that comes back with your order, or a reason why not. Try a real one. This button asks a public DNS service for an address, the same way an app asks a server.
An API is a contract: endpoints (method + path), a request with headers and a JSON body, an auth token, and a response with a status code and data. The call below hits Cloudflare's public DNS-over-HTTPS JSON API from your browser.
Press “Call the API” to send a real request.
Counter, kitchen, pantry, helper.
Almost every app is built like the bakery. The frontend is the counter you see. The backend is the kitchen with the rules. The data layer is the pantry and its notebook. And the newest floor is an AI helper that takes orders in plain words and uses the same kitchen.
Client (HTML/CSS/JS or native) → API → services that authenticate, validate and orchestrate → a database where one transaction sells the last loaf exactly once → an agent layer: a model in a loop that calls the same APIs as tools.
BEGIN; SELECT on_hand FROM inventory WHERE sku = 'pan-sobao' FOR UPDATE; UPDATE inventory SET on_hand = on_hand - 1 …; INSERT INTO orders (…) VALUES (…); COMMIT;Film 1 · The Four Floors
How did this page get here at all?
Someone changed the recipe, while the bakery stayed open.
Change it without closing.
A new recipe starts on a side track called a branch. Machines bake and check it. If anything fails, the line stops. If everything is green, it joins the main book, goes to a test kitchen, then to customers. And one button brings yesterday's recipe back. This page arrived the same way: a pull request, automatic checks, then an automatic deploy.
Commit on a branch → pull request with review → CI builds and runs the tests → merge to main → one artifact promoted through dev, staging, production → canary or blue-green release → automatic rollback on errors. This page: a GitHub pull request, merged, then built and deployed by Cloudflare Pages.
Five films. Pause any frame. Take it apart.
Each film follows Luis's pan sobao, narrated, in 3D. Stop at any moment and explode the machine into its parts. Switch to Technical for the real protocols and code.
About your numbers: they come from your own browser (the Navigation and Resource Timing APIs), a request to this site's /cdn-cgi/trace, and one DNS query to Cloudflare's public resolver. Nothing is sent to us or stored, and your IP address is never shown.