AnimateFade

불투명도만으로 나타나거나 사라지는 효과입니다. 이 묶음에서 가장 단순하고 가장 먼저 손이 가야 할 효과로, 아무것도 움직이지 않으므로 레이아웃이 다시 계산되지 않고 글자가 다시 그려지지도 않습니다.

import { AnimateFade } from 'neba';

<AnimateFade>
  <Card title="배포 완료">서비스 두 개가 재시작되었고 오류는 없습니다.</Card>
</AnimateFade>;

Props

Prop	타입	기본값	설명
from	number	0	시작 불투명도, 0에서 1 사이
stagger공통	number	0	한 자식 뒤 다음 자식이 시작하기까지의 간격(ms). 0이면 상자 자체가 재생되고, 그보다 크면 효과가 자식 하나하나에게 넘어갑니다
durationStep공통	number	0	자식마다 재생 시간에 더해지는 값(ms). 음수면 뒤로 갈수록 빨라지며, 0 아래로는 내려가지 않습니다
reverse공통	boolean	false	마지막 자식부터 실행합니다. 순서만 뒤집히고 각 자식은 그대로 재생됩니다
mode공통	'in' | 'out'	'in'	들어오는지 나가는지. out은 같은 애니메이션을 거꾸로 재생하고 그 자리에서 멈춥니다
duration공통	number	320	한 번 재생되는 시간(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={<section />}). Base UI의 render prop 그대로
children	ReactNode	—	나타나거나 사라지는 것

나머지 <div> 속성은 모두 루트로 전달됩니다.

모든 Animate*가 공유하는 설정(duration, delay, easing, repeat, alternate, trigger, play, once, threshold, paused)은 어디서나 같은 뜻이며 Prop 규약에 정리되어 있습니다.

예시

duration과 delay

둘 다 밀리초입니다. delay는 여러 개의 fade를 하나의 순서로 만드는 것이고, 그 대상이 목록일 때 대신 해 주는 것이 AnimateAppear입니다.

import { AnimateFade, Chip } from 'neba';

export default function AnimateFadeTiming() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-2">
      {[0, 200, 400, 600].map((delay) => (
        <AnimateFade key={delay} delay={delay} duration={500}>
          <Chip>{delay}ms</Chip>
        </AnimateFade>
      ))}
    </div>
  );
}

trigger

mount가 기본값이고 아무것도 요구하지 않습니다. visible은 화면에 들어올 때까지 기다립니다. once를 끄지 않는 한 한 번만이고, threshold가 얼마나 들어와야 하는지를 정합니다. hover는 포인터가 올라가 있는 동안 재생하며 들어올 때마다 처음부터 다시 시작하고, 키보드 focus도 포인터로 셉니다. manual은 play가 말하기 전까지 아무것도 하지 않으며, false → true가 될 때마다 다시 시작합니다.

import { useState } from 'react';
import { AnimateFade, Box, Switch, Typography } from 'neba';

export default function AnimateFadeTriggers() {
  const [play, setPlay] = useState(false);

  return (
    <div className="flex flex-col items-center gap-4">
      <div className="flex flex-wrap items-center justify-center gap-4">
        <AnimateFade trigger="hover" duration={400}>
          <Box size="sm">
            <Typography level="caption">Hover me</Typography>
          </Box>
        </AnimateFade>

        <AnimateFade trigger="visible" duration={600}>
          <Box size="sm">
            <Typography level="caption">On scrolling into view</Typography>
          </Box>
        </AnimateFade>
      </div>

      <Switch checked={play} onCheckedChange={setPlay} label="Play the manual one" size="sm" />

      <AnimateFade trigger="manual" play={play} duration={500}>
        <Box size="sm">
          <Typography level="caption">Driven by the switch</Typography>
        </Box>
      </AnimateFade>
    </div>
  );
}

mode

out은 같은 애니메이션을 거꾸로 재생하고 그 자리에 붙들어 둡니다. 사라진 요소는 애니메이션이 끝났다고 해서 다시 튀어나오지 않습니다. alternate와 함께 쓰면 처음으로 튀는 대신 되돌아오므로, 반복되는 fade가 맥동이 됩니다.

import { AnimateFade, Chip } from 'neba';

export default function AnimateFadeMode() {
  return (
    <div className="flex items-center gap-3">
      <AnimateFade duration={1200} repeat="infinite" alternate>
        <Chip color="success">in</Chip>
      </AnimateFade>

      <AnimateFade mode="out" duration={1200} repeat="infinite" alternate>
        <Chip color="danger">out</Chip>
      </AnimateFade>
    </div>
  );
}

from

fade가 시작하는 불투명도로, 0에서 1 사이입니다. 완전히 사라지면 안 되는 것은 이 값을 올려서 사라짐이 아니라 흐려짐으로 만듭니다.

<AnimateFade from={0.4}>
  <Chip>초안</Chip>
</AnimateFade>

stagger, durationStep, reverse

stagger는 한 자식 뒤에 다음 자식이 시작하기까지의 간격(ms)입니다. 기본값 0에서는 상자 자체가 페이드하고 자식은 건드리지 않습니다. 그보다 크면 효과가 자식 하나하나에게 넘어가고 상자에는 아무것도 남지 않으므로, 다섯 줄짜리 목록이 한 줄씩 도착합니다.

durationStep은 뒤에 오는 자식일수록 duration에 그만큼(ms)씩 더합니다. 음수를 주면 뒤로 갈수록 빨라지며, 재생 시간이 0 아래로 내려가지는 않습니다. reverse는 마지막 자식부터 실행합니다. 순서만 뒤집힐 뿐 각 자식은 그대로 앞으로 재생됩니다.

간격은 자식 단위입니다. 그래서 무엇을 넘기는지가 중요합니다. 자식 다섯이면 다섯 걸음이고, 다섯 개를 담은 자식 하나는 한 걸음입니다. 목록 일부를 빼고 싶으면 묶으면 됩니다.

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

const ROWS = ['Design', 'Engineering', 'Research', 'Support', 'Finance'];

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

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

      <div key={run} className="grid gap-6 sm:grid-cols-2">
        <div className="flex flex-col gap-2">
          <Typography level="caption" color="secondary">
            stagger=60
          </Typography>
          <AnimateFade stagger={60} className="flex flex-col gap-2">
            {ROWS.map((row) => (
              <Box key={row} size="sm" variant="outline">
                {row}
              </Box>
            ))}
          </AnimateFade>
        </div>

        <div className="flex flex-col gap-2">
          <Typography level="caption" color="secondary">
            stagger=60 · durationStep=120 · reverse
          </Typography>
          <AnimateFade stagger={60} durationStep={120} reverse className="flex flex-col gap-2">
            {ROWS.map((row) => (
              <Box key={row} size="sm" variant="outline" color="secondary">
                {row}
              </Box>
            ))}
          </AnimateFade>
        </div>
      </div>
    </div>
  );
}

접근성

• 축소된 모션 설정에서는 애니메이션이 통째로 꺼지고 내용은 그냥 거기 있습니다. 보이지 않는 상태로 남는 일은 없습니다.
• 래퍼는 role도 이름도 더하지 않습니다. 안에 든 것이 자기 것을 그대로 지킵니다.