A Live Commerce Globe, Rebuilt as a Playable Pinball Table
Black Friday Cyber Monday is Shopify’s biggest traffic event of the year, and the engineering team spends months preparing for the load. But the live globe that visualizes merchant sales in real time is also a chance to do something playful. In 2025, that meant embedding the globe inside a fully playable pinball machine—rendered in the browser, complete with physics, AR support, and a pile of Easter eggs.
Senior Engineer Daniel Beauchamp estimates he logged 400 hours on the project before launch. The result: a three.js app built with react-three-fiber that runs at 120fps in a browser. When a merchant makes a sale, it appears on the globe within seconds as an arc, with data streamed in via server-sent events.
Board Reactions and Milestone Moments
The table isn’t just a static piece of scenery—it reacts to real sales data. As order milestones like 10K, 100K, or 1M are hit, the board responds with visual and gameplay changes. The team also built a multiball sequence specifically triggered by a merchant’s first sale.
“We wanted a game that celebrates merchant moments in realtime,” Beauchamp said. “When our merchants win, you win.”
2D Physics With 3D Presentation
A full 3D physics engine would have been overly costly for this experience. Instead, the team simulated all physics in 2D and used raycasting against the floor to handle ramps and elevation changes in the 3D scene. This cut the physics step from 2ms down to 0.2ms—a substantial win in a frame budget that’s already feeding a heavy three.js scene.
The physics engine is the JavaScript build of rapier2D.
Retro Display, Modern Interactions
A pinball table needs a dot matrix display, so the team wrote a shader to play back 128x32 pixel sprite sheets for the animations. Beyond the board itself, the scene is populated with interactive props: a desktop monitor showing real-time Shopify infrastructure stats, a folder labeled "Behind the scenes" with hidden content, and plenty of secrets—including a number painted into the scene as a hint for hunters: 4364.
You can also do "highly important" things like add pineapple to pizza (a virtual pizza, presumably) or make a rubber duck quack.
AR Play in About 100 Lines
The whole table also works in augmented reality, thanks to the @react-three/xr library. Beauchamp says wiring up AR support took roughly 100 lines of code, enabling anyone with a compatible headset to drop the pinball table into their physical space and play.
The team’s README file—which lives in the scene for explorers to find—jokes that "No one will read this blog." This article is proof otherwise, but the spirit of the project clearly leans into what the company calls "unserious exploration": a production-grade, performance-tuned experience built to chase fun as much as engineering craft.
Design decisions that shaped the table
Staff Product Designer Brennan Letkeman on the thinking behind the build.
Most of the design work wasn't about the obvious stuff. Pinball has a deep subculture, and spending time with it taught us that the interesting parts aren't just the visual vocabulary — it's the ethos underneath. Pinball is fun through precision in the face of chaos. Early on you're just trying to keep the ball alive, but as you improve, you unlock ball control and start to feel each table's specific flow. Different eras and designers have different vibes. At the far end of the skill curve, some shots require millisecond-perfect flipper timing, sometimes repeatedly. That oscillation between control and random physics is what makes pinball unique, and it's what gets the flow state going.
We all agreed early on that we preferred long, flowing rallies over the staccato bounce of certain real tables. We didn't like ball locks — they interrupt rhythm. We wanted big ramps and the chance for a third-flipper shot that goes around the top and, with perfect timing, lets you hit an otherwise inaccessible target. But since we had an entirely virtual world, we also asked what else we could do.
The Underground Era (and why we cut it)
One of the first big twists was a full second board hidden "inside" the cabinet — the play area went underground.
The initial theme was wires, gears and spotlights lining the walls, with a WarioWare-style randomization: every time you ended up down there, the game would pick from a collection of simple single-action skill shots. The first prototypes were a soccer goal with a moving goalie and a basketball hoop in the style of 1995's Shaq Attack.
It was boring. A full table's worth of space made a mini-game's worth of content feel wrong. And mobile plus VR — platforms where you can't move the camera arbitrarily — made the whole concept impractical. After a week or two, we cut it.
The modular mini game
We still liked the idea and had a list of half a dozen mini games we were excited about, so they needed a new home.
An early sketch had a carousel under the globe — since the globe was always there, why not spin a turret of targets around it? The lesson from prototyping was that a rotating cast of single-action goals works well; the problem is having them all coexist in fixed positions. The first-sale tower is tall — how would it rotate under ramps and rails?
Unless it came up through the floor. And so the modular mini game was born.
The modularity paid off in development: parts were trivially swappable, avoiding permanent board commitments that would affect the model, light baking, materials and logic. It also decoupled the relative locations of each mini game. A milestone can interrupt mini game #1, and the sequence doesn't need to be fixed — the flow can go #3, then first sale, back to #3, then #4 or #5, and so on.
The ramps that changed everything
Originally, I designed intricate ramps that split into and out of each other — a real technique on physical tables. But our 2D physics engine has no real gravity pulling the ball downward onto the table, so those designs were extremely difficult to program.
We could have found workarounds in code, but the split ramps didn't add enough to the game to justify it. The biggest change — visible in the renders and sketches as a core shift — was adding the main central lane back through the pop bumper zone.
It changed the whole feel. The middle area previously held ramp entrances and walls, which looked normal but felt claustrophobic and frustrating. Because that's where flipper shots most often end up, and because it stopped you immediately, the play felt like rejection, not flow. Opening it into a path that took you up and away from the flippers was fresh air. The other ramps eventually settled into an easier one and a harder one, naturally.
Sometimes a normal table is the goal
We spent a lot of early design time on being weird — sideways gravity, a left-right tilt system, rotating the table so walls become floors, the underground level. In the end, sometimes you just have to make a normal thing really well. After hundreds of hours of crafting and play-testing, I'm glad we did. It focuses you on the important bits instead of fighting to figure out the novelty.
The engineering underneath
Senior Engineer Diego Macario Bello and Distinguished Engineer Daniel Beauchamp offer their technical notes.
Pinball looks simple on the surface, but it requires an enormous number of coordinated systems to feel fun: a physics simulation resolving high-speed collisions with flippers, pop bumpers, slingshots, kickers and spinner targets; a light system controlling 86 lights for animations and game-state communication; a sound system mixing mechanical and electronic audio; and a dot matrix display (DMD) rendering dozens of animations. That real machines exist at all is something of a miracle once you try to simulate one in software.
Why we pivoted from 3D to 2D physics
The project started on the Rapier 3D physics engine. Using 3D made ramps easy — you create a collider and let the engine roll the ball up and down. But as the scene grew, the math became too heavy for older mobile devices, especially during multiball events. So we made the hard call to refactor to Rapier 2D.
The obvious question: how does a ball go up and down ramps in 2D? We built a system of sensors that activate and deactivate colliders as the ball moves. At a ramp entrance, all table colliders except the ramp's get disabled; at the exit, they get re-enabled. It’s a carefully orchestrated dance.
The pivot hurt, but everything improved. Even with six balls on the table with continuous collision detection (CCD) enabled, our physics step averages 0.2 milliseconds — leaving plenty of frame budget for rendering confetti.
Rendering and state
The site runs on Three.js and React-Three-Fiber (R3F). Most materials are MeshBasicMaterials because lighting was baked in Blender — a big performance win. For state management we use zustand, one of the best open source projects right now.
Eighty-five lights without forward rendering
Dynamic lighting is essential to pinball's identity, but 85 lights can't be handled with forward rendering and point lights. Instead, we used two textures for the play field floor: one with the base color and one with only the emissive lights. Then we generated a separate mask texture that encodes the light id in the "R" channel, so every pixel reveals which light it belongs to.
The shader uses that mask index to conditionally switch each emitter in the emissive map. lightValues is a uniform float array with all current light values. An animation system drives that array to play out lighting effects.
The DMD display
The DMD showed both your pinball score and live sales stats. A simple system loads individual spritesheets and merges them into one large sheet.
Each frame, the CPU figures out which part of the sheet to render and uploads texture offsets to the GPU. The frame size is 128x32, just like an old-school DMD. A shader selects the right section and applies a dot effect for the iconic matrix look. Our post-processing stack with bloom gave it that warm glow.
The mini game system's edge cases
Five mini games plus two special live-data-triggered ones live in the table. On completion, the active game lowers into the ground and a new one rises. Fast and fun, but full of edge cases: what if a ball is still in the mini game area when a swap starts? We have to wait until it exits — and with six balls in play, we have to check that none of them are in the area. The swap sequence itself raises a metal fence in front of the mini game area to keep players out during the changeover.
Everyone on this team grew up playing Space Cadet pinball in the 90s — most of us in elementary school computer rooms. None of us imagined building a game like that one day. Building a pinball machine is deeply humbling and deeply rewarding. It seemed so easy at the start. We hope you enjoy playing it half as much as we enjoyed building it.
Inside the Data Behind the Globe
The globe visualization is a live view of commerce happening at planetary scale, fed by stream processing pipelines designed to handle Shopify's heaviest traffic of the year. Each arc drawn on the globe represents a real order, rendered as an as-the-crow-flies line connecting the shop to the buyer.
Behind the scenes, Apache FlinkSQL pipelines process a continuous stream of events to calculate the arcs, along with sales and buyer metrics. Grafana powers the infrastructure statistics that appear alongside the commerce data. All of this information is delivered to the browser in real time using Server Sent Events—you can open your browser's network tab and watch the incoming data for infrastructure stats, sales metrics, and arcs as they arrive.
The Globe Takes Over the Las Vegas Sphere
For the third consecutive year, Shopify placed its signature globe on the most prominent LED display in existence: the Exosphere in Las Vegas. The Live Globe ran there using 100% live data, rendered in real time with threejs, React, and a substantial amount of shader code.
One notable fun fact from this year's run: the footage of the Sphere was captured by drone and helicopter only four hours before it was published. The raw video was transported to a makeshift editing setup in a Wynn hotel room, edited immediately, and released the same day—one of several unconventional production challenges the team faced during BFCM.
That concludes the 2025 live globe build recap, and the team is already looking forward to what 2026 will bring.
