Engineering the Internet Expertise Behind Shopify’s Spring ’26 Version: In every single place

Editor’s Be aware: Each Shopify Editions launch is accompanied by an interactive internet expertise that explores new concepts on the internet. For the Spring ’26 Version, In every single place, the staff got down to construct an expertise that felt cinematic whereas remaining true to the online: responsive, accessible, performant, and usable throughout a variety of gadgets. Forward of the launch, we spoke with Inventive Director Maggie Fost and Principal Product Designer Andy Thelander in regards to the making of the expertise, and we’re thrilled that Andy expanded on lots of the matters we mentioned and turned them into this in-depth technical walkthrough for Codrops. What follows is a uncommon take a look at the engineering choices, rendering structure, customized asset pipeline, and artistic workflow behind Spring ’26 Version: In every single place.

Constructing Spring 2026 Editions

Each version has excessive ambitions for injecting new & spectacular strategies into rendering content material on the internet. Spring 2026 Editions ended up feeling nearer to a movement piece than a traditional product web page, however it nonetheless needed to match inside the tight constraints of a performant, fast loading web page of simply readable data.

The primary visible layer as a small rendering system that updates within the background with scroll by means of a unified canvas and lots of nested body buffers. The DOM dealt with the content material and interplay layer and WebGL dealt with ambiance, level clouds, volumetric mild, and scroll transitions.

There are numerous good technical choices that went into the construct however let’s concentrate on the inventive workflow for the way 2 WebGL strategies have been developed in-house

Impact 1: Creating Volumetric Gentle from Video

Some scenes wanted gentle transferring mild somewhat than flat video. For these, video was preprocessed into KTX2 array textures and rendered as raymarched packing containers in Three.js.

The shader treats the feel as a stack of frames or slices:

• sampler2DArray for KTX2 quantity textures
• sampler2D plus a depth map for depth-extruded stills
• a hard and fast raymarch loop with a runtime step clamp
• threshold, softness, edge fade, brightness, HSL adjustment, and noise controls

The KTX2 information carry the compressed picture information, however not the entire timing metadata we want, so the app retains a small source-to-volume map with period, dimensions, and layer rely. Authored KTX2 URLs will also be handed immediately from the scene preset.

This isn’t true volumetric video. It’s a pragmatic browser model: a textured quantity, raymarched simply sufficient to learn as mild and depth, with a tough cap on grid rely and raymarch steps so an art-directed preset can not by chance flip right into a efficiency cliff.

Clear video with out counting on native alpha

For authored movement, we used Rive the place interactivity was wanted and exported non-interactive movement to video when runtime animation was not price the associated fee.

Clear video assist remains to be uneven throughout browsers. Chrome and Firefox can play native-alpha VP9 WebM within the path we want, however Safari and unknown browsers want one other route. For these, we use a stacked-video method:

┌──────────────┐
│ RGB body    │
├──────────────┤
│ alpha body  │
└──────────────┘

The video is twice as tall because the seen body. The highest half shops colour. The underside half shops alpha. A tiny WebGL2 shader reconstructs the clear body right into a canvas:

vec3 rgb = texture(u_tex, vec2(v_uv.x, v_uv.y * 0.5)).rgb;
float alpha = texture(u_tex, vec2(v_uv.x, 0.5 + v_uv.y * 0.5)).r;
outColor = vec4(rgb * alpha, alpha);

A number of particulars mattered right here:

• Use NEAREST filtering so RGB and alpha rows don’t bleed throughout the midpoint.
• Dimension the canvas from the decoded video dimensions, not CSS measurement.
• Use requestVideoFrameCallback when obtainable; fall again to requestAnimationFrame.
• Get better from webglcontextlost, particularly on cell Safari.
• Hold a poster seen till the primary reconstructed body has painted.
• Use crossOrigin="nameless", or texImage2D(video) will fail for CDN video.

This path allow us to preserve the authoring freedom of clear movement with out betting the entire expertise on a single browser’s video-alpha implementation.

Impact 2: Level clouds

The atmospheric hero scenes use level clouds closely. Delivery uncooked place and colour buffers would have been too costly, so we used a small project-specific point-cloud format: .mdpc.

The metadata shops the purpose rely, bounding field, place quantization, chroma subsampling, stream lengths, and compression codec. Positions are quantized contained in the bounding field and decoded again into Float32Array information in a employee. Coloration is saved as luma/chroma streams somewhat than full RGB for each level, then reconstructed within the employee as normalized RGB.

Newer property use deflate, which could be decoded with DecompressionStream within the browser. Older property can nonetheless fall again to Brotli by means of a small wasm path. The loader additionally retains a legacy .bin/Draco fallback, however .mdpc is the popular path as a result of it lets us management the precise information structure and keep away from doing extra work than the scene wants.

