making changes to cursor glide over text #1
Conversation
changing caret cursor behavior and overall making cursor smoother to make typing feel better
There was a problem hiding this comment.
Pull Request Overview
This PR implements a smoother cursor experience for typing by introducing a "caret" cursor mode with glide animations. The changes enable the cursor to smoothly transition between characters instead of jumping abruptly, and disable blinking during active typing to reduce visual distraction.
Key Changes:
- Added caret cursor mode with smooth glide animations and typing-aware blink behavior
- Implemented overlay-based cursor positioning system for precise control
- Enhanced cursor mode synchronization across components with dynamic state management
Reviewed Changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| public/js/cursor.js | Introduced overlay cursor system, typing state tracking, and cursor mode synchronization logic |
| public/css/styles.css | Added CSS custom properties and styles for cursor overlay animations |
| client/src/components/Typing.jsx | Integrated cursor style state management and typing activity detection |
| client/src/components/Typing.css | Added caret-specific styles and animation controls for different cursor modes |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| } | ||
|
|
||
| /** | ||
| * Track whether the user is actively typing to control blink behaviour |
There was a problem hiding this comment.
Corrected spelling of 'behaviour' to 'behavior'.
| * Track whether the user is actively typing to control blink behaviour | |
| * Track whether the user is actively typing to control blink behavior |
|
|
||
| // Cursor-specific duration (caret snappier) | ||
| overlay.style.setProperty('--cursor-glide-duration', useCaret ? '95ms' : '95ms'); | ||
| overlay.style.setProperty('--cursor-glide-duration', useCaret ? '85ms' : '110ms'); |
There was a problem hiding this comment.
Magic numbers '85ms' and '110ms' should be extracted as named constants or CSS custom properties to improve maintainability and ensure consistency with values defined elsewhere (e.g., line 16 in styles.css defines '--cursor-glide-duration: 95ms').
complete migratino of backend database, directory structure, basic things like git ignore, components, and placeholder frontend for db testing
making changes to cursor glide over text
changing caret cursor behavior and overall making cursor smoother to make typing feel better