{"_id":"@boomarche/beacon","_rev":"2-b523f8d7e1c21e389e6d4f4528426895","name":"@boomarche/beacon","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@boomarche/beacon","version":"0.1.0","keywords":["showcase","animation","screen-recording","playwright","remotion","mp4","demo","feature-demo"],"author":{"name":"Kaan Dinler"},"license":"MIT","_id":"@boomarche/beacon@0.1.0","maintainers":[{"name":"boomarche","email":"kdinler@boomarche.com"}],"homepage":"https://github.com/boomarche/beacon#readme","bugs":{"url":"https://github.com/boomarche/beacon/issues"},"bin":{"beacon":"dist/cli/index.js"},"dist":{"shasum":"c023f77d31bdc01e0a788e0f96bbc0d7e7dddb1a","tarball":"https://registry.npmjs.org/@boomarche/beacon/-/beacon-0.1.0.tgz","fileCount":17,"integrity":"sha512-Y2W1e0jzY2YbU1BouO+/UJXeegS4kzHAOdiJFj/7l/5RjSlSdkNsQWLHxOgFBGmN17OipdVeKJiBk+mNWeBVtw==","signatures":[{"sig":"MEYCIQCYb/hLsR9+ThRjVAQVHGlC7HWK9fUivFh5B5p45RliSgIhAMSEsLSut1bqiyDDXBaCF+y6zb6Dc4NY+/N2U+Ubxucs","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":51463},"main":"./dist/lib/index.js","type":"module","types":"./dist/lib/index.d.ts","engines":{"node":">=22"},"exports":{".":{"types":"./dist/lib/index.d.ts","default":"./dist/lib/index.js"}},"gitHead":"cc12cce6b87f7af1c607e8763413fc0362f9342e","_npmUser":{"name":"boomarche","email":"kdinler@boomarche.com"},"repository":{"url":"git+https://github.com/boomarche/beacon.git","type":"git"},"_npmVersion":"11.12.1","description":"Scripted feature-showcase animations: drive a web app with Playwright, render polished MP4s with Remotion.","directories":{},"_nodeVersion":"24.15.0","dependencies":{"tsx":"^4.19.0","react":"^18.3.0","commander":"^12.0.0","react-dom":"^18.3.0","playwright":"^1.46.0","@remotion/cli":"^4.0.0","@clack/prompts":"^0.7.0","@remotion/bundler":"^4.0.0","@remotion/renderer":"^4.0.0"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^18.3.0","remotion":"^4.0.0","react-dom":"^18.3.0","playwright":"^1.46.0"},"_npmOperationalInternal":{"tmp":"tmp/beacon_0.1.0_1781387818574_0.2516107940709176","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@boomarche/beacon","version":"0.1.1","description":"Scripted feature-showcase animations: drive a web app with Playwright, render polished MP4s with Remotion.","keywords":["showcase","animation","screen-recording","playwright","remotion","mp4","demo","feature-demo"],"author":{"name":"Kaan Dinler"},"license":"MIT","homepage":"https://github.com/boomarche/beacon#readme","repository":{"type":"git","url":"git+https://github.com/boomarche/beacon.git"},"bugs":{"url":"https://github.com/boomarche/beacon/issues"},"type":"module","bin":{"beacon":"dist/cli/index.js"},"exports":{".":{"types":"./dist/lib/index.d.ts","default":"./dist/lib/index.js"}},"main":"./dist/lib/index.js","types":"./dist/lib/index.d.ts","engines":{"node":">=22"},"dependencies":{"@clack/prompts":"^0.7.0","@remotion/bundler":"^4.0.0","@remotion/cli":"^4.0.0","@remotion/renderer":"^4.0.0","commander":"^12.0.0","playwright":"^1.46.0","tsx":"^4.19.0","react":"^18.3.0","react-dom":"^18.3.0"},"peerDependencies":{"react":"^18.3.0","react-dom":"^18.3.0","remotion":"^4.0.0","playwright":"^1.46.0"},"gitHead":"ffcdd0824c584342a24c1b2dd10a3d80f12fe9b9","_id":"@boomarche/beacon@0.1.1","_nodeVersion":"24.15.0","_npmVersion":"11.12.1","dist":{"integrity":"sha512-jeaXa+Tf5HJt6mvKmfmUA+LMpE/Hl3YbvF+eEOCKnlz7LlllLrrTYIuTZ59FQYJw16B9towLRyVHgWB7mwpL7w==","shasum":"5b220c865ac276a19c910483c6ad2684549b0354","tarball":"https://registry.npmjs.org/@boomarche/beacon/-/beacon-0.1.1.tgz","fileCount":17,"unpackedSize":51710,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQC5fgiKhhNX3XATeJ5n5ogi+8nfVdg8kKftm9SbnsDOcQIhAJhfotgRyoD8MM/KvNfOTomTFhONKGogNWh/5h5CwWSa"}]},"_npmUser":{"name":"boomarche","email":"kdinler@boomarche.com"},"directories":{},"maintainers":[{"name":"boomarche","email":"kdinler@boomarche.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/beacon_0.1.1_1781415535871_0.5183026992004789"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-13T21:56:58.264Z","modified":"2026-06-14T05:38:56.154Z","0.1.0":"2026-06-13T21:56:58.715Z","0.1.1":"2026-06-14T05:38:56.050Z"},"bugs":{"url":"https://github.com/boomarche/beacon/issues"},"author":{"name":"Kaan Dinler"},"license":"MIT","homepage":"https://github.com/boomarche/beacon#readme","keywords":["showcase","animation","screen-recording","playwright","remotion","mp4","demo","feature-demo"],"repository":{"type":"git","url":"git+https://github.com/boomarche/beacon.git"},"description":"Scripted feature-showcase animations: drive a web app with Playwright, render polished MP4s with Remotion.","maintainers":[{"name":"boomarche","email":"kdinler@boomarche.com"}],"readme":"# Beacon\n\nScripted feature-showcase animations. Drive a web app with Playwright, render polished MP4s with Remotion. Re-renders cleanly when your UI changes — your scripts are source code, not screen recordings.\n\n```\n┌──────────────────┐    ┌──────────────────┐    ┌──────────────────┐\n│  showcase.ts     │───▶│  Playwright      │───▶│  Remotion        │\n│  (your script)   │    │  drives the app  │    │  composites the  │\n│                  │    │  + captures      │    │  polished MP4    │\n└──────────────────┘    └──────────────────┘    └──────────────────┘\n```\n\n## Install\n\n```sh\nnpm install -g @boomarche/beacon\nbeacon --help\n```\n\nFirst run also fetches Chromium (~150 MB, one time).\n\n## Quick start\n\n### Record a session, then render it\n\n```sh\nbeacon record https://your-app.example.com --callouts -o demo.ts\nbeacon render demo.ts -o demo.mp4\n```\n\n`beacon record` opens a real Chromium window with Playwright's Inspector attached. Click through the demo you want, close the browser, and Beacon writes a `demo.ts` file with auto-disambiguated selectors and (optionally) callouts you chose interactively.\n\n### Write a script by hand\n\n```ts\n// demo.ts\nimport { showcase } from \"@boomarche/beacon\"\n\nexport default showcase(\n  \"My feature demo\",\n  { target: \"https://your-app.example.com\", viewport: { w: 1440, h: 900 } },\n  async (s) => {\n    await s.callout(\"Start by clicking 'New'\", { duration: 1500 })\n    await s.click('[data-testid=\"new-project\"]')\n    await s.type(\"Q3 Roadmap\")\n    await s.click(\"button:has-text('Create')\")\n    await s.callout(\"Done!\", { duration: 2500 })\n    await s.caption(\"Built with Beacon\")\n  },\n)\n```\n\nThen:\n\n```sh\nbeacon render demo.ts -o demo.mp4\n```\n\n## DSL reference\n\nThe `showcase()` factory takes a title, options (`target` URL + `viewport`), and an `async (s) => { ... }` body. Inside the body:\n\n| Verb | Effect |\n| --- | --- |\n| `await s.navigate(url)` | Cross-fade to a new URL |\n| `await s.click(selector)` | Cursor eases to target, click ripple, auto-zoom |\n| `await s.type(text, { perCharMs? })` | Realistic per-character typing |\n| `await s.hover(selector)` | Cursor eases to target with hover-state |\n| `await s.wait(ms)` | Hold for `ms` milliseconds |\n| `await s.callout(text, { target?, side?, duration? })` | Pill tooltip with dim BG, optionally anchored to a selector |\n| `await s.zoom({ selector?, factor? })` | Zoom into a region (or viewport-centre if no selector) |\n| `await s.caption(text, { duration? })` | Lower-third caption bar |\n\nSelectors accept any Playwright locator string: plain CSS (`#submit`), role selectors (`role=button[name=\"Save\"]`), text matchers (`text=Click here`), and chained filters (`role=link[name=\"X\"] >> nth=0`).\n\n## CLI\n\n```\nbeacon record <url>      Record a browser session → emit a showcase script\n  -o, --out <file>          output .ts script path (default: showcase.ts)\n  --title <title>           showcase title (defaults to hostname)\n  --no-auto-wait            skip auto-detected pauses between actions\n  --callouts                pick actions to annotate via TUI\n\nbeacon render <script>   Render a showcase script to MP4\n  -o, --out <file>          output MP4 path (default: showcase.mp4)\n  --fps <n>                 frames per second (default: 30)\n  --width <n>               viewport width\n  --height <n>              viewport height\n\nbeacon preview <script>  Open Remotion Studio for live preview\n\nbeacon init <dir>        Scaffold a new showcase project\n  --name <name>             package name\n```\n\n## Architecture\n\nThree independently testable layers communicating through a versioned `CaptureBufferSnapshot`:\n\n1. **`@beacon/core`** — script API and types\n2. **`@beacon/driver-playwright`** — Playwright backend, executes operations, captures frames + semantic events\n3. **`@beacon/render`** — Remotion compositions (synthetic cursor, click ripple, callouts, zoom)\n\nThis boundary is what lets the renderer stay decoupled from the capture mechanism — a future Tauri-app driver (`@beacon/driver-tauri`) or a marker-assisted recorder will share the same renderer.\n\n## Roadmap\n\n- **v1 (current)**: web targets via Playwright, MP4 output, recorder, opinionated renderer.\n- **v1.1**: Tauri-app driver (WebDriver-protocol-based, shares most code with the Playwright driver).\n- **v2**: integration with capture SDKs so Beacon can render videos from in-app event streams emitted by your own apps.\n\n## Status\n\nv1. Used in production for Boomarche showcases; cross-platform CI on macOS / Windows / Linux. Issues and PRs welcome at [github.com/boomarche/beacon](https://github.com/boomarche/beacon).\n\n## License\n\nMIT © Kaan Dinler\n","readmeFilename":"README.md"}