배경
Flow Field
파티clES가 fbm 노이즈 기반 흐름장(벡터필드)을 따라 유영하며 스트림라인 궤적을 남기는 Canvas 2D 배경. fbm 스칼라를 각도로 매핑해 흐름 방향을 만들고, 낮은 알파 페이드로 잔상 트레일을 구현했다. 흐름장은 시간에 따라 천천히 변형된다.
- 분류
- 배경
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/FlowField-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| colorA | string | #C084FC | 궤적 시작 색(속도가 느린/기본 파티클). Vivid Kit 기본 보라. |
| colorB | string | #EC4899 | 궤적 종료 색(속도가 빠른 파티클). Vivid Kit 기본 핑크. |
| background | string | #08060E | 배경(근-블랙) 색상. |
| density | number | 1 | 파티클 개수 계수(면적당 기준 개수에 곱함). 높을수록 촘촘. |
| scale | number | 1 | 흐름장 노이즈 결의 촘촘함. 클수록 소용돌이가 잘게 쪼개짐. |
| speed | number | 1 | 파티클 이동 속도 계수. |
| flowShift | number | 1 | 흐름장이 시간에 따라 변형되는 속도(0이면 정적 필드). |
| fade | number | 0.92 | 궤적 잔상 유지도(0~1). 1에 가까울수록 트레일이 길게 남음. |
| lineWidth | number | 1.1 | 파티클 선 굵기(px). |
| className | string | undefined | 추가 CSS 클래스. |