변화량 삼각형 축소Delta Triangle Shrink

Delta Triangle Shrink

변화량 삼각형 축소

다른 이름Also known as · Delta triangle shrink

376

렌더 추가 예정CLIP COMING변화량 삼각형 축소Delta Triangle Shrink정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 376. 변화량 삼각형 축소 · Delta Triangle Shrink · power2.inOut

곡선 근처의 가로와 세로 변화량 선분이 함께 작아지고 라벨이 계속 붙어 있다.Horizontal and vertical change segments shrink together while their labels remain attached.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

작은 입력 변화와 출력 변화의 비율을 읽는다.Makes the ratio between small input and output changes readable.

언제 쓰나Use whenUSE WHEN

변화량 삼각형 축소으로 원인과 결과를 설명할 때
대응하는 요소를 같은 화면에서 순서대로 읽게 할 때

Explain causes and results using delta triangle shrink.
Present corresponding elements in a readable sequence within the same view.

과용 주의AvoidAVOID

삼각형을 균일 축소해 실제 곡선의 변화율과 어긋난다.
설명 라벨과 대응 색을 동작 중에 바꾸지 않는다.

분류TagsTAGS

원리 도해Explainer 설명Explain 순서·흐름Sequence 설명 영상Explainer video 스크롤덱Scroll deck 발표Presentation 난이도 중급Intermediatesvg

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

가로 변화량과 세로 변화량을 같은 입력값으로 줄인다.

과용 · 나쁜 사례OVERUSE

삼각형을 균일 축소해 실제 곡선의 변화율과 어긋난다.

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
기본 지속	1.8s	1.26~2.52s	첫 동작 또는 후보의 기본 단계 길이
가로 변화량	120→8px	80~180px → 4~16px	세로 변화량도 같은 함수로 계산한다
이징	power2.inOut	none \| power2.out \| power2.inOut	주파수 변화는 선형으로 두고 위치 변화는 완만하게 연결한다.

GSAP

const tl = gsap.timeline({paused:true});
const state={d:120},f=x=>0.002*x*x;
const draw=()=>{const d=state.d,dy=f(200+d)-f(200); triangle.setAttribute("points",`200,80 ${200+d},80 ${200+d},${80+dy}`); gsap.set(label,{x:200+d+12,y:80+dy});};
tl.to(state,{d:8,duration:1.8,ease:"power2.inOut",onUpdate:draw});
draw();

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>에서 <대상>에 변화량 삼각형 축소을 적용해. 곡선 근처의 가로와 세로 변화량 선분이 함께 작아지고 라벨이 계속 붙어 있다. 공통 delta 변수로 SVG 직각 선분과 라벨 위치를 갱신한다. 기본 지속은 1.8s, 가로 변화량은 120→8px, 이징은 power2.inOut로 설정한다. 하나의 paused GSAP 타임라인으로 구성하고 seek할 때 좌표와 표시 상태를 다시 계산해.

Apply Delta Triangle Shrink to <target> in <file>. Horizontal and vertical change segments shrink together while their labels remain attached. Use a base duration of 1.8s and power2.inOut; use horizontal delta from 120px to 8px and preserve semantic correspondence. Build one paused GSAP timeline and recompute geometry and visibility when seeking.

Codex

<파일>의 설명 장면에서 <대상>에 변화량 삼각형 축소을 적용해. 기본 지속은 1.8s, 가로 변화량은 120→8px, 이징은 power2.inOut로 설정한다. 0초, 0.9초, 1.8초 시점을 캡처해 초기 상태, 중간 대응 관계, 첫 동작의 완료 상태를 확인해. 원본과 결과의 의미 대응 및 라벨 가독성을 검증해.

Implement Delta Triangle Shrink in the explanatory scene of <file> for <target>, using 1.8s and power2.inOut with horizontal delta from 120px to 8px. Capture at 0, 0.9, and 1.8 seconds to check the initial state, intermediate correspondence, and completion of the first motion. Verify matching source and result elements and readable labels.