Added New "Cursor-Trail Effect" to The Website

[MastanSayyad]

Hey @Akshatchaube01 issue closes #347

I have created and added a New "Cursor-Trail Effect" to The Website as the previous one was not working properly and was lagging so much.

Changes I made:

• Removed in-built react-animated-cursor and created cursor trail effect using HTML CSS and JS in React
• The trail effect in the trail.js file uses a radial gradient background for the circle elements.
• The gradient are from #00eaff and #0378ff, creating a visually appealing effect.
• The CSS and HTML files have been updated to support this change in index.html
• The Trail effect smoothly synchronizes with the cursor movement.
  • The mousemove event listener adjusts for the vertical scroll position using window.scrollY.
  • The circles' positions are updated in the animateCircles function, ensuring they follow the cursor with a trailing effect.
• It works fast and smoothly across all pages.

Screen Record

https://github.com/Akshatchaube01/TimeWarp/assets/101971980/32110b55-5d6e-4e52-a6a7-8c9179368c91

Please take a look and review it,

If possible please Increase the LEVEL Label as per the changed functionalities, Thank You!!

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
time-warp	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 7, 2024 6:42am

[Akshatchaube01]

It doesn't seem to work in the preview

[MastanSayyad]

@Akshatchaube01 It is working fine, Try merging it, if it didn't work in deployment then revert it back I'll make the changes!

https://github.com/Akshatchaube01/TimeWarp/assets/101971980/415486ae-6163-4d61-92fe-0bb14ffcf222

[Akshatchaube01]

Okay, pull the recent changes and then I'll merge @MastanSayyad

[MastanSayyad]

@Akshatchaube01 done!

[MastanSayyad]

@Akshatchaube01 yeah its working but not synchronized with the cursor, I'll make the changes right away!!

[MastanSayyad]

The issue we're experiencing is likely due to the way we update the position of the circles in relation to the mouse coordinates. To ensure the circles follow the cursor correctly, I need to adjust the logic in animateCircles function. @Akshatchaube01