HTML 모션 그래픽
GSAP, 방향성 SVG 모션 블러, 통합 #world 카메라 리그, 선택적 Three.js WebGL 배경을 활용하여 제로 서버, 단독 index.html 파일로 시네마 등급의 결정론적 모션 그래픽을 빌드합니다.
사용 시기
index.html에서 프로모션 비디오, 제품 런칭 오프너, 티저, 브랜드 범퍼를 제작할 때.- 키네틱 타이포그래피, SaaS UI 제품 투어, 다중 장면 시각적 설명자를 구축할 때.
- 정적 슬라이드 형태의 웹 애니메이션을 진정한 카메라 기반 모션 디자인으로 변환할 때.
file://을 통해 직접 열리고 프레임 정확한 스크러빙과 헤드리스 MP4 렌더링을 지원하는 휴대용index.html을 제공할 때.
핵심 워크플로우
1단계: 크리에이티브 브리프 및 컨셉 프레임 확정
코드를 작성하기 전에, 출력이 일반적인 슬라이드쇼 템플릿처럼 보이지 않도록 간결한 스타일 브리프를 정의합니다:
- 종횡비 및 해상도: 기본적으로 데스크톱/YouTube용
1920x1080(16:9) 또는 Reels/TikTok/Shorts용1080x1920(9:16)을 사용합니다 (9:16 소셜 HUD 여백을 위해 콘텐츠를transform-origin: 50% 45%에서0.78로 스케일링된.safe컨테이너에 래핑). - 컨셉 아키텍처: 기본
hook -> 3 icon tiles -> CTA대신 주제에 따라 명확한 구조적 컨셉을 선택합니다:- 연속적인 세계 / 카메라 여행: 카메라가 장면을 통해 돌리, 궤도, 다이빙하는 하나의 통합된 공간.
- 살아있는 UI 투어: 커서/터치가 상호작용하고, 패널이 확장되며, 데이터가 결정론적으로 애니메이션되는 재구축된 DOM/SVG 제품 구성 요소.
- 문제에서 명확성으로: 시각적 혼란이 쌓이다가 단일 제품 동작이 프레임을 브랜드 마크로 깔끔하게 휩쓸어 냅니다.
- 순수 키네틱 타이포그래피: 단어가 다양한 축에서 진입하고, 가중치/크기를 변경하며, 최종 마크로 조립됩니다.
- 스테이지 카툰 / 연속 동작: 캐릭터나 주인공 주제가 활성 상태를 유지하는 동안 배경, 악기, 다이제틱 레이블이 주변에서 변경됩니다.
- 색상 및 표면 시스템: CSS 사용자 정의 속성 (
--base,--ink,--accent,--accent-lit)을 정의합니다. 단색 배경을 절대 남기지 마십시오. 최소한 두 개의 레이어를 결합합니다 (예: 방사형 수평선 글로우 + 선형 그래디언트, 부드러운 메시 블롭, 또는 WebGL 성운 + 표류 먼지 + SVG 필름 그레인 오버레이). - 오디오 및 타이밍 계획: 총 지속 시간 (
DURATION초)을 고정하고 모든 비트를 절대 타임스탬프(초)에 매핑합니다.
2단계: 단독 index.html 아키텍처 구축
인라인 <style> 및 `<script type=