Vision UI

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:

  1. CursorInner: The core functionality of the custom cursor.
  2. Cursor: A wrapper component that checks if the device is touch-enabled and renders CursorInner 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:

import { Cursor } from "@/components/core/cursor";
 
function App() {
  return (
    <div>
      {/* Your app content */}
      <Cursor />
    </div>
  );
}

API

PropTypeDefault
visibleOnTouch
boolean
false

Last updated on

On this page

Edit on GitHub