Rework the mouse cursor's trail

KyojuHashira / web3foreteller-magicalstars

Random trail effect behind the mouse cursor, dotting the space with stars of random sizes, colors and opacity.

MIT License

2 stars 0 forks source link

Rework the mouse cursor's trail #2

Open tekken2028 opened 1 year ago

tekken2028 commented 1 year ago

The idea of the project is not bad, but your project needs a polished, beautiful site to evoke the atmosphere of magic. I noticed that the purple trail from the mouse cursor in the area of the round widget looks lousy. You need to rework or remove it.

KyojuHashira commented 1 year ago

Okay, I'll see what I can do. Maybe I'll try to use such monsters as the GSAP library or something similar. Expect results within a day

KyojuHashira commented 1 year ago

Fully reworked the animation. Now it doesn't look so shameful :) The mouse cursor leaves a trace not from simple identical circles, but from a random size of stars. 1% of random stars are brighter than the rest, and another 15% of random ones give off a slight glow of purple-blue. In the coming days I will add a couple of final minor improvements

KyojuHashira commented 1 year ago

Completed. Features used:

Random colors for each generated particle (star).
Random sizes assigned to each particle (star).
Random visibility of each particle (star).
A slight increase in brightness for some elements (well-defined stars).
15% chance of a subtle bluish glow when generating each star.
Random positioning for each generated star within a given area.

JS code and CSS styles are posted here: https://github.com/KyojuHashira/traileffect

P. S. if there are suggestions for improvement, welcome! :)

tekken2028 commented 1 year ago

Much better now, but my GPU load is almost 60% while drawing and effect has lags. Also, if I zoom in to 200-250%, I can see the stars clearly. However, at the default zoom level, it's something unrecognizable, imho

KyojuHashira commented 1 year ago

Handling the challenge

KyojuHashira commented 1 year ago

Partially completed. Now, drawing loads my GTX 1650 only for 1-3%, whereas before, it was 30-35%. Changes made:

Implemented some limitations to optimize the draw method.
Increased the size of every star; now they are essentially bigger, ranging randomly from 7px to 15px.
Added a rare gold star with a 0.5% chance of appearing.

However, fade-out is still GPU intensive. I'll optimize it a bit later

tekken2028 commented 1 year ago

Good, doesn't seem to be lagging now. It will be great to use generated stars as an additional source for randomized results.

KyojuHashira commented 1 year ago

Good, doesn't seem to be lagging now. It will be great to use generated stars as an additional source for randomized results.

Sounds like a great idea! Will definitely implement it in the new version.