Hipson HyperFrames 비디오은(는) 무엇을 하나요?

사용자가 비디오 합성, 웹사이트-투-비디오 워크플로우, 런칭 비디오, 제품 소개, 애니메이션 사례 연구, 피치 비디오, 소셜 숏폼 또는 HyperFrames를 사용한 렌더링 MP4 스타일 출력을 요청할 때 이 스킬을 사용합니다.

이 워크플로우를 일반 웹 UI 디자인에 병합하지 마십시오. HyperFrames 작업은 별도의 비디오 합성 경로입니다.

HyperFrames란 무엇인가

HyperFrames는 렌더링된 비디오를 위한 결정론적 HTML 합성 워크플로우입니다. 합성은 일반 HTML/CSS/JavaScript로 작성되고, 로컬에서 미리보기되며, Node.js와 FFmpeg 도구를 사용하여 비디오로 렌더링됩니다.

웹과 유사한 레이아웃이 시간이 지정된 비디오가 되어야 할 때 사용합니다: 제품 런칭, 기능 설명, 체인지로그 요약, 사례 연구 애니메이션, 피치 자산 또는 소셜 숏폼.

사용하지 말아야 할 경우

일반적인 정적 UI 디자인.
백엔드, API, 데이터베이스 또는 보안 전용 작업.
순수 React 컴포넌트 구현.
일회성 이미지 생성.
사용자가 비디오, 타임라인, 렌더, MP4 또는 HyperFrames를 요청하지 않은 모든 작업.

콜드 스타트

사용자가 비디오에 대해서만 설명하는 경우, 다음을 질문하거나 추론합니다:

대상 및 목표;
플랫폼 및 종횡비;
분량 및 FPS;
소스 사본;
시각적 참조 또는 브랜드 제약;
원하는 분위기;
오디오 또는 무음/자막 우선 전달;
출력 형식 및 마감일.

그런 다음 구현 전에 비디오 브리프를 생성합니다.

웜 스타트

사용자가 URL, 페이지, PDF, 대본, 체인지로그, CSV 또는 사본을 제공하는 경우:

스토리 비트를 추출합니다.
텍스트, 제품 UI, 차트, 스크린샷 또는 모션 카드로 표시할 수 있는 내용을 선택합니다.
타임스탬프가 있는 장면을 정의합니다.
로컬, 생성, 내보내기 또는 생략해야 하는 자산을 식별합니다.
HyperFrames 구현 브리프를 생성합니다.

핵심 HyperFrames 규칙

사용자가 명시적으로 프레임워크를 요청하지 않는 한 React 또는 Vue가 아닌 일반 HTML 구성을 사용합니다.
루트 구성 요소에는 data-composition-id, data-width 및 data-height가 포함되어야 합니다.
타임드 요소는 class="clip", data-start, data-duration 및 data-track-index를 사용합니다.
GSAP 타임라인은 일시 중지되고 window.__timelines에 등록되어야 합니다.
Math.random() 및 비동기 타임라인 설정을 피합니다.
비디오 요소는 음소거 상태로 유지하고 별도의 오디오 요소를 사용합니다.
라이브 네트워크 데이터나 런타임 무작위성보다 결정론적 렌더링을 선호합니다.
로컬 렌더링에는 Node.js 22+ 및 FFmpeg가 필요합니다.
사용 가능한 미리보기, 렌더 및 린트 명령을 사용합니다.

비디오 브리프 형식

# HyperFrames 비디오 브리프

## 목표
## 소스 자료
## 형식
종횡비, 분량, FPS, 플랫폼.

## 크리에이티브 방향
분위기, 시각적 스타일, 유형, 색상, 모션, 오디오.

## 장면 분석
장면별 타이밍, 비주얼, 자막, 모션, 오디오.

## HyperFrames 구현 참고 사항
HTML 구조, 데이터 속성, GSAP 타임라인, 자산, 명령.

## Codex 브리프
구체적인 구현 작업.

## QA 체크리스트
타이밍, 자막, 대비, 오디오, 렌더 품질, 결정론.

Codex 구현 브리프 요구 사항

다음을 포함합니다:

composition id;
width, height, FPS 및 분량;
대상 폴더 및 파일 이름;
장면 타이밍 테이블;
필수 자산 및 대체 자산;
텍스트/자막 소스;
정확한 애니메이션/타임라인 예상;
미리보기, 린트 및 렌더 명령;
로컬 출력 경로(일반적으로 git에서 무시됨);
결정론적 렌더링을 위한 QA 체크리스트.

QA 체크리스트

루트 요소에 필수 구성 데이터 속성이 있습니다.
모든 타임드 요소에 결정론적 data-start, data-duration 및 data-track-index가 있습니다.
타임라인이 일시 중지되고 window.__timelines에 등록됩니다.
최종 타이밍에 영향을 미치는 Math.random() 또는 비동기 설정이 없습니다.
비디오 요소는 음소거되고 오디오는 별개입니다.
자막은 대상 플랫폼 크기에서 읽을 수 있습니다.
대비가 충분합니다.
타이밍이 장면 분석과 일치합니다.
드롭된 프레임, 클리핑, 잘못된 크롭 및 오디오 동기화에 대해 렌더링된 출력을 검토합니다.
생성된 미디어는 의도적으로 승인되지 않는 한 git 외부에 유지됩니다.

저장소 위생

로컬 출력 폴더(예: hyperframes-output/, exports/ 또는 tmp/)를 렌더 및 생성된 자산에 사용합니다. 사용자가 명시적으로 소스 자산으로 승인하지 않는 한 생성된 대용량 MP4, WebM, MOV, WAV, MP3, SRT 또는 VTT 파일을 커밋하지 마십시오.

Hipson HyperFrames 비디오