useLayoutMotion

import { useLayoutMotion } from "@hua-labs/hua/framework";

const layout = useLayoutMotion({
  duration: 300,
  easing: 'ease-out',
});

return (
  <div ref={layout.containerRef}>
    {items.map((item) => (
      <div
        key={item.id}
        ref={(el) => layout.registerItem(item.id, el)}
        style={layout.getItemStyle(item.id)}
      >
        {item.content}
      </div>
    ))}
  </div>
);

// FLIP = First, Last, Invert, Play
// 1. First: 초기 위치 기록
// 2. Last: 최종 위치 계산
// 3. Invert: 차이를 transform으로 적용
// 4. Play: transform을 0으로 애니메이션

// useLayoutMotion이 자동으로 처리:
const layout = useLayoutMotion();

// 레이아웃 변경 시 자동으로 부드러운 애니메이션
setItems(shuffledItems); // 자동 FLIP 애니메이션