Reconstruction of the animated effect from the Canva page (film, 4 minutes)
In the latest video on Hyperplexed, the author shares steps to create a particle effect based on mouse movement. The process begins with stripping down the observed effect to get a quick insight into what needs to be built. Mentioning the addition of a mouse move listener illustrates how critical positioning is for creating this effect. The first step is putting a white dot on the screen as the mouse moves. These dots won't linger forever, as the author decides they'll be removed after a short delay. Amazingly enough, within less than a minute, the core structure for the entire effect is already in place, which can then be further developed.
The next step in this suggested method is replacing dots with stars. The author opts for five-point stars and randomly assigns colors from a pre-defined list. Although the stars begin to look better, the author realizes they need animation. At this moment, the idea of animating the stars downward and making them fade out comes into play. While progress is being made, the author encounters a problem with the default behavior of the stars after the animation completes, causing them to randomly reappear.
When the author changes direction, instead of trying to 'speed up' the disappearance of the stars, they utilize a CSS property to prevent the stars from resetting back to their initial state. After making a few tweaks to the animation, the author decides it's better for the stars to have their own random animations, which results in a significant visual improvement. Nonetheless, the number of stars on screen becomes too much, prompting the author to seek solutions to throttle this effect. This leads to thoughts on throttling based on distance and comparing the current mouse position to where the first star was created.
Once the concept of the mouse position is established, the author recalls the appropriate formula for calculating the distance between two points. With this element implemented once again, the effects on screen become more manageable. The author introduces a new glow element, achieving the desired effect using box shadow. They adjust the size and blur of the shadow to get the proper glow. Finally, the author notes that the glow needs to be removed, but a shorter duration for disappearance piques viewer curiosity and encourages them to check out the final version of the project.
In conclusion, the author mentions that anyone who wants to see the finalized effect can find a link to the code in the description. The video has already garnered 682,312 views and 50,537 likes, showcasing an increasing interest in his techniques. It’s evident that his fan base is growing at an impressive rate, which is unsurprising considering the quality of the material he presents and the ideas he implements in his projects.
Toggle timeline summary
-
Introduction to recreating an effect by deconstructing it.
-
Adding a mouse move listener to track mouse position.
-
Creating a small white dot that follows the mouse.
-
Implementing a delay to remove the dots after appearing.
-
Building an animated star effect based on mouse movements.
-
Assigning random colors to the stars for visual diversity.
-
Animating stars to move downward and fade out.
-
Addressing the issue of stars reappearing after animation.
-
Adjusting the animation to create a customizable star trail.
-
Introducing multiple animations for variety among stars.
-
Implementing a distance-based throttle to limit star creation.
-
Calculating distance between mouse movements to manage star counts.
-
Using box shadows to create a glowing effect on dots.
-
Shortening fade-out duration for glowing dots.
-
Encouraging viewers to check the finalized version of the effect.
Transcription
Whenever I see an effect like this one that I want to try to recreate, the first thing I might do is strip away the noise. Mentally, I try to deconstruct everything I see going on to get a quick idea of what I'm up against. Not a perfect understanding, but one that's just enough to lead me to a good starting point. In this particular case, I know I need to reference the position of the mouse, so I'm going to add a mouse move listener. Each time the mouse moves, I want to put something on the screen. At this point, it doesn't matter what, so I'm going to make a little white dot that's 1 pixel wide and 1 pixel tall. It's a dot because I called it a dot when I created it, and it knows where to be because the mouse move listener told me exactly where I should append it to the document body. Now, I don't want the dots hanging around forever, though, so next I'll need to remove them. Well, not immediately, but after a short delay. Amazingly enough, less than 1 minute in, we've already created the base structure for this entire effect. What's happening in the final version is fundamentally the same thing. It's just a matter of slowly and iteratively building our way there. For instance, next I want to make each dot a star. I'm too lazy to find a 4 point star, but that's okay, a 5.1 will do just fine. Each star should probably be a random color. So let me just pick out a few here, it doesn't really matter which ones I choose. I'll put them in a list, make a function to randomly select one, and then apply it to the star. Okay, they're looking better, but they still don't do anything, so I want to see what it looks like if we animate the stars downward a little ways, and maybe make them fade out as well. Alright, we're making some progress, but I'm noticing we have a bit of an issue. The default behavior after the animation completes is to reset back to its initial state, which means we get a bunch of stars randomly reappearing. Now if I hadn't seen this issue before, I may have tried something like shaving a few milliseconds off the timeout to try to remove the star before that happens. But since I already know a better solution, I'm going to opt to use this, uh, extremely intuitive CSS property to tell them just don't reset at all. Alright, more or less just going to tweak this animation to mimic the original, so reduce the scale, add some rotation, so on and so forth, which actually gives us a pretty decent looking trail of stars. But I'm realizing it doesn't make sense for all of the stars to have the exact same animation. I wonder what it would look like if we created a few different ones, and then randomly applied one kind of like we did with the colors. Yeah, that's a big improvement, but I'm going to throw the original up here again to make the next issue a bit more obvious. We've got too many stars. I'm wondering how they throttled theirs. Could be a distance-based throttle, could be based on a certain length of time. Why don't we start with distance and see where that gets us? The very first time a mouse move event is registered, a star will be added. If we store that position, we could then compare it to where the mouse currently is to say that until we've moved a certain distance, don't create a new star. That would, of course, require knowing how to calculate the distance between two points. Fortunately for me, I was able to recall entirely from memory the appropriate formula. Alright, I'm calling that good. Let's take a closer look at this glowy thing. I'm thinking we need to take a step outside of our distance throttle for a moment and once again append a little dot to the screen. Now, I can think of a few different ways to make these dots glow, but I think the easiest would be to just use a box shadow and then tweak the size and blur of that shadow until our glow is appropriately glowy. Oh, and I suppose we need to remove our glow, but 1500 milliseconds seems too long, so we can shorten that up a bit. If you want to see the finalized version, definitely check out my code bin linked below. Otherwise, I think I'm gonna go take a nap now.