캐릭터 입력 반응Character Input Response
캐릭터가 입력 커서를 바라보고 비밀번호 입력 때 눈을 가린다.A character watches the input caret and covers its eyes during password entry.
무엇을 전하나What it tells
- 캐릭터 입력 반응으로 입력 진행과 보호 상태를 친근하게 알려 준다 때
- 제품 시연에서 조작 전후 상태를 한 장면 안에 연결할 때
- Use this effect when you need to communicate: Offers friendly feedback about input and privacy state.
- Connect interaction states within a product demonstration.
- 캐릭터가 비밀번호 내용을 읽는 듯 반응한다 상황을 피한다
- 상태 변화가 끝난 뒤에는 반복을 멈춰 읽을 시간을 둔다
좋은 예와 나쁜 예Good and bad use
이메일 입력을 따라 눈이 움직이고 비밀번호 칸에서는 팔이 눈을 가린다
캐릭터가 비밀번호 내용을 읽는 듯 반응한다
파라미터Parameters
기본값은 클립에 쓴 값Defaults are the values used in the clip
| 항목PARAM | 기본DEFAULT | 범위RANGE | 메모NOTE |
|---|---|---|---|
| 기본 지속 | 0.4s | 0.24~0.6s | 1920x1080 시연 기준의 한 동작 시간 |
| 눈 가림 시간 | 700ms | 400~900ms | 대상 크기와 정보 밀도에 맞춰 조절한다 |
| 이징 | power2.out | none | power2.out | power2.inOut | 진행값은 none, 정착은 power2.out을 쓴다 |
tl.to('.eyes', {x:8,duration:.4,ease:'power2.out'}, 0);
tl.set('.arm', {transformOrigin:'50% 100%'});
tl.to('.arm', {rotation:-55,duration:.7,ease:'power2.out'}, .6);
tl.to('.eyes', {opacity:0,duration:.15}, 1);에이전트 프롬프트Agent prompts
그대로 붙여 넣는다Paste as is
<대상>에 캐릭터 입력 반응을 적용해. 캐릭터가 입력 커서를 바라보고 비밀번호 입력 때 눈을 가린다. 기본 지속 0.4초, 눈 가림 시간 700ms, 이징 power2.out를 사용하고 <파일>에 결정론적 paused 타임라인으로 구현해. 위 핵심 코드의 선택자를 대상 구조에 맞추고 완료 상태를 유지해.
Apply Character Input Response to <target> in <file>. A character watches the input caret and covers its eyes during password entry. Use a 0.4-second duration, a 700ms eye-cover motion, and power2.out easing. Implement the core snippet with selectors matching the target, using a deterministic paused timeline, and retain the final state.
<파일>의 시연 장면에서 <대상>에 캐릭터 입력 반응을 적용해. 기본 지속 0.4초, 눈 가림 시간 700ms, 이징 power2.out를 사용해. 0초, 0.2초, 0.8초를 캡처해 초기 상태, 중간 변화, 완료 상태를 확인하고 같은 시점 seek 결과가 일치하는지 검증해.
Apply Character Input Response to <target> in the demonstration scene in <file>. Use a 0.4-second duration, a 700ms eye-cover motion, and power2.out easing. Capture at 0, 0.2, and 0.8 seconds to verify the initial, intermediate, and final states. Seek to the same times again and confirm identical results.
도구별로 쓰기In your tools
HyperFrames · ReelForge · Scrolline
잘 맞는 조합Pairs well with
출처Sources
개념 출처와 라이선스. 구현은 이 레포에서 새로 씀Concept sources and licenses. Implementations are original to this repo
- rive.app/yoonikuuCC-BY (version unverified)