diff --git a/docs/guides/website-to-video.mdx b/docs/guides/website-to-video.mdx index 47f2d734f..eaaac28f1 100644 --- a/docs/guides/website-to-video.mdx +++ b/docs/guides/website-to-video.mdx @@ -141,7 +141,7 @@ npx hyperframes capture https://stripe.com ``` ``` -◇ Captured Stripe | Financial Infrastructure → captures/stripe-com +◇ Captured Stripe | Financial Infrastructure → capture Screenshots: 12 Assets: 45 @@ -151,7 +151,7 @@ npx hyperframes capture https://stripe.com | Flag | Default | Description | |------|---------|-------------| -| `-o, --output` | `captures/` | Output directory | +| `-o, --output` | `./capture` | Output directory (auto-suffixes to `./capture-2/`, `./capture-3/`, … if `./capture/` is taken) | | `--timeout` | `120000` | Page load timeout in ms | | `--skip-assets` | `false` | Skip downloading images and fonts | | `--max-screenshots` | `24` | Maximum screenshot count | @@ -208,7 +208,7 @@ See the [pipeline guide](/guides/pipeline#iterating) for more re-entry patterns. Sites using frameworks like Framer lazy-load images via IntersectionObserver. The capture scrolls through the page to trigger loading, but very long pages may miss images near the bottom. Adding a Gemini key improves descriptions of captured assets, but doesn't increase the count. - The capture uses pixel sampling combined with DOM computed styles. Dark sites should show dark colors in the palette. Check the scroll screenshots in `captures//screenshots/` to see what the capture actually saw. + The capture uses pixel sampling combined with DOM computed styles. Dark sites should show dark colors in the palette. Check the scroll screenshots in `/screenshots/` (default `./capture/screenshots/`) to see what the capture actually saw. Verify skills are installed: diff --git a/docs/packages/cli.mdx b/docs/packages/cli.mdx index 36bfddd95..1fc75cfa3 100644 --- a/docs/packages/cli.mdx +++ b/docs/packages/cli.mdx @@ -407,12 +407,12 @@ This is suppressed in CI environments, non-TTY shells, and when `HYPERFRAMES_NO_ ```bash npx hyperframes capture https://stripe.com - npx hyperframes capture https://linear.app -o captures/linear + npx hyperframes capture https://linear.app -o linear-capture npx hyperframes capture https://example.com --json ``` ``` - ◇ Captured Stripe | Financial Infrastructure → captures/stripe-com + ◇ Captured Stripe | Financial Infrastructure → capture Screenshots: 12 Assets: 45 @@ -422,7 +422,7 @@ This is suppressed in CI environments, non-TTY shells, and when `HYPERFRAMES_NO_ | Flag | Description | |------|-------------| - | `-o, --output` | Output directory (default: `captures/`) | + | `-o, --output` | Output directory (default: `./capture`; auto-suffixes to `./capture-2/`, `./capture-3/`, … if `./capture/` is taken) | | `--timeout` | Page load timeout in ms (default: 120000) | | `--skip-assets` | Skip downloading images and fonts | | `--max-screenshots` | Maximum screenshot count (default: 24) | diff --git a/packages/cli/src/commands/capture.ts b/packages/cli/src/commands/capture.ts index baa74ec32..b10d76f94 100644 --- a/packages/cli/src/commands/capture.ts +++ b/packages/cli/src/commands/capture.ts @@ -3,8 +3,8 @@ import { resolve } from "node:path"; import type { Example } from "./_examples.js"; export const examples: Example[] = [ - ["Capture a website", "hyperframes capture https://stripe.com"], - ["Capture to a specific directory", "hyperframes capture https://linear.app -o linear-video"], + ["Capture a website into ./capture/", "hyperframes capture https://stripe.com"], + ["Capture to a different directory", "hyperframes capture https://linear.app -o linear-video"], ["JSON output for AI agents", "hyperframes capture https://example.com --json"], [ "Pull a video from the captured manifest by index", @@ -29,7 +29,7 @@ export default defineCommand({ }, output: { type: "string", - description: "Output directory name", + description: "Output directory name (default: ./capture, then ./capture-2/, ./capture-3/, …)", alias: "o", }, "skip-assets": { @@ -69,6 +69,7 @@ export default defineCommand({ default: false, }, }, + // fallow-ignore-next-line complexity async run({ args }) { if (args.video) { const { runVideoMode } = await import("./capture/video.js"); @@ -96,13 +97,25 @@ export default defineCommand({ process.exit(1); } - // Determine output directory — default to captures/ to keep repo root clean - let outputName = args.output as string | undefined; - if (!outputName) { - const hostname = new URL(url).hostname.replace(/^www\./, ""); - outputName = `captures/${hostname.replace(/\./g, "-")}`; + const isDefaultOutput = !args.output; + let outputName = (args.output as string | undefined) ?? "capture"; + let outputDir = resolve(outputName); + + if (isDefaultOutput) { + const { existsSync } = await import("node:fs"); + // Auto-suffix when ./capture/ is taken: capture-2, capture-3, … so re-runs + // never silently merge into a previous capture's artifacts. + let n = 2; + while (existsSync(outputDir) && n < 100) { + outputName = `capture-${n}`; + outputDir = resolve(outputName); + n++; + } + if (existsSync(outputDir)) { + console.error(`./capture-{2..99} are all taken. Pass -o to pick a directory.`); + process.exit(1); + } } - const outputDir = resolve(outputName); const isJson = args.json as boolean; @@ -110,6 +123,9 @@ export default defineCommand({ const { c } = await import("../ui/colors.js"); console.log(); console.log(c.dim("◆") + " Capturing " + c.bold(url)); + if (isDefaultOutput && outputName !== "capture") { + console.log(` ${c.dim(`(./capture/ exists; writing to ./${outputName}/)`)}`); + } console.log(); } diff --git a/packages/cli/src/commands/snapshot.ts b/packages/cli/src/commands/snapshot.ts index 3588d8f2a..81b947d5a 100644 --- a/packages/cli/src/commands/snapshot.ts +++ b/packages/cli/src/commands/snapshot.ts @@ -84,8 +84,8 @@ async function extractVideoFrameToBuffer( } export const examples: Example[] = [ - ["Capture 5 key frames from a composition", "snapshot captures/stripe"], - ["Capture 10 evenly-spaced frames", "snapshot captures/stripe --frames 10"], + ["Capture 5 key frames from a composition", "snapshot capture"], + ["Capture 10 evenly-spaced frames", "snapshot capture --frames 10"], ]; /** diff --git a/skills/website-to-video/references/step-0-capture.md b/skills/website-to-video/references/step-0-capture.md index 57d974aaa..78870d20d 100644 --- a/skills/website-to-video/references/step-0-capture.md +++ b/skills/website-to-video/references/step-0-capture.md @@ -20,7 +20,7 @@ Example: `npx hyperframes capture https://stripe.com -o videos/stripe-launch/cap Keeping capture artifacts (`screenshots/`, `assets/`, `extracted/`, `AGENTS.md`, `CLAUDE.md`) in a dedicated `capture/` subfolder keeps them isolated from later build files (`SCRIPT.md`, `STORYBOARD.md`, `DESIGN.md`, `compositions/`, `index.html`, `narration.wav`, `transcript.json`, `renders/`, `snapshots/`), which all live at `/` root. -For exploratory captures that aren't becoming a video yet, `-o captures/` at the repo root is fine — the isolation convention only matters when you're building a video on top of the capture. +For exploratory captures that aren't becoming a video yet, the default `./capture/` (or any `-o ` you pick) is fine — the isolation convention only matters when you're building a video on top of the capture. ## Confirm it succeeded