효과Effects / 등장·퇴장Entrance & Exit / Nº 063

나선 조립Spiral Assembly

Spiral Assembly

나선 조립

다른 이름Also known as · Spiral assembly · 나선 궤도 조립 · SpiralIn

063

렌더 추가 예정CLIP COMING나선 조립Spiral Assembly정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 063. 나선 조립 · Spiral Assembly · power2.out

조각들이 바깥의 나선 궤도를 따라 들어와 최종 형태에 붙는다.Pieces spiral inward and settle into their final arrangement.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

흩어진 조각이 하나의 구조로 모임을 느낀다.Communicates convergence and assembly.

언제 쓰나Use whenUSE WHEN

흩어진 조각을 조립할 때
하나의 구조로 수렴함을 보여 줄 때

Assemble scattered pieces.
Show separate parts becoming a single structure.

과용 주의AvoidAVOID

같은 장면의 여러 대상에 동시에 적용하지 않는다.
동작 감소 설정에서는 정적인 대표 상태를 보여 준다.

분류TagsTAGS

등장·퇴장Entrance & Exit 설명Explain 강조Emphasis 설명 영상Explainer video 웹 UIWeb UI 숏폼Short-form 난이도 중급Intermediategsap

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

로고 조각 여덟 개가 나선을 따라 각자의 최종 좌표에 붙는다.

과용 · 나쁜 사례OVERUSE

문장 글자를 크게 회전시켜 읽기 시작을 늦춘다.

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
지속	1.5s	1~2s	1920x1080 기준. 장면 시작을 0초로 둔다.
회전량	540deg	180~540deg	1920x1080 기준. 장면 시작을 0초로 둔다.
시작 반경	300px	160~400px	1920x1080 기준. 장면 시작을 0초로 둔다.
조각 시간차	0.04s	0~0.08s	1920x1080 기준. 장면 시작을 0초로 둔다.

GSAP

const tl = gsap.timeline({ paused: true });
gsap.utils.toArray('.piece').forEach((el, i) => {
  const s = { p: 0 };
  tl.to(s, { p: 1, duration: 1.5, ease: 'power2.out', onUpdate: () => {
    const a = (1-s.p) * Math.PI * 3 + i * Math.PI / 4;
    gsap.set(el, { x: 300*(1-s.p)*Math.cos(a), y: 300*(1-s.p)*Math.sin(a) });
  } }, i * 0.04);
});

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상>에 나선 조립을 구현해. 지속 1.5s, 회전량 540deg, 시작 반경 300px, 조각 시간차 0.04s, 이징 power2.out을 적용해. 조각별 극좌표 반경과 각도를 최종 좌표까지 보간한다. paused 타임라인과 절대 시간으로 구동하고 Math.random 없이 같은 시점의 상태를 재현해.

Implement Spiral Assembly on <target>. Use duration 1.5s; rotation 540deg; initial radius 300px; piece stagger 0.04s; use power2.out easing. Drive the effect with a paused GSAP timeline and absolute time, and reproduce the same state on every seek without Math.random. Keep foreground text readable.

Codex

<파일>의 나선 조립 장면 레이어에 적용해. 지속 1.5s, 회전량 540deg, 시작 반경 300px, 조각 시간차 0.04s, 이징 power2.out을 사용하고 본문과 분리해. 0초, 0.4초, 1.2초 시점을 캡처해 시작 상태와 중간 변화 및 대상 가독성을 확인하고 같은 시점을 다시 seek해 결과가 같은지 검증해.

Apply Spiral Assembly to the scene layer in <file>. Use duration 1.5s; rotation 540deg; initial radius 300px; piece stagger 0.04s and power2.out easing. Capture at 0, 0.4, and 1.2 seconds to check the initial state, motion progression, and foreground readability; seek to each time again to verify identical output.