글래스모피즘 스크롤 쇼케이스

300vh 섹션은 텍스트 영역과 글래스모피즘 구체로 좌우 분할됩니다. SplitText가 heading을 단어 단위로 분할하고, 스크롤 진행률에 따라 순차적으로 reveal됩니다.

Label

대문자 추적 섹션 라벨

Heading

SplitText words · 순차 reveal

Body Text

설명 + 소형 텍스트 페이드인

Gradient Orb

글래스모피즘 구체 · 슬라이드인

Float Orbs

3개 장식 구체 · CSS 부유

FloatingShapes

16개 도형 · 대각선 이동

SectionShowcase는 텍스트 분할 · 스크롤 연동 · 장식 효과를 각각 독립된 모듈로 분리합니다. 글로벌 CSS 클래스와 GSAP 플러그인이 핵심 인터랙션을 담당합니다.

데이터는 Setup → Scroll → Render 단방향으로 흐릅니다. ScrollTrigger가 스크롤 progress를 전달하면 각 업데이트 함수가 독립적으로 요소를 제어합니다.

ANIMATION OUTPUT

Heading

단어 reveal

per-word opacity 0→1 순차

Body

텍스트 페이드

y: 30→0 + opacity

Orb

슬라이드인

x: 120→0 + scale 0.85→1

FloatingShapes

대각선 이동

diagonal 600px + scrub

스크롤 0%~100% 구간에서 5개의 애니메이션 레이어가 병렬로 동작합니다. rangeProgress 유틸로 각 레이어의 활성 구간을 독립적으로 제어합니다.

스크롤 이벤트가 발생하면 SplitText 초기화 → Word Reveal과 Orb Animation 두 갈래로 분기됩니다. 리사이즈 시에는 SplitText를 안전하게 재초기화하여 레이아웃 깨짐을 방지합니다.

단순히 모션이 예쁜 것이 아니라, 스크롤 기반 인터랙션의 핵심 패턴을 체계적으로 설계했습니다. 범위 매핑 유틸 · 리사이즈 안전 처리 · CSS+GSAP 혼합까지 — 실무에서 바로 적용할 수 있는 패턴입니다.

Word Reveal

단어별 순차 등장

SplitText words에 인덱스 기반 임계값을 설정하여 스크롤에 따라 한 단어씩 순차적으로 opacity가 올라가는 타이핑 효과

wordThreshold = idx / totalWords fadeRange = 0.1

Range Progress

범위 매핑 유틸

스크롤 progress를 start~end 범위 안에서 0~1로 정규화하는 유틸 함수 — 복수 애니메이션의 타이밍 분리에 활용

rangeProgress(progress, start, end) if (p < start) return 0

Glassmorphism Orb

글래스모피즘 구체

200% backgroundSize 그라디언트 + radial-gradient 오버레이 + backdrop-blur 20px로 고급 유리 질감 구현

background-size: 200% 200% animation: gradientShift 6s infinite

Resize Safety

리사이즈 안전 처리

SplitText는 DOM을 변형하므로 리사이즈 시 revert() → 200ms debounce → 재생성으로 레이아웃 깨짐 방지

outroHeaderSplit.revert() mainST.kill() setupAnimation()

CSS Animations

CSS 무한 애니메이션

장식 orb에 CSS floatUp 키프레임으로 무한 부유 — GSAP과 별도로 동작하여 스크롤과 독립적인 생동감 부여

animation: floatUp 4s ease-in-out infinite

Diagonal Shapes

대각선 도형 이동

FloatingShapes를 스크롤 scrub에 연동하여 대각선 600px 이동 — 배경에 역동적인 깊이감 추가

diagonal={600} scrubStart='top bottom'

데스크탑 퍼스트로 설계하고 max-xl · max-md 2단계 브레이크포인트만 사용합니다. 모바일에서는 orb 영역을 숨기고 텍스트 중심의 세로 레이아웃으로 전환합니다.