---
title: "Behind the build: 2025's BFCM globe in a pinball machine 🌎🕹️"
description: "The 2025 BFCM live globe was implemented inside a browser-based pinball machine to represent real-time merchant sales and celebrate milestones. Built with three.js and react-three-fiber, the experience runs at 120fps, uses Server-Sent Events for order arcs and live metrics, includes a 128x32 shader-driven dot-matrix display, and supports AR through react-three/xr. For performance, the team simulated pinball physics in 2D with Rapier2D and used raycasts for ramps and elevation, reducing the physics step from 2ms to 0.2ms. The scene also includes interactive mini games, infrastructure statistics, Easter eggs, and milestone-triggered reactions, while Apache FlinkSQL pipelines process event streams behind the commerce visualizations. The globe was also displayed on the Exosphere in Las Vegas for the third consecutive year."
---

# Behind the build: 2025's BFCM globe in a pinball machine 🌎🕹️

[Shopify](https://yomu.fyi/company/shopify) · 2023-10-18 · Dec 3, 2025

**Type:** Explainer

## Summary

The 2025 BFCM live globe was implemented inside a browser-based pinball machine to represent real-time merchant sales and celebrate milestones. Built with three.js and react-three-fiber, the experience runs at 120fps, uses Server-Sent Events for order arcs and live metrics, includes a 128x32 shader-driven dot-matrix display, and supports AR through react-three/xr. For performance, the team simulated pinball physics in 2D with Rapier2D and used raycasts for ramps and elevation, reducing the physics step from 2ms to 0.2ms. The scene also includes interactive mini games, infrastructure statistics, Easter eggs, and milestone-triggered reactions, while Apache FlinkSQL pipelines process event streams behind the commerce visualizations. The globe was also displayed on the Exosphere in Las Vegas for the third consecutive year.

## Context

The team handles increasingly large traffic and sales spikes during the annual Black Friday Cyber Monday weekend and wanted to show the meaning behind individual merchant orders through a live globe. The 2025 version aimed to celebrate merchant moments in real time while presenting commerce activity at planetary scale.

## Approach / What changed

The team placed the live globe inside a virtual pinball machine built with three.js and react-three-fiber. Server-Sent Events deliver order arcs and metrics, while Apache FlinkSQL pipelines process event streams. The experience combines a shader-driven dot-matrix display, 2D Rapier physics with raycasts for elevation, interactive mini games, milestone reactions, infrastructure statistics, and AR support through react-three/xr.

## Takeaways

- Using 2D physics instead of 3D reduced the physics step from 2ms to 0.2ms; raycasts supplied ramps and elevation while avoiding the extra CPU cost of 3D simulation.
- The dot-matrix display uses 128x32 sprite sheets, CPU-selected texture offsets, and a shader that applies the matrix effect; bloom post-processing adds its warm glow.
- Mini-game replacement required checking that no balls occupied the play area, including when six balls were in play, and a raised metal fence prevented interaction during the swap.

**Tags:** [Architecture](https://yomu.fyi/topic/architecture), [Monitoring](https://yomu.fyi/topic/monitoring), [Performance](https://yomu.fyi/topic/performance), [Streaming](https://yomu.fyi/topic/streaming)

- Source: [Shopify](https://shopify.engineering/2025-bfcm-live-globe)
- Source URL: https://shopify.engineering/2025-bfcm-live-globe
- Ingested by Yomu: 2026-08-30T13:18:44.119Z

[Read original post](https://shopify.engineering/2025-bfcm-live-globe)