VariableFontHover

마우스 커서가 지나가는 글자만 굵어지는 효과. Pretendard Variable / Inter Variable 등 가변 폰트와 함께 쓸 때 부드럽게 보간됨.

라이브 미리보기

💡 위 박스 안에서 마우스를 천천히 움직여보세요. 커서 주변 글자가 굵어집니다.

텍스트최소 굵기 (300)최대 굵기 (900)반경 (100px)전환 (200ms)글자 크기 (48px)색상

기본 (300 ↔ 900)

좁은 반경 (40px)

얇은 → 중간 (100 ↔ 600)

빠른 전환 (50ms)

사용

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

// 가변 폰트(Pretendard Variable / Inter Variable)와 함께 사용 권장
<VariableFontHover
  text="HOVER ME"
  minWeight={300}
  maxWeight={900}
  radius={80}
  fontFamily='"Pretendard Variable", system-ui'
/>

API

VariableFontHoverProps

Property	Type	기본값	설명
text	string	—	표시할 텍스트 (필수).
minWeight	number	300	기본/멀리 있을 때 굵기.
maxWeight	number	900	커서 바로 위 굵기.
radius	number	80	영향 반경 (px).
transitionMs	number	220	font-weight 보간 시간 (ms).
fontSize	string \| number	—	폰트 크기.
color	string	—	텍스트 색.
fontFamily	string	—	가변 폰트 family 권장 (예: "Pretendard Variable").
className	string	—	추가 클래스.
style	CSSProperties	—	인라인 style.