AnimateRotate

한 점을 축으로 회전하는 효과입니다. 각도를 하나가 아니라 둘 받으므로, 제자리에 안착하는 회전과 끝내 멈추지 않는 회전을 같은 컴포넌트로 표현합니다.

import { AnimateRotate } from 'neba';

<AnimateRotate from={-270}>
  <Icon icon={<StarIcon />} size="xl" color="warning" label="즐겨찾기" />
</AnimateRotate>;

Props

Prop	타입	기본값	설명
from	number	-180	시작 각도(도). 음수는 반시계 방향
to	number	0	끝 각도(도). from과 함께 쓰면 하나의 컴포넌트가 제자리에 안착하는 회전과 끝없는 회전을 모두 표현합니다
origin	string	'center'	회전축. CSS transform-origin 그대로입니다
fade	boolean	true	회전하면서 함께 페이드인합니다. 계속 도는 경우에는 꺼야 합니다
stagger공통	number	0	한 자식 뒤 다음 자식이 시작하기까지의 간격(ms). 0이면 상자 자체가 재생되고, 그보다 크면 효과가 자식 하나하나에게 넘어갑니다
durationStep공통	number	0	자식마다 재생 시간에 더해지는 값(ms). 음수면 뒤로 갈수록 빨라지며, 0 아래로는 내려가지 않습니다
reverse공통	boolean	false	마지막 자식부터 실행합니다. 순서만 뒤집히고 각 자식은 그대로 재생됩니다
mode공통	'in' | 'out'	'in'	들어오는지 나가는지. out은 같은 애니메이션을 거꾸로 재생하고 그 자리에서 멈춥니다
duration공통	number	460	한 번 재생되는 시간(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={<span />}). Base UI의 render prop 그대로
children	ReactNode	—	회전하는 것

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

예시

from과 to

from만 있으면 도착입니다. 무언가 돌아 들어와 멈춥니다. from과 to를 함께 쓰고 repeat="infinite", easing="linear", fade={false}를 더하면 끝내 착지하지 않는 회전이 됩니다. 작업 중 표시, 장식용 글리프 같은 것들입니다. 음수 각도는 반시계 방향입니다.

import { AnimateRotate, Icon } from 'neba';

function GearIcon() {
  return (
    <svg viewBox="0 0 16 16" fill="none">
      <circle cx="8" cy="8" r="2.5" stroke="currentColor" strokeWidth="1.5" />
      <path
        d="M8 1v2M8 13v2M1 8h2M13 8h2M3.1 3.1l1.4 1.4M11.5 11.5l1.4 1.4M12.9 3.1l-1.4 1.4M4.5 11.5l-1.4 1.4"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinecap="round"
      />
    </svg>
  );
}

/* Two angles and no fade is what turns an arrival into a spin. */
export default function AnimateRotateSpin() {
  return (
    <div className="flex items-center gap-6">
      <AnimateRotate
        from={0}
        to={360}
        repeat="infinite"
        easing="linear"
        fade={false}
        duration={2400}
      >
        <Icon icon={<GearIcon />} size="lg" color="primary" label="Working" />
      </AnimateRotate>

      <AnimateRotate
        from={0}
        to={-360}
        repeat="infinite"
        easing="linear"
        fade={false}
        duration={1400}
      >
        <Icon icon={<GearIcon />} size="md" color="secondary" label="Working faster" />
      </AnimateRotate>
    </div>
  );
}

origin

CSS transform-origin 그대로입니다. 중심을 벗어나면 회전이 아니라 흔들림이 되고, alternate와 함께 쓰면 좌우로 흔들리는 움직임이 됩니다.

import { AnimateRotate, Chip } from 'neba';

export default function AnimateRotateOrigin() {
  return (
    <div className="flex items-center gap-8 py-4">
      <AnimateRotate
        origin="bottom left"
        from={-12}
        to={12}
        duration={1600}
        repeat="infinite"
        alternate
        fade={false}
      >
        <Chip color="warning">bottom left</Chip>
      </AnimateRotate>

      <AnimateRotate
        origin="center"
        from={-12}
        to={12}
        duration={1600}
        repeat="infinite"
        alternate
        fade={false}
      >
        <Chip color="warning">center</Chip>
      </AnimateRotate>
    </div>
  );
}

fade

기본으로 켜져 있고, 반복하는 경우 가장 먼저 꺼야 할 것입니다. 회전이 한 바퀴 돌 때마다 실행되는 fade는 회전이 아니라 깜빡임으로 읽힙니다.

<AnimateRotate from={0} to={360} repeat="infinite" easing="linear" fade={false}>
  <Icon icon={<GearIcon />} label="작업 중" />
</AnimateRotate>

stagger

stagger, durationStep, reverse는 상자 대신 자식 하나하나에게 효과를 차례로 넘깁니다. 동작은 AnimateFade와 같고, 그쪽 페이지에 자세히 적혀 있습니다.

접근성

• 축소된 모션 설정에서는 애니메이션이 통째로 꺼지고 내용은 to 각도에 그냥 놓입니다.
• 텍스트는 회전시키지 마세요. 회전한 낱말은 길이 전체가 다시 그려지는데, 그것이 바로 디자인 언어가 transform을 금지하며 막으려는 것입니다. 회전은 글리프를 위한 것입니다.