스크롤 시 흩어지는 3D 텍스트

SectionScatter는 sticky 컨테이너 안에서 좌측 Orb 구성과 우측 3D 플라이 텍스트가 결합된 2단 레이아웃입니다. 27개의 글자·단어가 z축 깊이에서 화면으로 수렴하는 perspective 애니메이션이 핵심입니다.

Main Orb

그라디언트 구체 · 스크롤 회전

Small Orb

핑크 구체 · 궤도 회전

Year Text

2026 배경 텍스트 · x 드리프트

Heading Chars

SplitText chars · 3D fly-in/out

Body Words

SplitText words · 3D fly-in/out

Info Grid

Role · Tools · E-Mail · Designer

SectionScatter는 하나의 컴포넌트 안에서 SplitText · ScrollTrigger · 랜덤 데이터를 조합하여 3D 플라이 애니메이션을 구현합니다. 27개 요소의 랜덤 값은 컴포넌트 상단 상수로 분리되어 있습니다.

데이터는 3단계로 흐릅니다. SplitText로 텍스트를 분할하고, 초기 3D 상태를 설정한 뒤, ScrollTrigger가 스크롤 progress에 따라 fly-in · rest · fly-out을 제어합니다.

ANIMATION OUTPUT

chars

3D 플라이인

z → 0, rotateX → 0, stagger

words

3D 플라이인

z → 0, rotateX → 0, stagger

mainOrb

회전

rotation: progress × 30°

smallOrb

궤도 회전

rotation: progress × 120°, origin 250%

스크롤 진행률 0%~100% 구간에서 5개의 애니메이션 레이어가 동시에 진행됩니다. 텍스트는 fly-in · rest · fly-out 3단계로 분리되고, Orb와 Year는 전 구간에서 지속 회전합니다.

스크롤 progress 값에 따라 3개의 페이즈로 분기됩니다. 각 페이즈는 임계값(flyInEnd, flyOutStart)을 기준으로 전환되며, 27개 요소의 랜덤 스태거 순서가 자연스러운 등장·퇴장 타이밍을 만듭니다.

단순한 스크롤 애니메이션이 아니라, 3D perspective와 랜덤 스태거를 조합하여 27개 요소가 깊이감 있게 비행하는 패턴입니다. 실무에서 바로 적용할 수 있는 핵심 기술을 정리했습니다.

3D Fly Animation

z축 비행 애니메이션

perspective 500px 컨테이너에서 z:550~1350에서 0으로 수렴한 뒤 다시 발산하는 3단계 플라이 패턴

z: interpolate(tz, 0, eased) opacity: 1 - z / 350

Random Stagger

랜덤 순서 스태거

Math.random()으로 생성한 27개 순서값으로 각 글자·단어의 등장 타이밍을 자연스럽게 분산

staggerOrder = Array(27) .map(() => Math.random())

Dual SplitText

이중 텍스트 분할

heading은 chars로, body는 words로 분할하여 서로 다른 밀도의 3D 플라이 효과 적용

SplitText.create(heading, { type: 'chars' }) SplitText.create(body, { type: 'words' })

Orb Composition

Orb 구성 디자인

main orb 30° 회전 + small orb transformOrigin 250%로 궤도 회전 — 스크롤 progress에 연동

transformOrigin: '250% 250%' rotation: progress * 120

Threshold Calc

스크롤 임계값 계산

섹션 높이 + 뷰포트로 flyInEnd · flyOutStart 임계값을 동적 계산하여 3단계 전환점 결정

flyInEnd = (vh * 1.3) / totalScrollPx flyOutStart = stickyRelease - offset

Depth-Based Opacity

깊이 기반 투명도

z 값이 350 이상이면 opacity가 0으로 수렴하여 먼 거리의 글자가 자연스럽게 사라지는 깊이감 연출

opacity: Math.max(0, 1 - z / 350)

데스크탑 퍼스트로 설계하고 max-xl · max-md 2단계 브레이크포인트만 사용합니다. 3D perspective 효과는 모든 디바이스에서 유지되며, 모바일에서는 세로 스택 레이아웃으로 전환됩니다.