AnimateFloat

도착할 곳 없이 천천히 떠다닙니다. 일러스트나 떠 있는 카드, 히어로 위의 마크처럼 페이지에 고정되어 있지 않은 것에 쓰며, 페이지가 열려 있는 동안 계속됩니다.

import { AnimateFloat } from 'neba';

<AnimateFloat>
  <Card>페이지에 고정되어 있지 않습니다.</Card>
</AnimateFloat>;

Props

Prop	타입	기본값	설명
stagger공통	number	0	한 자식 뒤 다음 자식이 시작하기까지의 간격(ms). 0이면 상자 자체가 재생되고, 그보다 크면 효과가 자식 하나하나에게 넘어갑니다
durationStep공통	number	0	자식마다 재생 시간에 더해지는 값(ms). 음수면 뒤로 갈수록 빨라지며, 0 아래로는 내려가지 않습니다
reverse공통	boolean	false	마지막 자식부터 실행합니다. 순서만 뒤집히고 각 자식은 그대로 재생됩니다
duration공통	number	3200	한 번 재생되는 시간(ms)
delay공통	number	0	시작 전 대기(ms)
easing	string	—	CSS 이징 곡선. 기본값은 라이브러리의 곡선
repeat공통	number | 'infinite'	'infinite'	반복 횟수
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	있는 자리에 붙들어 둡니다
from	'top' | 'right' | 'bottom' | 'left'	'top'	떠 가는 방향
distance	number | string	'0.5rem'	드리프트 정점까지의 거리. 숫자는 px입니다
render	useRender.RenderProp	—	div 대신 다른 요소로 렌더링합니다 (render={<figure />}). Base UI의 render prop 그대로
children	ReactNode	—	떠 있을 것

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

무한히 반복하며 양 끝에서 방향을 돌리므로 되돌아 튀는 프레임이 없습니다. mode는 없습니다. 표류에는 거꾸로 돌릴 방향이 없습니다.

transform이 아니라 translate라서, 요소에 이미 걸린 scale이나 rotate와 합성됩니다.

예시

from과 distance

from은 떠 가는 방향이고 distance는 얼마나 가는지입니다. CSS 길이나 픽셀 숫자를 받습니다. 일부러 짧습니다. 1cm를 넘어가면 쉬고 있는 것이 아니라 움직이는 것으로 읽히기 시작합니다.

import { AnimateFloat, Avatar, Typography } from 'neba';

const FACES = ['Ada', 'Bo', 'Cai', 'Dana'];

export default function AnimateFloatDistance() {
  return (
    <div className="flex w-full flex-col gap-6">
      <div className="flex flex-col gap-2">
        <Typography level="caption" color="secondary">
          stagger=400 — the same drift, out of step
        </Typography>
        <AnimateFloat stagger={400} distance={10} className="flex gap-3">
          {FACES.map((name) => (
            <Avatar key={name} name={name} size="lg" />
          ))}
        </AnimateFloat>
      </div>

      <div className="flex flex-col gap-2">
        <Typography level="caption" color="secondary">
          from=&quot;left&quot; · distance=14 · duration=2200
        </Typography>
        <AnimateFloat from="left" distance={14} duration={2200}>
          <Avatar name="Eun" size="lg" color="success" />
        </AnimateFloat>
      </div>
    </div>
  );
}

stagger

stagger는 떠 있는 여러 개를 서로 어긋나게 만듭니다. 넷이 한 덩어리로 읽히지 않게 하는 것이 이 값입니다. 동작은 AnimateFade와 같습니다.

paused

paused는 언마운트 없이 표류를 그 자리에 붙들어 둡니다.

접근성

• 모션 감소 설정에서는 애니메이션이 꺼지고 내용은 레이아웃이 놓아 준 자리에 그대로 있습니다.
• 컨트롤을 띄우지 마세요. 늘 있던 자리에 정확히 있지 않은 것은 누르기 어렵고, 이 효과는 세트에서 유일하게 끝이 없습니다.