AI 요약관련 정보

• Lando Norris 웹사이트는 3JS 기반의 8개 레이어 깊이 3D 애니메이션과 독특한 스크롤 효과로 시선을 사로잡습니다. 🏎️
• Lando 이미지에 미묘한 3D 효과를 주기 위해 AI 또는 특수 카메라로 생성된 깊이 맵(depth map)을 사용하며, 커서 움직임에 따라 시각적 깊이를 표현합니다. 🗺️
• 알파, 러프니스 맵 등을 활용하여 이미지의 투명도, 빛 반사율을 정교하게 제어하여 사실감을 더합니다. ✨
• 헬멧은 glTF 파일로 3JS에서 3D 렌더링되며, 다양한 디자인과 재질감(금속, 거칠기)을 표현하기 위해 여러 맵(base color, metallic, normal, roughness)이 적용됩니다. ⛑️
• 스크롤에 따라 실제 3D 헬멧 모델이 회전하며 여러 맵이 동적으로 적용되어 Apple 웹사이트의 비디오 스크러빙과 차별화됩니다. 🔄
• lenis 라이브러리를 사용하여 부드럽고 자연스러운 스크롤 재킹을 구현했으며, 구형 jQuery와 tram을 사용했음에도 뛰어난 성능을 보여줍니다. 📜
• 헬멧 섹션 등에서 SVG URL을 이용한 CSS 마스킹(mask-image)과 clip-path를 활용하여 독특하고 동적인 비표준 도형을 만듭니다. 🎭
• 각 글자를 <span>으로 감싸고 CSS transform과 transition-delay를 조합하여 호버 시 글자가 위아래로 움직이는 세련된 효과를 연출합니다. ✍️
• 'Load Norris' 로더와 함께 백그라운드에서 페이지를 로드하고, 로더를 마스킹하며 새로운 페이지를 보여주는 독창적인 전환 효과를 사용합니다. 🚀
• 트랙 하이라이트, 시그니처 등 복잡한 3D 애니메이션은 Rive 디자인 툴로 제작되어 WebAssembly로 내보내진 후 3D 캔버스에 통합됩니다. 🎨
• 드롭 섀도우, 필터, 블러, position: absolute 사용을 최소화하고 transform 기반 애니메이션을 주로 사용하여 매우 부드러운 60 FPS 성능을 유지합니다. ⚡
• 개발자 콘솔에 컬러풀한 'Lando Norris' 메시지, 'Load Norris' 로더 텍스트, F1 키를 누르면 페이지 상단으로 이동하는 기능 등 숨겨진 재미 요소가 있습니다. 🥚