AnimateTyping

글자가 하나씩 나타나는 효과입니다. 문자열 전체는 첫 프레임부터 스크린 리더를 위해 문서 안에 있고, 움직이는 것은 스크린 리더에게 숨겨진 사본입니다.

import { AnimateTyping } from 'neba';

<AnimateTyping speed={18}>디자인 시스템이 아니라 화면을 배포하세요.</AnimateTyping>;

Props

Prop	타입	기본값	설명
text	string	—	타이핑할 문자열. children보다 우선합니다
speed	number	24	초당 글자 수
hold	number	1400	다 쓴 뒤 반복 전까지 머무는 시간(ms)
erase	boolean	false	반복 전에 한 번에 지우지 않고 한 글자씩 지웁니다
eraseSpeed	number	—	지우는 속도(초당 글자 수). 기본값은 speed의 두 배
caret	boolean	true	글자 뒤의 커서
caretChar	ReactNode	'|'	커서로 그릴 것
duration공통	number	—	한 번 재생되는 시간(ms)
delay공통	number	0	시작 전 대기(ms)
easing	string	—	CSS 이징 곡선. 기본값은 라이브러리의 곡선
repeat공통	number | 'infinite'	1	반복 횟수
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 규약에 있습니다.

타이핑되는 것은 텍스트뿐입니다. 문자열 하나 또는 여럿을 넘기세요. 자식 중 요소가 있으면 그 안의 글자만 쓰이고 마크업은 반영되지 않습니다. 링크의 절반을 정직하게 드러낼 방법이 없기 때문입니다. text는 같은 것을 prop으로 받는 것이고, 둘 다 주면 이쪽이 이깁니다.

예시

speed

초당 글자 수입니다. 시간이 아니라 속도인 이유는, 긴 줄과 짧은 줄이 같은 시간이 아니라 같은 속도로 쓰여야 하기 때문입니다. duration도 받으며, 그 경우에는 문자열 전체를 쓰는 데 걸리는 시간을 뜻합니다.

import { AnimateTyping } from 'neba';

export default function AnimateTypingSpeed() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-2 font-mono text-sm">
      {[8, 20, 60].map((speed) => (
        <AnimateTyping key={speed} speed={speed} caretChar="▌">
          {`speed=${speed} — the same line, three paces`}
        </AnimateTyping>
      ))}
    </div>
  );
}

repeat, hold, erase

repeat은 몇 번 반복하는지, hold는 다 쓴 글이 다음 반복까지 얼마나 머무는지입니다. erase 없이 반복하면 한 프레임에 지워지는데, 교체되는 줄에는 그쪽이 맞습니다. 켜면 eraseSpeed로 한 글자씩 지웁니다. 기본값은 speed의 두 배이고, 사람이 실제로 그렇게 합니다.

import { AnimateTyping, Typography } from 'neba';

export default function AnimateTypingLoop() {
  return (
    <Typography level="h4" render={<div />}>
      <span className="text-(--neba-muted-fg)">A component library for </span>
      <AnimateTyping
        className="inline-block align-baseline text-(--neba-primary-accent)"
        text="dashboards"
        repeat="infinite"
        erase
        hold={1200}
        speed={14}
      />
    </Typography>
  );
}

delay

시작 전 대기 시간(밀리초)입니다. 줄마다 delay를 주면 여러 개의 타자기가 하나의 기록이 됩니다.

import { AnimateTyping, Box } from 'neba';

const LINES = ['$ npm install neba', '$ npm run dev', '  ready in 312 ms'];

export default function AnimateTypingTerminal() {
  return (
    <Box variant="solid" className="w-full max-w-sm font-mono text-xs">
      <div className="flex flex-col gap-1">
        {LINES.map((line, index) => (
          <AnimateTyping
            key={line}
            speed={26}
            delay={index * 900}
            caret={index === LINES.length - 1}
          >
            {line}
          </AnimateTyping>
        ))}
      </div>
    </Box>
  );
}

caret

글자 뒤의 커서로, 기본으로 켜져 있습니다. caretChar가 그 모양을 정합니다. ▌, _, 무엇이든 됩니다.

<AnimateTyping caretChar="▌" caret={false}>
  커서 없음
</AnimateTyping>

접근성

• 전체 텍스트는 첫 프레임부터 잘린 상자 안에 들어 있고, 움직이는 사본은 aria-hidden입니다. 스크린 리더는 그 줄을 한 번 읽고 공연을 끝까지 지켜보지 않습니다.
• 축소된 모션 설정에서는 문자열 전체가 즉시 보이고 타이핑은 일어나지 않습니다.
• 상자의 크기는 지금까지 도착한 글자로 정해지지 않으므로, 주변 텍스트가 매 프레임 다시 배치되지 않습니다.
• 글자는 code point가 아니라 grapheme 단위로 셉니다. 한도 👩‍👩‍👧도 세 걸음이나 일곱 걸음이 아니라 한 걸음에 도착합니다.