Motion: React에서 선언적으로 애니메이션하기

<motion.span
  initial={{ opacity: 0, y: 30, scale: 0.5 }}                    // 마운트 시
  animate={{ opacity: 1, y: 0, scale: 1 }}                       // 목표 상태
  exit={{ opacity: 0, y: -30, scale: 0.5 }}                      // 언마운트 시
  transition={{ type: 'spring', damping: 20, stiffness: 170 }}   // 어떻게
>
  Hello
</motion.span>

{elements.map((segment, index) => (
  <motion.span
    initial={fromSnapshot}
    animate={inView ? animateKeyframes : fromSnapshot}
    transition={{
      duration: totalDuration,
      times: [0, 0.5, 1],
      delay: (index * delay) / 1000,  // 👈 index에 비례하는 딜레이 = stagger
    }}
  >
    {segment}
  </motion.span>
))}

// DecryptedText.tsx — 실제 애니메이션 엔진은 setInterval
const shuffleText = (originalText, currentRevealed) => {
  return originalText
    .split('')
    .map((char, i) => {
      if (char === ' ') return ' ';
      if (currentRevealed.has(i)) return originalText[i];  // 공개된 글자는 원본
      return availableChars[Math.floor(Math.random() * availableChars.length)];
    })
    .join('');
};

// center: 짝수 호출 → 오른쪽, 홀수 호출 → 왼쪽
// "ABCDEFG" → D, C, E, B, F, A, G (파문이 퍼지듯)
const nextIndex = revealedSet.size % 2 === 0
  ? middle + offset
  : middle - offset - 1;

// TrueFocus.tsx — motion.div가 박스를 부드럽게 이동
<motion.div
  className="focus-frame"
  animate={{
    x: focusRect.x,
    y: focusRect.y,
    width: focusRect.width,
    height: focusRect.height,
    opacity: currentIndex >= 0 ? 1 : 0,
  }}
  transition={{
    duration: animationDuration
  }}
/>

const [count, setCount] = useState(0);
setCount(1000);  // 컴포넌트 리렌더

const motionValue = useMotionValue(0);
motionValue.set(1000);  // 리렌더 없음, .on('change') 리스너만 호출

const smoothValue = useSpring(motionValue, {
  stiffness: 100,    // 강성 — 높을수록 급격한 반응 (기본: 100)
  damping: 10,       // 감쇠 — 높을수록 진동 없이 빠르게 정지 (기본: 10)
  mass: 1,           // 관성 — 높을수록 느리고 무거운 움직임 (기본: 1)
  restSpeed: 0.01,   // 이 속도 이하면 정지 판정
  restDelta: 0.01,   // 목표와의 차이가 이 값 이하면 정지 판정
});

// duration=1 → damping=60, stiffness=100 (빠르고 단단)
// duration=4 → damping=30, stiffness=25  (느리고 부드러움)
const damping = 20 + 40 * (1 / duration);
const stiffness = 100 * (1 / duration);

const motionValue = useMotionValue(from);
const springValue = useSpring(motionValue, { damping, stiffness });

// 매 프레임 DOM 직접 업데이트 — setState 한 번도 없이
springValue.on('change', latest => {
  ref.current.textContent = formatValue(latest);
});

<AnimatePresence mode="wait">
  {show && (
    <motion.div
      key="unique"            // 👈 key가 있어야 AnimatePresence가 추적
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}   // 👈 이게 재생된 후 DOM에서 제거
    />
  )}
</AnimatePresence>

// RotatingText.tsx — 렌더 구조
<motion.span layout>                              // 너비 변경 시 보간 애니메이션
  <span className="sr-only">{currentText}</span>  // 스크린리더용 (글자 하나씩 읽기 방지)
  <AnimatePresence mode="wait" initial={false}>   // exit 관리 + 최초 마운트 시 애니메이션 스킵
    <motion.span key={currentTextIndex}>          // 👈 key 변경 = 전환 트리거
      {elements.map((wordObj, wordIndex) => (
        <span>                                    // 단어 래퍼 (줄바꿈 단위)
          {wordObj.characters.map((char, charIndex) => (
            <motion.span                          // 각 글자 = 독립 애니메이션
              initial={{ y: '100%', opacity: 0 }}
              animate={{ y: 0, opacity: 1 }}
              exit={{ y: '-120%', opacity: 0 }}
              transition={{ delay: getStaggerDelay(globalIndex, total) }}
            />
          ))}
        </span>
      ))}
    </motion.span>
  </AnimatePresence>
</motion.span>

