뷰포트에 들어오면 수치가 카운트업되고 밴드가 떠오르는 통계 섹션
한 줄 요약
기존 훅 useCountUp + useIntersectionObserver를 조합해 스크롤 진입 시 카운트업reveal되는 지표 밴드.
이럴 때 필요해요
랜딩/소개 페이지에서 "프로젝트 48+, 가동률 99.9%" 같은 성과를 정적으로 두면 밋밋하죠. 화면에 들어오는 순간 숫자가 살아 움직이면 시선을 잡습니다.
어떻게 동작하나
각 수치는 자기 useCountUp ref가 관찰돼 진입 시 RAF 카운트업
밴드 래퍼는 useIntersectionObserver(freezeOnceVisible)로 1회 slide-up
소수점은 decimals 옵션으로.
놓치기 쉬운 것
카운트업은 한 번만(재진입 시 재실행 방지) / 큰 수의 천단위 구분이 필요하면 포맷 단계 추가 / prefers-reduced-motion 고려 / 임베드는 auto라 데모에선 로드 즉시 트리거(실제 페이지에선 스크롤 도달 시).
import type { Metadata } from "next";
import { StatsBandDemo } from "./-components/StatsBandDemo";
export const metadata: Metadata = {
title: "통계 밴드 섹션 (데모)",
description:
"뷰포트 진입 시 수치가 카운트업되고 밴드가 reveal되는 성과 지표 섹션. useCountUp + useIntersectionObserver 조합.",
robots: { index: false, follow: false },
};
export default function Page() {
return (
<main className="flex min-h-[100dvh] items-center justify-center bg-gradient-to-br from-violet-50 via-white to-fuchsia-50/60">
<StatsBandDemo />
</main>
);
}