스크롤 값 하나로 전부 굴린다

이 페이지에는 애니메이션 타임라인이 여러 개 있지 않습니다. 문서 전체 스크롤을 0에서 1로 정규화한 값 하나만 있고, 모든 장면이 그 값의 함수입니다. 카드가 접히는 각도, 별 마스크가 열리는 정도, 파티클이 구체로 모이는 진행도가 전부 같은 숫자에서 나옵니다.

이렇게 만들면 사용자가 스크롤을 위아래로 아무리 흔들어도 상태가 꼬이지 않습니다. 어느 지점에서든 화면은 그 스크롤 값에 대해 유일하게 결정됩니다. 되감기가 자연스러운 이유입니다.

히어로 카드가 3D 캐러셀로 접힌다

첫 화면의 히어로 카드는 평면이 아니라 3D 공간에 놓인 판입니다. 스크롤이 진행되면 이 판들이 원통형으로 접히면서 위트의 제품들을 하나씩 보여주는 캐러셀이 됩니다. 화면 전환이 아니라 같은 오브젝트의 자세 변화라, 끊기는 느낌 없이 이어집니다.

별 마스크로 열리는 34,000개의 구체

캐러셀이 끝나면 화면 가운데 별 모양 마스크가 열리고 그 안에서 34,000개 파티클로 이루어진 구체가 드러납니다. 파티클 위치는 셰이더 안에서 계산합니다. 좌표 배열을 미리 만들어 두지 않기 때문에 파일 크기가 늘지 않습니다.

빌드 없는 단일 HTML

번들러도, 프레임워크도 쓰지 않았습니다. HTML 파일 하나에 스타일과 셰이더가 모두 들어 있고 외부 이미지는 0장입니다. 화면에 보이는 모든 픽셀이 코드에서 계산됩니다. 덕분에 배포가 파일 복사 한 번으로 끝나고, 나중에 고칠 때도 찾아야 할 파일이 하나뿐입니다.