값이 한계에 가까워질수록 숫자가 진해지고 튀어 오른다.A counter becomes more prominent and briefly scales up when it reaches a warning threshold.
잔량이 20%에 도달하면 숫자가 1.12배로 0.2초 커졌다가 원래 크기로 돌아온다.
임계값 밖에서도 계속 튀어 경고와 정상 상태가 구분되지 않는다.
기본값은 클립에 쓴 값Defaults are the values used in the clip
| 항목PARAM | 기본DEFAULT | 범위RANGE | 메모NOTE |
|---|---|---|---|
| 임계값 | 20% | 10~30% | 잔량 기준으로 이하에서 경고한다. |
| 최대 배율 | 1.12 | 1.06~1.16 | 숫자 중심을 기준으로 한다. |
| 팝 시간 | 200ms | 120~300ms | 확대와 복귀에 각각 적용한다. |
| 이징 | power2.out | none | power2.out | power2.inOut | 끝점을 넘지 않는 이징을 쓴다. |
const tl=gsap.timeline({paused:true});
const remaining=20, threshold=20;
if(remaining<=threshold){
tl.fromTo('.counter',{scale:1,color:'#334155'},{scale:1.12,color:'#b91c1c',duration:0.2,ease:'power2.out'});
tl.to('.counter',{scale:1,duration:0.2,ease:'power2.inOut'});
}그대로 붙여 넣는다Paste as is
<파일>의 <대상>에 임계값 경고 펄스를 구현해. 값이 한계에 가까워질수록 숫자가 진해지고 튀어 오른다. 임계값 20%, 최대 배율 1.12, 팝 시간 200ms, 이징 power2.out를 적용하고 GSAP 코어의 paused 타임라인 하나로 seek 가능하게 작성해. 색만으로 경고를 전달하지 않는다.
Implement Threshold Pulse for <target> in <file>. A counter becomes more prominent and briefly scales up when it reaches a warning threshold. Use warning threshold: 20%; peak scale: 1.12; pulse duration: 200ms; easing: power2.out in a single paused GSAP core timeline that supports seeking. Use a warning label as well as color.
<파일>의 <대상> 장면에 임계값 경고 펄스를 적용해. 임계값 20%, 최대 배율 1.12, 팝 시간 200ms, 이징 power2.out를 사용하고 다음 동작을 구현해: 수치의 임계 근접도를 color와 스프링 초기 속도에 매핑한다. 플러그인과 Math.random 없이 작성하고 0.1초·0.24초·0.4초를 캡처해 초기 상태, 중간 변화, 최종 상태가 연속적이며 다음 예시와 맞는지 확인해: 잔량이 20%에 도달하면 숫자가 1.12배로 0.2초 커졌다가 원래 크기로 돌아온다.
Apply Threshold Pulse to the <target> scene in <file> using warning threshold: 20%; peak scale: 1.12; pulse duration: 200ms; easing: power2.out. A counter becomes more prominent and briefly scales up when it reaches a warning threshold. Use prepared data or geometry with GSAP core, no plugins, and no Math.random; capture at 0.1, 0.24, 0.4 seconds to verify continuous intermediate geometry, correct endpoints, and identical output after repeated seeks. Use a warning label as well as color.
HyperFrames · ReelForge · Scrolline
개념 출처와 라이선스. 구현은 이 레포에서 새로 씀Concept sources and licenses. Implementations are original to this repo