Custom Cursor Implementation

[olucasandrade]

Task: Custom Cursor Implementation

Description

Implement custom cursor design using pure CSS for performance. Different cursor states for various contexts (pointer, text, loading, drag). Option to disable in settings.

Acceptance Criteria

• Custom cursor CSS created with unique developer aesthetic
• Different cursor states implemented:
  • Default (pointer)
  • Text selection
  • Loading/waiting
  • Dragging
  • Hovering interactive elements
• Smooth cursor transitions
• Toggle to disable custom cursor in settings
• Cursor preference saved in localStorage
• No performance impact (pure CSS solution)
• Works across all interactive elements
• Cursor design aligns with theme colors

Technical Details

Implementation Approach

1. Create src/styles/cursor.css with custom cursor definitions:

   .custom-cursor {
     cursor: url('/cursors/default.svg'), auto;
   }
   .custom-cursor-text {
     cursor: url('/cursors/text.svg'), text;
   }
   /* etc. */

2. Create cursor SVG assets in public/cursors/:
   • default.svg - Custom pointer
   • text.svg - Text selection cursor
   • loading.svg - Loading state
   • drag.svg - Dragging state
3. Create useCursor hook for managing cursor state
4. Add cursor toggle to settings
5. Apply cursor class to document body conditionally

Key Considerations

• Keep SVG files small (<2KB each)
• Use CSS variables for cursor colors (theme-aware)
• Fallback to system cursor on old browsers
• Test cursor visibility on different backgrounds
• Cursor should be 16x16 or 24x24 pixels (standard size)
• No JavaScript-based cursor tracking (performance)

Files Affected

• src/styles/cursor.css (new)
• public/cursors/*.svg (new assets)
• src/hooks/useCursor.ts (new)
• src/app/globals.css (import cursor styles)
• src/app/[locale]/layout.tsx (apply cursor class)
• Settings component (add cursor toggle - create if needed)

Dependencies

• Task 001 (Theme System) - cursor colors from theme
• Custom cursor SVG design assets
• No external library dependencies

Effort Estimate

• Size: S (Small)
• Hours: 6-8 hours
• Parallel: true (can run parallel with other tasks)

Definition of Done

• Custom cursor implemented and working
• All cursor states functional
• Cursor toggle in settings
• Cursor preference persists
• SVG assets optimized
• No performance impact verified
• Documentation added
• Code reviewed
• Merged to main branch