스크롤시 배경색 변경하기

1. useTransform 하나만 쓰는 방법

const { scrollY } = useViewportScroll();
const bg = useTransform(
  scrollY,
  [0, 80],
  ["rgba(0,0,0,0)", "rgba(0,0,0,1)"]
);

<Nav style={{ backgroundColor: bg }} />

장점

• 코드가 짧고 직관적: 한 줄로 “스크롤 값 → 색 보간”이 끝남
• 퍼포먼스 최적화: 프레임모션이 내부적으로 requestAnimationFrame으로 처리하므로 부드럽고 가벼움
• 추가 상태 불필요: useState·useEffect 없이 단순하게 선언적 연결만으로 동작

단점

• 연속적인 보간(interpolation)에 국한: 숫자·색 값 같은 연속값만 다룰 수 있음
• 분기 처리, 시퀀싱이 불편: “한 번 80px 넘으면 완전히 고정된 색 그대로 유지” 같은 discrete(불연속) 전환 로직을 표현하기엔 애매

---

2. useAnimation + onChange + variants 방법

const navControls = useAnimation();
useEffect(() => {
  const unsub = scrollY.onChange(y => {
    if (y > 80) navControls.start("scrolled");
    else      navControls.start("top");
  });
  return () => unsub();
}, [scrollY, navControls]);

<Nav
  variants={{
    top:    { backgroundColor: "rgba(0,0,0,0)" },
    scrolled: { backgroundColor: "rgba(0,0,0,1)" },
  }}
  initial="top"
  animate={navControls}
/>

장점

• 불연속(discrete) 상태 전환 제어: variants에 정의된 이름만 바꿔 주면 언제든 “토글” 가능
• 여러 속성 동시에 애니메이션: 색뿐 아니라 padding·boxShadow·height 등도 한 번에 묶어서 전환
• 시퀀스, 딜레이, 중첩 애니메이션: transition 세부 조작(지연·반복·이징)이나, controls.start() 직후 다른 애니메이션을 바로 이어 붙일 수 있음
• 명령형 컨트롤: 애니메이션 시작 시점을 더 세밀하게 로직에 따라 제어하고 싶을 때 유리

단점

• 코드가 장황: useEffect로 구독을 걸고, variants·useAnimation까지 선언해야 함
• 간단한 보간에는 과잉 설계: “스크롤 수치 → 색 선형 보간” 만 필요한 경우 불필요하게 복잡

---

결론: 언제 어떤 걸 쓸까?

• 단순히 스크롤에 따라 색·위치·불투명도 같은 연속값을 보간 하고 싶다면 → useTransform
• 스크롤 위치에 따라 discrete 상태 전환, 여러 애니메이션을 묶어서 제어, 시퀀스·딜레이를 넣거나 imperative하게 토글 하고 싶다면 → useAnimation + variants

두 방법을 목적에 맞게 골라 쓰시면 됩니다. 단순 변화엔 useTransform이 훨씬 가볍고 빠르니, 특별히 복잡한 애니메이션 로직이 필요하지 않다면 후자를 추천합니다.