핫스팟 펄스Hotspot Pulse
다음 행동 위치에 점이나 고리가 반복해서 커졌다 작아지고 다음 단계에서 다른 위치로 바뀐다.A dot or ring pulses at the next action location and moves between steps.
무엇을 전하나What it tells
- 핫스팟 펄스으로 어디를 눌러야 하는지 즉시 안다 때
- 제품 시연에서 조작 전후 상태를 한 장면 안에 연결할 때
- Use this effect when you need to communicate: Makes the next click target immediately clear.
- Connect interaction states within a product demonstration.
- 화면의 모든 버튼에 고리가 동시에 반복된다 상황을 피한다
- 상태 변화가 끝난 뒤에는 반복을 멈춰 읽을 시간을 둔다
좋은 예와 나쁜 예Good and bad use
다음에 누를 버튼에 안내 고리가 한 주기 커지며 흐려진다
화면의 모든 버튼에 고리가 동시에 반복된다
파라미터Parameters
기본값은 클립에 쓴 값Defaults are the values used in the clip
| 항목PARAM | 기본DEFAULT | 범위RANGE | 메모NOTE |
|---|---|---|---|
| 기본 지속 | 1.2s | 0.72~1.8s | 1920x1080 시연 기준의 한 동작 시간 |
| 고리 반경 | 8~20px | 6~24px | 대상 크기와 정보 밀도에 맞춰 조절한다 |
| 이징 | power2.out | none | power2.out | power2.inOut | 진행값은 none, 정착은 power2.out을 쓴다 |
tl.set('.ring', {transformOrigin:'50% 50%'});
tl.fromTo('.ring', {scale:1,opacity:1}, {scale:2.5,opacity:0,duration:1.2,ease:'power2.out',repeat:1}, 0);
tl.set('.ring', {x:240,y:80}, 2.4);
tl.fromTo('.ring', {scale:1,opacity:1}, {scale:2.5,opacity:0,duration:1.2,ease:'power2.out'}, 2.4);에이전트 프롬프트Agent prompts
그대로 붙여 넣는다Paste as is
<대상>에 핫스팟 펄스을 적용해. 다음 행동 위치에 점이나 고리가 반복해서 커졌다 작아지고 다음 단계에서 다른 위치로 바뀐다. 기본 지속 1.2초, 고리 반경 8~20px, 이징 power2.out를 사용하고 <파일>에 결정론적 paused 타임라인으로 구현해. 위 핵심 코드의 선택자를 대상 구조에 맞추고 완료 상태를 유지해.
Apply Hotspot Pulse to <target> in <file>. A dot or ring pulses at the next action location and moves between steps. Use a 1.2-second duration, an 8px to 20px ring radius, and power2.out easing. Implement the core snippet with selectors matching the target, using a deterministic paused timeline, and retain the final state.
<파일>의 시연 장면에서 <대상>에 핫스팟 펄스을 적용해. 기본 지속 1.2초, 고리 반경 8~20px, 이징 power2.out를 사용해. 0초, 0.6초, 1.6초를 캡처해 초기 상태, 중간 변화, 완료 상태를 확인하고 같은 시점 seek 결과가 일치하는지 검증해.
Apply Hotspot Pulse to <target> in the demonstration scene in <file>. Use a 1.2-second duration, an 8px to 20px ring radius, and power2.out easing. Capture at 0, 0.6, and 1.6 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