조각 조립Piece Assembly
떨어져 있던 도형 조각들이 이동하고 회전해 하나의 로고나 빈틈 없는 배열을 완성하는 움직임Loose shapes move and rotate until they lock into a single logo or a gap-free arrangement.
무엇을 전하나What it tells
- 로고 아웃트로에서 마크가 완성될 때
- 모듈 조각이 하나의 시스템으로 맞물릴 때
- 타일 여러 개가 빈틈 없이 배열되는 것을 보일 때
- A logo outro where the mark completes.
- Modules clicking together into one system.
- Tiles packing into a seamless layout.
- 도착 후 좌표와 회전은 정확히 최종값이어야 한다
- 조각 수는 12개 이하로 유지한다
- 최종 프레임에서 조각 사이 틈을 0.5px 이하로 한다
좋은 예와 나쁜 예Good and bad use
조각 8개가 ±30도 기울어진 채 화면 바깥에서 60ms 간격으로 들어와 1.2초 안에 로고 자리에 정확히 붙는다
조각이 모두 같은 방향에서 같은 시각에 들어와 한 덩어리로 보이거나, 도착 후 미세하게 어긋난 채 끝난다
파라미터Parameters
기본값은 클립에 쓴 값Defaults are the values used in the clip
| 항목PARAM | 기본DEFAULT | 범위RANGE | 메모NOTE |
|---|---|---|---|
| 총 시간 | 1.2s | 0.8~1.8s | 마지막 조각 기준 |
| 조각 간격 | 60ms | 40~100ms | stagger |
| 시작 회전 | ±30deg | ±15~45deg | 도착 시 0 |
| 시작 거리 | 220px | 140~360px | 최종 위치 기준 |
| 이징 | power3.out | power2~expo.out |
pieces.forEach((p, i) => {
const s = i % 2 ? 1 : -1;
tl.from(p, { x: s * (220 + i * 12), y: -160 + i * 30, rotation: s * 30, opacity: 0, duration: 0.9, ease: 'power3.out' }, 0.2 + i * 0.06);
});
// .from은 최종 위치가 마크업의 정적 위치가 되므로 도착 정밀도가 보장됨에이전트 프롬프트Agent prompts
그대로 붙여 넣는다Paste as is
GSAP으로 <로고 SVG>의 조각을 차례로 맞춰 줘. 각 조각은 최종 위치를 마크업에 두고 from으로 x 좌우 220px 이상, 회전 ±30도, opacity 0에서 시작해 0.9초 power3.out으로 도착시켜. 시작 지연은 0.2초에 조각 번호*60ms. 도착 후 0.6초 정지하고 paused 타임라인으로 작성해.
Use GSAP to assemble the pieces of <logo SVG>. Keep each piece's final position in the markup and animate with from: x offset 220px or more to either side, rotation +/-30 degrees, opacity 0, over 0.9 seconds with power3.out. Delay each piece 0.2 seconds plus index*60ms, then hold 0.6 seconds. Paused timeline.
<파일>의 조각들에 piece-assembly를 적용해. i번째 조각을 tl.from(p, {x:±(220+i*12), y:-160+i*30, rotation:±30, opacity:0, duration:0.9, ease:'power3.out'}, 0.2+i*0.06)로 건다. 0.4초는 일부만 도착, 2.0초는 최종 프레임인지 캡처한 뒤 마크업 원본과 픽셀 차이가 0인지 확인해.
Apply piece-assembly to the pieces in <file>. Tween piece i with tl.from(p, {x:+/-(220+i*12), y:-160+i*30, rotation:+/-30, opacity:0, duration:0.9, ease:'power3.out'}, 0.2+i*0.06). Capture 0.4s (partly arrived) and 2.0s (final), and confirm the final frame has zero pixel diff against the static markup.
도구별로 쓰기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
- local/music-to-video (
claude-skill:music-to-video/references/motion-primitive-catalog.md#mosaic-pack)unknown - heygen-com/hyperframesApache-2.0
- local/music-to-video (
claude-skill:music-to-video/references/motion-primitives/mosaic-pack/scene.html)unknown - local/HyperFrames-skills (
claude-skill:hyperframes-animation/blueprints/logo-assemble-lockup.md)unknown