3D 조립Depth Assemble
입체 공간에 흩어져 회전하던 요소들이 평면의 정해진 자리로 차례로 모이는 움직임Elements scattered in 3D space, each tilted and spinning, converge one after another into their exact flat positions.
무엇을 전하나What it tells
- 흩어진 아이디어 카드가 하나의 구조도로 정리될 때
- 제목 글자 조각이 모여 문구가 완성될 때
- 여러 자료가 한 대시보드 레이아웃으로 자리 잡을 때
- Scattered idea cards settling into one structure diagram.
- Title fragments coming together into a phrase.
- Several sources locking into a dashboard layout.
- 시작 좌표는 시드 난수로 고정해 렌더마다 같게 한다
- 한 장면에 요소 20개를 넘기지 않는다
- 도착 후 회전이 0으로 정확히 돌아와야 한다
좋은 예와 나쁜 예Good and bad use
카드 9장이 z -300~300px, 회전 ±70도에서 50ms 간격으로 날아와 격자 자리에 1.5초 안에 정확히 맞물리고 마지막에 살짝 정지한다
시작 위치가 너무 멀어 화면 밖에서 오거나, 요소마다 도착 시각이 같아 한꺼번에 툭 붙는다
파라미터Parameters
기본값은 클립에 쓴 값Defaults are the values used in the clip
| 항목PARAM | 기본DEFAULT | 범위RANGE | 메모NOTE |
|---|---|---|---|
| 총 시간 | 1.5s | 1.0~2.2s | 마지막 요소 도착 기준 |
| 깊이 범위 | ±300px | ±150~450px | z 시작값 |
| 시작 회전 | ±70deg | ±40~90deg | 도착 시 0deg |
| 요소 간격 | 50ms | 30~90ms | stagger |
| 이징 | power3.out | power2~expo.out | 도착 순간 감속 |
const rnd = (i) => Math.sin(i * 127.1 + 311.7) * 0.5; // 시드 난수 -0.5~0.5
gsap.set('.card', { transformPerspective: 1200 });
cards.forEach((c, i) => {
gsap.set(c, { z: rnd(i) * 600, rotationY: rnd(i + 9) * 140, rotationX: rnd(i + 3) * 60, opacity: 0 });
tl.to(c, { z: 0, rotationX: 0, rotationY: 0, opacity: 1, duration: 1.0, ease: 'power3.out' }, 0.2 + i * 0.05);
});에이전트 프롬프트Agent prompts
그대로 붙여 넣는다Paste as is
GSAP으로 <대상> 요소들이 3D 공간에서 자리로 모이는 장면을 만들어 줘. 시작값은 시드 난수로 z ±300px, rotationX ±30도, rotationY ±70도로 고정하고 opacity 0에서 시작해. 각 요소는 0.2초부터 50ms 간격으로 1.0초 동안 power3.out으로 원래 자리에 정확히 도착하고 마지막에 0.6초 정지한다. Math.random은 쓰지 말고 paused 타임라인 하나로 만들어.
Use GSAP to build a scene where <target> elements gather into place in 3D. Fix start values with a seeded function: z +/-300px, rotationX +/-30 degrees, rotationY +/-70 degrees, opacity 0. Starting at 0.2 seconds, each element arrives over 1.0 second with power3.out at 50ms intervals, then holds 0.6 seconds. No Math.random, one paused timeline.
<파일>의 요소 그룹에 depth-assemble을 적용해. 시작값 z=rnd*600, rotationY=rnd*140은 시드 함수로 계산하고, 각 요소 tween은 position 0.2+i*0.05, duration 1.0, ease power3.out으로 z, rotation을 0으로 돌린다. Math.random 없이 두 번 렌더해 같은 프레임인지 확인하고, 0.5초에는 흩어진 상태, 1.9초에는 전 요소 transform이 identity인지 캡처로 확인해.
Apply depth-assemble to the element group in <file>. Compute start values z=rnd*600 and rotationY=rnd*140 from a seeded function; each tween at position 0.2+i*0.05, duration 1.0, ease power3.out returns z and rotation to 0. Render twice with no Math.random and confirm identical frames; capture 0.5s (scattered) and 1.9s (every element at identity transform).
도구별로 쓰기In your tools
HyperFrames · ReelForge · Scrolline
잘 맞는 조합Pairs well with
출처Sources
개념 출처와 라이선스. 구현은 이 레포에서 새로 씀Concept sources and licenses. Implementations are original to this repo
- heygen-com/hyperframesApache-2.0
- heygen-com/hyperframesApache-2.0
- local/hyperframes-animation (
claude-skill:hyperframes-animation/rules/depth-scatter-assemble.md)unknown - heygen-com/hyperframesApache-2.0