Build Arcade

KINDAreplaces $50/mosaves $600/yrback to the verdict

0%0 of 17 items done

Saved on this device only. Tick prerequisites first, then work the phases in order · do not start one until the checks above it pass.

A demo builder that captures real screens and turns them into a clickable walkthrough, where the interesting work is stitching steps into something coherent and the critical work is making sure nothing in the captures should not be public.

estimated effort multi-daythe files for this build are in the project pack

CaptureA browser extension recording steps as images with element positionsRedactionApplied to the stored image, irreversiblyDetectionAutomatic identification of likely personal data in capturesPlaybackA small player with hotspots derived from the recorded stepsRuntimeTypeScript with object storage for images

Before step 1

Everything below is assumed from the first step. Tick each one when you actually have it, not when you plan to.

installfree
Why Runs the server, the image pipeline and the player build.
Get it nodejs.org, or nvm install 22. open ↗
Verify node --version prints v22 or higher
installfree
Why Redaction modifies pixels and must be irreversible, which is image work rather than a display concern.
Get it Any library that can modify and re-encode images reliably at capture resolution.
Verify A redacted region is unrecoverable from the re-encoded file
installfree, needs machine time
Why Captures contain real customer data and sending them to a service for scanning is the disclosure you are trying to prevent.
Get it A local text recognition model and a face detector, evaluated on real screenshots rather than photographs.
Verify Text in a browser tab title and a name in a table are both detected
have readyfree
Why Detection quality and the places sensitive data actually appears can only be assessed against a real interface with real-looking records.
Get it A staging environment with realistic rather than obviously fake data, since fake data hides the problem.
Verify A recorded session contains at least five genuine detections
decidefree
Why The publish gate blocks on unresolved detections, and what counts as needing resolution is a decision that belongs before the first demo rather than during a review.
Get it List the categories that must always be redacted and who may resolve a detection as acceptable.
Verify A written list exists and the detector covers every category on it

Data model

Create these before the first phase that stores anything. Changing a table later is the expensive kind of change.

- demos(id, title, state, created_at, published_at, redaction_cleared_at)
- steps(id, demo_id, ordinal, image_key, viewport_json, click_point, annotation, transition)
- hotspots(step_id, x, y, width, height, target_step_id, label)
- detections(step_id, kind, bbox_json, confidence, resolved_as, resolved_by, at) · kind is email, name, number or face
- redactions(step_id, bbox_json, method, applied_at) · applied to the stored image, recorded for audit
- originals(step_id, key, deleted_at) · the unredacted capture, deleted rather than retained
- A demo cannot reach a published state while any detection is unresolved, which is enforced in the publish path rather than by a reminder.

Environment variables

These go in a .env file the app reads at startup. The pack's .env.example is this table as a file · copy it, never commit the filled-in version.

Variable	Needed	Example	Where the value comes from
`DATABASE_URL`secret	required	`postgres://localhost:5432/demos`	Demo structure and detection records.
`IMAGE_BUCKET`	required	`s3://demo-captures`	Redacted images. Originals are deleted rather than stored here.
`REDACTION_METHOD`	required	`remove`	Removal rather than blur, since some blurs are reversible.
`KEEP_ORIGINALS`	required	`never`	Present as a constant. A retained original is the disclosure still on your disk.
`PUBLISH_BLOCKS_ON_DETECTIONS`	required	`always`	Present as a constant. A warning is dismissed by whoever is in a hurry.
`DETECTION_MODEL`	required	`local`	Captures contain real customer data and should not be sent anywhere to be scanned.

The build, in order

1
Capturing steps, not just screenshots
A recorded session becomes ordered steps with the click positions kept.
1. Capturing after shows the result, not what was clicked.
  Files extension/capture.ts
2. The hotspot needs it and the image cannot carry it.
  Files extension/capture.ts
3. A demo recorded on one screen must look right on every other.
  Files src/normalise.ts
done when · tick each as it passes
watch out
- Capturing after the click means the screenshot shows the result rather than the state the user was looking at when they decided to click, so the hotspot lands on something that is no longer there. Capture before the interaction and record the position separately.
next phase
2
Finding what should not be published
Likely personal data in every capture is detected and shown.
1. Tab titles, notifications and dropdowns are where the accidents are.
  Files src/detect.ts
2. So resolution is a look rather than a search.
  Files src/detect.ts
3. A capture nobody scanned should not look like a clean one.
  Files src/steps.ts
done when · tick each as it passes
watch out
- Detecting only in the areas you expect data to appear misses the browser tab title, the notification that popped up, the autocomplete dropdown and the name in the corner of the page, which are exactly where the accidents happen. Scan the whole image, and accept false positives as the cost of not missing one.
next phase
3
Redaction that removes pixels
Redacted content is gone from the stored image, not covered.
1. An overlay leaves the pixels in the file.
  Files src/redact.tstests/redaction.test.ts
2. Retaining it means the disclosure risk is still on your disk.
  Files src/originals.ts
3. Some blurs are reversible. Removal is not.
  Files src/redact.ts
done when · tick each as it passes
watch out
- Drawing a black rectangle in the player leaves the original pixels in the stored file, so anyone who opens the image directly sees exactly what you thought you had removed, and images on a marketing site are trivially downloadable. Modify the image and delete the original.
next phase
4
A demo that tells a story
Captured steps become a walkthrough someone can follow.
1. Every captured click includes the three failed attempts.
  Files src/edit.ts
2. Removing a step should not leave a hotspot pointing nowhere.
  Files src/validate.ts
3. An annotation covering the thing it describes is worse than none.
  Files src/annotate.ts
done when · tick each as it passes
watch out
- A demo that is simply every captured click is too long and includes the three attempts it took to find the right menu, which is exactly what a prospect does not need to see. Make removing and reordering steps the primary editing action rather than an afterthought.
5
Publishing, blocked until it is cleanproduct builder
A demo cannot be published with an unresolved detection.
1. A warning is dismissed by whoever is in a hurry, which is everyone.
  Files src/publish.tstests/publish-block.test.ts
2. The last moment before it becomes public is worth one more check.
  Files src/publish.ts
3. It sits on a marketing page belonging to someone else.
  Files player/
done when · tick each as it passes
watch out
- Warning about unresolved detections and publishing anyway means the warning is dismissed by whoever is in a hurry, which is always. Block the publish, name the steps with unresolved detections, and make resolving them the only route forward.

what this build does not replace

Video recording rather than steps.
Native desktop application capture.
Automatic narration.
Any guarantee that detection is complete.
capture polish, hosted playback, analytics, personalization, and collaboration
instant hosted sharing
viewer analytics
team libraries
cross-device capture

after v1, if you want it

Variable substitution so one demo can show a prospect's own name, which needs its own care
Localised demos from one recording, since the redaction work should not be repeated per language
Analytics on where viewers stop, which is genuinely useful and needs an honest consent position

Need the files? The project pack on the verdict page hands your agent the whole brief · more screen recording.