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