커서 이동과 클릭Cursor Move & Click

Cursor Move & Click

커서 이동과 클릭

다른 이름Also known as · 클릭 피드백 · Cursor click · 커서 클릭 · Cursor Click · physics-press-reaction · cursor-click-ripple · Press release · 누름과 복구

315

도판Fig. 315. 커서 이동과 클릭 · Cursor Move & Click · power2.inOut

재생 속도Speed

커서가 곡선으로 목표 단추에 도착하고 눌림과 파문으로 클릭을 알리는 동작An animation in which a cursor follows a curved path to a target button and signals a click with a pressed state and ripple.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

포인터의 목적지와 입력이 수락된 순간Shows the pointer destination and the moment input is accepted.

언제 쓰나Use whenUSE WHEN

질문을 보낸 뒤 보내기 단추가 0.12초 눌리고 원형 파문이 퍼진다
포인터의 목적지와 입력이 수락된 순간을 보여 줄 때

When the Send button depresses for 0.12 seconds and emits a circular ripple after a question is sent
When showing the pointer destination and the moment input is accepted

과용 주의AvoidAVOID

커서가 단추 밖에서 클릭하거나 파문이 다른 영역까지 강조한다
동작 종료 뒤 최소 0.5초 읽기 시간을 둔다

분류TagsTAGS

UI 시연UI Demo 설명Explain 피드백Feedback 제품 시연Product demo 설명 영상Explainer video 웹 UIWeb UI 난이도 중급Intermediategsap

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

질문을 보낸 뒤 보내기 단추가 0.12초 눌리고 원형 파문이 퍼진다

과용 · 나쁜 사례OVERUSE

커서가 단추 밖에서 클릭하거나 파문이 다른 영역까지 강조한다

파라미터Parameters

기본값은 클립에 쓴 값Defaults are the values used in the clip

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
이동 지속	1.10s	0.7~1.4s	곡선 경로가 읽히는 시간
이동 거리	740px	400~850px	도착점은 단추 안쪽
곡선 높이	150px	60~180px	sin 곡선으로 중간을 들어 올린다
눌림	0.94 / 0.12s	0.90~0.97 / 0.08~0.18s	scale로 단추 피드백
파문	0.65s / 2.4배	0.4~0.8s / 1.8~2.8배	확대하며 사라진다

GSAP

const tl = Motion.timeline();
const p={t:0};
tl.to(p,{t:1,duration:1.1,ease:'power2.inOut',onUpdate:()=>{const t=p.t;gsap.set('.pointer',{x:740*t,y:-78*t-150*Math.sin(Math.PI*t)});}},.3);
tl.to('.send',{scale:.94,duration:.12,ease:'power2.in'},1.4).to('.send',{scale:1,duration:.22,ease:'power2.out'},1.52);
tl.fromTo('.ripple',{scale:.45,opacity:.85},{scale:2.4,opacity:0,duration:.65,ease:'power2.out'},1.43);
tl.to('.lead',{opacity:1,duration:.2},2.12);

라이브 소스 열기Open live source 소스 코드Source README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상> 커서를 0.3초부터 1.1초 동안 power2.inOut으로 x 740px, y -78px 옮겨줘. y에 -150*sin(π*t)를 더해 곡선을 만들고 1.4초에 보내기 단추를 0.12초 동안 scale 0.94로 누른 뒤 0.22초에 복원해. 주홍 파문은 1.43초부터 0.65초 동안 scale 0.45에서 2.4로 키우며 지우고 2.32초부터 정지해.

Move the <target> cursor by x 740px, y -78px over 1.1 seconds starting at 0.3 seconds, using power2.inOut. Add -150*sin(π*t) to y to create a curved path. At 1.4 seconds, press the Send button to scale 0.94 over 0.12 seconds, then restore it over 0.22 seconds. Starting at 1.43 seconds, enlarge a vermilion ripple from scale 0.45 to 2.4 while fading it out over 0.65 seconds. Hold still from 2.32 seconds.

Codex

<파일>의 보내기 시연에 커서 곡선 이동과 클릭 피드백을 적용해. 하나의 paused GSAP 타임라인과 t 프록시로 x=740*t, y=-78*t-150*sin(π*t)를 0.3~1.4초에 계산하고 단추 scale 0.94 눌림을 추가해. 0.73초, 1.45초, 1.73초, 2.9초를 캡처해 경로, 눌림, 주홍 파문, 완성 홀드를 확인해.

Apply curved cursor motion and click feedback to the send demonstration in <file>. Use a single paused GSAP timeline and a t proxy to calculate x=740*t, y=-78*t-150*sin(π*t) from 0.3 to 1.4 seconds, and add the button press at scale 0.94. Capture at 0.73, 1.45, 1.73, and 2.9 seconds to check the path, pressed state, vermilion ripple, and final hold.