clipwise 0.6.0 → 0.7.0

package/README.ko.md

@@ -80,6 +80,37 @@ const frames = await renderer.composeAll(session.frames);
 const mp4 = await encodeMp4(frames, scenario.output);
 ```
 
+## Claude Code 스킬
+
+Clipwise에는 [Claude Code](https://claude.com/claude-code) 스킬이 내장되어 있습니다. 설치 후 Claude Code에서 `/clipwise`를 입력하면 자연어로 YAML 시나리오 생성, 검증, 녹화까지 한 번에 할 수 있습니다.
+
+### 스킬 설치
+
+```bash
+npx clipwise install-skill
+```
+
+`.claude/skills/clipwise.md`에 스킬 파일이 복사됩니다 (`.claude/` 디렉토리가 있으면 프로젝트 레벨, 없으면 `~/.claude/skills/`에 설치).
+
+### 사용법
+
+Claude Code 세션에서:
+
+```
+/clipwise
+> http://localhost:3000 대시보드 데모 녹화해줘
+  — 로그인 버튼 클릭, 이메일/비밀번호 입력, 분석 페이지 이동
+```
+
+Claude가 자동으로:
+1. `clipwise.yaml` 시나리오 생성
+2. `npx clipwise validate`로 검증
+3. `npx clipwise record`로 MP4 녹화
+
+### 업데이트
+
+clipwise 업그레이드 후 `npx clipwise install-skill`을 다시 실행하면 최신 스킬로 업데이트됩니다.
+
 ## YAML 시나리오 형식
 
 시나리오는 4개 섹션으로 구성됩니다: 메타데이터, 이펙트, 출력, 스텝.
@@ -403,37 +434,6 @@ VideoToolbox는 런타임에 자동 감지되며, 사용 불가 시 `libx264`로
 
 [PROMPTS.md](./PROMPTS.md)에 바로 사용할 수 있는 AI 프롬프트 템플릿이 있습니다. ChatGPT나 Claude에 복붙하고 내 사이트 URL만 넣으면 YAML 시나리오를 생성해줍니다.
 
-## Claude Code 스킬
-
-Clipwise에는 [Claude Code](https://claude.com/claude-code) 스킬이 내장되어 있습니다. 설치 후 Claude Code에서 `/clipwise`를 입력하면 자연어로 YAML 시나리오 생성, 검증, 녹화까지 한 번에 할 수 있습니다.
-
-### 스킬 설치
-
-```bash
-npx clipwise install-skill
-```
-
-`.claude/skills/clipwise.md`에 스킬 파일이 복사됩니다 (`.claude/` 디렉토리가 있으면 프로젝트 레벨, 없으면 `~/.claude/skills/`에 설치).
-
-### 사용법
-
-Claude Code 세션에서:
-
-```
-/clipwise
-> http://localhost:3000 대시보드 데모 녹화해줘
-  — 로그인 버튼 클릭, 이메일/비밀번호 입력, 분석 페이지 이동
-```
-
-Claude가 자동으로:
-1. `clipwise.yaml` 시나리오 생성
-2. `npx clipwise validate`로 검증
-3. `npx clipwise record`로 MP4 녹화
-
-### 업데이트
-
-clipwise 업그레이드 후 `npx clipwise install-skill`을 다시 실행하면 최신 스킬로 업데이트됩니다.
-
 ## GitHub Pages
 
 `docs/` 폴더에 문서 사이트와 라이브 데모 대시보드가 포함되어 있습니다:

package/README.md

@@ -80,6 +80,37 @@ const frames = await renderer.composeAll(session.frames);
 const mp4 = await encodeMp4(frames, scenario.output);
 ```
 
