왜 만들었나

물류 브랜드 사이트의 스크롤 연출을 분해해 보고 싶었습니다. 레퍼런스 영상을 프레임 단위로 뜯어 장면 순서·타이밍·전환 방식을 정리한 뒤, 같은 구조를 코드로 다시 세웠습니다. 실존 브랜드를 그대로 복제하지 않도록 이름·로고·후기는 전부 가상으로 바꿨습니다.

지구본은 점으로 만든다

대륙 폴리곤을 캔버스에 한 번 굽고, 그 픽셀을 샘플링해 점으로 뿌렸습니다. 텍스처 이미지를 쓰지 않아도 대륙 모양이 나옵니다. 대기 림은 프레넬 셰이더로 아래쪽은 파랑, 위쪽은 주황 두 톤을 섞었습니다. 도시 라벨은 DOM으로 띄우고 매 프레임 3D 좌표를 화면 좌표로 투영해 붙입니다. 지구 뒤편으로 넘어간 라벨은 자동으로 사라집니다.

장면마다 스티키 스테이지

각 장면은 여러 화면 높이짜리 래퍼 안에 100vh 스티키 무대를 넣은 구조입니다. 래퍼의 스크롤 진행도 0~1이 그 장면의 타임라인이 됩니다. 리치스태커가 컨테이너를 들어 올리고, 트럭이 화면을 가로지른 뒤 탑다운 도로로 전환되고, 컨테이너선이 아래에서 위로 항해합니다.

스톡 이미지 없이

컨테이너는 CSS 골판 그라디언트, 리치스태커·트럭·비행기·선박은 전부 인라인 SVG입니다. 사진을 한 장도 쓰지 않았기 때문에 톤이 어긋나지 않고, 색을 바꾸고 싶으면 값 하나만 고치면 됩니다.