backpocket.website

← Projects

Independent project · The most expensive thing here to run, at almost nothing

Spot

Paste a link. Get a twenty-second ad with your colours, your logo, your words and a voiceover.

Live and free. Runs on your own machine.

What it does

Reads a website, writes the ad, speaks it, and encodes the video — all but the reading happening on the visitor's own machine.

Your brand, taken from your own page

Colours and the logo come from the card image you already publish, then the theme colour, then the saturated colours in your CSS — in that order, because that is the order they can be trusted in.

Copy from the page’s own words

Five scenes and five spoken lines, written only from facts that appear on the page. Inventing a statistic about somebody else’s company is the one failure here with legal consequences.

Encoded in your browser

The voice and the 1080p video are both made in the tab. Competitors render on their own GPUs, which is exactly why none of them can afford a free tier that works.

How it got built

The problem

Every tool in this category renders video on its own servers and pays per GPU-minute. That single fact explains all of their pricing, all of their gating, and why a free tier is always a demo. If the render is free, the product can be free.

The constraint that shaped it

A browser cannot read another website — CORS blocks the fetch and a cross-origin image taints the canvas so the frame can never be encoded. Both of those are the browser protecting somebody else's site, and both are correct. So exactly one thing runs on a server, and it does as little as possible.

Decisions

  1. One edge function, and it must never grow a headless browser

    It fetches HTML, finds the brand, and returns the logo as a data URI so the canvas stays clean — a few hundred milliseconds inside a free function. A template that wanted a screenshot would bring a Chromium launch and a real bill with it. That is a product decision disguised as a technical one.

  2. Rank colours by saturation, not by frequency

    Ranking a site’s CSS colours by how often they appear returns greys, borders, and rgb(0, 0, 238) — which is the browser’s default link colour, and put a stock blue in one brand’s ad. Saturation finds the colour a person would have pointed at.

  3. Refuse to be an open proxy

    An endpoint that fetches a user-supplied URL is an SSRF waiting to happen. Origin allow-list, public hostnames only, redirects followed by hand and re-checked at every hop, content types allow-listed.

Where it landed

Live. Marginal cost is a few paise of function time per ad — the render, the voice and the muxing are all free because they happen on the visitor's laptop.

What it taught me

Two things were verified separately and never together, and it hid a bug that broke every single voiced render: the audio encoder accepts only two sample rates, and the voice produced a third. Testing the voice and testing the render both passed. Testing them in the same run is what found it.

What I’d do next

Copy quality on abstract B2B pages. A mattress company gives you something concrete to say; a payments platform gives you Faster now. That is a fact about abstract products, not a prompt to be fixed, and it is why the editor exists.

Open Spot · The other projects