Docs
Supa Elastic Cursor
Supa Elastic Cursor
Displays a Elastic Cursor using gsap.
Elastic Cursor Demo
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
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-hover
class to any element you want the cursor to interact with