프롬프트 도감 › No.840
스마트워치 랜딩페이지
Smartwatch Three.js Landing
3D 스마트워치가 스크롤에 맞춰 움직이고 회전하는 다중 섹션 랜딩 페이지를 HTML 하나로 만들어 줍니다. 마우스 시차와 시간·피트니스 링 표시가 들어갑니다.
이럴 때 제품 소개 페이지 시안, 포트폴리오, 코딩 실습
도구 Gemini 3
프롬프트
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="시계"}만 움직이도록 하세요.
- 고정된 캔버스: 캔버스 위치 지정팁
- 제품 변수를 이어폰, 신발 등으로 바꿔보세요
- 단계별로 한 문단씩 나눠 입력하면 안정적이에요
출처
권리: CC BY 4.0 (YouMind-OpenLab/awesome-gemini-3-prompts). 원작자: Harshith. 이미지도 같은 라이선스. 사례집 고지에 따라 권리자 요청 시 삭제.