Particles Persist Indefinitely in FairyDust Cursor Component

[thesohailjafri]

Description
The particles generated by the FairyDust Cursor component do not disappear after a certain time or distance. This leads to an accumulation of particles, which remain on the screen until the page is reloaded, causing clutter and potential performance degradation.

Steps to Reproduce

1. Visit FairyDust Cursor Component Demo.
2. Move the cursor around the page to generate particles.
3. Observe that the particles persist indefinitely instead of disappearing after a set time or distance.

Expected Behavior
The particles should disappear:

• After a predefined duration (e.g., 1–2 seconds).
• OR after moving a certain distance from their origin.

Screenshots
Here’s an example of the issue:

Environment

Browser: Chrome
OS: Windows 10
Device: Desktop

Proposed Solution

Implement a cleanup mechanism to remove particles:

• Timeout-based Removal: Use setTimeout to remove particles from the DOM after a few seconds.
• CSS Animation: Use the animation end event to trigger particle removal after their animation finishes.
• Distance-based Removal: Track the particle's position relative to its origin, and remove it after exceeding a threshold distance.

Additional Context
This issue causes visual clutter and could lead to performance issues, especially on pages with heavy user interaction. A cleanup mechanism would resolve this efficiently.

[Nityom]

Hii, I have solved this issue , please assign me this issue , i want to contribute in this

[thesohailjafri]

@Nityom ask the owner of the repo @naymurdev

[Nityom]

@naymurdev , I have solved this issue, please assign this issue to me as I will be able to make PR for this issue.

[naymurdev]

@Nityom I love this effect, but it seems to have a significant issue when interacting with other sections. Could you add a prop to switch between both effects, such as "with star" or "star with grass"? Also, please set the z-index to either [1000] or [9999]. This might resolve the issue of interference with other sections.

[Vavaste]

@naymurdev i solved some Demo bugs in this pr #19 , included this one that is still existing