CheshireMew/visual-multimedia

웹 모션

목표

'변화 과정'을 통해 성립되는 콘텐츠를 편집 가능한 웹 애니메이션, 동적 다이어그램, GIF, 짧은 애니메이션 또는 설명형 B-roll로 만듭니다. 기본적으로 웹 소스 원본과 확정적 위치 추적이 가능한 타임라인 하나를 유지하고, 그로부터 사용자가 지정한 미디어를 파생합니다.

본 Skill은 일반 정적 카드, 기존 실사 촬영素材 클립, 오디오 프로그램 또는 주제 연구를 담당하지 않습니다. 저장소 내 리소스 경로는 Visual Multimedia 제품군 루트를 기준으로 하며, 현재 경로에 따라 읽습니다.

작업 방식

콘텐츠 원본, 대상, 출력 비율, 재생 방식 및 실제 지속 시간 출처를 확인합니다. 시청자에게 표시될 제목, 레이블, 자막 또는 나레이션 초안이 명확히 확인되지 않은 경우 먼저 $clean-copy에 전달하여 자체 확인을 기다립니다. 본 Skill은 더 이상 AI 문구 목록을 유지 관리하지 않습니다.

구현 전에 확인 가능한 계획을 한 번 제출합니다: 정확한 표시 텍스트, 장면 또는 상태 순서, 이동 매체, 시작-변화-결과, 캔버스 사양, 글꼴 및 색상 방향, 필요한 실제 자료와 출처를 포함한 후 중단합니다. 사용자가 명시적으로 확인을 건너뛰는 경우에만 직접 구현합니다. 움직임은 진행, 인과, 비교, 피드백 또는 상태 변화를 표현해야 하며; 단순히 제목 변경, 전체 페이지 페이드 인, 또는 카드 순차 등장으로는 동적 다이어그램으로 간주되지 않습니다.

확인된 콘텐츠를 의미적 세그먼트로 분할하고, 각 세그먼트에 새 정보, 사운드 범위, 화면 역할 및 시간 근거를 기록합니다. editable-media v6 웹 소스를 사용하여 window.editableMedia가 구조화된 상태를 저장하고, window.__hf.duration/seek(seconds)가 확정적인 시간을 제공하도록 합니다. 수동, 자동 및 혼합 재생 모두 동일한 의미적 타임라인을 읽으며, 두 번째 시계를 만들지 않습니다.

작업에 따라 필요한 경로만 선택합니다: 텍스트 모션은 텍스트 모션 라이브러리를 읽고, 기술적 메커니즘 변경은 의미적 그래픽 모션 규칙을 읽으며, 설명형 B-roll은 등록된 활동 템플릿을 사용합니다. 사용자가 명시적으로 HyperFrames를 선택한 경우에만 독립 렌더링 복사본을 만듭니다. 실사 촬영 또는 사운드와 함께 완전한 비디오로 조립해야 하는 경우 웹 세그먼트와 실제 시간 경계를 $video-production에 전달하고, 본 Skill에서 기존 클립 편집을 인계받지 않습니다.

구현 후 시작, 모든 주요 변화 및 결과 상태를 확인한 다음 전체 재생을 수행합니다. 무작위 위치 지정 일관성, 결과가 로컬 루프에 의해 재설정되지 않는지, 텍스트가 항상 읽기 가능한지, 카메라와 객체가 동일한 transform을 경쟁하지 않는지, GIF 또는 비디오 디코딩 프레임이 브라우저 소스 프레임과 일치하는지 확인합니다. 내보내기 실패 시 웹 소스를 보존하고 구체적인 단계를 보고하며, 조용히 경로를 변경하지 않습니다.

리소스

• ../../references/web-visual-production.md: 웹 소스, 장면, 재생 및 로컬 내보내기.
• ../../references/semantic-graphic-motion-production.md: 객체 관계와 상태 변화가 어떻게 움직임이 되는지.
• ../../references/text-motion-production.md, ../../scripts/text-motion-library.mjs, ../../assets/text-motion-library/text-motion-runtime.js, ../../assets/text-motion-library/text-motion-binding.js: 확정적 텍스트 모션 경로.
• ../../references/explanatory-broll-production.md: 설명형 B-roll의 템플릿 선택, 실제 시간 투영 및 투명 출력.
• ../../references/technical-diagram-production.md: 기술 다이어그램 및 안정적인 전체 모습 애니메이션.
• ../../references/hyperframes-rendering.md: 사용자가 명시적으로 HyperFrames를 선택한 경우에만 읽음.
• ../../scripts/validate-editable-media.mjs 및 ../../scripts/render-web-media-local.mjs: 구조 검증 및 로컬 공식 내보내기.

출력 및 완료

웹 소스, 현재 타임라인, 주요 상태 검사 이미지, 사용자가 요청한 GIF/비디오/투명 오버레이, 그리고 브라우저 소스 프레임과 최종 파일의 대조 결과를 제공합니다. 요청이 없는 경우 추가로 정적 카드, 완전한 편집 비디오 또는 다른 비율을 만들지 않습니다.