Cursor & Interaction Effects

Hover Pointer

요소에 호버했을 때 사용자 지정 포인터를 보여주는 컴포넌트입니다.

Preview

cursor effect

Hover Pointer

custom pointer shapes

Animated Pointer

Animated pointer

Colored Pointer

Custom color

Custom Shape

Custom SVG shape

Text Pointer

Custom text

Installation

bash
Copied
1pnpm dlx shadcn@latest add https://ryong.dev/r/pointer.json

Code

typescript
Copied
1import { Pointer } from "@/components/pointer"23export default function Example() {4  return (5    <div className="relative">6      <Pointer />7    </div>8  )9}

Props

PropTypeDefaultDescription
classNamestring-Additional classes merged onto the component.
childrenReact.ReactNode-Content rendered inside the component.
...propsHTMLMotionProps<"div">-Motion props for wrapper.

Reference

Reference Hover Pointer