Particles Persist Indefinitely in FairyDust Cursor Component #7
Description
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
- Visit FairyDust Cursor Component Demo.
- Move the cursor around the page to generate particles.
- 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.