Edge Network Globe

About this style

The turning globe crossed by arcs of light became a familiar image in cloud and edge infrastructure marketing, used by hosting platforms, content delivery networks and payment companies to make an invisible network feel physical. It answers a buyer's first question, where does my code run and how close is it to my users, in one picture. Pins mark the points of presence, arcs suggest traffic moving between them, and small latency figures turn the picture into a claim that can be checked. The strongest versions keep the geography recognizable, the motion slow and the numbers plausible, so the globe reads as a map of a working system rather than as a screensaver.

Make a 10-second edge network launch film: a dotted 3D globe turns slowly in a dark petrol field while request arcs leap between ten region pins, a live panel ticks each region's latency, and a deploy command goes live in every region at once.

<inputs>
If I don't give you something, use the default and don't ask.
- Company: Skerry (fictional), an edge hosting platform. Wordmark "skerry" in lowercase beside an original mark: three round dots of 10, 7 and 5px stepping up and to the right, like a chain of rocks in the sea.
- Headline, three lines: "Your app," / "within 25 ms" / "of everyone."
- Subline: "Deploy once. Skerry runs your app in 10 regions and answers every request from the closest one."
- Regions (code · city · p50 latency · lat, lon): SFO · San Francisco · 9 ms · 37.6, −122.4; IAD · Ashburn · 7 ms · 39.0, −77.5; GRU · São Paulo · 14 ms · −23.4, −46.5; LHR · London · 8 ms · 51.5, −0.5; FRA · Frankfurt · 6 ms · 50.0, 8.6; JNB · Johannesburg · 21 ms · −26.1, 28.2; BOM · Mumbai · 18 ms · 19.1, 72.9; SIN · Singapore · 11 ms · 1.4, 103.9; NRT · Tokyo · 9 ms · 35.8, 140.4; SYD · Sydney · 13 ms · −33.9, 151.2.
- Panel footer: "1,284,310 req/s" and "median 10 ms" (the median of the ten p50s).
- Command: "$ skerry deploy", and the reply "Live in 10 regions · 38 s" after a check mark.
- Length: 10 seconds.
</inputs>

<direction>
- Look: a night view of a planet-scale network, calm and exact. One sand-colored dot globe, one ember arc color, bone-white pins and type, and a quiet data panel. It should feel like an infrastructure company that measures things, not a sci-fi screensaver: slow constant rotation, arcs that rise out of and settle back into the surface, and numbers that tick like a real dashboard.
- Palette: background a radial gradient from #0E1C1F behind the globe to #071012 at the corners (never pure black); globe body #0F1E21; land dots sand #CDBF9F; graticule #17292C; arcs ember #FF7A45 with a packet head #FFE3D1; pins, arrival rings and primary text bone #F2EDE3; secondary text #8FA4A0; panel fill #0F1C1E at 92% with a 1px #24383B border; panel bars #2B4346; the live dot and the check sage #9FC9B4. No blue, no purple, no other hue.
- Type: Bricolage Grotesque 700 for the headline at 68px on a 76px line, tracking −0.02em; Bricolage Grotesque 400 for the subline (24px on 36px) and city names (18px); Bricolage Grotesque 600 22px for the panel title; Chivo Mono 500 for codes, latencies, counters and the command, with tabular figures. Draw the check mark as a 2px stroke, not a font glyph.
- Layout:
  - Wordmark at x 120, baseline y 96, 30px. Headline in the left column from x 120, baselines y 356, 432 and 508. Subline from baseline y 572, max width 380px (four lines). Command chip at x 120, y 720–776, 400px wide, radius 28, 1px #2C4246 border, "$ skerry deploy" inside in Chivo Mono 500 22px. The reply at x 120, baseline y 822, Chivo Mono 500 18px in sage.
  - Globe: its center projects to (960, 540) with a 360px screen radius (x 600–1320). Use camera.setViewOffset to shift the projection rather than moving the globe off axis, so the sphere stays perfectly round.
  - Panel: x 1370–1800, y 210–870, radius 16. Title row y 210–270: "Edge regions" at x 1398 and, at the right, a steady 6px sage dot with "LIVE" in Chivo Mono 500 13px tracked 0.14em. Ten rows of 52px from y 280 in the input order: code at x 1398 (Chivo Mono 500 18px, bone), city at x 1462 (secondary), latency right-aligned at x 1772 (Chivo Mono 500 20px, bone, "6 ms"), and under each row a 2px bar from x 1398 whose length is latency × 12px, #2B4346 with its last 4px in ember. Footer y 810–870 under a 1px rule: "1,284,310 req/s" in Chivo Mono 500 26px bone at the left, "median 10 ms" in 18px secondary at the right.
