Cursor & Interaction Effects

Invert Cursor

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

Preview

desktop only

Invert Cursor

desktop pointer preview

Desktop preview

Installation

bash
Copied
1pnpm dlx shadcn@latest add https://ryong-blog.vercel.app/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

children

Type
React.ReactNode
Default
-
Description
Content rendered inside the component.

className

Type
string
Default
-
Description
Additional classes merged onto the component.

size

Type
number
Default
50
Description
Invert cursor diameter in pixels.

color

Type
string
Default
"#ffffff"
Description
Blend color used by the cursor circle.

smoothness

Type
number
Default
0.08
Description
Lerp factor copied from the playground default.

hideDefault

Type
boolean
Default
true
Description
Whether to hide the native cursor inside the component.

disabled

Type
boolean
Default
false
Description
Whether to disable the cursor effect.

Reference

mouse-animations playground