제품 모션 비디오 (60초)
0. 입력 (누락된 항목만 질문, 한 메시지에 최대 3개 질문)
- TOPIC: 제품/아이디어 (필수)
- BRAND: URL 또는 md 파일 (선택) -> 이름, 태그라인, 혜택 3가지, 색상, 톤 추출. web_fetch 최대 1회.
- STYLE REF: 선택; 세 가지 특성(속도, 유형, 팔레트)을 한 줄로 추론. 깊이 있는 조사 금지.
사용자가
{placeholders}를 채우지 않은 경우 빈 값으로 간주하고, 가정 사항을 한 줄로 진술한 후 제작합니다.
1. 계획 (15줄 이하의 생각, 에세이 금지)
팔레트(배경, 잉크, 강조 1개, 보조 1개), 디스플레이 폰트 1개 + 본문 폰트 1개(시스템/Google Fonts, 폴백 포함), 8개 장면.
기본 60초 구조(초):
- 0-5 후크: 키네틱 타이포그래피, 하나의 대담한 주장
- 5-13 문제: 글리치/긴장감, 카운터
- 13-21 공개: 로고/제품 모핑 인
- 21-31 기능 1-3: UI 카드, 아이콘 팝, 스태거
- 31-41 증거: 애니메이션 차트/숫자 카운트 업
- 41-49 흐름/작동 방식: 선 그리기 경로 + 노드
- 49-56 몽타주: 빠른 컷, 0.4초 비트, 마키 텍스트
- 56-60 CTA: 로고, 태그라인, URL, 펄스
2. 제작 (하나의 .html 파일, 바닐라 JS, 제로 종속성, 18KB 이하)
아키텍처, 최대한 작게 유지:
- 1920x1080 스테이지를 CSS transform으로 스케일하여 맞춤; 모든 색상은 CSS 변수로.
- 마스터 타임라인:
scenes=[{t0,t1,build(stage), update(p)}]형태,p는 0..1 범위, 단일 rAF 클록t=(now-start)/1000사용. setTimeout 체인 금지. - 헬퍼 함수(한 번 작성, 재사용):
ease(p)(cubic/expo/back),lerp,clamp,stagger(i,n,p),type(el,text,p). - 모션 기법 (6개 이상 사용): 키네틱 타이포그래피, 마스크 리빌, stroke-dashoffset 선 그리기, 카운트 업, 패럴랙스 레이어, 스태거 카드, 셰이프 모프(SVG 경로의 lerped d 사용), 글리치(clip-path 슬라이스), 마키, 카메라 푸시인(스테이지에 scale+translate), 장면 간 스크린 와이프.
- 규칙: 장면 전환 0.4초 겹침; 모든 요소는 이징 적용(절대 선형 금지); 동시에 최대 2개의 초점; 주요 텍스트 1.2초 이상 유지; transform/opacity만 애니메이션.
- 컨트롤: 재생/일시정지(space), 스크럽 바, 재시작,
?t=SECONDS시크 파라미터,window.seek(t)(내보내기용). prefers-reduced-motion을 존중하여 깜빡이는 글리치 장면을 자동 재생하지 않음.- 선택적 오디오: 장면 컷에 WebAudio 합성 히트 사운드(기본 꺼짐, 음소거 토글). 외부 오디오 절대 사용 금지.
3. 전달
- Artifact 도구를 통해 페이지 게시(publish); Artifact 도구가 없으면 /mnt/user-data/outputs에 create_file + present_files.
- 답변: 2문장 (무엇인지, 가정 사항). 장면별 설명 금지.
4. MP4 내보내기 (사용자가 요청한 경우에만)
Playwright headless: f를 0..1799까지 반복하며 seek(f/30) 호출, 1920x1080 스크린샷 -> 프레임; ffmpeg -framerate 30 -i f_%04d.png -c:v libx264 -pix_fmt yuv420p out.mp4. ffmpeg/playwright가 없으면 알리고, 재시도 대신 이 레시피를 사용자에게 제공.
5. 토큰 규율
- 다른 스킬을 읽지 말고, 미리보기 렌더링하지 말며, 요청 없이 폴리싱 패스를 하지 마십시오.
- 장면 간에 동일한 카드/타입 레이아웃을 재사용하고, 마크업 대신 모션을 다양화하십시오.
- 파일을 한 번의 도구 호출로 작성하십시오. 수정은 작은 str_replace 편집으로만 하고, 다시 작성하지 마십시오.
- 리서치는 1회 fetch + 1회 검색으로 제한하십시오.