Animate UI

Cursor

An animated cursor component that allows you to customize both the cursor and cursor follow elements with smooth animations.

Made by imskyleen
Edit on GitHub
Open in

Move your mouse over the div

Installation

Usage

<CursorProvider>
  <Cursor />
  <CursorFollow>Designer</CursorFollow>
</CursorProvider>

API Reference

CursorProvider

Animate UI API Reference - CursorProvider Primitive
PropTypeDefault
children
React.ReactNode
-
global?
boolean
false
...props?
HTMLMotionProps<"div">
-

Cursor

Animate UI API Reference - Cursor Primitive
PropTypeDefault
asChild?
boolean
false
...props?
HTMLMotionProps<"div">
-

CursorFollow

Animate UI API Reference - CursorFollow Primitive
PropTypeDefault
asChild?
boolean
false
side?
CursorFollowSide
bottom
sideOffset?
number
15
align?
CursorFollowAlign
end
alignOffset?
number
5
transition?
SpringOptions
{ stiffness: 500, damping: 50, bounce: 0 }
...props?
HTMLMotionProps<"div">
-

Built by Skyleen. The source code is available on GitHub.