배경

Metaball Field

움직이는 소스들의 역제곱 필드를 합산해 임계값에서 매끄럽게 표면을 만드는 WebGL 메타볼 배경. 인접 방울의 필드가 겹치면 병합되고 멀어지면 분열해 젤리 방울이 합쳐지고 갈라지는 효과를 낸다. 필드 깊이를 2-스톱 색 램프에 매핑하고 코어를 발광시켜 젤리 질감을 강화한다.

분류: 배경
난이도: medium
변형: TS-TW

설치

npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/MetaballField-TS-TW

Props

이름	타입	기본값	설명
colorA	string	#C084FC	방울 색 A (램프 시작, 필드가 얕은 가장자리).
colorB	string	#EC4899	방울 색 B (램프 끝, 필드가 깊은 코어).
background	string	#08060E	근-블랙 배경(방울 뒤).
count	number	7	방울 개수(1~12). 각 방울은 서로 다른 궤도로 떠다닌다.
ballSize	number	0.42	방울 반지름 배율(필드 세기). 클수록 방울이 크고 잘 합쳐진다.
speed	number	0.6	애니메이션 속도.
smoothness	number	0.35	표면 부드러움(엣지 소프트니스). 작을수록 경계가 선명.
className	string	undefined	컨테이너에 적용할 추가 CSS 클래스.