효과Effects / 입자·생성Generative / Nº 508

입자 소용돌이Particle Vortex

Particle Vortex

입자 소용돌이

다른 이름Also known as · Particle Tornado · 입자 토네이도

508

렌더 추가 예정CLIP COMING입자 소용돌이Particle Vortex정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 508. 입자 소용돌이 · Particle Vortex · power2.in

입자들이 중심을 향해 또는 밖으로 나선을 그리며 흐르는 소용돌이Particles spiral toward or away from a center in a vortex.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

빨려 들어가는 집중이나 퍼져 나가는 확산. 중심에 무언가 있다는 신호Focus being drawn in or spreading outward. A signal that something sits at the center.

언제 쓰나Use whenUSE WHEN

여러 요소가 하나의 핵심으로 모이는 과정을 보여 줄 때
로딩·변환의 중심 이미지로 입자 흐름을 쓸 때

Show many elements converging on one core.
Use a particle flow as the central visual of a loading or transformation moment.

과용 주의AvoidAVOID

입자 400개 초과 금지(형태가 뭉개짐)
중심 근처 크기와 밝기를 줄이지 않으면 중심이 하얗게 탄다

분류TagsTAGS

입자·생성Generative 주목 끌기Attention 설명Explain 설명 영상Explainer video 숏폼Short-form 발표Presentation 난이도 중급Intermediatecanvas

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

입자 200개가 반경 200px에서 시작해 6초 동안 각속도 0.4rad/s로 돌며 중심으로 모여 로고가 나타난다

과용 · 나쁜 사례OVERUSE

입자 수천 개가 밝게 겹쳐 흰 덩어리가 되거나, 회전이 빨라 소용돌이가 아닌 원형 잔상처럼 보인다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
지속	6s	4~8s	입자가 중심에 닿는 시간
입자 수	200	120~350	시드 배열로 고정
각속도	0.4rad/s	0.25~0.7	안쪽일수록 빠르게
시작 반경	200px	150~320px	1920px 기준
입자 크기	2.5px	1.5~4px	중심 근처 60%로 축소

GSAP

const P = Array.from({ length: 200 }, (_, i) => ({ a: (i * 137.508) % 360 * Math.PI / 180, r: 60 + (i * 37 % 140) }));
const u = { k: 0 };
tl.to(u, { k: 1, duration: 6, ease: 'power2.in', onUpdate() {
  P.forEach(p => { const r = p.r * (1 - u.k), a = p.a + u.k * 0.4 * 6 * (1 + 60 / (r + 30)); draw(cx + Math.cos(a) * r, cy + Math.sin(a) * r); });
} }, 0);

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상> 중앙에 입자 소용돌이를 넣어줘. 입자 200개를 황금각으로 배치하고 반경 200px 바깥에서 시작해 6초 동안 power2.in으로 중심에 모이게 해. 각속도는 0.4rad/s이고 안쪽일수록 빠르게 돌며, 입자 크기는 2.5px에서 중심 근처 1.5px로 줄여. 마지막 0.5초에 로고가 페이드인하게 해.

Add a particle vortex at the center of <target>. Place 200 particles by golden angle starting outside a 200px radius and gather them to the center over 6 seconds with power2.in. Angular speed 0.4 rad/s, faster near the center, particle size shrinking from 2.5px to 1.5px near the core. Fade the logo in during the last 0.5 seconds.

Codex

<파일>의 캔버스에 입자 200개 배열을 만들어. 각도 a=(i*137.508)deg, 반경 r=60+(i*37%140), 진행값 k를 6초 power2.in으로 0에서 1로 tween하고 매 프레임 r*(1-k), a+k*0.4*6*(1+60/(r+30))에 그려. Math.random 금지. 1.5초·3초·5.5초를 캡처해 입자가 나선으로 모이고 중심이 하얗게 타지 않는지 확인해.

In the canvas of <file>, build 200 particles with angle a=(i*137.508) deg and radius r=60+(i*37%140). Tween a progress k from 0 to 1 over 6 s with power2.in and draw each at radius r*(1-k), angle a+k*0.4*6*(1+60/(r+30)). No Math.random. Capture 1.5 s, 3 s and 5.5 s to check particles spiral inward and the core does not blow out to white.