programatic-demo은(는) 무엇을 하나요?
코드로부터 제품 데모 비디오를 생성합니다. Playwright가 실제 흐름을 기록하고, Remotion이 Screen Studio 스타일의 카메라 — 클릭 시 줌, 이징, 모션 블러 및 벡터 커서를 추가합니다.
사용 방법
- 저장소 복제 및 의존성 설치:
git clone <repository-url>
cd programatic-demo
npm install
- Playwright 브라우저 바이너리 설치:
npx playwright install
-
playwright/record.ts파일에 녹화할 시나리오를 Playwright 코드로 작성합니다. -
설정 파일 (
src/config.ts)에서 다음을 조정합니다:- 확대/축소 위치
- 이징 파라미터
- 모션 블러 강도
- 커서 스타일
-
데모 비디오 생성:
npm run demo
설정
주요 설정값은 src/config.ts에서 관리됩니다:
| 키 | 설명 | 기본값 |
|---|---|---|
zoomOnClick | 클릭 시 확대/축소 기능 | true |
easing | 카메라 움직임 이징 함수 | "easeInOutCubic" |
motionBlur | 모션 블러 강도 | 0.3 |
cursorStyle | 커서 스타일 | "vector" |
작동 방식
- Playwright가 사용자 상호작용 및 화면 전환을 기록합니다.
- 기록된 데이터를 Remotion이 입력으로 받아 애니메이션을 생성합니다.
- Remotion이 Screen Studio 스타일의 효과(확대/축소, 이징, 모션 블러, 벡터 커서)를 적용합니다.
- 최종 MP4 비디오가 출력됩니다.
지원 환경
- 모든 Playwright 지원 브라우저 (Chromium, Firefox, WebKit)
- Node.js 18 이상
- npm 또는 yarn
예제 출력
생성된 데모 비디오는 out/ 디렉토리에 저장됩니다.
라이선스
MIT