@baneung-pack

RotatingWords

고정 문구 뒤의 단어만 위로 슬라이드 + 페이드로 순환. 히어로 카피의 "We build [apps]" 같은 패턴.

라이브 미리보기

We build apps

기본 (느린 전환)

We build apps

빠른 전환 + brand navy

Built for React

1회 모드 (마지막에서 정지)

시작합니다

긴 문구 (자동 폭 확보)

우리는 실용적인 솔루션을 만듭니다

사용

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

<span>
  We build{' '}
  <RotatingWords
    words={['apps', 'agents', 'websites']}
    intervalMs={2000}
    transitionMs={400}
    fontSize={24}
    color="#3B716C"
    fontWeight={700}
  />
</span>

API

RotatingWordsProps

PropertyType기본값설명
wordsstring[]—순환할 단어 배열 (필수, 최소 1개).
intervalMsnumber2000단어 하나가 보이는 시간 (ms).
transitionMsnumber400전환 애니메이션 시간 (ms).
loopbooleantruetrue면 무한 반복. false면 마지막에서 정지.
fontSizestring | number—폰트 크기. number는 px.
fontWeightCSSProperties['fontWeight']—폰트 굵기.
colorstring—텍스트 색.
classNamestring—추가 클래스.
styleCSSProperties—인라인 style (위 props보다 우선).