clipwise 0.9.0 → 0.9.1

package/README.ko.md

@@ -25,6 +25,20 @@ npx clipwise@latest record .clipwise/scenarios/demo.yaml
 **Zero footprint**: Clipwise가 남기는 모든 것(시나리오, 픽스처, 인증 상태, 출력물)은
 `.clipwise/` 디렉토리 하나에 담깁니다. `rm -rf .clipwise` 한 줄로 모든 흔적이 사라집니다.
 
+### 처음 5분 가이드
+
+1. `npx clipwise@latest init` — 바로 쓸 수 있는 시나리오 2개와 함께 `.clipwise/` 생성
+2. `npx clipwise@latest record .clipwise/scenarios/keynote.yaml` — **수정 없이** 키노트
+   런치 영상이 렌더됩니다 (호스팅 데모 대시보드를 녹화)
+3. `.clipwise/output/keynote.mp4` 열기 — 이것이 기본으로 제공되는 퀄리티 기준입니다
+4. `keynote.yaml` 수정: `url:`과 셀렉터를 **내 앱**으로 교체, 캡션 문구 조정
+5. `brand.yaml` 수정: accent 컬러·폰트 프리셋·캐치프레이즈 — 영상 전체가 따라옵니다
+
+자연어가 편하시면 `npx clipwise install-skill` 후 Claude Code에서 `/clipwise`로
+요청하세요 — 키노트 레시피가 내장된 스킬이 YAML을 대신 작성합니다. 런치 영상이
+아니라 단순 화면 녹화가 필요하면 `scenarios/demo.yaml`과 아래
+[YAML 시나리오 형식](#yaml-시나리오-형식)에서 시작하세요.
+
 ## 요구사항
 
 - **Node.js** >= 18

package/README.md

@@ -25,6 +25,20 @@ npx clipwise@latest record .clipwise/scenarios/demo.yaml
 **Zero footprint**: everything Clipwise touches lives in one `.clipwise/` directory —
 scenarios, fixtures, auth state, output. Remove every trace with `rm -rf .clipwise`.
 
+### Your first 5 minutes
+
+1. `npx clipwise@latest init` — scaffolds `.clipwise/` with two ready scenarios
+2. `npx clipwise@latest record .clipwise/scenarios/keynote.yaml` — renders a full
+   keynote-style launch video **with zero edits** (it records the hosted demo dashboard)
+3. Open `.clipwise/output/keynote.mp4` — this is the quality bar you get out of the box
+4. Edit `keynote.yaml`: swap the `url:` and selectors for **your** app, tweak the captions
+5. Edit `brand.yaml`: your accent color, font preset, catchphrases — the whole video follows
+
+Prefer natural language? `npx clipwise install-skill`, then ask `/clipwise` in
+Claude Code — it writes these YAMLs for you (the skill ships with the full
+keynote recipe). For a plain screen recording instead of a launch video, start
+from `scenarios/demo.yaml` and the [YAML Scenario Format](#yaml-scenario-format) below.
+
 ## Requirements
 
 - **Node.js** >= 18

package/dist/cli/index.js

@@ -4522,7 +4522,7 @@ import { homedir } from "os";
 var program = new Command();
 program.name("clipwise").description(
   "Playwright-based cinematic screen recorder for product demos"
-).version("0.9.0");
+).version("0.9.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)"
@@ -4793,6 +4793,97 @@ steps:
     actions:
       - action: click
         selector: "#my-button"
+`;
+  const keynoteTemplate = `# Keynote-style launch video \u2014 runs AS-IS against the hosted demo.
+# Try it first:  clipwise record .clipwise/scenarios/keynote.yaml
+# Then replace the url + selectors with your own app.
+
+name: "My Launch Video"
+viewport: { width: 1280, height: 800, deviceScaleFactor: 2 }   # 2 = retina quality
+
+effects:
+  cursor: { enabled: true, clickEffect: true, highlight: false, trail: false }
+
+output:
+  format: mp4
+  fps: 30
+  preset: balanced
+  filename: keynote
+
+scenes:
+  # footage take \u2014 recorded once; vignettes below quote it by step
+  - type: screen
+    id: demo
+    steps:
+      - name: "Open"
+        captureDelay: 120
+        holdDuration: 1400
+        actions:
+          - action: navigate
+            url: "https://kwakseongjae.github.io/clipwise/demo/"   # \u2190 your app URL
+            waitUntil: networkidle
+      - name: "Stats"
+        captureDelay: 50
+        holdDuration: 700
+        actions:
+          - { action: hover, selector: "#stat-users" }             # \u2190 your selectors
+      - name: "Search"
+        captureDelay: 50
+        holdDuration: 500
+        actions:
+          - { action: type, selector: "#search-input", text: "growth report", delay: 28 }
+      - name: "Switch tab"
+        captureDelay: 50
+        holdDuration: 1100
+        actions:
+          - { action: click, selector: "#tab-daily" }
+      - name: "Table"
+        captureDelay: 80
+        holdDuration: 1300
+        actions:
+          - action: scroll
+            y: 420
+            smooth: true
+
+  # \u2500\u2500 timeline \u2500\u2500
+  - type: motion
+    template: kinetic-type
+    duration: 2200
+    props: { lines: "Ship *demos*,||not edits.", size: 86 }
+
+  - type: vignette
+    footage: demo
+    duration: 4200
+    layout: hero
+    num: "01"
+    label: "Cinematic camera"
+    caption: "Recorded from a real app \u2014 *zero code changes*"
+    push: { from: 1.02, to: 1.1 }
+    start: { step: 0, offset: 0.15 }
+    fx:
+      - { kind: circle, selector: "#stat-users", delay: 2700 }
+
+  - type: vignette
+    footage: demo
+    duration: 4000
+    layout: crop
+    num: "02"
+    label: "Close-up"
+    caption: "Selector-measured crop \u2014 *no pixel guessing*"
+    crop: { selector: "#chart-area", pad: 14 }
+    push: { from: 1.04, to: 1 }
+    start: { step: 3 }
+    rate: 1.1
+
+  - type: motion
+    template: kinetic-type
+    duration: 1900
+    props: { lines: "Your code,||*untouched.*", size: 80, fx: marker }
+
+  - type: motion
+    template: kinetic-type
+    duration: 2600
+    props: { lines: "*My Product*", size: 90, sub: "npx clipwise@latest init" }
 `;
   const gitignore = `# Clipwise local artifacts \u2014 safe to ignore
 auth/
@@ -4834,23 +4925,27 @@ catchphrases:
   await mkdir2(join3(baseDir, "fixtures"), { recursive: true });
   await mkdir2(join3(baseDir, "auth"), { recursive: true });
   await writeFile3(join3(baseDir, "scenarios", "demo.yaml"), template, "utf-8");
+  await writeFile3(join3(baseDir, "scenarios", "keynote.yaml"), keynoteTemplate, "utf-8");
   await writeFile3(join3(baseDir, "brand.yaml"), brandTemplate, "utf-8");
   await writeFile3(join3(baseDir, ".gitignore"), gitignore, "utf-8");
   console.log(chalk.green("Created .clipwise/\n"));
   console.log("  .clipwise/");
-  console.log("    scenarios/demo.yaml   \u2014 your first scenario (edit the URL)");
-  console.log("    brand.yaml            \u2014 tone & manner + catchphrases (Brand Kit)");
-  console.log("    prepare/              \u2014 CSS/JS injected only while recording");
-  console.log("    fixtures/             \u2014 mocked API responses (JSON)");
-  console.log("    auth/                 \u2014 storageState files (gitignored)");
-  console.log("    .gitignore            \u2014 keeps auth/, output/, cache/ out of git");
-  console.log("\nNext steps:");
-  console.log(`  1. Edit ${chalk.bold(".clipwise/scenarios/demo.yaml")} \u2014 change the URL to your site`);
-  console.log(`  2. Run ${chalk.bold("clipwise record .clipwise/scenarios/demo.yaml")}`);
-  console.log(`  3. Find your output in ${chalk.bold(".clipwise/output/")}`);
+  console.log("    scenarios/keynote.yaml \u2014 keynote launch video (runs as-is!)");
+  console.log("    scenarios/demo.yaml    \u2014 simple screen recording (edit the URL)");
+  console.log("    brand.yaml             \u2014 tone & font presets + catchphrases");
+  console.log("    prepare/               \u2014 CSS/JS injected only while recording");
+  console.log("    fixtures/              \u2014 mocked API responses (JSON)");
+  console.log("    auth/                  \u2014 storageState files (gitignored)");
+  console.log(`
+${chalk.bold("Try it right now")} (no edits needed \u2014 records the hosted demo):`);
+  console.log(`  ${chalk.bold("clipwise record .clipwise/scenarios/keynote.yaml")}`);
+  console.log("\nThen make it yours:");
+  console.log(`  1. Edit ${chalk.bold("keynote.yaml")} \u2014 swap the url + selectors for your app`);
+  console.log(`  2. Edit ${chalk.bold("brand.yaml")} \u2014 your accent color & catchphrases`);
+  console.log(`  3. Or let AI write scenarios: ${chalk.bold("clipwise install-skill")} \u2192 ask ${chalk.bold("/clipwise")} in Claude Code`);
   console.log(`
-Remove every trace anytime: ${chalk.bold("rm -rf .clipwise")}`);
-  console.log(`Or try the built-in demo: ${chalk.bold("clipwise demo")}
+Output lands in ${chalk.bold(".clipwise/output/")} \xB7 remove every trace: ${chalk.bold("rm -rf .clipwise")}`);
+  console.log(`Docs: ${chalk.bold("https://kwakseongjae.github.io/clipwise/")}
 `);
 });
 program.command("demo").description("Record a demo video of the Clipwise showcase dashboard").option("-o, --output <dir>", "Output directory", ".clipwise/output").option(

package/package.json

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