See how this ethos came to life in the particle shader effect we created for Vercel Ship.
Our 3D team started experimenting with letters built out of particles and sent this preview. Collaboratively with the Vercel team, we put together a proof of concept that breaks the logo into particles that can be moved with the cursor.
After this experiment, we knew this was the correct path. We wanted a light and simple framework to work with particles, so we decided to use Regl as our WebGL framework.
To achieve this effect, we created a grid of particles that will move when the mouse is close to them.
These particles will also render the texture of the logo and the button, and when they start to move, they turn into small dots.
Let’s scale the effect to see what is happening:
The green channel determines how much a given particle can move; this is especially useful to disable the effect on some parts of the hero.
We want the particles to gravitate towards the mouse and slowly return to their original position. To achieve that, we created a flow shader that stores information about mouse movement.
We used the red and green components to store the direction from the pixel to the mouse. This could also be achieved with a simpler calculation (PixelPos - MousePos), but we wanted the position to have a fade out so the particles don't move 1-1 with the mouse. If a particle is already moving, it will change its direction slower than a static one.
The blue component of the shader indicates how much the particles should move. That factor is later combined with the baseFbo and the direction vector to calculate where the particles should land.
The final combination of the buffers looks like this:
