The hero particles are cool, but they have a few issues:
When a user scrolls down the page and returns up, they seem to accumulate in the corners and then burst outwards laggily
Can sometimes slow down website performance
There are a few ways we could solve this.
Option A is to stop the particles from bouncing off the boundaries and reduce the number somewhat. This is configurable from the options. We could also change them to flow in a certain direction instead of bouncing everywhere. A thorough investigation would be necessary to ensure this options do not cause issues themselves (and still look good).
Option B is to switch to different kinds of particles. We could make little bits flow across the screen like stars using the same library. I have some example code that I can share with anyone who is interested in investigating.
Option C is to use React Visibility Sensor. We are using it already for the countups. We could use it to turn the particles on or off depending on if they are on-screen. I bet with some css, we could even make the particles fade in or out.
The hero particles are cool, but they have a few issues:
There are a few ways we could solve this.
Option A is to stop the particles from bouncing off the boundaries and reduce the number somewhat. This is configurable from the options. We could also change them to flow in a certain direction instead of bouncing everywhere. A thorough investigation would be necessary to ensure this options do not cause issues themselves (and still look good).
Option B is to switch to different kinds of particles. We could make little bits flow across the screen like stars using the same library. I have some example code that I can share with anyone who is interested in investigating.
Option C is to use React Visibility Sensor. We are using it already for the countups. We could use it to turn the particles on or off depending on if they are on-screen. I bet with some css, we could even make the particles fade in or out.