[Scroll Text Reveal] 스크롤하면 단어가 하나씩 선명해지는 카피

제작 과정

한 줄 요약 문단이 화면을 지나가는 진행률 하나로, 앞 단어부터 차례로 opacity를 올려 파도처럼 글이 차오르게 합니다.

이럴 때 필요해요

제품에이전시 랜딩에서 한 문장을 "천천히 읽게" 만들어 주목도를 높이고 싶을 때 씁니다. 통째로 fade-in 하는 것보다 단어 단위로 차오르는 쪽이 훨씬 세련돼 보입니다.

어떻게 동작하나

문단이 뷰포트를 지나가는 정도를 0~1 진행률로 측정합니다.
각 단어에 밝아지기 시작하는 지점을 부여합니다(앞 단어일수록 더 빨리 시작).
진행률이 그 단어의 구간을 지날 때 opacity를 0.151로 보간하고, 구간을 서로 겹치게 둬 부드럽게 이어지게 합니다.

핵심은 이거예요

단어마다 타이머를 두는 게 아니라, 진행률 하나를 단어 인덱스로 쪼개 매핑한다는 것. 그래서 스크롤을 되감으면 글도 함께 되감깁니다.

놓치기 쉬운 것

단어가 너무 많으면 한 단어가 차지하는 보간 구간이 좁아져 효과가 급해집니다.
모션에 민감한 사용자(prefers-reduced-motion)에게는 전부 보이게 처리해야 합니다.
스크롤 중 미세한 떨림(jitter)은 짧은 opacity transition으로 흡수합니다.

이런 곳에 써요

랜딩 히어로의 핵심 카피
브랜드 매니페스토스토리텔링 섹션

import type { Metadata } from "next"; import ScrollTextRevealDemo from "./-components/ScrollTextRevealDemo"; export const metadata: Metadata = { title: "Scroll Text Reveal — 스크롤 텍스트 reveal", description: "스크롤을 내리면 카피가 단어 단위로 흐릿→선명하게 차오르는 modern 랜딩 텍스트 효과", robots: { index: false, follow: false }, }; export default function Page() { // data-demo-embed-fixed="720": 이 데모는 스크롤이 있어야 동작하므로 // 임베드 iframe 높이를 720px로 고정하고, 그 안에서 자체 스크롤되게 한다. return ( <main data-demo-embed-fixed="720" className="min-h-screen bg-white"> <ScrollTextRevealDemo /> </main> ); }