배경
Bubbles
거품이 아래에서 위로 떠오르며 좌우로 흔들리는 Canvas 2D 배경. 반투명 원에 방사형 유리막 그라데이션, 좌상단 스페큘러 하이라이트, 우하단 굴절 아크를 더해 비눗방울 굴절광을 표현한다. 크기별 부력·색·흔들림 다양화, 상단 이탈 시 하단 리스폰으로 무한 흐름.
- 분류
- 배경
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/Bubbles-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| colorA | string | #C084FC | 거품 그라데이션 시작 색(작은 거품 쪽). Vivid Kit 보라. |
| colorB | string | #EC4899 | 거품 그라데이션 종료 색(큰 거품 쪽). Vivid Kit 핑크. |
| background | string | #08060E | 배경 색(근-블랙). |
| bubbleCount | number | 60 | 동시 표시 거품 개수. |
| speed | number | 1 | 상승 속도 배율(클수록 빠르게 떠오름). |
| wobble | number | 1 | 좌우 사인 흔들림 진폭 배율. |
| minRadius | number | 6 | 거품 최소 반지름(px). |
| maxRadius | number | 34 | 거품 최대 반지름(px). |
| className | string | undefined | 캔버스에 전달할 추가 CSS 클래스. |