Cursor & Interaction Effects

Ring Cursor

작은 점과 늦게 따라오는 링으로 커서를 대체하는 영역형 효과입니다.

Preview

desktop only

Ring Cursor

desktop pointer preview

Desktop preview

Installation

bash
Copied
1pnpm dlx shadcn@latest add https://ryong-blog.vercel.app/r/mouse-custom-cursor.json

Code

typescript
Copied
1import { MouseCustomCursor } from "@/components/mouse-custom-cursor"23export default function Example() {4  return (5    <MouseCustomCursor innerColor="#34d399" outerColor="rgba(52,211,153,0.3)">6      <div className="min-h-64">Move inside</div>7    </MouseCustomCursor>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.

innerSize

Type
number
Default
6
Description
Inner dot size in pixels.

outerSize

Type
number
Default
36
Description
Outer ring size in pixels.

innerColor

Type
string
Default
"#34d399"
Description
Inner dot color from the playground default.

outerColor

Type
string
Default
"rgba(52,211,153,0.3)"
Description
Outer ring color from the playground default.

smoothness

Type
number
Default
0.15
Description
Ring 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