Hi. I’m Ben Paine. I am a creative developer and designer based in San Diego, CA. I am going to demonstrate how to create unique page transitions using WebGPU. I have found that page transitions, when done right, exponentially improves the user experience. The reason I utilize WebGPU (this works the same with WebGL, I have been using WebGPU as a modern alternative) is to essentially eliminate the perception of the browser ‘popping’ the DOM state. With one continuous scene, we can trick the user experience to seamlessly transition between pages. For the sake of the tutorial’s focus, I will very briefly be diving into the logic of the WebGPU renderer or the SPA scaffolding, but essentially I am binding the textures to a DOM element and using a basic image texture. All of this can be viewed within the source code. 1. Getting Started Here I will lay out a bit of the scaffold and a little bit about how the SPA works.…