BorderBeamExample

active
끄면 효과가 정지·숨김 처리됩니다
BASIC
기본 혜성 광선
꼬리가 페이드되는 광선이 얇은 track 테두리 위를 순환합니다
BEAMLENGTH · COLORS
긴 광선 (beamLength 0.6)
광선 길이 · 속도 · 색상 조절
전체 링 그라디언트 (beamLength 1)
알파 포함 colors 배열을 그대로 사용
reverse · 짧은 광선 · pill
GLOW PULSE
강한 글로우 펄스
glow 객체로 폭·blur·펄스 세밀 제어
글로우 없음 (glow=false)
선명한 광선만 표시 — 가장 가벼운 구성
<ZSBorderBeam colorFrom="#06B6D4" colorTo="#8B5CF6" beamLength={0.35} // 광선이 둘레에서 차지하는 비율 trackColor="none" // 기본 테두리 생략 glow={0.6} // 0~1 강도, false면 끔 duration={5000} borderRadius={20} > <Card /> </ZSBorderBeam> // 알파 포함 팔레트로 전체 링 구성 <ZSBorderBeam colors={['#ffb96a20', '#ffd17b', '#ffaa9033']} beamLength={1} />