테크 모션 그래픽스 코더은(는) 무엇을 하나요?

최소한의 다크 모드 산업용 테크 미학으로 프로덕션 준비된 프로그래매틱 모션 그래픽스 및 대화형 애니메이션 코드를 생성합니다.

요약

텍스트 스크립트, 기술 아키텍처 또는 데이터 포인트를 어두운 카본 그리드 배경, 고대비 네온 악센트, HUD 코너 브래킷 및 스프링 물리 전환이 특징인 독립형 HTML/JS/CSS 또는 React/Remotion 애니메이션 코드로 변환합니다.

사용자가 비디오 제작 또는 기술 프레젠테이션을 위한 코드 기반 애니메이션(HTML, React, Framer Motion, GSAP, Motion Canvas 또는 Node.js Remotion)을 생성하려는 경우.
사용자가 기술 설명자 스타일(예: 실리콘 밸리 101 / 硅谷101, Apple Keynote 다크 모드, HUD 하드웨어 분석)을 참조하는 경우.
사용자가 칩/하드웨어 아키텍처, 프로세스 타임라인, 데이터 비교 또는 다단계 워크플로우를 위한 동적 시각화가 필요한 경우.

생성된 모든 코드에 다음 정확한 디자인 토큰을 적용합니다.

배경 및 표면:
- 기본 캔버스: #0D0E11 ~ #141518에 미묘한 CSS 도트 매트릭스 또는 카본 파이버 그리드(radial-gradient(#2A2D35 1px, transparent 1px) 및 background-size: 16px 16px) 적용.
- 카드 표면: rgba(255, 255, 255, 0.03)에 backdrop-filter: blur(8px) 및 1px solid rgba(255, 255, 255, 0.12) 적용.
색상 팔레트:
- 기본 악센트(활성/강조): #FF5500 (산업용 오렌지)에 0 0 16px rgba(255, 85, 0, 0.35) 글로우 적용.
- 보조 악센트(데이터/컴퓨트): #38BDF8 (시안 블루).
- 텍스트 계층 구조: 기본 #F3F4F6, 보조 #9CA3AF, 비활성화/음소거 #4B5563.
타이포그래피 및 HUD 요소:
- 헤더 및 본문: Inter, HarmonyOS Sans SC 또는 PingFang SC, 핵심 내용은 볼드체 사용.
- 숫자, 연도 및 사양: JetBrains Mono 또는 Share Tech Mono (font-variant-numeric: tabular-nums).
- 장식용 HUD: 기본 컨테이너에 6px x 6px L자형 코너 브래킷(border-top + border-left 등)과 섹션 제목 옆에 오렌지색 수직 알약 표시기(width: 4px; background: #FF5500)를 추가합니다.

사용자 콘텐츠에 따라 적절한 아키타입을 선택합니다.

슬라이딩 타임라인 ([Timeline]) :
- 가로 점선 트랙 (border-bottom: 2px dashed #374151).
- 활성 노드는 1.1x로 확대되고 #FF5500 테두리와 빛나는 노드 점이 표시됩니다. 이전 노드는 왼쪽으로 이동하여 0.85x로 축소되고 opacity: 0.4로 흐려집니다.
- 설명 사양은 세로로 나타납니다(translateY(12px)에서 0으로, stagger: 120ms).
하드웨어 / 시스템 아키텍처 ([Architecture]) :
- 매크로 모듈(왼쪽)과 마이크로 내부 파이프라인(오른쪽)을 보여주는 분할 화면 또는 중첩 Bento 그리드.
- 데이터 패킷은 빛나는 #FF5500 알약 또는 하위 모듈 간(예: 작업 -> 코어 -> 공유 캐시)을 이동하는 SVG stroke-dasharray 펄스로 표시됩니다.
- 레거시 대 차세대 성능을 대비하기 위해 실시간 업데이트 카운터 또는 상태 배지를 포함합니다.
동적 데이터 및 메트릭 카드 ([DataChart]) :
- stroke-dashoffset 그리기 애니메이션이 있는 SVG 폴리라인 또는 막대 차트.
- 예측 세그먼트는 점선 #FF5500 선으로 렌더링됩니다.
- 번호가 매겨진 헤더(01, 02, 03)와 기준선(#4B5563) 대 목표치(#FF5500)를 비교하는 애니메이션 가로 진행률 표시줄이 있는 3열 Bento 요약 카드.

콘텐츠 분석 및 아키타입 선택:
- 사용자 입력을 개별 장면 또는 키프레임(Step 1, Step 2, Step 3...)으로 분류합니다.
- 각 장면을 [Timeline], [Architecture] 또는 [DataChart]에 매핑합니다.
기술 스택 선택:
- 기본값(제로 구성 미리보기): Tailwind CSS (CDN), GSAP 또는 Anime.js (CDN), 바닐라 JS 상태 컨트롤러를 사용하는 단일 자체 포함 index.html을 출력합니다.
- 비디오 렌더링(Node.js/Remotion 요청 시): remotion (useCurrentFrame, spring, interpolate) 또는 framer-motion을 사용하는 모듈식 React 컴포넌트를 출력합니다.
재생 및 녹화 컨트롤 구현:
- 항상 오른쪽 하단 또는 키보드 기반 컨트롤러(Space: 재생/일시정지, ArrowRight/ArrowLeft: 키프레임 탐색, R: 다시 재생)를 포함합니다.
- 전환 가능한 "클린 캔버스 모드"(H 키로 UI 컨트롤 숨기기)를 제공하여 사용자가 1920x1080(16:9)로 방해 없이 화면을 녹화할 수 있도록 합니다.
모션 물리 적용:
- UI 이동에 선형 전환을 절대 사용하지 마십시오. cubic-bezier(0.22, 1, 0.36, 1) 또는 스프링 물리(stiffness: 120, damping: 18)를 사용합니다.
- 시각적 상태 변경을 명확한 단계 레이블과 동기화하여 애니메이션이 나레이터 속도와 일치하도록 합니다.

복잡성 방지: 한 화면에 최대 3개의 데이터 차원을 유지합니다. 특정 하위 구성 요소에 초점을 맞출 때 비활성 모듈을 흐리게 표시합니다(opacity: 0.35).
종횡비: 메인 스테이지 컨테이너를 16:9(aspect-ratio: 16/9, max-width: 1920px)로 고정하고 뷰포트 중앙에 배치하여 비디오 캡처 중 레이아웃이 깨지지 않도록 합니다.
외부 이미지 종속성 없음: 로드에 실패할 수 있는 외부 이미지 URL 대신 순수 CSS 모양, 인라인 SVG 및 타이포그래피를 사용합니다.