+## Claude Code Skill
+
+Clipwise ships a built-in [Claude Code](https://claude.com/claude-code) skill. Once installed, type `/clipwise` in Claude Code to generate YAML scenarios, validate, and record — all through natural language.
+
+### Install the skill
+
+```bash
+npx clipwise install-skill
+```
+
+This copies the skill file to `.claude/skills/clipwise.md` (project-level if `.claude/` exists, otherwise `~/.claude/skills/`).
+
+### Usage
+
+In any Claude Code session:
+
+```
+/clipwise
+> Record a demo of my dashboard at http://localhost:3000
+  — click the login button, type credentials, navigate to analytics
+```
+
+Claude will:
+1. Generate a complete `clipwise.yaml` scenario
+2. Run `npx clipwise validate` to check for errors
+3. Run `npx clipwise record` to produce the MP4
+
+### Update
+
+Re-run `npx clipwise install-skill` after upgrading clipwise to get the latest skill.
+
 ## YAML Scenario Format
 
 A scenario has 4 sections: metadata, effects, output, and steps.
@@ -138,6 +169,7 @@ steps:
 | `waitForURL` | `url`, `timeout?` | `timeout: 15000` | Wait for URL match |
 | `waitForFunction` | `expression`, `polling?`, `timeout?` | `polling: "raf"`, `timeout: 30000` | Wait for JS expression to be truthy |
 | `waitForResponse` | `url`, `status?`, `timeout?` | `timeout: 30000` | Wait for network response (URL substring match) |
+| `smartWait` | `until`, `selector?`, `timeout?`, `displaySpeed?` | `until: "networkIdle"`, `timeout: 30000`, `displaySpeed: 8` | Smart wait — records real wait, auto-speeds in output |
 
 **`waitUntil`** options: `"load"`, `"domcontentloaded"`, `"networkidle"` (default)
 **`state`** options: `"visible"` (default), `"attached"`, `"hidden"`
@@ -196,6 +228,7 @@ zoom:
                        # 1.15x  | 1.25x | 1.35x    | 1.5x   | 1.8x
   # scale: 1.25       # Override with a numeric value instead of intensity
   duration: 800        # Zoom animation ms
+  easing: spring       # spring (natural) | ease-in-out (default)
   autoZoom:
     followCursor: true   # Viewport pans to follow cursor position
     transitionDuration: 300
@@ -210,7 +243,7 @@ zoom:
 | `strong` | 1.5× | Clear focus, some context sacrificed |
 | `dramatic` | 1.8× | Maximum emphasis, sparse UIs only |
 
-**Smart camera**: Zoom is automatically suppressed during scroll actions to avoid disorienting motion. When `followCursor` is enabled, the focal point smoothly pans to follow cursor position (not just click targets).
+**Smart camera**: Zoom is automatically suppressed during scroll actions to avoid disorienting motion. When `followCursor` is enabled, the focal point smoothly pans to follow cursor position (not just click targets). **Zone-aware zoom** (v0.7.0) merges nearby clicks into continuous zoom zones — no more jarring zoom-out/zoom-in between adjacent interactions. **Spring easing** (`easing: spring`) produces natural, Screen Studio-like camera motion with faster initial response and smooth deceleration.
 
 ### Cursor
 
@@ -298,6 +331,32 @@ speedRamp:
   actionSpeed: 0.8      # Slow factor near clicks
 ```
 
+### Smart Speed <sup>v0.7.0</sup>
+
+Content-aware speed control. Automatically compresses loading/wait periods while keeping meaningful content at normal speed. Detects CSS loading spinners via CDP Animation domain — no configuration needed.
+
+```yaml
+effects:
+  smartSpeed:
+    enabled: true
+    waitSpeed: 4            # Speed multiplier for wait/loading periods
+    idleSpeed: 4            # Speed multiplier for idle frames
+    transitionDuration: 500 # Ease-in/out duration (ms) — loader is visible before fast-forward
+
+steps:
+  - name: "Submit form"
+    actions:
+      - action: click
+        selector: "#submit-btn"
+      - action: smartWait          # Records real API wait, auto-compresses in output
+        until: selector            # networkIdle | selector | domStable
+        selector: ".success-toast"
+        timeout: 30000
+        displaySpeed: 4            # 4x fast-forward (spinner visibly spins faster)
+```
+
+**How it works**: `smartWait` records the actual wait (API calls, loading states) at full quality, then smartSpeed compresses those frames in the output. Loading spinners are **auto-detected** via CDP — frames during active `@keyframes spin/rotate/pulse` animations are automatically marked for compression.
+
 ### Transitions
 
 Control how steps transition to each other.
@@ -357,12 +416,15 @@ audio:
 
 Measured on **Apple M1 Max (10 cores)** — Pulse Dashboard demo, 44s @ 30fps, 1280×800:
 
-| Stage | v0.3.0 | v0.4.0 | v0.5.0 | v0.6.0 |
-|-------|--------|--------|--------|--------|
-| Recording | 30.8 s | 31.1 s | 31.1 s | 31.1 s |
-| Compose + Encode | 97.2 s | 60.6 s | 60.6 s | 60.6 s |
-| **Total** | **127.9 s** | **91.7 s** | **91.7 s** | **91.7 s** |
-| Frames captured | 1,303 | 902 | 902 | 902 |
+| Stage | v0.3.0 | v0.4.0 | v0.5.0 | v0.6.0 | **v0.7.0** |
+|-------|--------|--------|--------|--------|--------|
+| Recording | 30.8 s | 31.1 s | 31.1 s | 31.1 s | 58.3 s¹ |
+| Compose + Encode | 97.2 s | 60.6 s | 60.6 s | 60.6 s | **39.6 s** |
+| **Total** | **127.9 s** | **91.7 s** | **91.7 s** | **91.7 s** | **97.8 s**¹ |
+| Frames captured | 1,303 | 902 | 902 | 902 | 1,388 |
+| **ms/frame** | **69** | **67** | **67** | **67** | **23** |
+
+¹ v0.7.0 recording is longer due to more scenario steps (23 vs 20) and zoom-sustaining click events during typing. Compose throughput improved **3×** (69 → 23 ms/frame) via Sharp pipeline batching.
 
 Key optimisations in v0.4.0: concurrent streaming pipeline, static frame deduplication (~33% skipped), per-worker StaticLayers cache, and raw RGBA buffer pipeline.
 
@@ -370,6 +432,8 @@ v0.5.0 focuses on **recording quality**: smooth cursor, zoom intensity presets,
 
 v0.6.0 focuses on **convention alignment & expressiveness**: gentler defaults (light zoom, normal cursor speed), per-step effects override, new transitions (slide, blur), audio narration, and smart camera (scroll-aware zoom suppression + cursor-following focal point).
 
+v0.7.0 focuses on **quality leap**: spring physics zoom, zone-aware zoom continuity, focus point interpolation, `smartWait` + content-aware `smartSpeed`, auto loader detection (CDP Animation), HEVC 10-bit encoding (`-tune animation`), AV1 codec support, and Sharp pipeline batching (5→1 calls/frame).
+
 ## Output Compression
 
 Use the `preset` field to control quality and file size:
@@ -379,6 +443,7 @@ output:
   format: mp4
   fps: 30
   preset: social      # social | balanced | archive
+  codec: auto          # auto | h264 | hevc | av1
 ```
 
 | Preset | libx264 CRF | HEVC VideoToolbox q:v | Target use case |
@@ -483,37 +548,6 @@ npx clipwise record my-scenario.yaml -f mp4 -o ./output
 
 See [PROMPTS.md](./PROMPTS.md) for a ready-to-use prompt template. Copy-paste it to ChatGPT or Claude with your site URL, and get a working YAML scenario back.
 
-## Claude Code Skill
-
-Clipwise ships a built-in [Claude Code](https://claude.com/claude-code) skill. Once installed, type `/clipwise` in Claude Code to generate YAML scenarios, validate, and record — all through natural language.
-
-### Install the skill
-
-```bash
-npx clipwise install-skill
-```
-
-This copies the skill file to `.claude/skills/clipwise.md` (project-level if `.claude/` exists, otherwise `~/.claude/skills/`).
-
-### Usage
-
-In any Claude Code session:
-
-```
-/clipwise
-> Record a demo of my dashboard at http://localhost:3000
-  — click the login button, type credentials, navigate to analytics
-```
-
-Claude will:
-1. Generate a complete `clipwise.yaml` scenario
-2. Run `npx clipwise validate` to check for errors
-3. Run `npx clipwise record` to produce the MP4
-
-### Update
-
-Re-run `npx clipwise install-skill` after upgrading clipwise to get the latest skill.
-
 ## GitHub Pages
 
 Clipwise includes a documentation site and a live demo dashboard in the `docs/` folder. To host it: