Cursor & Interaction Effects

Click Ripple Cursor

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

Preview

cursor effect

Ripple

click to expand

Installation

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

PropTypeDefaultDescription
childrenReact.ReactNode-Content rendered inside the component.
classNamestring-Additional classes merged onto the component.
colorstring"rgba(96,165,250,0.60)"Ripple fill color from the playground default.
durationnumber600Ripple animation duration in ms.
maxSizenumber150Maximum ripple diameter in pixels.
disabledbooleanfalseWhether to disable the cursor effect.

Reference

mouse-animations playground