Motion
먼저 /hyperframes 스킬(렌더링 계약)을 읽고, 그 다음 brand/DESIGN.md를 읽으세요. 제작 디렉토리는 templates/base/의 복사본입니다.
기본 사항
templates/base/index.html에는 이미 색상 변수, 폰트, 3D 인터페이스 평면(#world), 유리 카드 스타일, 캐시 및 점 스타일이 포함되어 있습니다. 이 클래스들을 유지하고, 스타일을 재창조하지 마세요.- 영화 길이가 10초를 초과하면 각 서브 컴포지션별로
compositions/에 하나의 씬을 만듭니다(루트는 씬 호스트, 오디오, 배경 월드만 유지). - GSAP 로컬(
assets/js/gsap.min.js)을 사용합니다. 절대 CDN을 사용하지 마세요. 렌더링은 네트워크 없이 이루어집니다. - 폰트:
@font-face를assets/fonts/로 연결합니다.
모션 (스튜디오 값)
| 동작 | 값 |
|---|---|
| 텍스트 등장 | 캐시로부터: yPercent 110 → 0, 0.7~0.85초, expo.out, 줄 간격 80ms |
| 텍스트 퇴장 | yPercent 0 → -110, 0.36~0.4초, power3.in |
| 유리 카드 등장 | y +1250 → 0, 1.1초, expo.out |
| 점 | y 26 → 0 + 불투명도, 0.6초, expo.out, 간격 70ms |
| 선 | scaleX 0 → 1 (왼쪽에서부터), 0.7~0.8초, expo.out |
| 인터페이스 평면 | 지속적인 선형 스크롤, rotationX 56, rotationZ -20 |
| 유리 반사 | 영화당 한 번, 1.3초, power2.inOut |
| 숫자 카운트 | 0.9~1.4초, power3.out, 최종 값은 반올림하여 유지 |
기술적 금지 사항: letter-spacing, width, top, left 애니메이션; GSAP이 애니메이션하는 요소에 CSS transform 적용; 제목에 filter: blur 사용; 배경 헤일로나 그라데이션 (DESIGN.md 참조).
실제 인터페이스
애플리케이션을 보여줄 때는 실제 캡처(npx hyperframes capture <url> --json 사용, 예: mescentimes.cloud 같은 공개 사이트)를 사용하거나 HTML로 화면을 재구성하여 실제 CFA 프랑 데이터를 표시하세요. 절대 가짜 클라이언트 로고를 사용하지 마세요.
확인 후 렌더링
npx hyperframes check --json # 오류 제로
npx hyperframes snapshot --at <키프레임> # 각 프레임 확인
npx hyperframes render --output renders/<slug>.mp4
렌더링 후: 핸드폰에서 6개의 이미지 추출(ffmpeg -ss T -i … -vf scale=540:-2)하여 납품 전에 확인하세요.