국경 빔

React용 애니메이션 테두리 빔 효과. 카드, 버튼, 입력, 검색 바 등 어떤 요소든 이동하는 글로우 애니메이션을 추가하는 가벼운 컴포넌트입니다.

설치

퀵 스타트

컴포넌트가 콘텐츠를 감싸고 애니메이션 빔 효과를 겹쳐줍니다. 첫 번째 자식 요소의 '경계 반경'을 자동으로 감지합니다.

사이즈

세 가지 내장 크기 프리셋이 글로우 강도와 애니메이션 스타일을 제어합니다:

색상 변형

네 가지 색상 팔레트가 제공됩니다:

'모노'를 제외한 모든 변형은 색조 이동 주기를 통해 애니메이션을 진행합니다.

주제

어두운 배경 또는 밝은 배경에 맞게 빔 색상을 조정:

힘

랩 콘텐츠에 영향을 주지 않고 효과의 전체 강도를 조절하세요:

'강도'는 '0'(보이지 않음)에서 '1'(전체 강도, 기본값)까지의 값을 받아들입니다.

재생 / 일시정지

부드러운 페이드 전환으로 애니메이션을 켜고 끄는 방법:

소품

소품	유형	기본	설명
'아이들'	'리액트노드'	—	마무리 완료
'크기'	'''sm' | 'MD' | '선'	''MD''	크기/유형 프리셋
'colorVariant'	''다채로운' | '단핵단' | '바다' | '노을'	''다채로운'	색상 팔레트
'테마'	''어둠' | '빛' | '오토''	''어둡다'	배경 각색
'힘'	'번호'	'1'	불투명도 효과 (0–1), 빔 층에만 영향을 미칩니다
'지속 시간'	'번호'	'1.96' / '2.4'	애니메이션 사이클 지속 시간 (초 단위)
'활성'	'불리언'	'참'	애니메이션이 재생되고 있는지?
'국경

---

🚀 가벼운 미리보기 모드: 페이지 속도를 위해 핵심 도입부만 번역되었습니다. 전체 코드는 원문 GitHub에서 확인하세요!