Border Beam

Border Beam은 React, SwiftUI, React Native 환경에서 카드나 컨테이너의 테두리에 움직이는 빛 또는 컬러 빔을 적용할 수 있는 UI 애니메이션 컴포넌트 라이브러리입니다.

다양한 플랫폼 지원
- React 18 이상을 지원하며 npm install border-beam으로 설치할 수 있습니다.
- SwiftUI는 iOS 17·macOS 14 이상을 지원하는 Metal 셰이더 기반 포트를 제공합니다.
- React Native는 Skia와 Reanimated 기반의 Expo 호환 베타 포트를 제공하며, 현재 iOS에서 검증됐고 Android는 실험 단계입니다.
애니메이션 스타일
- 테두리를 따라 빛이 이동하는 Rotate 모드와 호흡하듯 밝기가 변하는 Pulse 모드를 지원합니다.
세부 커스터마이징
- 크기와 유형: Medium, Small, Line, Pulse Inner, Pulse Outside 프리셋 제공
- 컬러 테마: Colorful, Mono, Ocean, Sunset 팔레트 제공
- 강도: strength 값을 이용해 빛의 투명도와 세기를 0–1 범위에서 조절
- 추가 설정: 테마, 재생 시간, 밝기, 채도, 색조 범위와 활성 상태 조절