Custom Cursor

The CustomCursor overrides standard pointer cursors, binding a custom pointer dot alongside a delayed trailer shape. It actively listens for hovers over interactive elements (a, button, input) to trigger animated active states. Now rewritten without GSAP (using native physics) and featuring 5 unique cursor styles.

Live Preview

Installation

Architecture

• Zero Dependencies: Previously relied on GSAP. Now entirely driven by native requestAnimationFrame and linear interpolation (Lerp). This cuts bundle size and guarantees 60/120fps sync with the display.
• Mix Blend Mode: Uses mix-blend-difference to ensure the cursor remains visible regardless of whether the background is light or dark.
• Auto-Hide: Listens to mouseleave on the document root to hide the cursor when the user leaves the browser window.

Props

Usage Tips

When using a custom cursor, you generally want to hide the native OS cursor. Add the cursor-none class to your main container or <body> tag. Ensure interactive elements (buttons, links) also have cursor-none if you want the custom cursor to persist over them.

Variants

| Variant | Idle State | Hover State | |---|---|---| | dot | Solid center dot + trailing outline | Outline scales up 2.5x and fills | | ring | Clean hollow ring (no center dot) | Scales up and fills | | glow | Emits large ambient shadow/halo | Shadow intensifies and solidifies | | morph | Standard circle | Border radius morphs into rounded square | | magnet | Standard circle | Massively expands and becomes a dashed border |

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { CursorFollower } from "@/components/creative/custom-cursor";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { CursorFollower } from "@/components/creative/custom-cursor";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <CursorFollower
      />
    </div>
  );
}