그라데이션 배열 모션Graded Array Motion

Graded Array Motion

그라데이션 배열 모션

다른 이름Also known as · Value distribution · 값을 나누는 배열 모션

420

렌더 추가 예정CLIP COMING그라데이션 배열 모션Graded Array Motion정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 420. 그라데이션 배열 모션 · Graded Array Motion · power2.out

요소마다 크기나 회전량이 조금씩 달라져 부채꼴이나 경사형 배열을 만드는 효과Elements get slightly different size or rotation values, forming a fan or gradient array.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

규칙적인 리듬과 깊이를 주면서 단조로운 반복을 피한다. 구조적이고 세련된 인상을 준다Adds regular rhythm and depth while avoiding monotone repetition, giving a structured, refined impression.

언제 쓰나Use whenUSE WHEN

카드나 아이콘 묶음이 부채꼴로 펼쳐지는 장면
같은 도형 여러 개로 그래픽 패턴이나 배경을 만들 때

For card or icon groups that fan out
To build graphic patterns or backgrounds from many copies of one shape

과용 주의AvoidAVOID

단계 값은 인덱스의 선형 함수로 정한다(불규칙 금지)
요소 20개 초과 금지

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

요소 12개가 0.6초 동안 회전 0도에서 90도까지, 크기 0.7배에서 1.3배까지 인덱스에 따라 단계적으로 펼쳐진다

과용 · 나쁜 사례OVERUSE

단계 차이가 너무 커서 규칙이 안 보이거나, 모든 요소가 동시에 같은 값으로 움직여 변화가 없다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
지속	600ms	400~1000ms	펼침 시간
요소 수	12개	6~20개	동일 도형
회전 범위	0~90도	30~180도	인덱스 선형
크기 범위	0.7~1.3배	0.5~1.6배	인덱스 선형
시간차	30ms	20~60ms	인덱스순

GSAP

const els=gsap.utils.toArray('.item');
els.forEach((e,i)=>{const u=i/(els.length-1);
 tl.to(e,{rotation:u*90,scale:.7+u*.6,duration:.6,ease:'power2.out'},t+i*.03);});
// transform-origin은 부채 중심(예: '50% 100%')

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상> 요소 12개를 부채꼴로 펼쳐줘. 인덱스 정규화 값 u=i/11로 회전을 0도에서 90도, 크기를 0.7배에서 1.3배로 선형 매핑하고, 각 요소는 0.6초 power2.out에 0.03초씩 늦게 출발하게 해. transform-origin은 50% 100%. 불규칙 값은 쓰지 말고 paused 타임라인으로 구동해.

Fan out the 12 elements of <target>. Using normalized u=i/11, map rotation linearly from 0 to 90 degrees and scale from 0.7x to 1.3x, with each element animating for 0.6s with power2.out and starting 0.03s later than the previous. Set transform-origin to 50% 100%. No irregular values, drive from a paused timeline.

Codex

<파일>에 graded-array-motion을 구현해. 요소 12개, 회전 0~90도, 크기 0.7~1.3배, 600ms power2.out, 시간차 30ms. 0.2초, 0.4초, 0.9초를 캡처해 단계적으로 펼쳐지는지, 마지막 프레임에서 각도가 인덱스에 선형인지, 요소가 겹쳐 가려지지 않는지 확인해.

Implement graded-array-motion in <file>: 12 elements, rotation 0-90 degrees, scale 0.7-1.3x, 600ms power2.out, stagger 30ms. Capture at 0.2s, 0.4s, and 0.9s to verify stepwise fanning, that final angles are linear in index, and that elements do not overlap and hide one another.