배경

Flow Bands

부드러운 리본 띠들이 화면을 가로질러 유영하는 Canvas 2D 배경. 각 리본은 사인 3파 합성으로 만든 중심선을 두께만큼 위/아래로 오프셋한 두 가장자리 곡선 사이를 채운 띠 형태이며, quadraticCurveTo(2차 베지어)로 곡선을 부드럽게 잇는다. 리본마다 위상차·주파수·흐름 방향을 달리해 다중 레이어로 겹쳐 흐른다.

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

설치

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

Props

이름	타입	기본값	설명
colorA	string	#C084FC	리본 색상 램프 시작(뒤 레이어).
colorB	string	#EC4899	리본 색상 램프 끝(앞 레이어).
background	string	#08060E	배경(근-블랙) 색상.
count	number	5	겹쳐 유영하는 리본 수.
thickness	number	0.11	리본 두께(컨테이너 높이 대비 비율, 0~1).
amplitude	number	0.2	세로 유영 진폭(컨테이너 높이 대비 비율, 0~1).
speed	number	1.0	흐름 속도 배율.
opacity	number	0.55	리본 채움 불투명도(0~1).
className	string	undefined	캔버스에 전달할 추가 CSS 클래스.