Cursor & Interaction Effects

Ring Cursor

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

Preview

cursor effect

Custom Cursor

dot + ring following your cursor

Installation

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

PropTypeDefaultDescription
childrenReact.ReactNode-Content rendered inside the component.
classNamestring-Additional classes merged onto the component.
innerSizenumber6Inner dot size in pixels.
outerSizenumber36Outer ring size in pixels.
innerColorstring"#34d399"Inner dot color from the playground default.
outerColorstring"rgba(52,211,153,0.3)"Outer ring color from the playground default.
smoothnessnumber0.15Ring lerp factor copied from the playground default.
hideDefaultbooleantrueWhether to hide the native cursor inside the component.
disabledbooleanfalseWhether to disable the cursor effect.

Reference

mouse-animations playground