Skip to content

feat(frontend): add custom cursor selector and particle effects - #2462

Open
ruhelamahi7-code wants to merge 3 commits into
utksh1:mainfrom
ruhelamahi7-code:feat/cursor-customization
Open

feat(frontend): add custom cursor selector and particle effects#2462
ruhelamahi7-code wants to merge 3 commits into
utksh1:mainfrom
ruhelamahi7-code:feat/cursor-customization

Conversation

@ruhelamahi7-code

Copy link
Copy Markdown

Description

This PR introduces a custom interactive cursor system and theme selector for the SecuScan frontend. It allows users to personalize their workspace experience by switching between multiple cursor particle styles directly from the top navigation bar.

Key updates include:

  • Created CursorContext.tsx to globally manage active cursor theme states across the application.
  • Added CustomCursor.tsx to handle custom cursor rendering, trailing animations, and particle effects.
  • Added CursorSelector.tsx dropdown component integrated into AppShell.tsx for real-time theme switching (Default, Glow, Trail, Sparkle, Orbit, Chess).
  • Updated App.tsx and AppShell.tsx to wrap the dashboard workspace within the CursorProvider.

Related Issues

Closes #2443

Type of Change

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Documentation update

How Has This Been Tested?

  1. Local Setup Verification: Executed manual setup using ./setup.sh and ./start.sh with Node.js 20+ and Python 3.11+.
  2. Interactive UI Testing: Verified smooth rendering of custom cursor particle trail effects on http://localhost:5173. Tested dropdown theme switching between all available presets (Glow, Trail, Sparkle, etc.).
  3. Live Dashboard Integration: Executed a local ICMP Ping scan target (127.0.0.1) via the Toolkit page to verify cursor behavior and performance during active task feeds and dashboard metrics monitoring.

Screenshots

1. Tactical Catalog / Toolkit (Tool Selection)

image Screenshot 2026-08-04 at 11 55 26 PM Screenshot 2026-08-04 at 11 55 33 PM Screenshot 2026-08-04 at 11 55 41 PM Screenshot 2026-08-04 at 11 55 48 PM Screenshot 2026-08-04 at 11 55 55 PM

3. Live Dashboard with Theme Selector (Trail Active)

Screenshot 2026-08-05 at 12 10 21 AM

Checklist

  • My code follows the code style of this project.
  • I have performed a self-review of my own code.
  • I have commented my code, particularly in hard-to-understand areas.
  • I have made corresponding changes to the documentation.
  • My changes generate no new warnings.

@ruhelamahi7-code

Copy link
Copy Markdown
Author

Hi @utksh1 ,

This feature took a significant amount of effort and complex debugging to get right, but everything is now fully tested and ready to go. The implementation is clean, works seamlessly, and is verified with local test data as captured in the screenshots.

Requesting your review, merge, and the assignment of appropriate feature/enhancement labels. Thank you!

@ruhelamahi7-code

Copy link
Copy Markdown
Author

Hi @utksh1,

All CI checks and tests have successfully passed (33/33 checks successful)!

Implementing this custom cursor and particle effects feature took a significant amount of dedication, iterative testing, and meticulous debugging—from configuring the context providers to resolving upstream audit blocks and test hook fallbacks.

The PR is fully ready, tested, and polished. Could you please review, merge, and assign appropriate feature/enhancement labels to help recognize this contribution? Thank you!

@ruhelamahi7-code

Copy link
Copy Markdown
Author

hey @utksh1 ,

please check it out.
The PR is fully ready, tested, and polished. Could you please review, merge, and assign appropriate feature/enhancement labels to help recognize this contribution? Thank you!

@ruhelamahi7-code

Copy link
Copy Markdown
Author

@utksh1 ,
kindly check it out.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[FEAT] Add Configurable Mouse Cursor Visual Effects for Interactive Widgets

1 participant