애니메이션 섹션이 있는 럭셔리 스마트워치 Three.js 랜딩 페이지

Three.js, Anime.js, Tailwind를 사용하여 {argument name="product_type_en" default="고급 스마트워치"} 페이지용 HTML 파일 하나를 만드세요. 3D {argument name="main_object_en" default="시계"} 모델과, {argument name="main_object_background_en" default="베이지색 배경의 시계"}를 보여주는 둥근 구멍이 있는 어두운 질감의 오버레이를 만들고, 페이지 로드 시 헤더와 큰 숫자가 슬라이드인되도록 애니메이션을 적용하세요.

페이지를 더 전문적으로 만드세요. 정적인 구멍을 로드 시 열리는 홍채로 바꾸세요. {argument name="focus_area_en" default="시계 페이스"} 위에 반사 효과가 있는 유리 돔을 추가하고, 금속 재질을 개선하며, 마우스 시차 효과를 추가하여 {argument name="parallax_target_en" default="시계"}가 커서에 따라 회전하도록 하고, {argument name="dial_area_en" default="시계 페이스"}에 시간과 피트니스 링을 그리세요.

단일 화면을 다중 섹션 스크롤 사이트로 전환하세요. 사용자가 스크롤할 때, 3D {argument name="scroll_object_en" default="시계"}가 각 섹션에 맞춰 움직이고 회전하도록 애니메이션을 적용하세요. 텍스트가 캔버스 위로 스크롤되는 동안 3D 캔버스와 배경은 고정하고, {argument name="moving_element_en" default="시계"}만 움직이도록 하세요.

- 고정된 캔버스: 캔버스 위치 지정