랜딩 페이지의 메인 카피를 돋보이게 만들 때 사용하는 화려한 텍스트 효과입니다.
background-clip: text를 사용하여 글자 내부에만 그라데이션을 적용하고, 배경 사이즈(background-size: 200%)를 넓힌 뒤 background-position을 애니메이션으로 이동시킵니다. 이렇게 하면 글자색이 오로라처럼 아름답게 흐르며 변하는 모션을 만들 수 있습니다.
<div class="gradient-text-wrapper">
<h1 class="animated-gradient-text">CSS is Awesome!</h1>
</div>