Animated Cursor

General

An animated cursor component

APIs

AnimatedCursor.Props

AttributeDescriptionTypeAccepted valuesDefault
clickablesList of elements to make clickable with the animated cursorstring[]-Default clickables
childrenContent to display within the animated cursorReactNode--
colorColor of the cursorstring-Default color
innerScaleScale factor for the inner cursornumber-0.6
innerSizeSize of the inner cursornumber-8
outerAlphaAlpha (opacity) of the outer cursornumber-0.4
outerScaleScale factor for the outer cursornumber-6
outerSizeSize of the outer cursornumber-8
showSystemCursorWhether to show the system cursor alongside the animated cursorboolean-true
trailingSpeedSpeed of trailing animationnumber-8

Example Usage

<AnimatedCursor
  clickables={['a', 'button']}
  color="#FF5733"
  innerSize={10}
  outerSize={20}
  showSystemCursor={false}
>
  {/* Your content */}
</AnimatedCursor>