SpotlightText

커서 주변의 글자만 밝아지고 나머지는 어두워지는 스포트라이트 효과. 다크 배경에서 가장 인상적.

라이브 미리보기

💡 위 박스 안에서 마우스를 움직여보세요. 커서 주변 글자만 밝아집니다.

텍스트반경 (140px)Dim opacity (0.15)글자 크기 (36px)굵기 (800)베이스 색 (dim)

하이라이트 색

기본 (다크 배경)

좁은 반경 (80px)

컬러 하이라이트 (teal)

강한 dim (거의 안 보임)

사용

import { SpotlightText } from '@baneung-pack/effect';

// 다크 배경에서 사용 권장
<SpotlightText text="HOVER ME" fontSize={32} color="#ffffff" fontWeight={800} />

// 컬러 하이라이트
<SpotlightText
  text="BANEUNG"
  highlightColor="#5BA8A0"
  color="#ffffff"
/>

// 강한 dim — 거의 안 보이다가 커서 주변만 빛남
<SpotlightText text="DARK MODE" dimOpacity={0.05} highlightColor="#FFD700" />

API

SpotlightTextProps

Property	Type	기본값	설명
text	string	—	표시할 텍스트 (필수).
radius	number	120	스포트라이트 반경 (px).
dimOpacity	number	0.15	어두운 영역 투명도 (0~1).
highlightColor	string	color or currentColor	스포트라이트 안 글자 색.
fontSize	string \| number	—	폰트 크기.
fontWeight	CSSProperties['fontWeight']	—	폰트 굵기.
color	string	currentColor	베이스(dim) 텍스트 색.
className	string	—	추가 클래스.
style	CSSProperties	—	인라인 style.