← Timeline

How can I create this effect?

r/learnjavascript

u/michaelnovati replied · ★ FEATURED
Hi @Space-man_! I'm the person at Formation.dev that worked in this! It's an interesting story and absolutely a challenge. Our designer came across someone that built something similar as a demo. The person, I can't find the link, basically wrote up something about this particle effect and published a really rough demo website as a fun project. Fortunately he created a custom license for the project that allows any kind of use, personal or commercial, and any kind of derivate works, so we were able to make significant modifications to rework the code and use it for our site. The only thing you can't do is sell his code directly but with your name on it. The project was based on Three.js for the canvas. The demo was really not reusable. So we broke it apart and used the underlying particle logic and shading logic. We generalized a component that could fit in any shape and size rather than just the whole page, and we created a process using any photo for the effect, including our own set of photos (which are all public domain photos or used with the appropriate license). Finally, some performance improvements and fine details to get everything perfectly right! (even on mobile). Our designer spent some time getting the colors and dimensions of the photos just right for the effect to present a clear image that still looked good. It took a few hours of my time but it was worth it! I love the effect and it represents the high bar we strive for!