How Stripe films something you cannot see — and how to copy it
A teardown of how Stripe's product videos visualise invisible infrastructure with animated diagrams, what that costs, and the version you can make this week.
Most of what Stripe does happens in milliseconds, across systems a customer never opens: routing a card payment through networks and banks, checking it against fraud rules, settling it into an account. None of that has a window to point a camera at. Stripe's product videos are a case study in what to do when the product itself is invisible.
Everything below is from watching the published product and developer-facing videos. Nothing about Stripe's production process or budget is public, so the cost section is an estimate with its assumptions stated.
1. What they publish, and how often
Product-line explainer videos (Payments, Billing, Connect, Treasury) and developer-facing feature clips, published on an ongoing basis rather than a fixed release calendar — closer in cadence to marketing content than to a changelog.
2. The mechanics, named
| Element | What they do | Why it works |
|---|---|---|
| Subject | An animated system diagram — labelled blocks and a moving connector | It is the only way to show a process that has no interface |
| Motion | A line, particle or token travelling along a defined path | Movement reads as 'happening now', which a static architecture diagram cannot convey |
| Real UI | Brief, grounding appearances of the Dashboard or Checkout | Proves the diagram describes something real and running, not a concept slide |
| Typography | Clean labels on every block — bank, network, account, ledger | The viewer must be able to name what they are looking at without narration alone |
| Colour | Stripe's own brand gradient, applied consistently across every diagram | The abstraction is unmistakably Stripe's, not a generic systems diagram |
If a screen recording of the important part would show a loading spinner, the film needed a diagram instead.
3. What something like this costs
Stated as an estimate: a custom animated systems diagram of this polish, from a motion studio, typically runs $5,000–$15,000 per video, because building a clear, honest diagram of a real technical process takes real collaboration between a motion designer and an engineer who understands the system — that collaboration time is most of the cost, not the animation software. In-house, with a designer who already has the brand's diagram style built, it is closer to two to five days per video.
The cost that is easy to underestimate is accuracy review: an animated diagram of a payment flow is a claim about how the system works, and getting it subtly wrong is worse for a payments company than having no diagram at all. Budget engineering review time, not just design time.
4. The version you can make this week
Draw the invisible part
- Write the one-sentence process“A request comes in, gets checked, and a result goes out” — in your product's own words. This sentence becomes the diagram's structure.
- Turn each noun into a labelled boxThree to five boxes, no more. A diagram that tries to show every system reads as an org chart, not an explanation.
- Animate one moving element along the pathA dot, a line or a small icon travelling from box to box. This single motion is what separates a diagram from a static slide.
- Cut to one real screen as proofA dashboard, a result, a confirmation — three seconds of your actual product, to ground the abstraction in something the viewer can verify exists.
- Have someone who owns the system check itBefore publishing, confirm the diagram is not just clear but correct. A wrong diagram of how your product works is a worse outcome than an unclear one.
What not to copy
Do not reach for a diagram when a screen recording would actually work — if your product's interesting part does have a visible interface, showing it directly is more credible than abstracting it away for style. The diagram technique exists to solve a specific problem: something genuinely invisible. Used on a product that has a perfectly good screen, it looks like something is being hidden rather than explained.
Questions people ask
How does Stripe visualise something invisible in its product videos?
By building an animated diagram — labelled blocks for the systems involved and a moving line or particle representing money, data or a request travelling between them — rather than attempting to film infrastructure that has no visual surface. Real UI (the Dashboard, Checkout) appears briefly as supporting evidence.
Why don't Stripe's videos just show the API or the dashboard the whole time?
Because the interesting part of what Stripe does — routing a payment through card networks, banks and fraud checks in milliseconds — has no interface at all. A dashboard screenshot shows the aftermath, not the mechanism, so the mechanism has to be drawn.
Can a non-technical product use this diagram technique?
Yes, whenever the product's real work happens somewhere the customer never looks — a background sync, a matching algorithm, a compliance check. The test is simple: if a screen recording of your product would show a loading spinner during the important part, a diagram is probably the better film.
Is an animated diagram enough, or does a product still need to show its real interface?
It needs both. Stripe's videos briefly ground the diagram in a real dashboard or checkout screen precisely because a diagram alone can start to feel abstract — the interface is what proves the diagram describes a real, working system rather than a concept.
Keep reading
Why a complex product needs a video to be understood
A feature list is a set of nouns. A complex product is a set of relationships between them — and relationships are what video shows and prose has to describe.
Video, interactive demo or docs — which one the job actually needs
"Should we make a video or an interactive demo" is usually the wrong question — most teams need both, aimed at two different moments in the funnel.
How Raycast announces features to developers — and how to copy it
No voiceover, no persuasion, no cropping. Raycast's feature clips are built for an audience that just wants to see the shortcut — and the format is cheap enough to use for everything.