COMPONENTCustom Cursor
C/210//Interaction
Custom Cursor
Replace the system cursor with a smooth blend-mode blob that grows over links and buttons.
cursorinteractionblend-modepointer
By Kaiborg · Verified authorPay once · Own forever
D/01//Description
Drop this once on the top layer of your page and it replaces the native cursor with a buttery, spring-tracked dot that scales up over any link, button, or element you tag with data-cursor. Uses mix-blend-mode for automatic contrast on light or dark sections — no per-section config. The hallmark of a site that feels designed, not assembled. One of our favorites.
Props: size, hover scale, color. No dependencies beyond framer-motion (ships with Framer).
P/02//Source preview · locked
import { useEffect, useState } from "react"
import { motion, useMotionValue, useSpring } from "framer-motion"
/**
* CustomCursor — drop once on the top layer of your page (Fixed position).
* Replaces the native cursor with a spring-tracked blob that grows over links,
// … purchase to unlock the full sourceSource locked
