TLDR Web Dev · ARTICLES & TUTORIALS

HOW WE BUILT THE BFCM 2023 GLOBE

shopify.engineering29 min read

Summary from the TLDR Web Dev newsletter

Shopify built an interactive 3D globe visualization for its Black Friday Cyber Monday (BFCM) event in 2023. This article dives into the engineering challenges and solutions used to optimize performance, particularly in instancing and GPU-based animation. It goes through the creation of various elements, such as arcs representing orders, city dots, fireworks, and animated pins, with the use of Three.js, React-three-fiber, and psrdnoise for noise generation.