Cursor & Interaction Effects

Click Ripple Cursor

클릭한 지점에서 원형 리플이 퍼지는 커서 인터랙션입니다.

Preview

cursor effect

Ripple

click to expand

Installation

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

Code

typescript
Copied
1import { MouseRippleCursor } from "@/components/mouse-ripple-cursor"23export default function Example() {4  return (5    <MouseRippleCursor color="rgba(96,165,250,0.60)" maxSize={150}>6      <button>Click inside</button>7    </MouseRippleCursor>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.

color

Type
string
Default
"rgba(96,165,250,0.60)"
Description
Ripple fill color from the playground default.

duration

Type
number
Default
600
Description
Ripple animation duration in ms.

maxSize

Type
number
Default
150
Description
Maximum ripple diameter in pixels.

disabled

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

Reference

mouse-animations playground