맙소사, 이게 AI가 한번에 처리할 수 있는 일이에요? Gemini 3는 얼마 전 큰 인기를 끌었던 스크롤링 내러티브 웹페이지를 만드는 데 도움이 되었는데, 스크롤할 때 풍부한 애니메이션이 재생됩니다. 5초까지 기다리면 놀라운 것을 보실 수 있습니다. 그는 3D처럼 보이는 복잡한 카드 애니메이션을 썼습니다. 프롬프트 단어 👇
프롬프트 단어: 창의적인 상호작용에 능숙한 프런트엔드 개발 전문가 역할을 맡아주세요. Apple 제품 페이지와 유사한 "스크롤텔링" 웹페이지 데모를 제작해야 합니다. 기술 스택 요구 사항: ScrollTrigger 플러그인과 함께 HTML, CSS, GSAP(GreenSock)를 사용하세요. 상호작용 논리: 페이지 높이는 매우 높게 설정해야 합니다(예: 5000px). 고정된 전체 화면 뷰포트(Pinned Container)를 생성해야 합니다. 사용자의 스크롤 동작은 페이지를 이동시키는 것이 아니라, 진행률 표시줄(Scrub: 1) 역할을 하여 전체 애니메이션 타임라인의 재생을 직접 제어해야 합니다. 시각적 및 애니메이션 워크플로(다음 타임라인을 순서대로 구현하세요): 오프닝: 화면 중앙에 간단한 슬로건만 표시됩니다. 스크롤하면 텍스트가 커졌다가 점차 사라집니다. UI 데모: 그러면 시뮬레이션된 "전화 알림 팝업"과 "메일 목록 카드"가 서로 다른 방향에서 화면 중앙으로 부드럽게 날아옵니다. 스태킹 효과: 계속 스크롤하면 흩어진 카드가 자동으로 모여 3D 변형을 통해 쌓입니다(스태킹 효과). 클라이맥스: "모두 구독 취소" 버튼이 나타나고, 스크롤하면 쌓인 모든 카드가 즉시 폭발하여 사방으로 날아갑니다(폭발 효과). 엔딩: 최종 로고가 공개됩니다. 스타일 요구 사항: 미니멀리즘, 둥근 모서리 카드 디자인, 부드러운 그림자, 그리고 매우 유연한 애니메이션 곡선(Elastic/Spring)이 필요합니다. 실행 가능한 완전한 코드 파일을 제공해 주세요.