Introducing Magic UI Pro - 50+ blocks and templates to build beautiful landing pages in minutes.

Command Palette

Search for a command to run...

Docs
Smooth Cursor

Smooth Cursor

A customizable, physics-based smooth cursor animation component for React applications.

Tap anywhere to see the cursor

Features

  • 🎯 Smooth physics-based cursor animations
  • 🔄 Rotation effects based on movement direction
  • ⚡ Performance optimized with RAF
  • 🎨 Fully customizable cursor design
  • 📦 Lightweight and easy to implement

Installation

Usage

import { SmoothCursor } from "@/components/ui/smooth-cursor";
<SmoothCursor />

Props

PropTypeDefaultDescription
cursorJSX.Element<DefaultCursorSVG />Custom cursor component to replace the default cursor
springConfigSpringConfigSee belowConfiguration object for the spring animation behavior

SpringConfig Type

interface SpringConfig {
  damping: number; // Controls how quickly the animation settles
  stiffness: number; // Controls the spring stiffness
  mass: number; // Controls the virtual mass of the animated object
  restDelta: number; // Controls the threshold at which animation is considered complete
}

Default Spring Configuration

const defaultSpringConfig = {
  damping: 45,
  stiffness: 400,
  mass: 1,
  restDelta: 0.001,
};

Browser Support

Compatible with all modern browsers that support:

  • requestAnimationFrame
  • CSS transforms
  • Pointer events

Accessibility

When using this component, consider that:

  • Users navigating via keyboard will not see the custom cursor
  • You may want to provide alternative visual cues for interactive elements
  • Some users may have motion sensitivity, so consider providing a way to disable the animation

Credits

  • Credit to @Code_Parth for the original concept and implementation