Cursor
Animated cursor for Vision UI
Mouse only
The Cursor component is currently only supported on non-touch devices.
The Cursor Component is a custom, interactive cursor implementation using React and Framer Motion. It provides a dynamic cursor that responds to user interactions and changes appearance based on the elements it hovers over.
With ButtonGroup
Component Structure
The component is structured into two main parts:
CursorInner
: The core functionality of the custom cursor.Cursor
: A wrapper component that checks if the device is touch-enabled and rendersCursorInner
accordingly.
The Cursor component will automatically handle hiding the default cursor and showing the custom cursor on non-touch devices.
Performance Optimizations
- Use of Framer Motion's
frame
API to batch DOM reads, updates, and renders, preventing layout thrashing. - Efficient event handling with checks to prevent unnecessary updates.
- Use of springs and motion values for smooth, hardware-accelerated animations.
Usage
To use the Cursor component in your React application:
API
Prop | Type | Default |
---|---|---|
visibleOnTouch | boolean | false |
Last updated on