Skip to content

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

Description

@ruhelamahi7-code

Summary

Introduce configurable mouse cursor visual effects for interactive terminal widgets, such as a focus ring, ripple animation, or hover highlight. The feature should provide visual feedback for mouse interactions while remaining lightweight and compatible with the existing animation and widget system.

Problem

TermUI is adding support for mouse interactions (hover, click, scroll), but currently there is no visual feedback that indicates the cursor's position or interaction state inside terminal applications.
Providing optional cursor effects would improve usability, accessibility, and the overall user experience, especially for applications that make extensive use of mouse interactions.

Proposed solution

Implement an optional mouse cursor visual effects system that can render lightweight terminal-friendly effects around the current mouse position.
Possible effects include:
Ripple animation on mouse click.
Focus ring around the hovered position.
Hover highlight for interactive widgets.
Configurable visual styles that developers can enable or disable.
The implementation should integrate with the existing widget rendering pipeline and animation utilities instead of modifying the operating system cursor.

Acceptance criteria

Add optional visual cursor effects that work within terminal applications.
Support at least one configurable effect (e.g., ripple, focus ring, or hover highlight).
Effects should integrate cleanly with the existing widget rendering and animation system.
Feature should not impact applications that do not enable it.
Add unit tests and documentation for the new functionality.

Test plan

Enable the feature in a sample application.
Move and click the mouse over interactive widgets.
Verify that the configured visual effect is rendered correctly.
Confirm that disabling the feature removes all additional rendering.
Run the existing test suite to ensure there are no regressions.

Alternatives considered

Keeping only the default cursor without customization.
Using browser-specific custom cursor images instead of interactive cursor animations.
Providing cursor customization only through application settings instead of a quick-access dropdown.
While these approaches are simpler, they provide less flexibility and a less interactive experience compared to a dedicated cursor selector.

Additional context

A reference UI is attached that demonstrates a clean cursor selection dropdown containing multiple cursor styles such as Default, Glow, Trail, Sparkle, Orbit, and Chess. The implementation can be achieved using React state/context along with CSS animations or lightweight animation libraries while preserving good performance.
The selected cursor preference can be saved in Local Storage so it is automatically restored when the user revisits the application.

Metadata

Metadata

Labels

priority:mediumImportant issue with normal urgencytype:featureFeature work category bonus label

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions