Add interactive cursor trail effect to enhance UI/UX#169
Open
Adithyakp86 wants to merge 1 commit intomugenkyou:mainfrom
Open
Add interactive cursor trail effect to enhance UI/UX#169Adithyakp86 wants to merge 1 commit intomugenkyou:mainfrom
Adithyakp86 wants to merge 1 commit intomugenkyou:mainfrom
Conversation
|
Thank you for contributing to College Daddy. Your pull request has been received and is currently under review. Before final approval, please ensure that:
We appreciate your effort in improving the project. Your contribution helps us build a better experience for students. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
#168
✅ Interactive Cursor Trail Effect - Implementation Complete
Features Added:
Dynamic Cursor Trail - A smooth, fading particle trail that follows mouse movement
Custom Dual Cursor - An outer ring and inner dot that respond to mouse clicks
Visual Effects - The cursor scales up on clicks for visual feedback
Performance Optimized - Efficient animation loop using requestAnimationFrame
Key Improvements:
Smooth Animation - Uses easing functions for natural movement
Performance Optimized - Reduced particle count (12 particles) and efficient DOM updates
Mobile Disabled - Automatically disabled on touch devices (mobile/tablet)
Accessibility Compliant - Respects user's "prefers-reduced-motion" settings
Non-Interfering - Uses pointer-events: none so it doesn't block clicks or interactions
Theme Compatible - Uses CSS variables to match your existing color scheme
Technical Details:
Added JavaScript implementation in assets/js/pages/index.js
Added CSS styles in assets/css/index.css
Used efficient animation techniques with requestAnimationFrame
Trail particles gradually fade and shrink as they follow the cursor
Click events trigger scaling animations for visual feedback
The effect enhances the visual feedback and overall user experience, giving the site a more modern and polished feel. The cursor trail is lightweight and won't interfere with the website's functionality or accessibility features.You can view the implementation by clicking the preview browser button that appeared in the tool panel. The effect will work on desktop browsers while automatically being disabled on mobile devices and respecting user accessibility preferences.All the requirements from your request have been met:
✅ Fading particles trail
✅ Smooth, performant animation
✅ Disabled on mobile devices
✅ Doesn't interfere with clicks or accessibility
✅ Easy to maintain/adjust in the future