Tech Testbed

고급 애니메이션 & 그라디언트

`tailwind.config.ts`를 확장하여 커스텀 애니메이션과 그라디언트를 추가한 예제입니다.

1. 커스텀 배경 팬 애니메이션

`keyframes`와 `animation`을 `tailwind.config.ts`에 추가하여 `animate-background-pan` 유틸리티를 만들었습니다.
아래 버튼에 마우스를 올리면 배경 그라디언트가 움직이는 것을 확인하세요.

2. 커스텀 쉬머(Shimmer) 효과

커스텀 그라디언트(`gradient-shimmer`)와 애니메이션(`animate-shimmer`)을 조합하여 스켈레톤 로딩과 같은 쉬머 효과를 구현할 수 있습니다.

아래는 쉬머 효과가 적용된 스켈레톤 UI 예시입니다.