입자 버스트Particle Burst
한 점에서 입자 여러 개가 사방으로 터져 나가 중력에 떨어지며 사라지는 효과Particles explode outward from a single point, fall under gravity, and fade out.
무엇을 전하나What it tells
- 버튼 클릭, 결제 완료, 목표 달성 같은 성취 순간을 표시할 때
- 로고나 숫자가 나타나는 지점에 폭발적 강조를 줄 때
- To mark an achievement like a click, payment done, or goal reached
- To add an explosive accent where a logo or number appears
- 입자 수 150개 초과 금지(가독성과 렌더 비용)
- 핵심 글자 위에서 입자 opacity 0.6 이하 유지
좋은 예와 나쁜 예Good and bad use
체크 아이콘이 나타나는 순간 입자 80개가 1.2초 동안 퍼졌다가 중력에 떨어지며 페이드된다
입자 500개를 1초 넘게 화면 전체에 흩뿌려 핵심 텍스트를 가리거나, 매번 다른 무작위 궤적을 쓴다
파라미터Parameters
기본값은 클립에 쓴 값Defaults are the values used in the clip
| 항목PARAM | 기본DEFAULT | 범위RANGE | 메모NOTE |
|---|---|---|---|
| 입자 수 | 80개 | 40~150개 | 시드 고정 |
| 수명 | 1200ms | 800~1800ms | 끝 300ms 페이드 |
| 초기 속도 | 240~620px/s | 200~800px/s | 각도는 360도 균등 분산 |
| 중력 | 600px/s² | 400~900px/s² | 아래 방향 |
| 크기 | 4~9px | 3~12px | 수명에 따라 0.4배로 축소 |
function mulberry(a){return()=>{a|=0;a=a+0x6D2B79F5|0;let t=Math.imul(a^a>>>15,1|a);t^=t+Math.imul(t^t>>>7,61|t)^t;return((t^t>>>14)>>>0)/4294967296}}
const r=mulberry(7),P=[...Array(80)].map(()=>({a:r()*6.283,v:240+r()*380,s:4+r()*5}));
// draw(p): x=cx+cos(a)*v*t, y=cy+sin(a)*v*t+300*t*t, alpha=1-t/1.2에이전트 프롬프트Agent prompts
그대로 붙여 넣는다Paste as is
<대상>이 나타나는 순간 입자 버스트를 넣어줘. canvas에 입자 80개를 원점에서 360도로 균등하게 발사해. 초기 속도는 240~620px/s, 중력 600px/s², 수명 1.2초, 마지막 0.3초는 페이드, 크기는 4~9px에서 0.4배로 줄어들게. 난수는 시드 고정으로 매번 같은 궤적, 위치는 progress 값의 순수 함수로 그려서 seek 가능하게 해.
Add a particle burst to <target> at the moment it appears. On a canvas, launch 80 particles from the origin evenly over 360 degrees at 240-620px/s, gravity 600px/s^2, lifetime 1.2s with the last 0.3s fading, size 4-9px shrinking to 0.4x. Use a fixed seed so trajectories repeat, and draw positions as a pure function of progress so it is seekable.
<파일>에 particle-burst canvas를 구현해. 입자 80개, 수명 1200ms, 중력 600px/s², 속도 240~620px/s, seed 7. 트리거 후 0.2초, 0.6초, 1.3초를 캡처해 입자가 퍼졌다가 낙하하고 1.3초에 캔버스가 비었는지 확인해. 같은 시점을 두 번 렌더해 픽셀이 동일한지도 비교해.
Implement a particle-burst canvas in <file>: 80 particles, lifetime 1200ms, gravity 600px/s^2, speed 240-620px/s, seed 7. Capture 0.2s, 0.6s, and 1.3s after the trigger to check the spread, the fall, and an empty canvas at 1.3s. Render the same time twice and compare pixels for identity.
도구별로 쓰기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/rules/particle-burst.md)unknown - local/music-to-video (
claude-skill:music-to-video/references/motion-primitive-catalog.md#particle-burst)unknown - local/music-to-video (
claude-skill:music-to-video/references/motion-primitives/particle-burst/scene.html)unknown