AnimateAppear

여러 개가 하나씩 차례로 제자리에 내려앉는 효과입니다. 자식마다 같은 짧은 fade와 미끄러짐이 자기 순서만큼 늦춰져 실행되므로, 효과가 개별 항목이 아니라 묶음 전체에 속합니다.

import { AnimateAppear } from 'neba';

<AnimateAppear className="flex flex-col gap-2">
  <Card title="디자인 리뷰">목요일 14:00</Card>
  <Card title="스프린트 계획">금요일 10:00</Card>
</AnimateAppear>;

Props

Prop	타입	기본값	설명
from공통	'top' | 'right' | 'bottom' | 'left'	'bottom'	각 자식이 밀려 들어오는 변
distance	number | string	'0.75rem'	각 자식의 이동 거리. 화면 밖에서 들어오는 것이 아니라 제자리에 내려앉는 정도로 짧습니다
fade	boolean	true	내려앉으면서 함께 페이드인합니다
stagger공통	number	80	한 자식 뒤 다음 자식이 시작하기까지의 간격(ms). 0이면 상자 자체가 재생되고, 그보다 크면 효과가 자식 하나하나에게 넘어갑니다
durationStep공통	number	0	자식마다 재생 시간에 더해지는 값(ms). 음수면 뒤로 갈수록 빨라지며, 0 아래로는 내려가지 않습니다
reverse공통	boolean	false	마지막 자식부터 실행합니다. 순서만 뒤집히고 각 자식은 그대로 재생됩니다
duration공통	number	420	한 번 재생되는 시간(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={<ul />}). Base UI의 render prop 그대로
children	ReactNode	—	하나씩 나타나는 것들. 각 자식이 한 걸음입니다

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

애니메이션은 자식을 감싸는 래퍼가 아니라 자식 자신에게 쓰입니다. 그래서 <li>의 나열은 그대로 <li>의 나열로 남고, grid의 셀은 그대로 직계 자식으로 남습니다. 글자만 있는 자식만은 쓸 요소가 없으므로 <span>으로 감쌉니다.

예시

stagger

자식 하나와 다음 자식 사이의 간격(밀리초)입니다. 이 효과 자체이며, 나머지는 자식 하나가 하는 일입니다.

간격은 자식마다 매겨지므로 무엇을 넘기는지가 중요합니다. 자식 여덟은 여덟 걸음이고, 여덟 개를 담은 자식 하나는 한 걸음입니다. 목록의 일부를 효과에서 빼는 방법도 그것입니다. 묶으면 됩니다.

import { useState } from 'react';
import { AnimateAppear, Button, Chip } from 'neba';

const TAGS = ['design', 'frontend', 'infra', 'docs', 'billing', 'search'];

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

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

      <AnimateAppear key={run} stagger={140} className="flex flex-wrap justify-center gap-2">
        {TAGS.map((tag) => (
          <Chip key={tag}>{tag}</Chip>
        ))}
      </AnimateAppear>
    </div>
  );
}

from, distance, reverse

from은 각 자식이 밀려 들어오는 변이고 distance는 이동 거리입니다. 짧은 것은 의도한 것으로, 이것은 화면 밖에서의 등장이 아니라 제자리에 내려앉는 움직임이기 때문입니다. reverse는 마지막 자식부터 실행합니다.

import { useState } from 'react';
import { AnimateAppear, Button, Chip } from 'neba';

const STEPS = ['One', 'Two', 'Three', 'Four'];

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

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

      <AnimateAppear key={`f-${run}`} from="left" className="flex gap-2">
        {STEPS.map((step) => (
          <Chip key={step} color="info">
            {step}
          </Chip>
        ))}
      </AnimateAppear>

      <AnimateAppear key={`r-${run}`} from="left" reverse className="flex gap-2">
        {STEPS.map((step) => (
          <Chip key={step} color="secondary">
            {step}
          </Chip>
        ))}
      </AnimateAppear>
    </div>
  );
}

trigger="visible"

가장 자연스러운 조합입니다. 독자가 다다르는 순간 한 번 내려앉는 내용 묶음. 전체가 루트의 observer 하나를 공유하므로 마흔 개짜리 목록도 observer는 하나입니다.

import { AnimateAppear, Card } from 'neba';

const CARDS = [
  { title: 'Ingest', body: 'Events arrive and are queued.' },
  { title: 'Enrich', body: 'Each event is matched to an account.' },
  { title: 'Store', body: 'Everything lands in the warehouse.' }
];

export default function AnimateAppearVisible() {
  return (
    <div className="h-60 w-full max-w-xs overflow-y-auto">
      <div className="flex h-40 items-center justify-center text-sm text-(--neba-muted-fg)">
        Scroll down
      </div>

      <AnimateAppear trigger="visible" stagger={140} className="flex flex-col gap-2">
        {CARDS.map((card) => (
          <Card key={card.title} title={card.title} size="sm">
            {card.body}
          </Card>
        ))}
      </AnimateAppear>

      <div className="h-40" />
    </div>
  );
}

접근성

• 축소된 모션 설정에서는 애니메이션이 통째로 꺼지고 목록 전체가 그냥 거기 있습니다.
• 래퍼는 role도 이름도 더하지 않습니다. 목록이 정말 목록이라면 render={<ul />}처럼 진짜 요소를 주세요.