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

보로노이 모션Animated Voronoi

Animated Voronoi

보로노이 모션

다른 이름Also known as · Cell Pattern Evolution · 셀 패턴 진화 · Cell Pattern · 움직이는 보로노이 셀

544

렌더 추가 예정CLIP COMING보로노이 모션Animated Voronoi정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 544. 보로노이 모션 · Animated Voronoi · none

불규칙한 셀과 균열 무늬가 크기와 모양을 바꾸며 흐르는 보로노이 패턴Irregular cells and crack patterns flow while changing size and shape.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

세포, 결정, 거품 같은 유기적 조직. 추상 표면이 살아 움직이는 인상Organic tissue like cells, crystals or foam. An abstract surface that feels alive.

언제 쓰나Use whenUSE WHEN

생물·소재·네트워크 주제의 추상 배경을 만들 때
셀 경계선을 이용해 구획이 나뉘고 합쳐지는 개념을 보여 줄 때

Build abstract backgrounds for biology, materials or network topics.
Use cell borders to show regions splitting and merging.

과용 주의AvoidAVOID

셀 크기 24px 미만 금지
선 불투명도 0.35 초과 금지

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

셀 크기 48px의 보로노이 경계선이 4초 주기로 천천히 이동하며 셀 중심 점들이 0.3Hz로 흔들린다

과용 · 나쁜 사례OVERUSE

셀이 너무 잘아 노이즈처럼 보이거나, 경계선이 굵고 밝아 위에 놓인 글자와 경쟁한다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
주기	4s	3~8s	시드 점 이동 루프
셀 크기	48px	32~96px	평균 셀 지름
변화 주파수	0.3Hz	0.15~0.5	점이 도는 속도
선 두께	1.5px	1~2.5px	F2-F1 경계
선 불투명도	0.3	0.15~0.35	텍스트 대비

GSAP

const u = { t: 0 };
tl.to(u, { t: Math.PI * 2, duration: 4, ease: 'none', onUpdate: draw }, 0);
// GLSL: 격자 셀마다 hash(id)로 점을 두고 0.5 + 0.35*sin(t + hash*6.28)로 이동
// float e = F2 - F1; float line = 1.0 - smoothstep(0.0, 0.04, e);

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상> 배경에 보로노이 모션을 넣어줘. 평균 셀 지름 48px 격자에서 셀마다 해시로 시드 점을 정하고, 점이 위상 t에 따라 0.35셀 반경으로 도는 4초 루프를 만들어. 셀 경계는 F2-F1로 1.5px 흰 선, 불투명도 0.3으로 그리고 셀 내부는 어두운 남색에서 약하게 밝아지게 해.

Add an animated Voronoi to the background of <target>. On a grid with an average cell diameter of 48px, hash a seed point per cell and orbit it at 0.35 cell radius by phase t in a 4-second loop. Draw borders as F2-F1 white 1.5px lines at 0.3 opacity, with cell interiors shading softly from dark navy.

Codex

<파일>의 배경 캔버스에 voronoi 셰이더를 추가해. 셀 크기 48px, 점 위치 = 0.5+0.35*sin(t+hash(id)*6.28), 경계 = 1-smoothstep(0,0.04,F2-F1), 불투명도 0.3. t는 4초에 0→2π 선형. 0초와 4초 프레임이 같은지, 2초 프레임에서 셀이 이동하는지 캡처로 확인해.

Add a voronoi shader to the background canvas in <file>. Cell size 48px, point = 0.5+0.35*sin(t+hash(id)*6.28), border = 1-smoothstep(0,0.04,F2-F1), opacity 0.3. Tween t 0 to 2π linearly over 4 s. Capture 0 s and 4 s to confirm they match, and 2 s to confirm cells moved.