TechPrufer
Get started
Shopify
Shopify logoShopify · Feature trail

Responsive Visuals for Marketing Pages

5 posts · Feb 2015 – Dec 2025

What this trail covers

Shopify has developed and enhanced its capabilities for creating dynamic and visually engaging real-time data visualizations for marketing events like BFCM. This includes optimizing 3D rendering techniques for large numbers of dynamic elements like order arcs and fireworks, implementing instancing for GPU-based rendering, and developing sophisticated camera animation and interactive features. The focus is on achieving high performance and visually rich experiences for showcasing global commerce. This post details the optimization of arc and firework rendering using instancing for GPU-based rendering, and the implementation of camera animations with a fix for the 'world flip' issue.

All Shopify trails
  1. Behind the build: 2025's BFCM globe in a pinball machine 🌎🕹️ - ShopifyThis post details the technical implementation of a real-time 3D pinball machine visualization for Shopify's BFCM Live Globe. Key technical contributions include: building a three.js app with react-three-fiber, using server-sent events for real-time order data streaming, developing custom GLSL shaders for dot matrix display animations, implementing 2D physics with rapier2D for performance, and integrating AR capabilities using react-three/xr. It also touches on the design decisions behind the modular minigame approach and the trade-offs made for performance.
  2. How We Built the BFCM 2023 Globe - ShopifyThis post details the optimization of rendering dynamic visual elements (arcs and fireworks) for the BFCM globe by implementing GPU instancing. It explains how instancing reduces draw calls and improves performance, allowing for tens of thousands of arcs to be rendered in a single draw call. The post also details the implementation of camera animations using spherical interpolation and a fix for the 'world flip' issue by dynamically updating the camera's 'up' property. It also covers the use of instanced particles for city dots and instanced meshes for fireworks, all rendered on the GPU.
  3. How We Built Shopify Party - ShopifyThis post details the development of Shopify Party, a browser-based internal tool for virtual hangouts. It leverages Unity WebGL for 3D rendering and Normcore for real-time networking and state synchronization. Key technical contributions include: using Unity's editor and physics engine, implementing a peer-to-peer networking model with Normcore for state synchronization and VoIP, synchronizing non-player-controlled objects using room time and deterministic functions (e.g., `Sin`), and optimizing character customization through texture application and shader programming to reduce rendering overhead. The development also utilized third-party assets from the Unity Asset Store to accelerate level design.
  4. A World Rendered Beautifully: The Making of the BFCM 3D Data Visualization - ShopifyThis post details the technical implementation of the 2020 BFCM Globe and Live View data visualization. It covers the adoption of a layered architecture using three.js, physically based rendering with `MeshPhysicalMaterial` and `MeshStandardMaterial`, and image-based lighting using 32bit EXR Environment Maps. A custom material (`ShieldMaterial`) is described for simulating bubble effects using GLSL shaders and the `onBeforeCompile` hook in three.js. For real-time order visualization, a particle-based approach using `three.js Points` and `BufferGeometry` with custom attributes and shaders is detailed. Techniques for efficient attribute updates using `_updateRange_` are also discussed, enabling the rendering of up to 150,000 particles without performance degradation.
  5. Images as Code: Representing Localized and Evolving Products on Marketing Pages - ShopifyThis post details the development of a JavaScript utility called `ScaleContentAsImage` to create responsive UI illustrations for marketing pages. It addresses the limitations of SVG for localization and dynamic resizing by using CSS transforms to scale content proportionally within a container. The solution involves creating a wrapper element, moving content into it, applying a scale transform, and using an absolutely positioned placeholder to maintain page layout. A React-specific implementation is also discussed.
  7. Building Year in Review 2014 with SVG and Rails - ShopifyThis post details the use of SVG with d3.js for animated charts, `stroke-dashoffset` for path animations, and techniques for making SVGs responsive using the `viewBox` attribute and CSS positioning. It also covers generating SVG text with offset strokes and patterned fills using Rails helpers and the `<pattern>` element.