<motion.span
  animate={{
    // 키프레임 배열: 숫자 대신 [경유지]를 넘기면 순서대로 보간
    x: [0, randomX, 0],      // 원점 → 랜덤 위치 → 원점
    y: [0, randomY, 0],
    rotate: [angle, angle + rand, angle],
    opacity: 1,               // 단일 값: 그냥 1로 페이드인
  }}
  exit={{ opacity: 0, scale: 0 }}   // 제거될 때: 사라지며 축소
  transition={{
    // 속성별 독립 transition: 속성 이름을 키로 넣으면 각각 다른 타이밍 적용
    opacity: { duration: exitDuration },
    x: { duration: 2, repeat: Infinity, repeatType: 'mirror' },
    y: { duration: 2, repeat: Infinity, repeatType: 'mirror' },
  }}
/>

useAnimationFrame((time, delta) => {
  // time: 페이지 로드 후 경과 시간 (ms)
  // delta: 이전 프레임과의 차이 (ms)
  ref.current.style.transform = `rotate(${time * 0.1}deg)`;
});

const scrollY = useScroll().scrollYProgress;              // 0 ~ 1
const opacity = useTransform(scrollY, [0, 0.5], [0, 1]);  // 0 ~ 1 → 0 ~ 1
const color = useTransform(scrollY, [0, 1], ['#f00', '#00f']); // 빨강 → 파랑

useAnimationFrame ──→ motionValue ──→ useTransform ──→ CSS
  (매 프레임 계산)      (숫자: 0~100)     (문자열 변환)     (DOM 반영)

const gradientStyle = {
  backgroundImage: `linear-gradient(120deg,
    ${color} 0%, ${color} 35%,        // 기본색
    ${shineColor} 50%,                 // 반짝이는 부분 (좁은 띠)
    ${color} 65%, ${color} 100%        // 기본색
  )`,
  backgroundSize: '200% auto',         // 텍스트보다 2배 넓은 배경
  WebkitBackgroundClip: 'text',        // 글자 모양으로 자르기
  backgroundClip: 'text',
  WebkitTextFillColor: 'transparent'   // 원래 글자색 투명
};

const progress = useMotionValue(0);         // 0~100 진행도
const elapsedRef = useRef(0);               // 누적 경과 시간
const lastTimeRef = useRef<number | null>(null);

useAnimationFrame(time => {
  // 정지 상태면 시간 추적 초기화
  if (disabled || isPaused) {
    lastTimeRef.current = null;
    return;
  }

  // delta 직접 계산 (재개 시 점프 방지)
  const deltaTime = time - lastTimeRef.current;
  lastTimeRef.current = time;
  elapsedRef.current += deltaTime;

  // 경과 시간 → 0~100 진행도로 변환
  const cycleTime = elapsedRef.current % cycleDuration;
  const p = (cycleTime / animationDuration) * 100;
  progress.set(p);
  // 예: elapsed=1500, cycleDuration=2000 → cycleTime=1500 → p=75
});

const backgroundPosition = useTransform(
  progress,
  p => `${150 - p * 2}% center`
);

<motion.span
  style={{ ...gradientStyle, backgroundPosition }}
>
  {text}
</motion.span>

const backgroundPosition = useTransform(progress, p => {
  if (direction === 'horizontal') return `${p}% 50%`;    // x축 이동
  if (direction === 'vertical')   return `50% ${p}%`;    // y축 이동
  return `${p}% 50%`;                                     // 대각선
});

const gradientColors = [...colors, colors[0]].join(', ');
// ['#5227FF', '#FF9FFC', '#B19EEF']
// → '#5227FF, #FF9FFC, #B19EEF, #5227FF'

const { scrollY, scrollYProgress } = useScroll({
  container: ref,        // 스크롤 추적 대상 (기본: window)
  target: elementRef,    // container 안에서 추적할 요소
  axis: 'y',             // 추적 축: 'x' | 'y' (기본: 'y')
  offset: ['start start', 'end end'],  // target–container 교차 지점
});
// scrollY: 절대 위치 (px) — 200px 스크롤 → 200
// scrollYProgress: 0~1 비율 — 전체의 절반 → 0.5

// useVelocity(value: MotionValue<number>): MotionValue<number>
// 인자: 숫자형 MotionValue 하나
const scrollVelocity = useVelocity(scrollY);
// scrollY가 1초에 500px 변하면 → scrollVelocity ≈ 500
// scrollY가 멈추면                → scrollVelocity ≈ 0

// 이중 적용 → 가속도(속도의 미분)
const acceleration = useVelocity(scrollVelocity);

const { scrollY } = useScroll(scrollOptions);         // 스크롤 위치 (px)
const scrollVelocity = useVelocity(scrollY);           // 변화율 (px/s)
const smoothVelocity = useSpring(scrollVelocity, {     // 스프링으로 부드럽게
  damping: 50,     // 높은 감쇠 → 진동 없이 빠르게 안정
  stiffness: 400,  // 높은 강성 → 스크롤에 민감하게 반응
});
const velocityFactor = useTransform(                    // 속도 → 배율 매핑
  smoothVelocity, [0, 1000], [0, 5], { clamp: false }
);
// 스크롤 안 함 → velocityFactor ≈ 0 (기본 속도만)
// 1000px/s 스크롤 → velocityFactor ≈ 5 (6배속)
// clamp: false → 1000px/s 이상이면 5를 초과할 수도 있음

