/* 속성을 지정하지 않은 transition 에는 시스템 기본 이징이 적용된다(150ms · ease-uyoo-out). */
<button className="transition hover:bg-(--uyoo-hover)">호버</button>

/* 시간을 바꿀 때. duration 은 테마 네임스페이스가 없어 임의 값(arbitrary value) 문법을 쓴다. */
<div className="transition-[width] duration-(--uyoo-duration-slow) ease-uyoo-glide" />

/* 키프레임에서 쓸 때. */
.rise { animation: rise var(--uyoo-duration-base) var(--uyoo-ease-out) both; }

import { duration, ease, transition, variants } from "@uyoolabs/ui/motion";

// 라이브러리 의존성이 없는 상수다. 애니메이션 라이브러리에 바로 넘긴다.
<m.div variants={variants.rise} initial="hidden" animate="visible" exit="exit" />
<m.aside animate={{ x: 0 }} transition={transition.move} />

// 직접 쓸 때. 시간은 초 단위, 베지어는 배열이다.
el.animate([{ opacity: 0 }, { opacity: 1 }], {
  duration: duration.base * 1000,
  easing: `cubic-bezier(${ease.out.join(",")})`,
});