AnimateHeadline

한 줄이 위의 줄을 밀어내며 교체되는 효과입니다. 모든 줄이 같은 grid 칸에 놓이므로 상자는 첫 프레임부터 가장 긴 줄만큼 높고, 릴이 도는 동안 크기가 변하지 않습니다.

import { AnimateHeadline } from 'neba';

<AnimateHeadline interval={2000}>
  <span>빠른</span>
  <span>조용한</span>
  <span>당신의</span>
</AnimateHeadline>;

Props

Prop	타입	기본값	설명
interval	number	2600	한 줄이 머무는 시간(ms). 줄이 도착한 순간부터 세므로 읽는 시간입니다
index	number	—	지금 보이는 줄. 직접 제어할 때 씁니다
defaultIndex	number	0	제어하지 않을 때 시작하는 줄
onIndexChange	(index: number) => void	—	새 줄이 올라왔을 때
loop	boolean	true	마지막 줄 다음에 처음으로 돌아갑니다. 끄면 마지막 줄에서 멈춥니다
rise	number | string	'100%'	한 줄이 올라오거나 나가며 이동하는 거리. 100%는 한 줄의 높이입니다
duration공통	number	480	한 번 재생되는 시간(ms)
delay공통	number	0	시작 전 대기(ms)
easing	string	—	CSS 이징 곡선. 기본값은 라이브러리의 곡선
repeat공통	number | 'infinite'	'infinite'	반복 횟수
alternate공통	boolean	false	한 번 걸러 거꾸로 재생합니다. 반복이 처음으로 튀지 않고 되돌아옵니다
trigger공통	'mount' | 'visible' | 'hover' | 'manual'	'mount'	무엇이 재생을 시작하는지. visible은 화면에 들어올 때, hover는 포인터가 올라올 때(포커스 포함), manual은 play가 정합니다
play	boolean	—	trigger가 manual일 때 재생합니다. false → true 될 때마다 처음부터 다시 시작합니다
once공통	boolean	true	trigger가 visible일 때 처음 한 번만 재생할지. 끄면 화면에 들어올 때마다 다시 재생됩니다
threshold공통	number	0.2	trigger가 visible일 때 화면에 얼마나 들어와야 하는지, 0에서 1 사이
paused공통	boolean	false	있는 자리에 붙들어 둡니다
children	ReactNode	—	읽히는 순서대로의 줄들

나머지 <div> 속성은 모두 루트로 전달됩니다. 모든 Animate*가 공유하는 설정은 Prop 규약에 있습니다.

예시

interval과 duration

interval은 한 줄이 머무는 시간이며, 주기의 시작이 아니라 그 줄이 도착한 순간부터 셉니다. 그래서 전환 자체의 길이인 duration을 늘려도 읽는 시간이 조용히 깎이지 않습니다.

import { AnimateHeadline, Chip } from 'neba';

const STORIES = [
  'Markets close higher for the third day running',
  'Storm warning lifted across the north coast',
  'Transit strike suspended pending talks'
];

export default function AnimateHeadlineBreaking() {
  return (
    <div className="flex w-full max-w-sm items-center gap-3">
      <Chip color="danger" variant="solid" size="sm">
        Live
      </Chip>

      <AnimateHeadline interval={2200} duration={420} className="min-w-0 flex-1 text-sm">
        {STORIES.map((story) => (
          <span key={story} className="block truncate">
            {story}
          </span>
        ))}
      </AnimateHeadline>
    </div>
  );
}

제어하기

index를 넘기면 릴은 스스로 돌지 않고, 넘긴 값에 따라 줄을 바꿉니다. 폼의 단계나 tab, 직접 만든 타이머가 그 값을 정합니다. onIndexChange는 방금 올라온 줄을 알립니다.

import { useState } from 'react';
import { AnimateHeadline, Button, ButtonGroup, Typography } from 'neba';

const STEPS = ['Choose a plan', 'Add your details', 'Confirm and pay'];

export default function AnimateHeadlineControlled() {
  const [step, setStep] = useState(0);

  return (
    <div className="flex flex-col items-center gap-4">
      <AnimateHeadline index={step} className="text-lg font-semibold">
        {STEPS.map((label) => (
          <span key={label}>{label}</span>
        ))}
      </AnimateHeadline>

      <ButtonGroup size="sm" variant="outline">
        <Button onClick={() => setStep((index) => Math.max(index - 1, 0))}>Back</Button>
        <Button onClick={() => setStep((index) => Math.min(index + 1, STEPS.length - 1))}>
          Next
        </Button>
      </ButtonGroup>

      <Typography level="caption">
        Step {step + 1} of {STEPS.length}
      </Typography>
    </div>
  );
}

loop와 rise

loop를 끄면 릴은 마지막 줄에서 멈추고 거기 머뭅니다. rise는 한 줄이 올라오거나 나가며 이동하는 거리입니다. 기본값 '100%'는 한 줄 자신의 높이이고, 더 작은 값은 교체가 아니라 살짝 밀어 올리는 정도가 됩니다.

<AnimateHeadline loop={false} rise="0.4rem">
  <span>업로드 중…</span>
  <span>처리 중…</span>
  <span>완료</span>
</AnimateHeadline>

접근성

• 지금 보이는 줄만 접근성 트리에 있습니다. 나머지는 visibility: hidden이라 자리는 지키면서 읽는 순서에는 들어가지 않습니다.
• 릴이 돌 때 아무것도 알리지 않습니다. 2초마다 바뀌는 live region은 쓸 수 없으므로 의도한 동작입니다. 그래서 이 컴포넌트는 어느 것이어도 상관없는 문구 묶음에 쓰고, 독자가 반드시 봐야 하는 내용에는 쓰지 마세요.
• 축소된 모션 설정에서는 전환이 사라집니다. 줄은 여전히 바뀌지만 미끄러지는 대신 그냥 나타납니다.