The purpose cloud loader returns typed arrays:

kind PointCloudData = {
  positions: Float32Array;
  colours: Float32Array;
  rely: quantity;
  bounds?: {
    min: [number, number, number];
    max: [number, number, number];
  };
};

From there, the renderer builds a Three.js BufferGeometry, samples an acceptable variety of factors for the present tier, and drives the seen behaviour by means of shader uniforms: measurement, opacity, circulate, caustics, colour correction, digicam fade, transition progress, SDF collision, and fluid displacement.

One small however essential efficiency element: the loaded point-cloud object will not be handed round as React state. These objects can maintain multi-megabyte geometries and supplies. Preserving them in refs avoids React strolling giant Three.js object graphs throughout commits.

Fluid Results

A number of results wanted to react to cursor motion and scroll velocity: point-cloud displacement, light-volume distortion, and a few post-processing. As an alternative of every system proudly owning its personal simulation, the web page makes use of a shared fluid subject per renderer.

A FluidField element renders nothing. It owns the fluid simulation, steps it in useFrame, and writes the speed texture right into a ref. Customers pattern that texture in their very own shaders.

Solely the energetic part is allowed to drive the simulation. Passive sections can learn the present texture, however they don’t resize or step the shared FBO. This avoids totally different sections preventing over renderer-level sources throughout scroll transitions.

Lowered movement is dealt with inside the identical system. The simulation can preserve working so pointer interplay nonetheless feels responsive, however scroll-driven splats are eliminated and the splat drive is lowered earlier than downstream results pattern the speed subject.

Machine tiers as a substitute of 1 common scene

The web page needed to run throughout a variety of GPUs, so the renderer makes use of a single runtime tier as the principle efficiency knob:

• Tier 0: no WebGL or blocklisted GPU; use static fallbacks.
• Tier 1: minimal WebGL; smallest point-cloud property and decrease body value.
• Tier 2: lowered texture sizes and less complicated transition results.
• Tier 3: full desktop high quality.

The tier is resolved with GPU detection, WebGL assist checks, and runtime fallback paths. Cellular is capped aggressively as a result of reminiscence strain issues greater than peak benchmark rating. In apply, this implies cell will get smaller point-cloud variants and decrease render value even on gadgets that may technically run heavier scenes for a short while.

DPR is clamped too. Fairly than blindly utilizing window.devicePixelRatio, the renderer caps DPR by high quality stage and viewport measurement.

Efficiency and Scrolling

Every content material part maps to a scene preset. Because the person scrolls, the app resolves which scene is energetic, mounts the energetic scene and its quick neighbours, and composites between them in a fullscreen WebGL canvas.

The tough circulate appears like this:

scroll place
  → part visibility
  → energetic scene state
  → Three.js / R3F scene
  → offscreen framebuffer
  → GLSL composite go
  → fullscreen canvas behind the DOM

The essential half is that the scroll place drives uniforms, not React renders. Digital camera movement, part transitions, display offset, point-cloud displacement, and post-processing parameters are learn from refs contained in the render loop. That saved high-frequency scroll updates out of React whereas nonetheless letting the DOM web page and the WebGL scene keep visually locked collectively.

Solely a small scene window stays mounted directly. The energetic part and adjoining sections are saved alive; every little thing else is unmounted and disposed. That gave us sufficient overlap for scroll transitions with out holding each level cloud, video texture, and shader pipeline in reminiscence on the identical time

Playground to empower designers

The inventive workflow was constructed round a shared scene preset somewhat than a separate prototype format. A preset describes the digicam, setting, level cloud, post-processing, video mild volumes, SDF shapes, cell offsets, and transition behaviour.

The playground and the manufacturing app devour the identical preset form. Designers and artistic builders may tune WebGL scenes, lighting, structure, and movement in a browser, then transfer the identical values towards manufacturing as a substitute of asking engineering to reinterpret a mockup.

That modified the collaboration loop. As an alternative of “design hands-off, engineering rebuilds,” the loop turned: tune the true scene, take a look at it within the browser, test the tiered fallbacks, then ship the identical underlying configuration.

What we realized

The largest lesson was that high-end browser work is generally pipeline work, constructing the manufacturing unit to construct the merchandise at scale. The ultimate web page appears like a visible system, however the stability comes from a set of sensible constraints:

• preserve scroll-driven values out of React renders
• precompute heavy movement when runtime animation provides no worth
• mount solely the scenes close to the viewport
• make inventive tooling use the identical information contract as manufacturing

That blend let the positioning preserve the sensation of a cinematic launch whereas nonetheless behaving like a manufacturing internet web page.