Cursor & Interaction Effects

Invert Cursor

영역 안에서 배경을 반전시키는 혼합 모드 커서 효과입니다.

Preview

cursor effect

Invert

move to invert the surface

Installation

bash

Copied

1pnpm dlx shadcn@latest add https://ryong.dev/r/mouse-invert-cursor.json

bash

Copied

1npx shadcn@latest add https://ryong.dev/r/mouse-invert-cursor.json

bash

Copied

1yarn dlx shadcn@latest add https://ryong.dev/r/mouse-invert-cursor.json

bash

Copied

1bunx shadcn@latest add https://ryong.dev/r/mouse-invert-cursor.json

Code

typescript

Copied

1import { MouseInvertCursor } from "@/components/mouse-invert-cursor"23export default function Example() {4  return (5    <MouseInvertCursor size={50} smoothness={0.08}>6      <div className="min-h-64">Move inside</div>7    </MouseInvertCursor>8  )9}

Props

Prop	Type	Default	Description
children	React.ReactNode	-	Content rendered inside the component.
className	string	-	Additional classes merged onto the component.
size	number	50	Invert cursor diameter in pixels.
color	string	"#ffffff"	Blend color used by the cursor circle.
smoothness	number	0.08	Lerp factor copied from the playground default.
hideDefault	boolean	true	Whether to hide the native cursor inside the component.
disabled	boolean	false	Whether to disable the cursor effect.

Reference

mouse-animations playground