블러 애니메이션

흐림 효과를 이용한 부드러운 전환 애니메이션

블러 애니메이션

블러(Blur) 애니메이션은 요소에 흐림 효과를 적용하여 초점이 맞지 않는 듯한 전환 효과를 만듭니다.

사용법

import { transition } from '@ssgoi/react';
import { blur } from '@ssgoi/react/transitions';

function Component() {
  return (
    <div ref={transition({
      key: 'my-element',
      ...blur()
    })}>
      Blur me!
    </div>
  );
}

옵션

interface BlurOptions {
  amount?: number;      // 블러 강도 (기본값: 10)
  scale?: boolean;      // 스케일 효과 포함 여부 (기본값: false)
  opacity?: boolean;    // 투명도 효과 포함 여부 (기본값: true)
  spring?: {
    stiffness?: number; // 스프링 강도 (기본값: 300)
    damping?: number;   // 감쇠 계수 (기본값: 30)
  };
}

사용 예시

// 강한 블러
blur({ amount: 20 })

// 블러 + 스케일
blur({ scale: true })

// 블러만 (투명도 변화 없음)
blur({ opacity: false })

// 부드러운 블러
blur({ spring: { stiffness: 100, damping: 20 } })