Dot

Simple custom dot cursor with smooth following animation

$ npx @hritik-sharmaa/repeat-ui add cursor-dot

Live preview

Move the cursor

Customize

Size24px

Color

Smoothness0.15

Hover scale2.5×

Blend

Hide system cursor

import CursorDot from "@/components/repeat-ui/cursor-dot/preview";

<CursorDot />

Run the command
Adds the files and installs any packages they need. Works with npm, pnpm, yarn and bun.
$ npx @hritik-sharmaa/repeat-ui add cursor-dot --variant ts-tailwind

The files are in components/repeat-ui/cursor-dot/.

import CursorDot from "@/components/repeat-ui/cursor-dot/preview";

export default function Page() {
  return <CursorDot />;
}

Prop	Type	Default	Description
`size`	`number`	24	Dot diameter in pixels.
`color`	`string`	"#ffffff"	Dot colour. With blend on, white inverts whatever is underneath.
`smoothness`	`number`	0.15	How quickly the dot catches up, from 0 (never) to 1 (instantly).
`hoverScale`	`number`	2.5	How much the dot grows over links and buttons.
`blend`	`boolean`	true	Use mix-blend-mode: difference, so the dot inverts what it covers.
`hideCursor`	`boolean`	false	Hide the system cursor on the whole page.

Custom cursor with trailing effect and line following cursor