@kaydash9999/banker-plugins 0.15.2 → 0.16.1

package/skills/3d-intro-build/references/intro-fixes.css

@@ -0,0 +1,61 @@
+/* Fixes for the vendored scroll-world engine (scrub-engine.js), applied by the page so the engine
+   file stays as shipped. The engine's own rules sit in `@layer sw`, so these unlayered rules win.
+   assemble.mjs links this file on every page. */
+
+/* The engine writes an inline transform on each copy block every frame (a small parallax), which
+   replaces the stylesheet's translateY(-50%), so the block hangs below the middle. The separate
+   `translate` property composes with that transform and keeps the block centred. At 860px and
+   below the engine anchors the block to the bottom instead, so the fix stops there. */
+@media (min-width: 861px) {
+  .sw-copy { translate: 0 -50%; }
+}
+
+/* At 860px and below the engine anchors the copy to the bottom across the screen, under its own
+   route dots (6px from the right edge, up to 40px wide on a touch screen), so the dots sit on the
+   text. A 52px right margin keeps the copy clear of them.
+   The engine's bottom margin (12dvh, 80px on a 667px phone) leaves the copy on the hint and the
+   main button, which reach 88px up from the bottom. The copy keeps 96px clear, plus the 2vh the
+   parallax moves it down; that is above the engine's margin at every height. */
+@media (max-width: 860px) {
+  .sw-copy { right: 52px; bottom: calc(96px + 2vh + env(safe-area-inset-bottom)); }
+}
+
+/* A short landscape screen (a phone on its side, a short window) has no room for the copy in one
+   column: it ran under the header and, with a CTA, off the top. The copy sits above the hint and
+   the main button (up to 88px) in two columns, the label, title and tags on the left, the
+   body and the CTA on the right, with smaller type and without the scene number (the route dots
+   show it). The child selector outweighs the glass panel's width. The insets keep the copy off a
+   phone's notch (the page uses viewport-fit=cover). */
+@media (max-height: 500px) and (orientation: landscape) {
+  .sw-copylayer > .sw-copy {
+    top: auto; bottom: calc(90px + 2vh + env(safe-area-inset-bottom)); translate: none;
+    left: max(clamp(18px, 5vw, 64px), calc(env(safe-area-inset-left) + 8px));
+    right: max(clamp(52px, 8vw, 120px), calc(env(safe-area-inset-right) + 44px)); width: auto; max-width: 760px;
+    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); grid-template-rows: auto 1fr auto;
+    grid-template-areas: "eyebrow body" "title body" "tags cta"; column-gap: clamp(16px, 3vw, 32px); align-items: start;
+  }
+  .sw-copy__num { display: none; }
+  .sw-copy__eyebrow { grid-area: eyebrow; margin-top: 0; }
+  .sw-copy__title { grid-area: title; margin-top: 6px; font-size: clamp(1.2rem, 6vh, 2rem); }
+  .sw-copy__body { grid-area: body; margin-top: 0; max-width: none; font-size: clamp(.84rem, 4vh, 1rem); line-height: 1.45; }
+  .sw-copy__tags { grid-area: tags; margin-top: 10px; }
+  .sw-copy__cta { grid-area: cta; margin-top: 10px; }
+  /* The shade rises from the bottom and reaches the top of the copy, which sits higher than in the
+     engine's phone layout. No room for the dot labels. */
+  .sw-copylayer::before {
+    width: 100%; height: 85%; top: auto; bottom: 0;
+    background: linear-gradient(0deg, var(--sw-bg) 0%, color-mix(in srgb, var(--sw-bg) 88%, transparent) 40%,
+      color-mix(in srgb, var(--sw-bg) 55%, transparent) 70%, transparent 100%);
+  }
+  .sw-route__label { display: none; }
+}
+
+/* The engine draws its primary buttons in white on the theme's ink colour, which a dark theme
+   (light ink) turns into white on a light pill. The theme's background colour reads on the ink in
+   any theme, as the body text reads on the background. */
+.sw-btn--primary, .sw-topcta { color: var(--sw-bg); }
+
+/* The engine sets overflow-x:hidden on html and body, which makes them scroll containers and breaks
+   position:sticky headers of a site the intro sits on. `clip` hides the overflow without that.
+   A browser without `clip` drops this line and keeps the engine's `hidden`. */
+html, body { overflow-x: clip; }

