Hi all, I’d like to introduce you to my WebGL tool that I’ve worked on for a while: Moonbridge 2.0!
Visit it here: https://moonbridge.app/
Introduction
Over one and a half years ago I did a presentation on WebGL transitions, like many others it included one example that could be tweaked with the familiar GUI in the top right corner. After that presentation I had ideas to improve it and quickly it turned into a design tool with a lot of options.
About one year later I did the first release of the project which was well-received, but only partially what I imagined it could be, so I decided to do a rework, give it some branding and tweaked the user interface. All of those changes combined are the version that’s currently live!
Details
Moonbridge is a design tool for creating beautiful WebGL transitions. It’s (obviously) powered by Threejs and provides options like creating a mesh (with geometry / material that can be customized), and instancing that mesh to make it transition in a pattern (circles / shapes).
To make it more unique you can add lights, customize the scene (fog / shadows) and use the custom “Rainbow Material” that is included for instanced meshes. The easiest way to see some of these is to select a template on the homepage and tweak from there!
Up next
The recent release includes many structure changes that make upcoming features that I have in mind possible like: interaction between elements, a share option (for now you can save a 4K screenshot), more custom materials, different animations with control points (not following a line).
I’d really appreciate feedback and suggestions to improve this tool even more! Thank you for reading! 