- The globe:
  - A sphere of radius 1 (96×64 segments), MeshStandardMaterial #0F1E21, roughness 0.85, metalness 0. Light it with a HemisphereLight (sky #CFE3DF, ground #071012, intensity 0.8) and a DirectionalLight #FFF1E0 at intensity 1.6 from (−3, 2.5, 4), so the upper-left limb reads clearly lit and the lower right falls to a dark teal, never to black. Renderer: SRGB output color space, ACESFilmic tone mapping, exposure 1.15.
  - A thin atmosphere: a back-faced sphere of radius 1.035 with an additive fresnel ShaderMaterial in #6FA597, strongest (35%) right at the limb and gone 20px outside it. That rim is the only soft light in the piece.
  - Land: 22,000 points on a Fibonacci sphere, kept only where a land mask is true (roughly 6,500 survive). The mask is an equirectangular 120×60 grid typed into the code as 60 strings of 120 characters ('#' land, '.' sea), drawn carefully from memory so every continent is recognizable from orbit at this coarse size: North and South America joined at the isthmus, Greenland, Europe around the Mediterranean, Africa, the Arabian Peninsula, India, Southeast Asia and Indonesia, Japan, Australia and New Zealand; no Antarctica. Draw the dots as one InstancedMesh of circles of radius 0.0055 facing outward along the normal (about 4px across on screen), MeshBasicMaterial sand at 90%, so lighting never darkens them; dots fade to 35% over the last 15° before the limb.
  - A graticule every 30° of latitude and longitude: 1px lines in #17292C just above the surface.
  - Orientation: the camera sits 18° above the equator. The globe turns on its axis at exactly 5° per second for the whole piece: the longitude facing the camera is +30° at 0 s, 0° at 6.0 s (Europe, Africa and the Atlantic in front, IAD and BOM near the two limbs) and −20° at 10 s. It never stops and never speeds up.
