clipwise 0.11.0 → 0.11.1

package/README.ko.md

@@ -294,6 +294,7 @@ prepare:
 | 시드 데이터를 가진 "데모 모드" 구현 | `mock:` |
 | 일관된 데모를 위한 날짜/랜덤 스텁 | `freezeTime:` + `seedRandom:` |
 | 녹화용 온보딩 사전 완료 분기 | `storage:` |
+| 민감 정보(이메일·금액) 블러 | `mask:` — 요소 단위, 스크롤 추적 |
 
 `freezeTime` + `seedRandom`을 함께 쓰면 녹화가 **결정론적**이 됩니다 —
 같은 시나리오는 몇 번을 돌려도 바이트 단위로 동일한 프레임을 만듭니다.
@@ -327,11 +328,22 @@ scenes:
     push: { from: 1.05, to: 1 }
     start: { step: 3 }                             # step 경계에서 인용 시작
     rate: 1.15
-    fx: [{ kind: circle, selector: "#revenue", delay: 2500 }]
+    fx:
+      - { kind: circle, selector: "#revenue", delay: 2500 }     # 손그림 동그라미
+      - { kind: spotlight, selector: "#revenue", delay: 2500 }  # 주변 디밍
+    # push: { from: 1.0, to: 1.2, origin: ".panel" }            # 셀렉터를 향한 매치컷
+
+# 선택 — 무료 BGM을 URL로 (사용자 머신에서 다운로드) + 비트 싱크 컷
+audio: { file: "https://assets.mixkit.co/music/132/132.mp3", bpm: 120, volume: 0.32, fadeOut: 2000 }
+
+# 선택 — 캡션 필 (타임라인 절대 초), 모든 비율에 번인
+captions:
+  - { text: "실제 앱을 그대로 녹화했습니다", start: 0.4, end: 2.4 }
 ```
 
 **고퀄리티 레시피** (쇼케이스 영상이 이렇게 나오는 이유):
 1. `viewport.deviceScaleFactor: 2` — 레티나 해상도 캡처 (푸티지·타이포 전부)
+0. `output.aspects: ["9:16", "1:1"]` — 같은 실행에서 릴스/피드 파일까지 (푸티지는 1회 녹화)
 2. `prepare:` — 배너 숨김, 시간 동결, 랜덤 시드, API 목킹
 3. `.clipwise/brand.yaml` — 톤 프리셋, accent, 폰트 프리셋(`editorial` = Inter + Fraunces),
    캐치프레이즈. 선 드로잉 주석 + 연결 스레드는 자동 적용

package/README.md

@@ -296,6 +296,7 @@ prepare:
 | Build a "demo mode" with seeded data | `mock:` |
 | Stub dates and randomness for consistent demos | `freezeTime:` + `seedRandom:` |
 | Pre-complete onboarding for recordings | `storage:` |
+| Blur sensitive data (emails, amounts) | `mask:` — element-level, follows scrolling |
 
 Combined with `freezeTime` + `seedRandom`, recordings become **deterministic** —
 the same scenario produces byte-identical frames run after run.
@@ -330,11 +331,22 @@ scenes:
     push: { from: 1.05, to: 1 }
     start: { step: 3 }                             # quote from a step boundary
     rate: 1.15
-    fx: [{ kind: circle, selector: "#revenue", delay: 2500 }]
+    fx:
+      - { kind: circle, selector: "#revenue", delay: 2500 }     # hand-drawn circle
+      - { kind: spotlight, selector: "#revenue", delay: 2500 }  # dim everything else
+    # push: { from: 1.0, to: 1.2, origin: ".panel" }            # match-cut toward a selector
+
+# Optional — free BGM by URL (downloaded on your machine) + beat-synced cuts
+audio: { file: "https://assets.mixkit.co/music/132/132.mp3", bpm: 120, volume: 0.32, fadeOut: 2000 }
+
+# Optional — caption pills (timeline-absolute seconds), burned into every aspect
+captions:
+  - { text: "Recorded from a real app", start: 0.4, end: 2.4 }
 ```
 
 **Quality recipe** (what makes the showcase videos look the way they do):
 1. `viewport.deviceScaleFactor: 2` — retina-resolution capture (footage, type, everything)
+0. `output.aspects: ["9:16", "1:1"]` — reels/feed files from the same run (footage recorded once)
 2. `prepare:` — hide banners, freeze time, seed randomness, mock APIs
 3. `.clipwise/brand.yaml` — tone preset, accent, font preset (`editorial` = Inter + Fraunces), catchphrases; line annotations + the connecting thread switch on automatically
 4. Structure: kinetic hook → hero push-in → close-up vignettes → interstitial → split (YAML × footage) → outro

package/dist/cli/index.js

@@ -4642,7 +4642,7 @@ import { homedir } from "os";
 var program = new Command();
 program.name("clipwise").description(
   "Playwright-based cinematic screen recorder for product demos"
-).version("0.11.0");
+).version("0.11.1");
 program.command("record").description("Record a demo from a YAML scenario file").argument("<scenario>", "Path to YAML scenario file").option("-o, --output <dir>", "Output directory (default: scenario outputDir or .clipwise/output)").option(
   "-f, --format <format>",
   "Output format (gif|mp4|png-sequence)"
@@ -4926,6 +4926,11 @@ steps:
 name: "My Launch Video"
 viewport: { width: 1280, height: 800, deviceScaleFactor: 2 }   # 2 = retina quality
 
+# Optional extras (uncomment to use):
+# audio: { file: "https://assets.mixkit.co/music/132/132.mp3", bpm: 120, volume: 0.32, fadeOut: 2000 }
+# captions:
+#   - { text: "Recorded from a real app", start: 0.4, end: 2.4 }
+
 effects:
   cursor: { enabled: true, clickEffect: true, highlight: false, trail: false }
 
@@ -4934,6 +4939,7 @@ output:
   fps: 30
   preset: balanced
   filename: keynote
+  # aspects: ["9:16"]        # also render a reels-format file in the same run
 
 scenes:
   # footage take \u2014 recorded once; vignettes below quote it by step

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clipwise",
-  "version": "0.11.0",
+  "version": "0.11.1",
   "description": "Scriptable cinematic screen recorder for product demos — YAML in, polished MP4 out",
   "type": "module",
   "main": "dist/index.js",