clipwise 0.7.2 → 0.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clipwise",
-  "version": "0.7.2",
+  "version": "0.9.1",
   "description": "Scriptable cinematic screen recorder for product demos — YAML in, polished MP4 out",
   "type": "module",
   "main": "dist/index.js",
@@ -12,7 +12,8 @@
     "dist",
     "skills",
     "README.md",
-    "LICENSE"
+    "LICENSE",
+    "templates"
   ],
   "exports": {
     ".": {

package/skills/clipwise.md

@@ -46,6 +46,20 @@ effects:                  # All optional, sensible defaults
   watermark: ...
   speedRamp: ...
 
+prepare:                  # Optional — recording-time injection (app code untouched)
+  hide: ["#cookie-banner"]              # CSS selectors hidden during recording
+  freezeTime: "2026-06-10T09:00:00Z"    # freeze Date/Date.now (ISO 8601)
+  seedRandom: 42                        # deterministic Math.random
+  storage:                              # seeded before app boots
+    localStorage: { onboarding_done: "true" }
+  mock:                                 # network mocking — demo data without DB seeding
+    - url: "/api/stats"                 # URL substring match
+      fixture: ../fixtures/stats.json   # JSON file (relative to the YAML), or:
+      # body: { inline: data }          # inline body (fixture takes precedence)
+  inject:                               # arbitrary CSS/JS files (relative to the YAML)
+    css: ../prepare/demo.css
+    js: ../prepare/demo.js
+
 output:
   format: mp4             # mp4 | gif | png-sequence
   width: 1280             # Output width
@@ -53,7 +67,7 @@ output:
   fps: 30                 # 1-60
   preset: balanced        # social | balanced | archive
   codec: auto             # auto | h264 | hevc | av1
-  outputDir: "./output"
+  outputDir: ".clipwise/output"   # default
   filename: "my-recording"
 
 steps: []                 # Array of steps (min 1, first must have navigate)
@@ -231,6 +245,7 @@ deviceFrame:
   enabled: true
   type: browser               # browser | iphone | ipad | android | none
   darkMode: true
+  url: "app.example.com"   # address-bar display URL (default: localhost)
 ```
 
 | Type | Description |
@@ -325,6 +340,62 @@ steps:
 | balanced | General purpose, portfolio | ~4-6 MB |
 | archive | High-fidelity storage | larger |
 
+## Scenes — Keynote-Style Launch Videos (v0.9)
+
+When the user wants a **launch/intro video** (not just a screen recording), use a
+`scenes:` timeline. One `clipwise record` renders: kinetic typography → footage
+vignettes (crop/push-in/split + line annotations) → outro, connected by an ink
+thread that travels across cuts.
+
+```yaml
+viewport: { width: 1280, height: 800, deviceScaleFactor: 2 }   # 2 = retina quality
+
+scenes:
+  # footage take — recorded once, never shown directly; vignettes quote it
+  - type: screen
+    id: demo
+    steps: [...]                       # normal steps (first must navigate)
+
+  # kinetic typography card (built-ins: kinetic-type, intro-title, feature-callout)
+  - type: motion
+    template: kinetic-type
+    duration: 2200
+    props:
+      lines: "Ship *demos*,||not edits."   # || = line break, *word* = serif-italic accent
+      size: 86
+      # fx: marker                         # underline (default) | marker | off
+      # sub: "npx my-app init"             # outro command pill
+
+  # footage as a layer — declarative camera
+  - type: vignette
+    footage: demo
+    duration: 4200
+    layout: crop                       # hero (full window) | crop (close-up) | split (code × footage)
+    num: "02"
+    label: "Smart Speed"
+    caption: "Loading compressed, *results crisp*"
+    crop: { selector: ".panel", pad: 14, maxH: 250 }   # selector-measured, never guess pixels
+    push: { from: 1.05, to: 1 }        # push-in/out camera
+    start: { step: 3, offset: 0 }      # quote footage from a step boundary (or seconds)
+    rate: 1.15                         # playback speed of the quoted footage
+    fx:                                # line-draw annotations on the footage
+      - { kind: circle, selector: "#revenue", delay: 2500 }
+      - { kind: arrow, selector: ".panel", delay: 2900 }
+    # code: ["prepare:", "  hide: [...]"]   # split layout left code card
+```
+
+### High-quality keynote recipe (follow ALL of these)
+
+1. **`viewport.deviceScaleFactor: 2`** — without it the footage looks blurry in close-ups
+2. **`prepare:`** — hide cookie banners/dev overlays, `freezeTime`, `seedRandom`, `mock` APIs
+3. **`.clipwise/brand.yaml`** — tone/accent/font (`editorial` = Inter + Fraunces) + catchphrases; annotations & thread auto-apply
+4. **Structure** (≈23s): kinetic hook (2.2s) → hero push-in vignette (4.2s) → close-up vignette
+   with circle fx (3.6s) → result vignette (4.2s) → kinetic interstitial (1.9s) →
+   split YAML × footage (4.4s) → outro with `sub:` command pill (2.8s)
+5. **Footage effects**: in scenes mode set only `cursor:` (highlight: false) — zoom/frame/background
+   are handled by the vignette compositor, not the recorder
+6. Keep one screen take (~12-15s) and let vignettes quote segments via `start: { step: N }`
+
 ## Critical Rules
 
 1. **First step MUST contain a `navigate` action** — the browser needs a page to start
@@ -343,6 +414,8 @@ steps:
 14. **Auto loader detection**: CSS spinners (`@keyframes spin/rotate/pulse/bounce`) are passively detected via CDP and auto-marked for smartSpeed compression
 15. **Codec choice**: `av1` gives 40-60% smaller files but slower encode; `hevc` provides 10-bit color (no gradient banding); `auto` picks h264 for compatibility
 16. **smartWait over wait**: prefer `smartWait` over fixed `wait` for API calls and loading states — it captures real frames and auto-compresses them
+17. **Never suggest modifying the user's app code for a demo** — use `prepare:` instead: `hide:` for cookie banners/dev overlays, `mock:` for demo data (no DB seeding), `freezeTime:`/`seedRandom:` for deterministic dates and charts, `storage:` to skip onboarding. Keep prepare assets (fixtures, CSS) inside `.clipwise/`
+18. **Zero footprint**: scenarios live in `.clipwise/scenarios/`, fixtures in `.clipwise/fixtures/`, output defaults to `.clipwise/output/`. Scaffold with `npx clipwise init`; everything is removed with `rm -rf .clipwise`
 
 ## Timing Presets
 
@@ -359,15 +432,15 @@ steps:
 ## CLI Commands
 
 ```bash
-# Record from YAML scenario
-npx clipwise record <scenario.yaml> -f mp4 -o ./output
+# Record from YAML scenario (output defaults to .clipwise/output)
+npx clipwise record <scenario.yaml> -f mp4
 
 # Instant demo with built-in dashboard
 npx clipwise demo
 npx clipwise demo --device iphone
 npx clipwise demo --url https://my-app.com
 
-# Create template YAML
+# Scaffold .clipwise/ (scenarios, fixtures, prepare assets, auth)
 npx clipwise init
 
 # Validate scenario without recording
@@ -377,10 +450,12 @@ npx clipwise validate <scenario.yaml>
 ## Workflow
 
 1. Ask the user for: target URL, what actions to demo, and preferred style (snappy/cinematic)
-2. Generate a complete `clipwise.yaml` scenario
-3. Run `npx clipwise validate clipwise.yaml` to check for errors
-4. If valid, run `npx clipwise record clipwise.yaml -f mp4 -o ./output`
-5. If the user has specific selectors, use them. Otherwise suggest inspecting the page first
+2. If `.clipwise/` doesn't exist, run `npx clipwise init` first
+3. Generate a complete scenario at `.clipwise/scenarios/<name>.yaml`
+4. Run `npx clipwise validate .clipwise/scenarios/<name>.yaml` to check for errors
+5. If valid, run `npx clipwise record .clipwise/scenarios/<name>.yaml -f mp4`
+6. If the user has specific selectors, use them. Otherwise suggest inspecting the page first
+7. If the page shows cookie banners, dev overlays, live dates, or random data — add a `prepare:` block instead of asking the user to change their app
 
 ## Selector Discovery
 

package/templates/motion/feature-callout.html

@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<!--
+  feature-callout — 챕터 구분 설명 카드 (motion scene 템플릿)
+
+  데모 신 사이에 들어가 "지금부터 보여줄 것"을 설명한다.
+  규약: CSS @keyframes만 사용, animation-fill-mode: both (deterministic seek 호환)
+
+  Props (query param): num, title, desc, accent
+-->
+<html lang="ko">
+<head>
+<meta charset="utf-8" />
+<style>
+  :root { --accent: #6366f1; --bg: #0a0a0f; --fg: #f5f5f7;
+    --dim: rgba(245, 245, 247, 0.55); --glow-op: 0.09; }
+  html[data-tone="daylight"] { --bg: #faf9f7; --fg: #18181c;
+    --dim: rgba(24, 24, 28, 0.55); --glow-op: 0.06; }
+  html[data-tone="neon"] { --bg: #0c0616; --fg: #ffffff;
+    --dim: rgba(255, 255, 255, 0.6); --glow-op: 0.2; }
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  html, body { width: 100%; height: 100%; overflow: hidden; background: var(--bg);
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Pretendard", sans-serif; }
+
+  .stage { width: 100%; height: 100%; display: flex; align-items: center; }
+  .inner { padding-left: 14%; max-width: 76%; }
+
+  .num-row { display: flex; align-items: center; gap: 18px; margin-bottom: 22px;
+    animation: rise 900ms cubic-bezier(0.16, 1, 0.3, 1) 100ms both; }
+  .num { font-size: 15px; font-weight: 700; letter-spacing: 0.18em; color: var(--accent);
+    font-variant-numeric: tabular-nums; }
+  .num-line { width: 0; height: 1.5px; background: var(--accent); opacity: 0.6;
+    animation: grow 900ms cubic-bezier(0.16, 1, 0.3, 1) 250ms both; }
+
+  .title { font-size: 56px; font-weight: 700; letter-spacing: -0.02em; color: var(--fg);
+    margin-bottom: 18px; animation: rise 1000ms cubic-bezier(0.16, 1, 0.3, 1) 280ms both; }
+
+  .desc { font-size: 21px; font-weight: 400; line-height: 1.55;
+    color: var(--dim);
+    animation: rise 1000ms cubic-bezier(0.16, 1, 0.3, 1) 480ms both; }
+
+  html[data-tone="neon"] .title {
+    background: linear-gradient(92deg, var(--accent), #22d3ee);
+    -webkit-background-clip: text; background-clip: text; color: transparent;
+  }
+
+  .glow { position: absolute; right: -200px; top: 50%; width: 700px; height: 700px;
+    margin-top: -350px; border-radius: 50%;
+    background: radial-gradient(circle, var(--accent) 0%, transparent 62%);
+    animation: glow-in 2200ms ease-out both; }
+
+  @keyframes rise { from { opacity: 0; transform: translateY(26px); }
+                    to   { opacity: 1; transform: translateY(0); } }
+  @keyframes grow { from { width: 0; } to { width: 56px; } }
+  @keyframes glow-in { 0% { opacity: 0; transform: scale(0.7); }
+                       100% { opacity: var(--glow-op); transform: scale(1); } }
+</style>
+</head>
+<body>
+  <div class="stage">
+    <div class="glow"></div>
+    <div class="inner">
+      <div class="num-row"><span class="num">01</span><span class="num-line"></span></div>
+      <div class="title">Title</div>
+      <div class="desc">Description</div>
+    </div>
+  </div>
+
+  <script>
+    const p = new URLSearchParams(location.search);
+    if (p.get("num")) document.querySelector(".num").textContent = p.get("num");
+    if (p.get("title")) document.querySelector(".title").textContent = p.get("title");
+    if (p.get("desc")) document.querySelector(".desc").textContent = p.get("desc");
+    if (p.get("accent")) document.documentElement.style.setProperty("--accent", p.get("accent"));
+    if (p.get("tone")) document.documentElement.dataset.tone = p.get("tone");
+
+    window.__clipwiseSeek = (t) => {
+      for (const a of document.getAnimations()) { a.pause(); a.currentTime = t; }
+    };
+  </script>
+</body>
+</html>

package/templates/motion/intro-title.html

@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<!--
+  intro-title — motion scene 프로토타입 템플릿
+
+  규약 (deterministic seek 캡처 호환):
+  - 애니메이션은 CSS @keyframes / WAAPI 만 사용 (rAF 루프 금지)
+  - 모든 애니메이션에 animation-fill-mode: both (seek 시 in-effect 유지)
+  - 시스템 폰트만 사용 (웹폰트 로딩 비결정성 제거)
+
+  Props는 query param으로 주입: ?title=...&subtitle=...&accent=%236366f1
+-->
+<html lang="ko">
+<head>
+<meta charset="utf-8" />
+<style>
+  /* ── 톤앤매너 프리셋 (Brand Kit) ──
+     midnight(기본): 딥블랙 + 소프트 글로우 — 발표 영상 톤
+     daylight: 라이트 에디토리얼 — 문서/블로그 톤
+     neon: 딥퍼플 + 그라데이션 타이포 — 런치 하이프 톤 */
+  :root {
+    --accent: #6366f1;
+    --bg: #0a0a0f;
+    --fg: #f5f5f7;
+    --fg-dim: rgba(245, 245, 247, 0.55);
+    --glow-op: 0.10;
+    --title-weight: 700;
+  }
+  html[data-tone="daylight"] {
+    --bg: #faf9f7;
+    --fg: #18181c;
+    --fg-dim: rgba(24, 24, 28, 0.55);
+    --glow-op: 0.07;
+  }
+  html[data-tone="neon"] {
+    --bg: #0c0616;
+    --fg: #ffffff;
+    --fg-dim: rgba(255, 255, 255, 0.6);
+    --glow-op: 0.22;
+    --title-weight: 800;
+  }
+
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+
+  html, body {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background: var(--bg);
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Pretendard", sans-serif;
+  }
+
+  .stage {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 28px;
+    position: relative;
+  }
+
+  /* 은은한 배경 글로우 — 천천히 확장 */
+  .glow {
+    position: absolute;
+    width: 900px;
+    height: 900px;
+    border-radius: 50%;
+    background: radial-gradient(circle, var(--accent) 0%, transparent 60%);
+    opacity: 0;
+    animation: glow-in 2500ms ease-out both;
+  }
+  @keyframes glow-in {
+    0%   { opacity: 0; transform: scale(0.6); }
+    100% { opacity: var(--glow-op); transform: scale(1); }
+  }
+
+  .accent-line {
+    width: 0;
+    height: 3px;
+    border-radius: 2px;
+    background: var(--accent);
+    animation: line-grow 900ms cubic-bezier(0.16, 1, 0.3, 1) 200ms both;
+  }
+  @keyframes line-grow {
+    from { width: 0; opacity: 0; }
+    to   { width: 64px; opacity: 1; }
+  }
+
+  .title {
+    font-size: 72px;
+    font-weight: var(--title-weight);
+    letter-spacing: -0.02em;
+    color: var(--fg);
+    opacity: 0;
+    animation: rise-in 1100ms cubic-bezier(0.16, 1, 0.3, 1) 350ms both;
+  }
+  /* neon 톤: 그라데이션 타이포 */
+  html[data-tone="neon"] .title {
+    background: linear-gradient(92deg, var(--accent), #22d3ee);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+  }
+
+  .subtitle {
+    font-size: 26px;
+    font-weight: 400;
+    color: var(--fg-dim);
+    opacity: 0;
+    animation: rise-in 1100ms cubic-bezier(0.16, 1, 0.3, 1) 600ms both;
+  }
+
+  @keyframes rise-in {
+    from { opacity: 0; transform: translateY(28px); }
+    to   { opacity: 1; transform: translateY(0); }
+  }
+</style>
+</head>
+<body>
+  <div class="stage">
+    <div class="glow"></div>
+    <div class="accent-line"></div>
+    <h1 class="title">Title</h1>
+    <p class="subtitle">Subtitle</p>
+  </div>
+
+  <script>
+    // Props 주입 (애니메이션 seek 전, 로드 시 1회)
+    const params = new URLSearchParams(location.search);
+    if (params.get("title")) document.querySelector(".title").textContent = params.get("title");
+    if (params.get("subtitle")) document.querySelector(".subtitle").textContent = params.get("subtitle");
+    if (params.get("accent")) document.documentElement.style.setProperty("--accent", params.get("accent"));
+    if (params.get("tone")) document.documentElement.dataset.tone = params.get("tone");
+
+    // deterministic seek 훅 — Scene System의 핵심 메커니즘.
+    // 모든 문서 애니메이션을 pause 상태로 고정하고 currentTime만 외부에서 제어한다.
+    window.__clipwiseSeek = (t) => {
+      for (const a of document.getAnimations()) {
+        a.pause();
+        a.currentTime = t;
+      }
+    };
+  </script>
+</body>
+</html>

package/templates/motion/kinetic-type.html

@@ -0,0 +1,205 @@
+<!DOCTYPE html>
+<!--
+  keynote/kinetic-type — 키네틱 타이포 인터스티셜 (Anthropic 키노트 문법)
+
+  아이보리 무대 위 짧은 선언문. 단어 단위 스태거 등장, *단어*는 악센트 세리프 이탤릭.
+  Props (query): lines ("||"로 줄 구분), accent, size, font, fx, sub,
+                 threadFrom/threadTo (0..1 — 장면을 관통하는 연결 선의 진행 구간)
+-->
+<html lang="ko">
+<head>
+<meta charset="utf-8" />
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400..900&family=Space+Grotesk:wght@400..700&family=Fraunces:ital,opsz,wght@1,9..144,400..700&family=JetBrains+Mono:wght@400;600&display=block" rel="stylesheet" />
+<link href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css" rel="stylesheet" />
+<style>
+  :root { --ivory: #faf9f5; --ink: #141413; --accent: #6366f1; }
+
+  /* ── 폰트 프리셋 (Brand Kit `font:`) ──
+     editorial(기본): Inter 800 + Fraunces 이탤릭 강조 — 곡선이 풍부한 디스플레이 세리프
+     grotesk: Space Grotesk 디스플레이 — 테크 런치 무드
+     system: 시스템 스택 (네트워크 불필요 폴백) */
+  :root {
+    --sans: "Inter", "Pretendard Variable", -apple-system, sans-serif;
+    --em: "Fraunces", Georgia, serif;
+    --em-style: italic;
+    --em-weight: 560;
+    --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
+  }
+  html[data-font="grotesk"] {
+    --sans: "Space Grotesk", "Pretendard Variable", -apple-system, sans-serif;
+    --em: "Space Grotesk", "Pretendard Variable", sans-serif;
+    --em-style: normal;
+    --em-weight: 700;
+  }
+  html[data-font="system"] {
+    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Pretendard", sans-serif;
+    --em: Georgia, "Times New Roman", serif;
+    --mono: "SF Mono", ui-monospace, Menlo, monospace;
+  }
+
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  html, body { width: 100%; height: 100%; overflow: hidden; background: var(--ivory);
+    font-family: var(--sans);
+    /* 한글 폴백에 가짜 기울임 합성 금지 — 강조 단어가 한글이면 정자 + 색/주석만 */
+    font-synthesis: none; }
+
+  /* 종이 그레인 + 비네팅 — 무대에 필름 질감 (정적, 비용 0) */
+  body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 10;
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="220" height="220"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2"/></filter><rect width="220" height="220" filter="url(%23n)" opacity="0.5"/></svg>');
+    opacity: 0.05; }
+  body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 10;
+    background: radial-gradient(ellipse 130% 110% at 50% 42%, transparent 62%, rgba(20,20,19,0.07) 100%); }
+
+  .stage { width: 100%; height: 100%; display: flex; flex-direction: column;
+    align-items: center; justify-content: center; gap: 6px; position: relative; }
+  .line { display: flex; gap: 0.28em; position: relative; z-index: 3; }
+  .w { font-size: var(--size, 76px); font-weight: 800; letter-spacing: -0.035em;
+    color: var(--ink); line-height: 1.18;
+    opacity: 0; animation: word-in 650ms cubic-bezier(0.16, 1, 0.3, 1) both; }
+  .w.em { position: relative; color: var(--accent); font-family: var(--em);
+    font-style: var(--em-style); font-weight: var(--em-weight);
+    font-size: calc(var(--size, 76px) * 1.05); letter-spacing: -0.015em; }
+
+  /* ── 선 드로잉 강조 (fx=underline) — 폰트 로딩 후 px 공간에서 단일 곡선으로
+     그린다 (비균등 viewBox 확대 + non-scaling-stroke는 선이 끊겨 보였음) ── */
+  .w.em svg.underline { position: absolute; overflow: visible; pointer-events: none; }
+  .w.em svg.underline path { stroke: var(--accent); stroke-width: 4; fill: none;
+    stroke-linecap: round;
+    stroke-dasharray: 1; stroke-dashoffset: 1;
+    animation: draw 460ms cubic-bezier(0.4, 0, 0.2, 1) both; }
+
+  /* ── 마커 스와이프 강조 (fx=marker) — 형광펜이 칠해짐 ── */
+  .w.em .marker { position: absolute; inset: 0.04em -0.12em -0.02em -0.12em; z-index: -1;
+    background: color-mix(in srgb, var(--accent) 26%, transparent);
+    border-radius: 0.08em; transform: scaleX(0) skewX(-2deg); transform-origin: left center;
+    animation: swipe 420ms cubic-bezier(0.4, 0, 0.2, 1) both; }
+
+  @keyframes draw { to { stroke-dashoffset: 0; } }
+  @keyframes swipe { to { transform: scaleX(1) skewX(-2deg); } }
+  .sub { margin-top: 30px; font-family: var(--mono);
+    font-size: 19px; color: var(--ink); background: #ffffff;
+    border: 1px solid #e8e6dc; border-radius: 12px; padding: 13px 26px;
+    box-shadow: 0 10px 30px -12px rgba(20, 20, 19, 0.18);
+    opacity: 0; animation: word-in 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
+    position: relative; z-index: 3; }
+  .sub .dollar { color: var(--accent); margin-right: 9px; }
+  @keyframes word-in { from { opacity: 0; transform: translateY(0.45em) rotate(0.4deg); }
+                       to   { opacity: 1; transform: translateY(0) rotate(0); } }
+
+  /* ── 스레드 — 영상 전체를 관통하는 한 줄의 잉크 선.
+     threadFrom→threadTo 구간을 신 길이 동안 선형으로 전진시키면
+     하드컷을 넘어도 같은 경로 위에서 끊김 없이 이어진다. ── */
+  .thread { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
+  .thread path { fill: none; stroke: var(--accent); stroke-width: 2.5; opacity: 0.55;
+    stroke-linecap: round;
+    animation: thread-go linear both; }
+  @keyframes thread-go {
+    from { stroke-dasharray: var(--tf) 1; }
+    to   { stroke-dasharray: var(--tt) 1; }
+  }
+  .thread-dot { position: absolute; width: 9px; height: 9px; border-radius: 50%;
+    background: var(--accent); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 60%, transparent);
+    z-index: 2; offset-rotate: 0deg;
+    animation: dot-go linear both; }
+  @keyframes dot-go {
+    from { offset-distance: calc(var(--tf) * 100%); }
+    to   { offset-distance: calc(var(--tt) * 100%); }
+  }
+</style>
+</head>
+<body>
+  <div class="stage" id="stage"></div>
+  <script>
+    const P = new URLSearchParams(location.search);
+    document.documentElement.style.setProperty("--accent", P.get("accent") || "#6366f1");
+    if (P.get("size")) document.documentElement.style.setProperty("--size", P.get("size") + "px");
+    document.documentElement.dataset.font = P.get("font") || "editorial";
+    const FX = P.get("fx") || "underline"; // underline | marker | off
+
+    const stage = document.getElementById("stage");
+    const emWords = []; // 폰트 로딩 후 px 공간에서 밑줄을 그릴 대상
+    let delay = 120;
+    for (const lineText of (P.get("lines") || "Lines missing").split("||")) {
+      const line = document.createElement("div");
+      line.className = "line";
+      for (const token of lineText.split(" ")) {
+        const w = document.createElement("span");
+        // *단어* 강조 — 뒤따르는 구두점(쉼표/마침표 등)은 강조 밖으로
+        const m = token.match(/^\*(.+)\*(.*)$/);
+        w.className = m ? "w em" : "w";
+        w.textContent = m ? m[1] : token;
+        w.style.animationDelay = delay + "ms";
+        if (m && FX === "underline") {
+          emWords.push({ el: w, delay: delay + 420 });
+        } else if (m && FX === "marker") {
+          const mk = document.createElement("i");
+          mk.className = "marker";
+          mk.style.animationDelay = delay + 380 + "ms";
+          w.appendChild(mk);
+        }
+        delay += 90;
+        line.appendChild(w);
+        if (m && m[2]) {
+          const tail = document.createElement("span");
+          tail.className = "w";
+          tail.textContent = m[2];
+          tail.style.animationDelay = delay - 90 + "ms";
+          tail.style.marginLeft = "-0.22em";
+          line.appendChild(tail);
+        }
+      }
+      stage.appendChild(line);
+      delay += 60;
+    }
+
+    // 아웃트로용 커맨드 필 (sub 파라미터)
+    if (P.get("sub")) {
+      const sub = document.createElement("div");
+      sub.className = "sub";
+      sub.innerHTML = `<span class="dollar">$</span>${P.get("sub")}`;
+      sub.style.animationDelay = delay + 350 + "ms";
+      stage.appendChild(sub);
+    }
+
+    // ── 스레드: 모든 신이 공유하는 동일 경로 — 구간만 다르게 전진 ──
+    const THREAD_PATH = "M -6 716 C 150 704, 320 730, 480 714 S 770 724, 940 706 S 1180 728, 1286 712";
+    const tf = P.get("threadFrom"), tt = P.get("threadTo");
+    if (tf !== null && tt !== null) {
+      const durS = parseFloat(P.get("dur") || "3");
+      const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+      svg.setAttribute("class", "thread");
+      svg.setAttribute("viewBox", "0 0 1280 800");
+      svg.innerHTML = `<path d="${THREAD_PATH}" pathLength="1"
+        style="--tf:${tf};--tt:${tt};animation-duration:${durS}s"/>`;
+      stage.appendChild(svg);
+      const dot = document.createElement("div");
+      dot.className = "thread-dot";
+      dot.style.cssText = `--tf:${tf};--tt:${tt};offset-path:path('${THREAD_PATH}');animation-duration:${durS}s`;
+      stage.appendChild(dot);
+    }
+
+    // ── 밑줄: 폰트 로딩 후 실측 너비로 단일 곡선을 그린다 ──
+    const ready = document.fonts.ready.then(() => {
+      for (const { el, delay: d } of emWords) {
+        const w = el.getBoundingClientRect().width;
+        const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+        svg.setAttribute("class", "underline");
+        svg.setAttribute("width", String(w + 12));
+        svg.setAttribute("height", "16");
+        svg.style.left = "-6px";
+        svg.style.bottom = "-0.16em";
+        svg.innerHTML = `<path d="M 3 10 Q ${(w + 12) / 2} ${10 - Math.min(7, w * 0.03)} ${w + 9} 8"
+          pathLength="1" style="animation-delay:${d}ms"/>`;
+        el.appendChild(svg);
+      }
+    });
+
+    window.__clipwiseSeek = async (t) => {
+      await ready;
+      for (const a of document.getAnimations()) { a.pause(); a.currentTime = t; }
+    };
+  </script>
+</body>
+</html>