프롬프트
[적용할 곳]을 원하는 위치로 바꿔 AI 에이전트에 붙여 넣으세요. 프롬프트에 모션 이름이 들어 있어, 다음부터는 이름만으로도 요청할 수 있습니다.
[적용할 곳]에 어댑티브 캐럿(Adaptive Caret) 효과를 넣어 줘. 어댑티브 캐럿 크기(adaptive caret size)라고도 불러.
텍스트 캐럿이 포인터에 가장 가까운 글자 앞으로 옮겨 가서 그 글자 높이에 맞게 빠르게 늘어나거나 줄어들게 해 줘. 부드럽고 경쾌하게 크기가 바뀌고, 튕김 없이.
텍스트 자체는 밀리지 않게 하고, 캐럿이 포인터를 따라가듯 키보드 이동도 똑같이 따라가게 해 줘.비슷한 모션
ABC DEFG
Typewriter (타자기 효과)
다른 이름 Typing Animation, Typewriter Effect, Typing Text
글자가 타이핑하듯 하나씩 나타나고, 보통 그 뒤에 깜빡이는 커서가 따라옵니다.
쓰는 곳
히어로 헤드라인, 태그라인
[적용할 곳]에 타자기 효과(Typewriter)를 넣어 줘. 타이핑 애니메이션(typing animation), 타이핑 텍스트(typing text)라고도 불러.
글자가 일정한 타이핑 속도로 하나씩 나타나고, 마지막으로 친 글자 바로 뒤에 커서를 두어 타이핑이 끝나면 몇 번 깜빡이게 해 줘.
반복하지 말고 한 번만 재생하고, 스크린 리더는 전체 글을 바로 읽을 수 있게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 전체 글을 바로 보여 줘.B
포인터를 움직여 보세요
Custom Cursor (커스텀 커서)
다른 이름 Animated cursor, Cursor replacement
기본 화살표 대신 꾸민 점이나 링이 나타나고, 상호작용 요소 위에서 모양이 바뀝니다.
쓰는 곳
포트폴리오·에이전시 사이트
[적용할 곳]에 커스텀 커서(Custom Cursor)를 넣어 줘. 애니메이티드 커서(animated cursor), 커서 대체(cursor replacement)라고도 불러.
기본 화살표 대신 포인터를 정확히 따라가는 작은 점과 살짝 뒤처져 따라오는 링을 보여 주고, 링크와 버튼 위에서는 링이 부드럽게 커지게 해 줘.
터치 기기와 텍스트 입력란에서는 기본 커서를 그대로 두고, 커스텀 커서가 클릭을 절대 막지 않게 해 줘.Cursor의 다른 모션
AB
포인터를 움직여 보세요
Blend-Mode Cursor (블렌드 모드 커서)
다른 이름 Difference cursor, Inverting cursor
원형 커서가 mix-blend-mode difference로 아래에 있는 색을 반전시킵니다.
쓰는 곳
크리에이티브 포트폴리오
[적용할 곳]에 블렌드 모드 커서(Blend-Mode Cursor)를 넣어 줘. 디퍼런스 커서(difference cursor), 반전 커서(inverting cursor)라고도 불러.
포인터를 속이 찬 원으로 바꿔 지연 없이 포인터 바로 아래에 두고, 지나가는 텍스트와 도형의 색을 반전시켜 줘.
블렌딩은 그 영역 안에만 가둬 페이지 나머지와 섞이지 않게 하고, 다크 모드에서도 또렷하게 반전되게 하고, 터치 기기에서는 일반 커서를 그대로 둬.A
포인터를 움직여 보세요
Cursor Follower (커서 팔로워)
다른 이름 Following Pointer, Smooth Cursor, Cursor follow, Spring follow cursor
도형이나 레이블이 스프링처럼 또는 부드럽게 늦춰진 채 포인터를 따라다닙니다.
쓰는 곳
커스텀 커서, 툴팁
[적용할 곳]에 커서 팔로워(Cursor Follower)를 넣어 줘. 팔로잉 포인터(following pointer), 스무스 커서(smooth cursor)라고도 불러.
작고 둥근 마커가 부드럽게 늦춰진 채 포인터를 따라가다가, 포인터가 멈춘 자리에 미끄러지듯 딱 멈추게 해 줘. 튕김 없이.
실제 포인터는 계속 보이게 두고, 마커가 절대 클릭을 막지 않게 하고, 터치 기기에서는 빼 줘.- A
- B
- C
- D
ABCD
포인터를 움직여 보세요
Cursor Image Hover (커서 이미지 호버)
다른 이름 Hover image follow, Image preview on hover
텍스트 목록 항목에 마우스를 올리면 미리보기 이미지가 포인터를 따라다닙니다.
쓰는 곳
프로젝트 목록, 메뉴
[적용할 곳]에 커서 이미지 호버(Cursor Image Hover) 효과를 넣어 줘. 호버 이미지 팔로우(hover image follow), 호버 시 이미지 미리보기(image preview on hover)라고도 불러.
포인터가 텍스트 목록 항목 위에 있는 동안 그 항목의 작은 미리보기 이미지가 포인터 옆에 떠서 살짝 부드럽게 늦춰진 채 따라다니고, 포인터가 다른 항목으로 옮기면 다음 이미지로 미끄러지듯 바뀌게 해 줘.
미리보기가 목록 클릭을 절대 막지 않게 하고, 터치와 키보드에서는 미리보기 없이도 목록을 온전히 쓸 수 있게 해 줘.