AnimateSplit

한 줄의 글이 단어씩, 또는 글자씩 도착합니다. AnimateAppear가 목록을 자식 하나씩 내려간다면, 이 컴포넌트는 문장을 따라 진행합니다.

import { AnimateSplit } from 'neba';

<AnimateSplit render={<h1 />}>한 단어씩 도착하는 문장</AnimateSplit>;

Props

Prop	타입	기본값	설명
text	string	—	쪼갤 문자열. children보다 우선합니다
by	'word' | 'character'	'word'	조각 하나의 단위. 여덟 단어짜리 제목은 상자 여덟 개, 글자 단위면 마흔여섯 개입니다
effect	NebaAnimation	'slide'	각 조각이 도착하는 효과. 라이브러리 공통 어휘입니다
from	'top' | 'right' | 'bottom' | 'left'	'bottom'	slide 조각이 들어오는 변
distance	number | string	'0.4em'	slide 조각의 이동 거리
locale	string	—	단어와 글자 경계를 찾을 언어. 일본어·태국어·중국어에서 단어 경계는 공백이 아닙니다
scale	number	—	`grow`나 `zoom` 조각이 시작하는 배율
angle	number	—	`rotate` 조각이 돌기 시작하는 각도(도)
side	'top' | 'right' | 'bottom' | 'left'	—	`reveal` 조각이 닦여 나오는 변
render	useRender.RenderProp	—	div 대신 다른 요소로 렌더링합니다 (render={<h1 />}). Base UI의 render prop 그대로
children	ReactNode	—	쪼갤 텍스트

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

쪼개지는 것은 텍스트뿐입니다. 문자열이나 text를 넘기세요. children 안의 element는 그 안의 단어만 기여하고 markup은 전달되지 않습니다. 링크의 절반을 애니메이션할 정직한 방법은 없기 때문입니다.

각 조각은 inline-block입니다. inline 상자는 위로 옮길 수 없기 때문입니다. 그리고 각 조각이 뒤따르던 공백을 함께 가지므로, 줄은 여전히 단어 사이에서 나뉘고 공백 안에서 끊기지 않습니다.

예시

by와 effect

by는 조각 하나가 무엇인지입니다. 기본값은 word인데, 여덟 단어짜리 제목은 상자 여덟 개이고 같은 제목을 글자로 쪼개면 마흔여섯 개이기 때문입니다. effect는 각 조각이 어떤 애니메이션으로 도착하는지이며 라이브러리 공통 어휘를 씁니다. 그래서 쪼개진 제목의 fade와 AnimateFade는 같은 fade입니다.

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

export default function AnimateSplitBy() {
  const [run, setRun] = useState(0);

  return (
    <div className="flex w-full flex-col gap-4">
      <Button variant="outline" size="sm" onClick={() => setRun((n) => n + 1)}>
        Play again
      </Button>

      <div key={run} className="flex flex-col gap-5">
        <div className="flex flex-col gap-1">
          <Typography level="caption" color="secondary">
            by=&quot;word&quot; — the default
          </Typography>
          <AnimateSplit className="text-lg text-(--neba-fg)">
            Eight words is eight boxes on the page.
          </AnimateSplit>
        </div>

        <div className="flex flex-col gap-1">
          <Typography level="caption" color="secondary">
            by=&quot;character&quot; · effect=&quot;grow&quot;
          </Typography>
          <AnimateSplit
            by="character"
            effect="grow"
            stagger={28}
            className="text-lg text-(--neba-fg)"
          >
            Letter by letter
          </AnimateSplit>
        </div>
      </div>
    </div>
  );
}

stagger

stagger는 한 조각 뒤 다음 조각이 시작하기까지의 간격이고, 이 효과를 이루는 것이 바로 그것입니다. 기본값은 45ms. durationStep은 뒤의 조각일수록 재생 시간을 늘리고, reverse는 줄을 끝에서부터 실행합니다.

locale

경계를 찾을 언어입니다. 일본어·태국어·중국어에서 단어 경계는 공백이 아니고, 그런 글을 공백으로 쪼개면 문장 전체를 담은 조각 하나가 나옵니다.

접근성

• 문장 전체가 스크린 리더를 위해 잘린 상자 안에 한 번 들어 있고, 조각들은 접근성 트리에서 숨겨집니다. 그러지 않으면 문장이 마흔여섯 개의 낱글자 목록으로 읽히고 페이지 내 찾기로는 아무것도 걸리지 않습니다.
• 모션 감소 설정에서는 애니메이션이 꺼지고 줄이 통째로 그려집니다.