Docs
Supa Elastic Cursor

Supa Elastic Cursor

Displays a Elastic Cursor using gsap.

Elastic Cursor Demo

Hover Div
Hover LinkHover Span

Installation

Install the following dependencies:

npm install framer-motion

Copy and paste the cn util code into your project.

import { ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"
 
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}
 

Copy and paste the @/hooks/use-media-query code into your project.

import * as React from "react"
 
export function useMediaQuery(query: string) {
  const [value, setValue] = React.useState(false)
 
  React.useEffect(() => {
    function onChange(event: MediaQueryListEvent) {
      setValue(event.matches)
    }
 
    const result = matchMedia(query)
    result.addEventListener("change", onChange)
    setValue(result.matches)
 
    return () => result.removeEventListener("change", onChange)
  }, [query])
 
  return value
}
 

Copy and paste the Supa Elastic Cursor code into your project.

API Reference

Props

PropTypeDefaultDescription
sizenumber50Size of the cursor in pixels
borderColorstringAuto (black/white)Border color of the cursor
borderWidthnumber2Border width of the cursor in pixels
borderRadiusnumber50Border radius of the cursor when not hovering
hoverBorderRadiusnumber10Border radius of the cursor when hovering
hoverableClassstring"cursor-can-hover"Class name to identify hoverable elements
showDotbooleantrueWhether to show the dot in the center
zIndexnumber100Z-index of the cursor
useInvertbooleantrueWhether to use backdrop filter invert effect
classNamestringundefinedAdditional class names for the cursor

Features

  • ✨ Smooth elastic animations using GSAP
  • 🖱️ Follows mouse movements with natural physics
  • 💫 Changes shape when hovering over elements with the specified class
  • 📱 Responsive (automatically disables on mobile)
  • 🎨 Customizable appearance (size, color, border, etc.)
  • 🌓 Automatic dark/light mode detection

Implementation Notes

  1. The cursor automatically adapts to dark/light mode unless you specify a borderColor
  2. Add the cursor-can-hover class to any element you want the cursor to interact with