AnimateScramble

노이즈를 뚫고 글자가 하나씩 자리를 잡습니다. AnimateTyping의 형제입니다. 타자기는 빈 줄에서 문자열을 드러내고, 이것은 이미 제 길이인 줄에서 문자열을 해석해 냅니다.

import { AnimateScramble } from 'neba';

<AnimateScramble text="RESOLVING SIGNAL" />;

Props

Prop	타입	기본값	설명
text	string	—	정착할 문자열. children보다 우선합니다
speed	number	18	초당 정착하는 글자 수. duration을 주면 그쪽이 이깁니다
tick	number	45	아직 정착하지 않은 글자를 다시 그리는 주기(ms). 30 아래로 가면 글자로 읽히지 않습니다
characters	string	—	노이즈를 뽑아 올 글자 풀. 높이가 들쭉날쭉한 글자를 섞으면 줄이 튑니다
locale	string	—	글자 경계를 찾을 언어
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	있는 자리에 붙들어 둡니다
render	useRender.RenderProp	—	div 대신 다른 요소로 렌더링합니다 (render={<h2 />}). Base UI의 render prop 그대로
children	ReactNode	—	정착할 텍스트

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

상자 크기가 한 번도 변하지 않습니다. AnimateTyping 대신 이 컴포넌트를 고르는 이유가 여기에 있습니다. 주변이 재배치되지 않고, 제목이 내려앉으면서 페이지를 밀어내지 않습니다.

공백은 절대 섞이지 않습니다. 공백이 글자로 깜빡였다 돌아오면 단어가 움직인 것처럼 읽히는데, 이 효과는 바로 그것을 피하려고 있는 것입니다.

예시

speed, duration, tick

speed는 초당 몇 글자가 정착하는지입니다. duration은 전체 실행 시간이고 주어지면 그쪽이 이깁니다. 글자당 지연이 거기서 나오므로 같은 것을 두 번 물어보지 않습니다. tick은 아직 정착하지 않은 글자를 다시 그리는 주기인데, 30ms 아래로 내려가면 글자로 읽히지 않습니다.

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

export default function AnimateScramblePool() {
  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)}>
        Run again
      </Button>

      <div key={run} className="flex flex-col gap-5">
        <div className="flex flex-col gap-1">
          <Typography level="caption" color="secondary">
            speed=10 — slower
          </Typography>
          <AnimateScramble
            text="DECODING"
            speed={10}
            className="font-mono text-lg text-(--neba-fg)"
          />
        </div>

        <div className="flex flex-col gap-1">
          <Typography level="caption" color="secondary">
            characters=&quot;01&quot;
          </Typography>
          <AnimateScramble
            text="0100 1110 0100 0101"
            characters="01"
            className="font-mono text-lg text-(--neba-fg)"
          />
        </div>
      </div>
    </div>
  );
}

characters

정착하지 않은 글자를 뽑아 올 풀입니다. 높이를 하나로 맞추세요. 크고 작은 글자가 섞인 풀은 정착하는 동안 줄을 튀게 만듭니다.

접근성

• 완성된 문자열은 첫 프레임부터 스크린 리더를 위해 잘린 상자 안에 있고, 노이즈는 aria-hidden인 사본입니다.
• 모션 감소 설정에서는 곧바로 텍스트를 보여 줍니다.
• 독자가 빨리 반응해야 하는 것에는 쓰지 마세요. 끝나야만 읽힙니다.