{"_id":"@99motions/flow","name":"@99motions/flow","dist-tags":{"latest":"0.2.0"},"versions":{"0.2.0":{"name":"@99motions/flow","version":"0.2.0","description":"Instrument your app to capture product flows for 99Motions — screenshots, screen recording, waypoints, interactions.","license":"MIT","type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","bin":{"tour-engine":"dist/cli/index.cjs"},"exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}}},"scripts":{"build":"tsup","build:watch":"tsup --watch","prepublishOnly":"npm run build"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"dependencies":{"chalk":"^5.3.0","commander":"^12.1.0","ora":"^8.1.1","playwright":"^1.49.0"},"devDependencies":{"@types/node":"^22.0.0","@types/react":"^18.3.18","react":"^18.3.1","tsup":"^8.3.5","typescript":"^5.7.3","vue":"^3.5.13"},"keywords":["launchvid","tour","capture","product-video","playwright","react","vue"],"engines":{"node":">=18.0.0"},"_id":"@99motions/flow@0.2.0","_nodeVersion":"24.10.0","_npmVersion":"11.6.0","dist":{"integrity":"sha512-SVt4IocHsTZmfRD95ejyAUjrtZ/Bg4nYq0R3IWaQ0NmTgLtj0YE40EDi2cfsKQ4kKDU/OO7HTI5yxhXl9djgyw==","shasum":"03e62ab2ead1722390f156e3cb1158a35912e06e","tarball":"https://registry.npmjs.org/@99motions/flow/-/flow-0.2.0.tgz","fileCount":9,"unpackedSize":311181,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCGeh61x1ccTxUWUBgHT8uQK/DjOHxlkW5/FJg1BfyptAIhAJ+JpuEfvRa0I2n7mZnb9sVomglMnFFRNqXqZlLC9WXa"}]},"_npmUser":{"name":"techwarq","email":"sonalinayak0804@gmail.com"},"directories":{},"maintainers":[{"name":"techwarq","email":"sonalinayak0804@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/flow_0.2.0_1783153938430_0.8565794919271608"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-04T08:32:18.305Z","0.2.0":"2026-07-04T08:32:18.562Z","modified":"2026-07-04T08:32:18.762Z"},"maintainers":[{"name":"techwarq","email":"sonalinayak0804@gmail.com"}],"description":"Instrument your app to capture product flows for 99Motions — screenshots, screen recording, waypoints, interactions.","keywords":["launchvid","tour","capture","product-video","playwright","react","vue"],"license":"MIT","readme":"# @99motions/flow\n\nInstrument your app to capture real product flows — screenshots, screen recordings, interaction data, and waypoints — then feed them to **launchvid** to generate polished launch videos.\n\n---\n\n## Install\n\n```bash\nnpm install @99motions/flow\n```\n\n---\n\n## Quick start\n\n### 1. Create `tour.config.ts` in your project root\n\n```ts\nimport type { TourConfig } from '@99motions/flow';\n\nconst config: TourConfig = {\n project_name: \"MyProduct\",\n output_dir: \"./tour-output\",\n app_url: \"http://localhost:3000\", // your dev server\n capture: {\n screenshots: true,\n video: true,\n interactions: true,\n components: true,\n },\n};\n\nexport default config;\n```\n\n### 2. Wrap your app root\n\n**Next.js App Router** (`app/layout.tsx`):\n```tsx\nimport { TourProvider } from '@99motions/flow';\nimport tourConfig from '../tour.config';\n\nexport default function RootLayout({ children }) {\n return (\n \n \n {children}\n \n \n );\n}\n```\n\n**React / Vite** (`src/main.tsx`):\n```tsx\nimport { TourProvider } from '@99motions/flow';\nimport tourConfig from '../tour.config';\n\nReactDOM.createRoot(document.getElementById('root')!).render(\n \n \n \n);\n```\n\n**Vue 3** (`src/main.ts`):\n```ts\nimport { TourPlugin } from '@99motions/flow';\nimport tourConfig from '../tour.config';\n\napp.use(TourPlugin, tourConfig);\n```\n\n### 3. Mark key pages with waypoints\n\n```tsx\nimport { TourWaypoint } from '@99motions/flow';\n\nexport default function Dashboard() {\n return (\n \n ...
\n \n );\n}\n```\n\nOr use the hook:\n```tsx\nimport { useTourWaypoint } from '@99motions/flow';\n\nconst ref = useTourWaypoint({ name: \"dashboard\", description: \"Main dashboard\" });\nreturn ...
;\n```\n\n### 4. Add the capture script to `package.json`\n\n```json\n{\n \"scripts\": {\n \"tour:capture\": \"tour-engine capture --config tour.config.ts\"\n }\n}\n```\n\n### 5. Start your app, then capture\n\n```bash\n# Terminal 1\nnpm run dev\n\n# Terminal 2\nnpm run tour:capture\n```\n\nCaptured assets are written to `./tour-output//`:\n\n```\ntour-output/MyProduct/\n├── manifest.json ← launchvid reads this\n├── screenshot-hero.png\n├── screenshot-dashboard.png\n├── screenshot-pricing.png\n└── session.webm ← full session recording\n```\n\n### 6. Generate your launch video\n\n```bash\nlaunchvid --sdk\n```\n\n---\n\n## CLI reference\n\n```\ntour-engine capture [options]\n\nOptions:\n -c, --config Path to tour.config.ts (default: \"tour.config.ts\")\n -u, --url App URL, overrides config.app_url\n -v, --verbose Print each waypoint as it is captured\n -h, --help\n```\n\n---\n\n## TourConfig reference\n\n| Field | Type | Required | Description |\n|-------|------|----------|-------------|\n| `project_name` | `string` | ✓ | Used as output folder name and in the manifest |\n| `output_dir` | `string` | ✓ | Where to write captured assets |\n| `app_url` | `string` | | Dev server URL (default: `http://localhost:3000`) |\n| `capture.screenshots` | `boolean` | | Capture screenshots at each waypoint |\n| `capture.video` | `boolean` | | Record a full session video |\n| `capture.interactions` | `boolean` | | Log click and focus events |\n| `capture.components` | `boolean` | | Collect `data-component` attribute values |\n\n---\n\n## How it works\n\n1. **TourProvider / TourPlugin** instruments your React/Vue app at runtime and sets `data-tour-waypoint` attributes on marked elements.\n2. `tour-engine capture` launches a headless Playwright browser, navigates to your running app, and finds all `[data-tour-waypoint]` elements.\n3. At each waypoint it scrolls into view, waits for animations to settle, and takes a 1920×1080 screenshot.\n4. A full session video is recorded by Playwright's built-in recorder.\n5. Click and focus events are intercepted via an injected script.\n6. Everything is written to `manifest.json` in the output directory, which `launchvid --sdk` reads.\n","readmeFilename":"README.md","_rev":"1-fe41c7b44dbf141cc0333486a789ddf0"}