useAnimationFrame((t, delta) => {
  // 기본 이동량 = 방향 × 속도 × 시간(초)
  let moveBy = directionFactor.current * baseVelocity * (delta / 1000);
  // 예: 1 × 100 × (16/1000) = 1.6px (60fps 기준)

  // 스크롤 속도에 따른 가속
  moveBy += directionFactor.current * moveBy * velocityFactor.get();
  // 빠르게 스크롤 중(velocityFactor=3): 1.6 + 1 × 1.6 × 3 = 6.4px
  // 스크롤 안 함(velocityFactor=0):     1.6 + 1 × 1.6 × 0 = 1.6px

  baseX.set(baseX.get() + moveBy);  // 누적
});

function wrap(min: number, max: number, v: number): number {
  const range = max - min;
  const mod = (((v - min) % range) + range) % range;
  return mod + min;
}

// 텍스트 6개 복제, 한 카피 너비 = 500px 가정
const x = useTransform(baseX, v => `${wrap(-500, 0, v)}px`);
// baseX = -200  → wrap(-500, 0, -200) = -200  (그대로)
// baseX = -600  → wrap(-500, 0, -600) = -100  (되감기!)
// baseX = 100   → wrap(-500, 0, 100)  = -400  (되감기!)

// 매 프레임, 모든 글자에 대해 마우스와의 유클리드 거리 계산
const letterCenterX = rect.left + rect.width / 2 - containerRect.left;
const letterCenterY = rect.top + rect.height / 2 - containerRect.top;

const distance = Math.sqrt(
  (mouseX - letterCenterX) ** 2 + (mouseY - letterCenterY) ** 2
);
// 예: 마우스(150, 80), 글자 중심(120, 80) → distance = 30px

const calculateFalloff = (distance: number) => {
  const norm = Math.min(Math.max(1 - distance / radius, 0), 1);
  switch (falloff) {
    case 'linear':       return norm;           // 균등 감소
    case 'exponential':  return norm ** 2;       // 가까울수록 급격히 강해짐
    case 'gaussian':     return Math.exp(-((distance / (radius / 2)) ** 2) / 2);
  }
};
// radius=50, distance=30 → norm=0.4
// linear: 0.4 | exponential: 0.16 | gaussian: 0.24

// falloffValue(0~1)로 from→to 사이를 보간
const interpolatedValue = fromValue + (toValue - fromValue) * falloffValue;
// from='wght' 400, to='wght' 900, falloff=0.4
// → 400 + (900 - 400) × 0.4 = 600

letterRef.style.fontVariationSettings = `'wght' 600`;

const controls = useAnimation();

// 명령형으로 시작
controls.start({ rotate: 360, transition: { duration: 2 } });

// 현재 값에서 이어서
const current = rotation.get();  // 예: 현재 135도
controls.start({ rotate: current + 360 });  // 135 → 495도

// 즉시 정지
controls.stop();

{letters.map((letter, i) => {
  const rotationDeg = (360 / letters.length) * i;
  // 12글자면: 0°, 30°, 60°, 90°, ... 330°
  const factor = Math.PI / letters.length;
  const x = factor * i;
  const y = factor * i;
  const transform = `rotateZ(${rotationDeg}deg) translate3d(${x}px, ${y}px, 0)`;

  return <span style={{ transform }}>{letter}</span>;
})}

const controls = useAnimation();
const rotation: MotionValue<number> = useMotionValue(0);

useEffect(() => {
  const start = rotation.get();  // 현재 각도 (예: 135°)
  controls.start({
    rotate: start + 360,         // 135° → 495° (한 바퀴)
    transition: getTransition(spinDuration, start)
  });
}, [spinDuration]);

const handleHoverStart = () => {
  const start = rotation.get();
  switch (onHover) {
    case 'slowDown':  // 2배 느리게
      controls.start({ rotate: start + 360,
        transition: getTransition(spinDuration * 2, start) });
      break;
    case 'speedUp':   // 4배 빠르게
      controls.start({ rotate: start + 360,
        transition: getTransition(spinDuration / 4, start) });
      break;
    case 'pause':     // 스프링으로 부드럽게 정지
      controls.start({
        transition: { rotate: { type: 'spring', damping: 20, stiffness: 300 } }
      });
      break;
    case 'goBonkers': // 20배속 + 축소
      controls.start({ rotate: start + 360, scale: 0.8,
        transition: getTransition(spinDuration / 20, start) });
      break;
  }
};