효과Effects / 데이터Data / Nº 293

누적 레이어 삽입Stack Layer Addition

Stack Layer Addition

누적 레이어 삽입

다른 이름Also known as · Stack layer addition

293

렌더 추가 예정CLIP COMING누적 레이어 삽입Stack Layer Addition정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 293. 누적 레이어 삽입 · Stack Layer Addition · power2.inOut

새 레이어가 두께를 얻으면서 위쪽 레이어들이 연속적으로 밀려난다.A new layer gains thickness while the layers above it shift continuously.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

전체의 증가와 새 구성 요소의 몫을 동시에 읽는다.Shows both the increase in the total and the contribution of a new component.

언제 쓰나Use whenUSE WHEN

누적 차트에 신규 매출 항목을 더할 때
새 레이어가 전체 합계에 미치는 영향을 설명할 때

Add a newly introduced revenue category to a stack.
Explain how an inserted layer changes a cumulative total.

과용 주의AvoidAVOID

레이어 경계 사이에 빈틈이나 겹침을 만들지 않는다.

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

신규 조각의 두께가 0에서 120px로 늘어나는 동안 위 조각도 120px 함께 이동한다.

과용 · 나쁜 사례OVERUSE

신규 조각만 겹쳐 그려 기존 합계와 새 합계의 관계가 보이지 않는다.

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
삽입 시간	700ms	500~1000ms	신규 두께와 기존 위치를 함께 바꾼다.
신규 두께	120px	40~240px	자료 척도로 산출한 목표값이다.
초기 두께	0px	0px 고정	삽입 전 상태를 명확히 한다.
이징	power2.inOut	none \| power2.out \| power2.inOut	끝점을 넘지 않는 이징을 쓴다.

GSAP

const tl=gsap.timeline({paused:true});
tl.fromTo('.new-layer',{attr:{y:600,height:0}},{attr:{y:480,height:120},duration:0.7,ease:'power2.inOut'},0);
document.querySelectorAll('.upper-layer').forEach(el=>{
  const y=+el.getAttribute('y');
  tl.fromTo(el,{attr:{y}},{attr:{y:y-120},duration:0.7,ease:'power2.inOut'},0);
});

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<파일>의 <대상>에 누적 레이어 삽입를 구현해. 새 레이어가 두께를 얻으면서 위쪽 레이어들이 연속적으로 밀려난다. 삽입 시간 700ms, 신규 두께 120px, 초기 두께 0px, 이징 power2.inOut를 적용하고 GSAP 코어의 paused 타임라인 하나로 seek 가능하게 작성해. 레이어 경계 사이에 빈틈이나 겹침을 만들지 않는다.

Implement Stack Layer Addition for <target> in <file>. A new layer gains thickness while the layers above it shift continuously. Use insertion duration: 700ms; added thickness: 120px; initial thickness: 0px; easing: power2.inOut in a single paused GSAP core timeline that supports seeking. Keep neighboring layer boundaries contiguous.

Codex

<파일>의 <대상> 장면에 누적 레이어 삽입를 적용해. 삽입 시간 700ms, 신규 두께 120px, 초기 두께 0px, 이징 power2.inOut를 사용하고 다음 동작을 구현해: 모든 레이어의 누적 시작값과 끝값을 함께 보간한다. 플러그인과 Math.random 없이 작성하고 0.17초·0.42초·0.7초를 캡처해 초기 상태, 중간 변화, 최종 상태가 연속적이며 다음 예시와 맞는지 확인해: 신규 조각의 두께가 0에서 120px로 늘어나는 동안 위 조각도 120px 함께 이동한다.

Apply Stack Layer Addition to the <target> scene in <file> using insertion duration: 700ms; added thickness: 120px; initial thickness: 0px; easing: power2.inOut. A new layer gains thickness while the layers above it shift continuously. Use prepared data or geometry with GSAP core, no plugins, and no Math.random; capture at 0.17, 0.42, 0.7 seconds to verify continuous intermediate geometry, correct endpoints, and identical output after repeated seeks. Keep neighboring layer boundaries contiguous.