스크롤 연동 히어로 섹션

히어로 섹션은 sticky 컨테이너 안에 6개의 독립 레이어가 겹쳐진 구조입니다. 중앙의 SplitText 헤드라인을 중심으로 3D 글래스 카드들이 궤도를 따라 배치됩니다.

Logo

로고 · 태그라인

HeroContent

SplitText 헤드라인 · 배지 · CTA

Glass Card 1

Motion Studio 패널 · 3D rotateY 입장

Glass Card 2

로그인 폼 패널 · 좌측 슬라이드인

Glass Card 3

Pixel Flow 패널 · 우측 슬라이드인

GlassOrbit

3D 회전 글래스 오비트

컴포넌트 기반으로 히어로 섹션의 각 요소를 독립 파일로 분리합니다. 레이아웃 · 콘텐츠 · 글래스 · 유틸리티 4개 레이어로 관심사가 명확히 나뉩니다.

초기화 → 마스터 타임라인 → 스크롤 패럴랙스 3단계로 흐릅니다. 각 단계는 독립적으로 구성되어 gsap.context() 안에서 안전하게 관리됩니다.

ANIMATION OUTPUT

HeroContent

글자 그라디언트

char별 backgroundPosition 보간

GlassWrapper

3D 패널 입장

rotateY 240° → 0°

SplitText

글자별 퇴장

scale + blur + opacity

BgOrbs

배경 블롭

그라디언트 Orb 부유

마스터 타임라인은 약 2.4초 동안 7개 레이어를 오케스트레이션합니다. 배지 · 텍스트가 먼저 진입하고, 3D 카드들이 시차를 두고 rotateY 착지합니다.

페이지 로드 시 입장 타임라인이 먼저 실행되고, 완료 후 스크롤 패럴랙스가 활성화됩니다. masterTl 진행률이 1 미만이면 패럴랙스가 스킵되어 입장 중 스크롤 충돌을 방지합니다.

단순히 모션이 예쁜 것이 아니라, 프로덕션에서 유지보수 가능한 구조로 설계했습니다. SplitText 그라디언트 · 3D 카드 입장 · 글자별 퇴장까지 — 실무에서 바로 적용할 수 있는 패턴입니다.

SplitText Gradient

글자별 그라디언트 보간

SplitText chars에 background-position을 인덱스 비율로 계산하여 무지개 그라디언트 효과 구현

s.backgroundPosition = `${(i / total) * 100}% 0`

3D Card Entrance

rotateY 3D 카드 입장

transformPerspective 800px에서 rotateY ±240°로 시작해 0°로 착지하는 카드 플립 인트로

{ rotateY: -240, transformPerspective: 800 }

GSAP Context

라이프사이클 안전성

gsap.context()로 모든 트윈을 스코프화 — 언마운트 시 ctx.revert() 한 줄로 전체 클린업

ctx = gsap.context(() => { ... }, section)

Per-Char Fadeout

글자별 스크롤 퇴장

스크롤 progress에 따라 각 글자의 scale · blur · opacity를 개별 계산하여 순차 소멸

scale: 1 + charProgress * 2 filter: blur(charProgress * 8)

Parallax Config

데이터 기반 패럴랙스

data-hero 속성값을 키로 PARALLAX 객체에서 y · x · rotateY · fade 값을 룩업하여 적용

PARALLAX = { badge: { y: 80, fade: 0.8 } }

Mobile Branch

모바일 최적화 분기

isMobileDevice()로 분기하여 모바일에서는 높이 100vh, 카드 숨김, blur 필터 제거로 성능 확보

if (mobile) section.style.height = '100vh'

데스크탑 퍼스트로 설계하고, 모바일에서는 성능 최적화를 위해 카드 · blur · 패럴랙스를 JS 분기로 완전히 제거합니다.