- Pins: for each region, a stem (cylinder, radius 0.0035, height 0.11) rising along the surface normal, capped with a sphere of radius 0.018, plus a flat ring of radius 0.03 at its base at 40%; all MeshBasicMaterial in bone. Each pin carries an HTML label positioned every seek by projecting its cap with Vector3.project, 12px to the right of the cap: the code in Chivo Mono 500 15px bone and its latency in secondary ("FRA 6 ms"). A label's opacity follows the pin's facing: 1 when the dot product of its normal and the direction to the camera is 0.35 or more, 0 at 0.15 and below, so labels never show for pins behind the globe or right on the limb.
- Arcs: 30 arcs from a seeded PRNG between distinct region pairs, weighted toward pairs where both ends face the camera at launch. Each follows the great circle between its pins, lifted by h = 0.05 + 0.24 × (angle ÷ π) on a sine profile, drawn as a TubeGeometry (radius 0.0028, 96 segments) in ember with MeshBasicMaterial. An arc lives 1.6 s: its head draws out from the origin over 0.75 s (easeInOutCubic, through setDrawRange) carrying a packet sphere (radius 0.011, #FFE3D1); then its tail retracts toward the destination over 0.6 s (easeInCubic), so each arc travels as a moving stroke rather than lingering. On arrival the destination pin emits one ring (radius 0.03 → 0.11, opacity 0.7 → 0, easeOutCubic over 0.6 s); a pin rings at most once per 0.5 s. No more than 7 arcs are live at once, and never fewer than 4 after 3.2 s.
- Counters: each row's latency steps by 1 ms at most once every 0.6 s on a seeded schedule, staying between its listed value −1 and +2, the new digit rolling up into place over 0.18 s. The footer's req/s counter climbs from 0 to 1,284,310 between 2.4 and 5.0 s (easeOutCubic), then drifts within ±0.4% on smooth seeded noise, updating 4 times a second. The median stays at 10 ms. No number changes every frame.
- Routing beat (after the poster): 36 user requests appear on visible land, one every 0.05 s. Each is a sand dot that brightens to bone over 0.2 s, sends a short low arc (h 0.02, ember at 70%, 0.5 s) to its nearest visible pin and fades out over 0.6 s. They prove the subline: every request goes to the closest region.
- Camera: perspective, fov 28°, starting at distance 6.2 and dollying to 4.4 by 2.4 s (easeOutQuart), then holding. No shake and no orbit beyond the globe's own turn.
- Premium: recognizable geography at a coarse dot resolution, real cities with believable latencies, one arc color, slow constant rotation, arcs that ease out of and back into the surface, a panel whose numbers move like a live dashboard. Cheap: a neon wireframe globe, a star field, lens flares, bloom on everything, rainbow arcs, arcs shooting off into space, numbers that flicker every frame.
- Banned: real company names, logos and UI copied from existing products; network maps copied from any real provider's marketing; star fields, nebulae, lens flares and bloom passes; blue or purple glow; hexagon grids; invented continents or a blob map; labels for pins on the far side; rotation faster than 5° per second; anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–0.6s: the petrol field; the globe body fades up from 0 to full; the camera is at 6.2.
- 0.3–1.6s: land dots appear in a sweep from the lit limb across the globe: each dot starts at 0.3 + 1.1 × (its angle from the light direction ÷ π) seconds and grows from 0 to full size over 0.25 s (easeOutCubic). The graticule fades in, reaching full at 1.4 s.
- 0.8–1.9s: the wordmark fades in at 0.8 s; the headline lines rise 24px and fade in 0.12 s apart (1.0, 1.12 and 1.24 s, easeOutQuart 0.5 s each); the subline fades in at 1.5 s.
- 1.4–2.4s: the ten pins grow out of the surface in panel order, 0.09 s apart, each stem scaling up from 0 along its normal over 0.3 s (easeOutBack, overshoot 1.4); each label fades in as its pin lands.
- 1.8–2.8s: the panel slides 40px in from the right and fades in (easeOutQuart 0.6 s); its rows cascade 0.05 s apart, each latency counting from "– ms" to its value over 0.4 s.
- 2.4–5.0s: arcs begin at 2.4 s and build to 5–7 in flight by 3.6 s; the req/s counter climbs.
- 4.4–5.4s: the command chip fades in at 4.4 s and "$ skerry deploy" types at 30 characters per second behind a steady block cursor; at 5.1 s the cursor disappears, the reply fades in and its check draws as a stroke over 0.2 s.
- 5.4–6.2s: the 6.0 s frame is the poster: the turning globe centered with Europe, Africa and the Atlantic facing, all six front pins (IAD, GRU, LHR, FRA, JNB, BOM) and their labels visible, 5–7 arcs in flight at different stages, the full headline, subline, command and reply, and the complete panel.
- 6.3–8.4s: the routing beat plays across the visible land while the arcs continue; the panel bars of FRA, LHR and IAD each brighten for 0.3 s as their pins take requests (at most once per row every 0.6 s).
- 8.4–10.0s: hold: arcs thin to 3–4 in flight, the globe keeps its slow turn and the counters keep ticking.
For other lengths, stretch the arc and routing beats; keep the rotation speed, the 1.6 s arc life and at least 1 s of hold.
</structure>

<build>
- One self-contained index.html (inline CSS and JS), a 1920×1080 (16:9) stage scaled to fit the window, designed for 60fps. No image, video, texture or model files: every shape, the land mask and the arcs are generated in code.
- window.seek(t), t in seconds, computes every visual from t alone: no CSS transitions or CSS animations, no setTimeout/setInterval, no state carried between frames, randomness only from a seeded PRNG. The arc schedule, the user requests and the counter schedules are precomputed once at load from the seed; each seek sets the globe's rotation, every arc's draw range, every ring, label and counter from t, then calls renderer.render once. Past the end, seek clamps to the last frame.
- Without ?render in the URL, drive seek from requestAnimationFrame so it plays in a browser (loop after a 1s end hold); with ?render, don't start that loop.
- Google Fonts via <link> are fine; await document.fonts.load() for each face before defining window.seek.
- Engine: three.js pinned to three@0.160.0 through an importmap from jsDelivr (https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js). WebGLRenderer with antialias, alpha: true and preserveDrawingBuffer: true, pixel ratio min(devicePixelRatio, 2), drawn over the CSS background. The headline, panel, labels and command are HTML layered above the canvas inside the same scaled stage.
</build>

<check>
Before showing me, step through one frame per second (t = 0…10): screenshot each and look at it. Fix overlaps, clipped or cramped text, and anything off-style or Banned. Check that the continents are recognizable (not blobs), the globe is lit on its upper left and never reads as a black disc, the dots are crisp and round, arcs leave and land exactly on pins and never cut through the globe, no label shows for a pin behind the globe, the globe turns by the same amount between every pair of frames, every latency is a whole number of ms and the footer shows median 10 ms, the headline never touches the globe's limb, the 6.0 s frame matches the poster description, nothing flashes, and the final frame shows the globe, pins, a few arcs, the headline, command, reply and panel. Confirm seek(10) and seek(11) match, so the final frame holds.
</check>

Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.

Similar prompts

Gradient Mesh Brand Film

Made by us

A slow, ribbon-like gradient mesh flows in a skewed band behind sharp headline type, while white payment, API and chart…

Keynote Product Reveal

Made by us

A device built in three.js rises out of total darkness while a softbox reflection glides along its titanium edge, then…

Dark UI Precision Glow

Made by us

A dark-mode work tool drawn in hairlines and quiet radial glows: issue rows populate, ⌘K opens a command menu, a comman…

Bento Grid Feature Reveal

Made by us

Rounded tiles spring into a bento grid on warm paper, each acting out one feature in a small animation, then the tiles…