Motion Blur with WebGL
In early May 2024, I came across an impressive SwiftUI prototype shared by Alex Widua on Twitter. Inspired by this design, I took on the challenge of recreating it using Svelte and WebGL. To push my skills further, I opted to build everything from the ground up without relying on external libraries. This approach not only allowed me to successfully replicate the prototype but also deepened my understanding of both WebGL and GLSL.
Overview
- Making the controls
- Setup the scene with WebGL
- Building the shader with GLSL
- Implementing the motion blur effect
- Enjoying the result
Before diving into anything else, I recognized my aversion to the standard operating system inputs. To address this, I set out to create aesthetically pleasing Apple-style controls. My first endeavor was implementing a Range Slider.
Subsequently, I developed a knob component specifically designed to manipulate the direction of the motion blur effect.
These are not perfect i admit it but actually they work! i’m happy with the result. i’m planning to improve them in the future. i’m open to any suggestions and feedbacks. i hope you like them. thank you for reading
In writing.
Acknowledgements
Special mention for Alex’s tweet, without which I wouldn’t have realized this.