Cursor

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

Move your mouse over the div

Installation

<CursorProvider>
  <Cursor>
    <svg>{...}</svg>
  </Cursor>
  <CursorFollow>
    <div>Follow me</div>
  </CursorFollow>
</CursorProvider>

You can use only the CursorFollow (like the example below) component or the Cursor component.

Move your mouse over the div

Prop	Type	Default
`children`	`React.ReactNode`	-

Prop	Type	Default
`children`	`React.ReactNode`	-

Prop	Type	Default
`transition?`	`SpringOptions`	`{ stiffness: 500, damping: 50, bounce: 0 }`
`align?`	`'top' \| 'top-left' \| 'top-right' \| 'bottom' \| 'bottom-left' \| 'bottom-right' \| 'left' \| 'right' \| 'center'`	`bottom-right`
`sideOffset?`	`number`	`15`
`children`	`React.ReactNode`	-

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