Arcade
Build an interactive product story from captured screens and hotspots
The core loop is buildable, but a dependable replacement becomes a real weekend or multi-day project. For Arcade, build an interactive product story from captured screens and hotspots. The hard boundary is capture polish, hosted playback, analytics, personalization, and collaboration, plus capture polish, hosting, and collaboration.
Build verification: not recorded. How we judge buildability
What you give up
- capture polish, hosted playback, analytics, personalization, and collaboration
- instant hosted sharing
- viewer analytics
- team libraries
- cross-device capture
Why people still pay
People still pay for Arcade because the recording itself is easy; the subscription removes upload, transcoding, sharing, organization, and support work. The recurring cost buys OS permissions, codecs, rendering performance, uploads, storage, links, and viewer analytics, not just the visible interface.
Your build guide
The stack, security requirements, and agent rules for a focused replacement.
Before you start
- A Python virtual environment, writable input/output directories and sufficient disk for both originals and outputs. Bind the service to localhost. Install FFmpeg and confirm codec support for the intended inputs.
- Implementation components: Python, FastAPI and server-rendered HTML with HTMX for a local interface. SQLite for manifests and job state, with an explicit worker process and immutable source files. FFmpeg/ffprobe for explicit media operations and browser previews; never interpolate user filenames into shell commands.
- Scope boundary: capture polish, hosted playback, analytics, personalization, and collaboration; instant hosted sharing
Use these project rules and optional skill references alongside the prompt. Review each skill before adding it to your agent; the AGENTS.md export includes the same guidance.
Optional external skill: modern-python — Set up Python projects with pyproject.toml, dependency management, linting, typing and automated checks. Review its instructions and compatibility before use; it does not grant deployment, data-access or publication permission.
Optional external skill: sharp-edges — Review security-sensitive APIs and configuration for dangerous defaults and easy-to-misuse interfaces. Review its instructions and compatibility before use; it does not grant deployment, data-access or publication permission.
Optional external skill: web-design-guidelines — Review web interfaces for accessibility, keyboard focus, forms, navigation and interaction quality. Review its instructions and compatibility before use; it does not grant deployment, data-access or publication permission.
Project rule — data model: recordings, click timestamps, screenshot steps, hotspot coordinates, redaction masks and player versions
Project rule — preserve this invariant: Redactions must be baked into exported image/video assets; hiding an overlay in the player cannot reveal the original pixels.
Project rule — acceptance evidence: Open the exported walkthrough offline and advance each hotspot; inspect its assets to confirm redacted text is absent and interrupted rendering leaves no final video.
Implementation plan
Phase 1
Scope and fixtures. Implement this bounded workflow: Capture a user-selected screen, split it into screenshot steps at reviewed click markers, add hotspots and callouts, and export a self-contained interactive walkthrough. Offer a separate flattened video export with matching timing. Record prerequisites, select representative user-owned fixtures and document the unsupported features: capture polish, hosted playback, analytics, personalization, and collaboration; instant hosted sharing
Phase 2
Durable model. Model recordings, click timestamps, screenshot steps, hotspot coordinates, redaction masks and player versions Add migrations or a versioned document format, explicit validation, stable IDs and a visible import-error report. Preserve this rule: Redactions must be baked into exported image/video assets; hiding an overlay in the player cannot reveal the original pixels.
Phase 3
Complete the first useful path. Implement the workflow's input, review and output interface, with clear controls and explicit empty/error states. Save a job manifest with input hash, parameters and state. Write to temporary outputs, then atomically finalize only successful results; resume unfinished jobs without replacing originals.
Phase 4
Permissions and integration failure. Bound file sizes and processing time, reject path traversal, and use argument arrays for subprocesses. Treat imported text as data and redact confidential source content from logs. Request integration credentials and permissions only for the enabled feature; show a disconnected state instead of mock results.
Phase 5
Portable handoff. Export sources, manifests and outputs with checksums. Keep failed-job diagnostics and allow retry into a new output path; restore the database and file directory together. Include setup, operating limits, fixture walkthrough and shutdown/restart instructions in the README.
Phase 6
Acceptance scenarios. Open the exported walkthrough offline and advance each hotspot; inspect its assets to confirm redacted text is absent and interrupted rendering leaves no final video. Repeat the workflow after restart and with a denied permission or unavailable dependency; show recoverable failure rather than a success placeholder.
WORKING SLICE Capture a user-selected screen, split it into screenshot steps at reviewed click markers, add hotspots and callouts, and export a self-contained interactive walkthrough. Offer a separate flattened video export with matching timing. Build this scoped Arcade-inspired workflow with a documented data model and visible failure states. Architecture - Python, FastAPI and server-rendered HTML with HTMX for a local interface. - SQLite for manifests and job state, with an explicit worker process and immutable source files. - FFmpeg/ffprobe for explicit media operations and browser previews; never interpolate user filenames into shell commands. Prerequisites and limits A Python virtual environment, writable input/output directories and sufficient disk for both originals and outputs. Bind the service to localhost. Install FFmpeg and confirm codec support for the intended inputs. Outside this release: capture polish, hosted playback, analytics, personalization, and collaboration; instant hosted sharing Data model and correctness recordings, click timestamps, screenshot steps, hotspot coordinates, redaction masks and player versions Invariant: Redactions must be baked into exported image/video assets; hiding an overlay in the player cannot reveal the original pixels. Save a job manifest with input hash, parameters and state. Write to temporary outputs, then atomically finalize only successful results; resume unfinished jobs without replacing originals. Security and privacy Bound file sizes and processing time, reject path traversal, and use argument arrays for subprocesses. Treat imported text as data and redact confidential source content from logs. Recovery and export Export sources, manifests and outputs with checksums. Keep failed-job diagnostics and allow retry into a new output path; restore the database and file directory together. Implementation order 1. Phase 1 — Scope and fixtures. Implement this bounded workflow: Capture a user-selected screen, split it into screenshot steps at reviewed click markers, add hotspots and callouts, and export a self-contained interactive walkthrough. Offer a separate flattened video export with matching timing. Record prerequisites, select representative user-owned fixtures and document the unsupported features: capture polish, hosted playback, analytics, personalization, and collaboration; instant hosted sharing 2. Phase 2 — Durable model. Model recordings, click timestamps, screenshot steps, hotspot coordinates, redaction masks and player versions Add migrations or a versioned document format, explicit validation, stable IDs and a visible import-error report. Preserve this rule: Redactions must be baked into exported image/video assets; hiding an overlay in the player cannot reveal the original pixels. 3. Phase 3 — Complete the first useful path. Implement the workflow's input, review and output interface, with clear controls and explicit empty/error states. Save a job manifest with input hash, parameters and state. Write to temporary outputs, then atomically finalize only successful results; resume unfinished jobs without replacing originals. 4. Phase 4 — Permissions and integration failure. Bound file sizes and processing time, reject path traversal, and use argument arrays for subprocesses. Treat imported text as data and redact confidential source content from logs. Request integration credentials and permissions only for the enabled feature; show a disconnected state instead of mock results. 5. Phase 5 — Portable handoff. Export sources, manifests and outputs with checksums. Keep failed-job diagnostics and allow retry into a new output path; restore the database and file directory together. Include setup, operating limits, fixture walkthrough and shutdown/restart instructions in the README. 6. Phase 6 — Acceptance scenarios. Open the exported walkthrough offline and advance each hotspot; inspect its assets to confirm redacted text is absent and interrupted rendering leaves no final video. Repeat the workflow after restart and with a denied permission or unavailable dependency; show recoverable failure rather than a success placeholder. Acceptance Open the exported walkthrough offline and advance each hotspot; inspect its assets to confirm redacted text is absent and interrupted rendering leaves no final video. Use real source data or clearly labeled fixtures. Explain unsupported input and provider failures; do not fabricate analytics, delivery receipts, accuracy claims or security guarantees. Optional agent guidance Optional external skill: [modern-python](https://github.com/trailofbits/skills/blob/main/plugins/modern-python/skills/modern-python/SKILL.md) — Set up Python projects with pyproject.toml, dependency management, linting, typing and automated checks. Review its instructions and compatibility before use; it does not grant deployment, data-access or publication permission. Optional external skill: [sharp-edges](https://github.com/trailofbits/skills/blob/main/plugins/sharp-edges/skills/sharp-edges/SKILL.md) — Review security-sensitive APIs and configuration for dangerous defaults and easy-to-misuse interfaces. Review its instructions and compatibility before use; it does not grant deployment, data-access or publication permission. Optional external skill: [web-design-guidelines](https://github.com/vercel-labs/agent-skills/blob/main/skills/web-design-guidelines/SKILL.md) — Review web interfaces for accessibility, keyboard focus, forms, navigation and interaction quality. Review its instructions and compatibility before use; it does not grant deployment, data-access or publication permission. Project rule — data model: recordings, click timestamps, screenshot steps, hotspot coordinates, redaction masks and player versions Project rule — preserve this invariant: Redactions must be baked into exported image/video assets; hiding an overlay in the player cannot reveal the original pixels. Project rule — acceptance evidence: Open the exported walkthrough offline and advance each hotspot; inspect its assets to confirm redacted text is absent and interrupted rendering leaves no final video.
$ open in your agent (prompt prefilled, you press enter), copy the prompt or copy or download AGENTS.md
prompt copied. want to know what dies next week?
new verdicts + top votes, weekly. free. one-click out.
Arcade pricing
| plan | monthly | annual (per mo) | what you get |
|---|---|---|---|
| free | $0/workspace | $0/workspace | 1 user; 1 published interactive demo plus 1 video; unlimited views; 200 AI credits/month |
| growth | $50/user | $42.50/user | Up to 10 users; unlimited demos and videos; 800 AI credits/month; 1 brand kitThe supplied snapshot said $38/month for Pro; the current self-serve paid tier is Growth at $50 monthly or $42.50/month annually. |
| enterprise | — | — | Custom users, demos, security and support; up to 10 brand kits and 100,000 AI credits/year |
free tier1 user, 1 published interactive demo, 1 published video, unlimited views and 200 AI credits/month
billingmonthly + annual; paid creators are seat-based
hidden costsVideos and generated visuals consume credits, roughly 50 credits per 30 seconds of video or per generated visual, while each additional creator requires a paid seat.
pricing sources checked 2026-08-14 · pricing source ↗
Questions about Arcade
Can you build your own Arcade with AI?
Partly. The core loop is buildable, but a dependable replacement becomes a real weekend or multi-day project. For Arcade, build an interactive product story from captured screens and hotspots. The hard boundary is capture polish, hosted playback, analytics, personalization, and collaboration, plus capture polish, hosting, and collaboration.
What does the Arcade build prompt cover?
The prompt starts with this scope: Capture a user-selected screen, split it into screenshot steps at reviewed click markers, add hotspots and callouts, and export a self-contained interactive walkthrough. Offer a separate flattened video export with matching timing. Full-product capabilities excluded from the comparison include: capture polish, hosted playback, analytics, personalization, and collaboration; instant hosted sharing; viewer analytics. Follow the implementation plan and its prerequisites before expanding the build.
How do I use the prompt, AGENTS.md and agent skills?
Start with the Arcade prerequisites and stack, then copy the prompt into your coding agent. Save the project rules as AGENTS.md in the project root. Linked skills are optional packages or source instructions for specific tasks; review their current contents and install only those matching the chosen stack. A skill does not supply API credentials or verify the finished app.
How long will this Arcade project take?
The catalogue estimate is one sitting for the limited scope. Setup, integration approvals, debugging, deployment and ongoing maintenance can add time. This is an estimate, not a delivery guarantee.
What would I give up by replacing Arcade?
capture polish, hosted playback, analytics, personalization, and collaboration; instant hosted sharing; viewer analytics; team libraries; cross-device capture. People still pay for Arcade because the recording itself is easy; the subscription removes upload, transcoding, sharing, organization, and support work. The recurring cost buys OS permissions, codecs, rendering performance, uploads, storage, links, and viewer analytics, not just the visible interface.
What price is this guide comparing against?
The recorded Growth plan is $50/mo per seat (monthly per user), checked 2026-08-14. Check the linked pricing source before buying. Building your own also has hosting, API and maintenance costs; the recorded amount is not a guaranteed saving.
What can I use instead of building Arcade?
The prior-art section lists Cap as starting points. Review their current scope, license and maintenance before adopting one.