HyperFrames 상업용 영상은(는) 무엇을 하나요?
mobile-dom-fidelity로 사이트를 검사한 후 이 스킬을 사용하세요.
영상 구조
- 짧은 헤드라인이 포함된 인트로.
- 캐러셀로 스크롤 또는 진입.
- 주요 제품 하이라이트.
- 시뮬레이션된 제품 클릭.
- 주요 혜택.
- 가격.
- 사용자 선택.
- 장바구니 또는 결제.
- CTA 또는 최종 확인.
인터랙티브 여정
영상은 슬라이드 순서가 아닌 실제 브라우징 세션처럼 느껴져야 합니다. 각 동작을 원인과 결과로 모델링하세요.
- 스크롤은 섹션을 드러냅니다.
- 캐러셀은 제품을 넘깁니다.
- 메인 카드가 중앙으로 돌아옵니다.
- 커서가 카드를 클릭합니다.
- 제품 페이지가 진입합니다.
- 혜택이 나타납니다.
- 가격과 CTA가 포커스를 받습니다.
- 클릭은 장바구니 또는 결제로 이어집니다.
- 마지막은 결론 또는 승인을 보여줍니다.
구성 규칙
- 세로 형식:
1080x1920. - DOM에서 추출한 실제 텍스트를 사용하세요.
- 로컬 에셋 또는 허용된 URL을 사용하세요.
- GSAP 타임라인을
window.__timelines에 일시 중단 상태로 등록하세요. - 렌더링 중 fetch를 피하세요.
- 비결정적
Date.now()및Math.random()을 피하세요. - 모든 애니메이션 클릭은 보이는 컴포넌트를 대상으로 해야 합니다.
애니메이션 패턴
- 제목: 부드러운 타자기 효과, 과도한 속도 없이.
- 카드:
y,opacity, 약간의scale을 이용한 진입. - 캐러셀: 메인 카드에서 멈추는 수평 이동.
- 클릭: 커서, 물결 효과, 미세 확대, 포커스 그림자.
- 화면 전환: 오른쪽에서 왼쪽으로의 측면 전환.
- 제품: 메인 이미지에 약간의 확대와 혜택의 계단식 진입.
클릭 매핑
클릭을 애니메이션하기 전에 다음을 등록하세요.
대상 선택자:
표시 시작 시간:
클릭 시간:
대상 영역:
클릭 x/y:
클릭 후 장면:
다음과 같은 경우 클릭을 수락하지 마세요.
- 대상이 아직 보이지 않는 경우.
- 대상이 뷰포트 밖에 있는 경우.
- 다른 오버레이가 대상을 가리는 경우.
- 커서가 진입 애니메이션 완료 전에 도착하는 경우.
필수 검증
배포 전에 다음을 실행하세요.
npx hyperframes lint ./project
npx hyperframes validate ./project
npx hyperframes inspect ./project --samples 18
시뮬레이션된 클릭이 있는 경우 다음도 검증하세요.
- 대상이 존재함.
- 대상이 클릭 타임스탬프에 보임.
- 클릭 중심이 경계 상자 내부에 있음.
- 깨진 이미지가 없음.
- 주요 프레임에 겹치는 텍스트가 없음.
예상 출력
- 합성
index.html. - 렌더링된 MP4 영상.
- 검증 요약.
- 필요한 경우 정리된 핸드오프 폴더.