package/skills/3d-intro-build/references/panel-glass.css

@@ -0,0 +1,55 @@
+/* Frosted-glass copy panel for the scroll-world intro (opt-in: intro.json "panel": "glass").
+   Dark glass under light text, readable over bright and busy scenes.
+
+   Contrast rule: the body lines keep a contrast of at least 4.5 against the brightest real pixel
+   behind them (verify-intro.mjs measures it with the text hidden). When a bright scene falls below,
+   raise --intro-panel-alpha or deepen the shade; a lighter panel fails first on the body lines.
+   The colours below are a starting point: take --intro-panel-rgb from the brand's darkest colour. */
+
+.sw-root {
+  --intro-panel-rgb: 11, 18, 32;
+  --intro-panel-alpha: .36;
+  --intro-title: #fff;
+  --intro-body: #F1F5F9;
+  --intro-num: #E2E8F0;
+  --intro-text-shadow: 0 1px 2px rgba(var(--intro-panel-rgb), .9), 0 0 6px rgba(var(--intro-panel-rgb), .75),
+    0 0 16px rgba(var(--intro-panel-rgb), .6);
+}
+
+.sw-copy {
+  box-sizing: border-box;
+  width: min(44vw, 500px);
+  padding: clamp(18px, 2.2vw, 28px);
+  background: rgba(var(--intro-panel-rgb), var(--intro-panel-alpha));
+  -webkit-backdrop-filter: blur(10px) saturate(1.15);
+  backdrop-filter: blur(10px) saturate(1.15);
+  border: 1px solid rgba(255, 255, 255, .18);
+  border-radius: 18px;
+  box-shadow: 0 18px 48px rgba(0, 0, 0, .24);
+}
+
+.sw-copy__num { color: var(--intro-num); text-shadow: var(--intro-text-shadow); }
+.sw-copy__eyebrow { color: color-mix(in srgb, var(--sw-accent) 30%, #fff); text-shadow: var(--intro-text-shadow); }
+.sw-copy__title { color: var(--intro-title); text-shadow: var(--intro-text-shadow); }
+/* One item per line: write the body with line breaks, each short enough for one line at 375px
+   (about 36 Latin characters). */
+.sw-copy__body { color: var(--intro-body); text-shadow: var(--intro-text-shadow); white-space: pre-line; max-width: none; }
+
+/* A secondary (ghost) button has no fill, so its label sits on the dark glass: it takes the panel's
+   light text, whatever the theme's ink. */
+.sw-copy .sw-btn--ghost { color: var(--intro-title); border-color: rgba(255, 255, 255, .45); }
+
+/* A light shade behind the panel, from the left on wide screens. */
+.sw-copylayer::before {
+  background: linear-gradient(90deg, rgba(var(--intro-panel-rgb), .14) 0%, rgba(var(--intro-panel-rgb), .1) 40%,
+    rgba(var(--intro-panel-rgb), .04) 68%, transparent 100%);
+}
+
+/* At 860px and below the engine puts the panel at the bottom with side margins, and intro-fixes.css
+   does the same on a short landscape screen; the shade rises from the bottom instead. */
+@media (max-width: 860px), (max-height: 500px) and (orientation: landscape) {
+  .sw-copy { width: auto; }
+  .sw-copylayer::before {
+    background: linear-gradient(0deg, rgba(var(--intro-panel-rgb), .28) 0%, rgba(var(--intro-panel-rgb), .14) 45%, transparent 75%);
+  }
+}

package/skills/3d-intro-build/references/preview-lib.mjs

@@ -0,0 +1,256 @@
+/*
+ * Shared by serve.mjs and curate.mjs: the local servers of the 3d-intro-build skill (mirrored
+ * byte-identical into motion-graphic-make by scripts/sync-adapter.js).
+ *
+ * - A port the system picks (a preferred one first when asked), bound to loopback by default.
+ * - A state file recording { pid, port, requestedPort, host, url, dir }: serve.mjs keeps it beside
+ *   the folder it serves, curate.mjs in the project folder, which it does not serve (it serves
+ *   listed takes only).
+ * - Requests whose Host is a name other than localhost are refused, so a DNS name rebound to this
+ *   machine cannot read what is served.
+ * - A stop that ends only the process answering on that port with the recorded PID (a whole number
+ *   above 1), then waits for the port to close. Nothing is matched by command line (no pkill -f).
+ * - Files open before any header goes out, so one that cannot be read gets 403 and the server
+ *   stays up, and a download the browser drops closes its file.
+ * - An optional Content-Security-Policy header, so a page is checked under the policy it ships with.
+ *
+ * Runtime: Node >=18 builtins only (node:fs / node:http / node:net / node:path). No shell.
+ */
+import fs from 'node:fs';
+import http from 'node:http';
+import net from 'node:net';
+import path from 'node:path';
+import { pipeline } from 'node:stream';
+
+export const LOOPBACK = '127.0.0.1';
+// Answers { pid } so a stop can tell this server from another process on the same port.
+export const PID_ROUTE = '/__preview/pid';
+// As strict as a production site: no inline script or style. The scrub engine fetches its clips
+// from its own origin and plays them from blob: URLs.
+export const STRICT_CSP = [
+  "default-src 'self'", "script-src 'self'", "style-src 'self'", "img-src 'self' data: blob:",
+  "media-src 'self' blob:", "connect-src 'self'", "font-src 'self'", "object-src 'none'",
+  "base-uri 'self'", "frame-ancestors 'none'",
+].join('; ');
+
+export const MIME = {
+  '.html': 'text/html;charset=utf-8', '.css': 'text/css;charset=utf-8', '.js': 'text/javascript;charset=utf-8',
+  '.mjs': 'text/javascript;charset=utf-8', '.json': 'application/json;charset=utf-8', '.png': 'image/png',
+  '.jpg': 'image/jpeg', '.jpeg': 'image/jpeg', '.webp': 'image/webp', '.gif': 'image/gif', '.svg': 'image/svg+xml',
+  '.mp4': 'video/mp4', '.webm': 'video/webm', '.mov': 'video/quicktime', '.woff2': 'font/woff2',
+};
+
+// `strict` is the policy above; any other text is a policy as written; nothing means no header.
+export const cspFrom = (value) => (value ? (value === 'strict' ? STRICT_CSP : String(value)) : null);
+
+export function hostWarning(host) {
+  if (!host || [LOOPBACK, 'localhost', '::1'].includes(host)) return null;
+  return `주의: ${host} 에 바인드합니다. 같은 네트워크의 기기가 아직 공개하지 않은 산출물을 볼 수 있습니다. 끝나면 --stop 으로 닫으세요.`;
+}
+
+// True for a Host header naming this machine as localhost, by an IP address, or by a name the server
+// was bound to (`names`); any other DNS name fails, which is what a rebinding attack needs.
+export function hostAllowed(hostHeader, names = []) {
+  const h = String(hostHeader || '').trim().toLowerCase();
+  if (!h) return false;
+  if (h.startsWith('[')) return /^\[[0-9a-f:.]+\](:\d+)?$/.test(h);
+  const name = h.split(':')[0];
+  return name === 'localhost' || /^\d{1,3}(\.\d{1,3}){3}$/.test(name) || names.map((n) => String(n).toLowerCase()).includes(name);
+}
+
+// The request path without its query, or null when its escapes are broken.
+export function decodePath(rawUrl) {
+  try { return decodeURIComponent(String(rawUrl || '/').split('?')[0]); } catch { return null; }
+}
+
+// The file a request path names inside `dir`, or null when the path leaves it.
+export function resolveInside(dir, urlPath) {
+  const fp = path.normalize(path.join(dir, urlPath));
+  return fp === dir || fp.startsWith(dir + path.sep) ? fp : null;
+}
+
+export function send(res, status, body, headers = {}) {
+  res.writeHead(status, { ...headers, 'Content-Type': 'text/plain;charset=utf-8', 'Cache-Control': 'no-store' });
+  res.end(String(body));
+}
+
+// Read flags that never wait: a path that has turned into a FIFO opens at once and is then refused.
+export const READ_FLAGS = fs.constants.O_RDONLY | (fs.constants.O_NONBLOCK ?? 0);
+
+// An open regular file: { fd, size }, or { status } when there is none (404) or it cannot be read (403).
+function openRegular(fp) {
+  let fd;
+  try { fd = fs.openSync(fp, READ_FLAGS); } catch (e) { return { status: ['ENOENT', 'ENOTDIR', 'EISDIR'].includes(e.code) ? 404 : 403 }; }
+  let st = null;
+  try { st = fs.fstatSync(fd); } catch { /* a status the system cannot give (EIO on a network drive) */ }
+  if (st && st.isFile()) return { fd, size: st.size };
+  fs.closeSync(fd);
+  return { status: st ? 404 : 403 };
+}
+
+// Sends the bytes `start`..`end` of an open file (what the headers declared, even if the file grows
+// meanwhile) and closes it, also when the browser drops the download midway (a pipe would keep the
+// file open). Nothing to send closes the file and ends the response.
+function stream(res, fp, { fd, start, end }) {
+  if (end < start) {
+    fs.closeSync(fd);
+    return void res.end();
+  }
+  pipeline(fs.createReadStream(fp, { fd, start, end }), res, () => {});
+}
+
+// A file, with byte ranges for video (smoother scrubbing). Never cached: a rebuilt page is fresh.
+// The file is opened before any header goes out, so one that cannot be read gets 403 instead of
+// ending the server.
+export function sendFile(req, res, fp, headers = {}) {
+  const f = openRegular(fp);
+  if (f.status) return send(res, f.status, String(f.status), headers);
+  const type = MIME[path.extname(fp).toLowerCase()] || 'application/octet-stream';
+  const base = { ...headers, 'Content-Type': type, 'Accept-Ranges': 'bytes', 'Cache-Control': 'no-store' };
+  const range = type.startsWith('video/') ? /bytes=(\d+)-(\d*)/.exec(req.headers.range || '') : null;
+  if (range) return sendRange(res, fp, f, range, base, headers);
+  res.writeHead(200, { ...base, 'Content-Length': f.size });
+  stream(res, fp, { fd: f.fd, start: 0, end: f.size - 1 });
+}
+
+function sendRange(res, fp, f, range, base, headers) {
+  const start = Number(range[1]);
+  const end = Math.min(range[2] ? Number(range[2]) : f.size - 1, f.size - 1);
+  if (start >= f.size || start > end) {
+    fs.closeSync(f.fd);
+    res.writeHead(416, { ...headers, 'Content-Range': `bytes */${f.size}` });
+    return void res.end();
+  }
+  res.writeHead(206, { ...base, 'Content-Range': `bytes ${start}-${end}/${f.size}`, 'Content-Length': end - start + 1 });
+  stream(res, fp, { fd: f.fd, start, end });
+}
+
+// True when the request was the PID question, which this answers.
+export function answersPid(urlPath, res) {
+  if (urlPath !== PID_ROUTE) return false;
+  res.writeHead(200, { 'Content-Type': 'application/json', 'Cache-Control': 'no-store' });
+  res.end(JSON.stringify({ pid: process.pid }));
+  return true;
+}
+
+// Listens on `port` when given and free, else on a port the system picks. Resolves to the port.
+export function listen(server, { host = LOOPBACK, port } = {}) {
+  const attempt = (p) => new Promise((resolve, reject) => {
+    const onError = (e) => { server.off('listening', onListening); reject(e); };
+    const onListening = () => { server.off('error', onError); resolve(server.address().port); };
+    server.once('error', onError);
+    server.once('listening', onListening);
+    server.listen(p, host);
+  });
+  if (!port) return attempt(0);
+  return attempt(port).catch((e) => (e.code === 'EADDRINUSE' ? attempt(0) : Promise.reject(e)));
+}
+
+// The address a person opens: localhost for loopback and the wildcard, IPv6 in brackets.
+export function urlFor(host, port) {
+  if (!host || host === LOOPBACK || host === '0.0.0.0') return `http://localhost:${port}/`;
+  if (host === '::' || host === '::1') return `http://[::1]:${port}/`;
+  return host.includes(':') ? `http://[${host}]:${port}/` : `http://${host}:${port}/`;
+}
+
+// Where a stop asks a server for its PID: the address it was bound to, a wildcard at loopback.
+export function askHost(host) {
+  if (!host || host === '0.0.0.0') return LOOPBACK;
+  return host === '::' ? '::1' : host;
+}
+/**
+ * Whether the server a state file records answers a start that asks for `port`: one that asks no
+ * port, the port it listens on, or the port its own start asked for (busy then, so it got another).
+ */
+export const portMatches = (st, port) => !port || st.port === port || st.requestedPort === port;
+
+// The state file of a server for `dir`: beside the folder, so a deployed folder never carries it.
+export const siblingState = (dir) => path.join(path.dirname(dir), `${path.basename(dir)}.server.json`);
+
+export function writeState(file, info) {
+  fs.writeFileSync(file, JSON.stringify(info, null, 2) + '\n');
+}
+
+export function readState(file) {
+  try { return JSON.parse(fs.readFileSync(file, 'utf8')); } catch { return null; }
+}
+
+export const removeState = (file) => fs.rmSync(file, { force: true });
+
+// Removes a state file if it can. One that cannot be removed (a folder made read-only) stays; the
+// next start finds it stale. Stopping and closing go on either way.
+function dropState(file) {
+  try { removeState(file); } catch { /* left behind */ }
+}
+
+// Removes the state file when the process recorded there is this one.
+export function forgetSelf(file) {
+  if (readState(file)?.pid === process.pid) dropState(file);
+}
+
+const NONE = Symbol('none');
+// The PID the server on `port` says it has; NONE when nothing listens; null for another program.
+function askPid(port, timeoutMs, host) {
+  return new Promise((resolve) => {
+    const req = http.get({ host: askHost(host), port, path: PID_ROUTE, timeout: timeoutMs, headers: { Host: 'localhost' } }, (res) => {
+      let body = '';
+      res.on('data', (c) => { body += c; });
+      res.on('end', () => { try { resolve(JSON.parse(body).pid ?? null); } catch { resolve(null); } });
+    });
+    req.on('timeout', () => { req.destroy(); resolve(null); });
+    req.on('error', (e) => resolve(e.code === 'ECONNREFUSED' ? NONE : null));
+  });
+}
+
+const portOpen = (port, host) => new Promise((resolve) => {
+  const s = net.connect({ host: askHost(host), port }, () => { s.destroy(); resolve(true); });
+  s.on('error', () => resolve(false));
+});
+
+async function waitClosed(port, timeoutMs, host) {
+  for (const until = Date.now() + timeoutMs; Date.now() < until;) {
+    if (!(await portOpen(port, host))) return true;
+    await new Promise((r) => setTimeout(r, 100));
+  }
+  return !(await portOpen(port, host));
+}
+
+// A PID a state file may name: a whole number above 1 (never a process group, never init).
+const validPid = (pid) => Number.isInteger(pid) && pid > 1;
+
+/** True when the server a state file records still answers on its port with its PID. */
+export async function isRunning(stateFile) {
+  const st = readState(stateFile);
+  return Boolean(st && st.port) && validPid(st.pid) && (await askPid(st.port, 1500, st.host)) === st.pid;
+}
+
+function signal(pid, sig) {
+  try { process.kill(pid, sig); } catch { /* already gone */ }
+}
+
+// Stops the server a state file records. Result reasons: stopped, no-state, invalid-state (a PID
+// that is no process id; the file is left for a person to look at), not-running (the stale record
+// is removed), other-process (left alone), still-open.
+export async function stopServer(stateFile, { timeoutMs = 3000 } = {}) {
+  const st = readState(stateFile);
+  if (!st || !st.port) return { stopped: false, reason: 'no-state' };
+  if (!validPid(st.pid)) return { stopped: false, reason: 'invalid-state' };
+  const who = await askPid(st.port, Math.min(timeoutMs, 1500), st.host);
+  if (who === NONE) {
+    dropState(stateFile);
+    return { stopped: false, reason: 'not-running' };
+  }
+  if (who !== st.pid) return { stopped: false, reason: 'other-process' };
+  if (!(await terminate(st, timeoutMs))) return { stopped: false, reason: 'still-open' };
+  dropState(stateFile);
+  return { stopped: true, reason: 'stopped' };
+}
+
+// Ends a server that answered with its PID: SIGTERM, then SIGKILL while its port stays open. True
+// once the port is closed.
+async function terminate(st, timeoutMs) {
+  signal(st.pid, 'SIGTERM');
+  if (await waitClosed(st.port, timeoutMs, st.host)) return true;
+  signal(st.pid, 'SIGKILL');
+  return waitClosed(st.port, timeoutMs, st.host);
+}

package/skills/3d-intro-build/references/prompts.md

@@ -19,7 +19,7 @@ Higgsfield·Monid 같은 외부 CLI 플래그는 쓰지 않는다 — 크기·
 
 - **`SUBJECT`** — 대상 비즈니스/제품 + 한 줄 소개.
 - **`BRAND`** — 화면에 표시할 브랜드명.
-- **`SCENES[]` (순서 있는 씬 목록)** — 각 씬마다 `id`, `label`, `subject`(디오라마에 뭐가 있는지), `eyebrow`, `title`, `body`(1문장), `tags[]`(0~3). 마지막 씬 = 히어로 제품 + CTA.
+- **`SCENES[]` (순서 있는 씬 목록)** — 권장 5~7개. 이야기 순서는 브랜드에 맞게 정한다(예: 문제 제기, 해법, 결론, 또는 도착, 경험, 초대). 장면 하나에 뜻 하나다(7절). 각 씬마다 `id`, `label`, `subject`(장면에 뭐가 있는지), `eyebrow`, `title`, `body`, `tags[]`(0~3). 마지막 씬 = 결론(히어로 제품) + CTA. CTA 는 이 장면에만 둔다.
 - **`ORIENTATION`** — `720x1280`(세로) 또는 `1280x720`(가로). 스틸과 영상 크기가 이 값으로 통일된다. 세로는 모바일/스토리, 가로는 데스크톱/랜딩에 맞는다.
 - **`BUDGET`** — 상한 USD. 씬 수 × (이미지 1장 + 영상 클립)로 추정하며, 어떤 유료 호출보다 먼저 승인 게이트에서 총액을 제시한다.
 
@@ -31,6 +31,10 @@ Higgsfield·Monid 같은 외부 CLI 플래그는 쓰지 않는다 — 크기·
 - `CAMERA_FEEL` — fly-through(디오라마를 내려다보다 안으로 급강하) | walkthrough(한 번에 쭉 전진) | locked-iso(고정 아이소메트릭 활공). 느낌으로 제시하고 트레이드오프 한 줄씩 곁들인다.
 - `MOBILE` — yes/no. yes 면 세로 9:16 렌더를 별도로 만들어 `clipMobile`/`stillMobile` 로 배선한다(대략 2배 비용, 승인 게이트에 반영).
 - `STILLS_SOURCE` — 기본 `gpt-image-2`(`generateImage`). 씬 간 코히전을 더 강하게 원하면 `FLUX.2-pro`(`generateImageFlux`) 옵트인.
+- `CLIP_MODE` — `chain`(기본, 검증된 경로) 또는 `holdFlight`(장면마다 정지 클립, 장면 사이 첫과 끝 프레임을 지정한 비행 클립. WAN 필요, 이 스킬에서 미검증).
+- `SITE` — 단독 인트로 페이지 또는 기존 사이트 위에 붙임. 붙이면 그 사이트의 CSP, 본문 시작 선택자, 고정 헤더 선택자, 지원 언어를 받는다.
+- `STEP_NAV` — yes 면 휠 1칸, 키, 스와이프가 정확히 한 장면을 이동한다. 스크롤 동작을 가로채므로 사이트 성격을 보고 고른다.
+- `PANEL` — `glass` 면 흐린 유리 문구 패널. 기본값은 어두운 장면용이다. 밝은 장면이 많으면 대비 기준(4.5)을 지키도록 패널을 덜 투명하게(`--intro-panel-alpha` .6 이상) 한다.
 
 ---
 
@@ -106,7 +110,7 @@ in, the roof and upper structure gently lift and open away to reveal the warm in
 여닫을 건물이 없는 씬(들판·광장·도로)이면 지붕 절을 "the camera flies low across [the scene] toward [focal point]." 로 바꾼다.
 
 **Leg i (i ≥ 1) — 체이닝된 프레임에서 다음 씬으로:**
-`input_reference = colorMatch(extractLastFrame(clip[i-1]))` (직전 클립의 마지막 프레임을 톤 정합 1차 처리한 것).
+`firstFramePng = extractLastFrame(clip[i-1])` (직전 클립의 **raw** 마지막 프레임. 톤 정합을 걸면 연속성이 나빠진다: 실측 raw SSIM ~0.59, histeq 0.46).
 
 ```
 Single continuous cinematic camera move, no cuts. Continue the same continuous camera flight
@@ -142,12 +146,15 @@ tilt. It only travels straight and level, the world sliding past beneath the sam
 
 ---
 
-## 5. 두-이미지 커넥터 프롬프트 (옵트인 · **UNVALIDATED**)
+## 5. 비행 클립과 두-이미지 커넥터 프롬프트 (선택, **이 스킬에서 미검증**)
 
-`detectTwoImageSupport()` 가 참일 때만, 그리고 사용자가 명시적으로 선택할 때만 쓴다.
-두 씬 사이에 **진짜 커넥터**(첫 프레임 → 마지막 프레임 보간)를 만들어 aerial hop 을 넣는다.
-`createVideoTwoImage({ firstPng: dive_i 마지막 프레임, lastPng: dive_{i+1} 첫 프레임 })`.
-스모크로 검증되지 않은 경로다 — **어떤 실패에도 forward-chaining 으로 폴백**한다.
+장면 사이를 첫 프레임과 끝 프레임을 모두 지정한 클립으로 잇는다. 두 경로가 있다.
+
+- **holdFlight 의 비행 클립(WAN)** — `generateClip({ firstFramePng: 장면 i 스틸, lastFramePng: 장면 i+1 스틸, seconds: 5, order: ['wan'] })`.
+  장면마다 정지 클립(`stillToClip`, 무료)을 두므로 비행 클립의 첫과 끝 프레임이 앞뒤 장면과 맞는다. Sora 는 끝 프레임을 받지 못하므로 쓰지 않는다(`order: ['wan']`).
+- **Azure 두-이미지 커넥터** — `detectTwoImageSupport()` 가 참일 때만 `createVideoTwoImage({ firstPng: dive_i 마지막 프레임, lastPng: dive_{i+1} 첫 프레임 })`. 실패하면 forward-chaining 으로 폴백한다.
+
+두 경로 모두 유료 스모크로 확인하지 않았다. 첫 클립을 검토 페이지에서 먼저 확인받고 나머지를 만든다.
 
 ```
 Single continuous cinematic camera move, no cuts. The camera smoothly pulls up and back out of
@@ -157,7 +164,8 @@ seamless flowing aerial transition. [STYLE tail + PALETTE]. Smooth graceful slow
 no captions.
 ```
 
-히어로-제품 피날레로 들어가는 마지막 커넥터: "…glides forward and the world dissolves toward a single giant [PRODUCT] floating in soft [BG] space, arriving in front of it."
+히어로-제품 피날레로 들어가는 마지막 커넥터: "...glides forward and the world dissolves toward a single giant [PRODUCT] floating in soft [BG] space, arriving in front of it."
+포토리얼이나 건물 장면이면 "pulls up and back out" 을 장면에 맞는 이동(문, 유리, 외벽을 따라가는 이동)으로 바꾼다.
 
 ---
 
@@ -165,7 +173,22 @@ no captions.
 
 - `eyebrow` — 2~4단어, 대문자 느낌(가치 제안 라벨).
 - `title` — 3~6단어, 그 비트의 헤드라인. 첫 씬 = 사이트 히어로 라인, 마지막 = 페이오프 + CTA 를 얹는다.
-- `body` — 한 문장, 방문자 입장에서 평이하게.
+- `body` — 방문자 입장에서 평이하게. 유리 패널(`panel: "glass"`)이면 한 줄에 항목 하나로(권장 세 줄) 줄바꿈(`\n`)으로 나누고, 줄마다 375px 화면에서 한 줄에 들어가는 길이(영문 약 36자, 한글 약 18자)로 쓴다.
 - `tags` — 0~3개 짧은 증거 칩(예: "Fresh-cooked", "30-min delivery").
 
 이 값들은 `assemble.mjs` 가 읽는 `intro.json` 의 각 섹션에 그대로 들어가고, `mountScrollWorld` 가 화면 카피로 렌더한다.
+
+패널 안 순서는 번호(`01 / 07`), 라벨(`eyebrow`), 제목, 본문, 태그(2개 권장)다. 결론 장면만 CTA 버튼 2개를 더한다.
+
+---
+
+## 7. 장면 표현과 흔한 지적
+
+검토에서 자주 나오는 지적이다. 스틸 프롬프트를 쓸 때 미리 피하고, 지적이 나오면 그 장면이나 클립만 다시 만든다.
+
+- 장면 하나에 뜻 하나. 한 장면에 두 메시지를 넣지 않는다.
+- 행위 주체가 화면에서 드러나야 한다. 무엇이 문제를 일으키고 무엇이 막는지, 누가 쓰는지 보이게 한다.
+- 의도하지 않은 만화식 은유(예: 보호를 뜻하는 반투명 돔)는 유치해 보인다. 브랜드 톤이 장난스럽지 않으면 실제 사물과 공간으로 표현한다.
+- 일이 일어나는 자리가 맞아야 한다. 예: 막는 장면은 이미 뚫린 안쪽이 아니라 바깥 경계에서 막는 모습으로.
+- 화면 속 글자는 깨지기 쉽다. 프롬프트 끝의 "No text, no captions." 를 지키고, 글자가 깨진 결과는 재생성한다.
+- 사물이 엉뚱한 위치에 뜨거나, 강조색이 유리나 다른 물체로 번지면 그 결과만 재생성한다.