커서 잔상Cursor ghost

동작What it draws

화살표 사본 5개가 실제 커서를 뒤따라 흐려집니다. 첫 사본이 포인터를 가장 가깝게 따라가고 뒤로 갈수록 느슨해지며 마지막 사본이 가장 흐립니다.Five arrow copies trail behind the real cursor and blur as they fall behind. The first follows the pointer most closely, each later one looser, and the last is the blurriest.

• 시스템 커서는 숨기지 않고 바꾸지도 않습니다.The native cursor is never hidden or replaced.
• 잔상은 페이지 맨 위의 고정 레이어에 있고 pointer-events: none과 aria-hidden입니다. 클릭, 호버, 포커스를 받지 않습니다.The trail lives in one fixed layer on top of the page with pointer-events: none and aria-hidden, so it takes no clicks, hovers or focus.
• 흰 화살표를 difference로 섞어 어두운 화면에서는 밝게, 밝은 화면에서는 어둡게 보입니다.A white arrow blended with difference reads light on a dark screen and dark on a light one.

붙는 조건When it mounts

정밀한 포인터를 hover할 수 있는 환경에서만 붙습니다. 미디어 쿼리는 (hover: hover) and (pointer: fine)이고, 동작 줄이기 설정에서는 붙지 않습니다. 두 조건은 바뀔 때 다시 판단합니다.It mounts only where a fine pointer can hover: the query is (hover: hover) and (pointer: fine), and reduced motion keeps it off. Both are re-checked when they change.

@horon-ai/react를 한 번이라도 import하면 페이지마다 한 번 자동으로 붙습니다. React를 쓰지 않는 페이지는 import "@horon-ai/react/cursor-ghost" 한 줄로 붙입니다. 이 사이트의 BaseLayout이 그 예입니다.Any import of @horon-ai/react mounts it once per page. A page without React mounts it with one line, import "@horon-ai/react/cursor-ghost". This site's BaseLayout is the example.

끄기Turning it off

import보다 먼저 html 요소에 data-horon-cursor="off"를 둡니다. 자동 마운트가 꺼지고, 그 뒤에 옵션을 줘서 붙이려면 mountCursorGhost를 직접 부릅니다.Put data-horon-cursor="off" on the html element before the import. That suppresses the automatic mount; call mountCursorGhost yourself afterwards for custom options.

• 속성 이름은 data-horon-cursor이고 값은 off입니다. 다른 값은 자동 마운트를 막지 않습니다.The attribute is data-horon-cursor and the value is off. Any other value leaves the automatic mount on.

옵션Options

mountCursorGhost(options)는 잔상을 붙이고 떼는 함수를 돌려줍니다. 넘기지 않은 값은 기본값을 씁니다.mountCursorGhost(options) mounts the trail and returns the function that removes it. Omitted keys take their defaults.

• ghosts: 화살표 사본 수. 기본 5.ghosts: number of arrow copies. Default 5.
• size: 화살표 높이(CSS px). 기본 26.size: arrow height in CSS px. Default 26.
• headFollow: 첫 사본이 포인터를 따라가는 비율. 프레임마다 적용되고 기본 0.16입니다.headFollow: how far the first copy moves toward the pointer, applied per frame. Default 0.16.
• smear: 마지막 사본의 흐림 폭(CSS px). 기본 14.smear: blur spread of the last copy in CSS px. Default 14.
• color: 화살표 채움색. 기본 "#FFFFFF"이고 difference로 섞이므로 흰색이 밝은 화면에서 어둡게 보입니다.color: the arrow fill. Default "#FFFFFF", blended with difference, so white reads dark on a light screen.

import { mountCursorGhost } from "@horon-ai/react";

const unmount = mountCursorGhost({ ghosts: 2, size: 20, headFollow: 0.2, smear: 10 });

돌려받은 함수를 부르면 레이어, 리스너, 대기 중인 애니메이션 프레임이 함께 정리됩니다. window, document, matchMedia가 없는 서버 렌더에서는 아무것도 하지 않는 함수를 돌려줍니다.Calling the returned function removes the layer, its listeners and any pending animation frame. On a server render without window, document or matchMedia it returns a no-op.