파편 분해Shatter
화면이나 글자가 삼각 파편으로 갈라져 회전하며 흩어지는 움직임A screen or word cracks into triangular shards that spin apart.
무엇을 전하나What it tells
- 낡은 방식이 깨지고 새 방식이 등장하는 전환을 만들 때
- 제목 글자를 폭발시키듯 퇴장시킬 때
- 충격적인 사실 뒤에 화면을 갈아엎을 때
- Transition where an old way breaks and a new one appears.
- Blow a title apart as it exits.
- Reset the screen after a shocking fact.
- 파편 초기 속도와 회전은 시드로 고정한다
- 1.4초 안에 모든 파편이 opacity 0이 되어야 한다
- 제품 화면처럼 정보가 있는 UI에는 쓰지 않는다
좋은 예와 나쁜 예Good and bad use
제목 화면이 120개 삼각 파편으로 갈라지며 초기 속도 400px/s로 회전하며 날아가고 1.2초 안에 뒤의 장면이 드러난다
파편이 균일한 크기와 속도로 퍼져 격자 모양이 그대로 보이거나, 파편이 화면에 남아 다음 장면을 가린다
파라미터Parameters
기본값은 클립에 쓴 값Defaults are the values used in the clip
| 항목PARAM | 기본DEFAULT | 범위RANGE | 메모NOTE |
|---|---|---|---|
| 전체 시간 | 1.2s | 0.8~1.8s | 분해 시작부터 소멸 |
| 파편 수 | 120 | 60~200 | 삼각 분할 |
| 초기 속도 | 400px/s | 250~700px/s | 중심에서 바깥 |
| 회전 | ±360deg | ±180~540deg | 파편별 시드 |
| 이징 | power2.in | power1~power3 | 중력 느낌 |
const seed = (i) => (Math.sin(i * 12.9898) * 43758.5453) % 1; // 결정론
tris.forEach((t, i) => {
const a = seed(i) * Math.PI * 2, d = 400 + Math.abs(seed(i + 7)) * 300;
tl.to(t, { x: Math.cos(a) * d, y: Math.sin(a) * d + 200, rotation: seed(i + 3) * 720, opacity: 0, duration: 1.2, ease: 'power2.in' }, 0.4);
});에이전트 프롬프트Agent prompts
그대로 붙여 넣는다Paste as is
GSAP으로 <대상> 화면을 삼각 파편 120개로 나눠 흩어지게 해줘. 파편별 각도와 거리는 시드 함수로 정하고 초기 속도는 400px/s 기준, 0.4초에 시작해 1.2초 동안 power2.in으로 이동하며 rotation ±360도, opacity 0까지 간다. 중력처럼 y로 200px 더 떨어지게 하고 뒤 장면이 0.4초부터 드러나야 해. Math.random은 쓰지 말고 paused 타임라인으로 만들어.
Use GSAP to break <target> into 120 triangular shards. Set each shard's angle and distance with a seeded function, initial speed about 400px/s. Starting at 0.4 seconds, move them for 1.2 seconds with power2.in, rotation +/-360 degrees, opacity 0, plus 200px of downward fall. The next scene shows through from 0.4 seconds. No Math.random, paused timeline.
<파일>의 화면에 shatter를 적용해. 삼각 파편 120개는 고정 배열로 만들고 tween은 position 0.4, duration 1.2, ease power2.in으로 x, y, rotation, opacity를 건다. 0.4초에 원본과 픽셀 동일, 0.9초에 파편이 퍼지는 중, 1.7초에 파편이 전부 opacity 0이고 뒤 장면만 보이는지 캡처로 확인해.
Apply shatter in <file>. Build a fixed array of 120 triangles; tween x, y, rotation, opacity at position 0.4, duration 1.2, ease power2.in. Capture 0.4s (pixel-identical to the source), 0.9s (shards flying) and 1.7s (all shards opacity 0, only the next scene visible).
도구별로 쓰기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-skills (
claude-skill:hyperframes-animation/adapters/html-in-canvas-patterns.md)unknown - armdz/tsl_elastic_vertex_destructionunknown