Docs
Supa Elastic Cursor
Supa Elastic Cursor
Displays a Elastic Cursor using gsap.
Elastic Cursor Demo
Installation
Install the following dependencies:
npm install framer-motionCopy 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
| Prop | Type | Default | Description | 
|---|---|---|---|
size | number | 50 | Size of the cursor in pixels | 
borderColor | string | Auto (black/white) | Border color of the cursor | 
borderWidth | number | 2 | Border width of the cursor in pixels | 
borderRadius | number | 50 | Border radius of the cursor when not hovering | 
hoverBorderRadius | number | 10 | Border radius of the cursor when hovering | 
hoverableClass | string | "cursor-can-hover" | Class name to identify hoverable elements | 
showDot | boolean | true | Whether to show the dot in the center | 
zIndex | number | 100 | Z-index of the cursor | 
useInvert | boolean | true | Whether to use backdrop filter invert effect | 
className | string | undefined | Additional 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
- The cursor automatically adapts to dark/light mode unless you specify a 
borderColor - Add the 
cursor-can-hoverclass to any element you want the cursor to interact with 
