I captured the hero section of twenty AI-infrastructure and developer-tool sites, two frames each, four seconds apart, and read them side by side.
Zero of the twenty show a face, a brain, or a neural network. Zero use a multi-colour glow. Four of them sell AI observability, the category most tempted by that imagery, and they show a failing tool call, a trace stream, a dashboard, and a wireframe instead.
My own hero, at the time, was a golden-filament head. This note is what the capture set says, what it means for a site whose headline is "your automations failed", and the direction I built from it.
Last verified against 20 live hero captures at 1440 by 900, two frames each. Version-specific details drift — check the vendor docs before relying on an exact flag or limit.
Why the "AI-looking" hero fails the AI-infra buyer
A glowing figurative render says "we are excited about intelligence". A buyer whose agent broke in production last Tuesday is not shopping for excitement. They want to see that you have seen their failure before.
That mismatch is invisible from inside your own brand, because the art was chosen to feel like the category. The capture set shows the category moved: the companies that sell observability, evals, and sandboxes put the artifact on screen and let the type carry the claim.
There is also a plain palette cost. A warm amber figure on a brand whose accent is mint or value-white is a second accent. Every strong hero in the set has one.
By the end you will have
- The Hero Evidence Ladder: four kinds of hero art ranked by how much they prove, with the sites that use each.
- A per-site table of art type, placement, motion percentage, and whether the art depicts the product's subject.
- Three buildable directions for a service or infra hero that need no 3D pipeline.
- The direction this site shipped, and why the other two lost.
Twenty heroes, one table
Motion is the share of viewport pixels that changed between the two frames.
| Site | Art | Placement | Motion | Depicts the subject? |
|---|---|---|---|---|
| Braintrust | tick field (trace rhythm) | below copy | 3.2% | yes |
| LangSmith | product UI | right | 0% | yes |
| Arize | dot-and-curve field | right/behind | 0.7% | half |
| Galileo | tool-call JSON with an error badge | right | 0.07% | yes |
| Patronus | wireframe 3D loops | below | 0% | no |
| LeftClick | none (stat row) | none | 0% | none |
| Ego Eimi (audit) | none; numbered contents | none | 0% | none |
| Vercel | glowing logo triangle | centre | 0% | no |
| Linear | product UI | below | 0% | yes |
| Resend | black 3D cube | right | 1.4% | no |
| Clerk | faint circuit lines | behind | 0.2% | semi |
| Cursor | product UI on photo | below | 3.5% | yes |
| Warp | product UI on photo | below | 1.6% | yes |
| Raycast | red light streaks | behind | 10.4% | no |
| Overlayer | glowing ring | right | 3.4% | no |
| Browserbase | pixel-art mountains | behind | 1.5% | no |
| Modal | floating cubes | behind | 12.5% | no |
| E2B | none above fold; ASCII panels below | below | 1.6% | yes |
| Mastra | stylised product UI | right | 2.7% | yes |
| Trigger | blurred terminal, angled | behind | 11% | yes |
Ten of twenty show the subject. Two use decorative 3D, and both are single-hue brand objects, not "AI" imagery. The three highest-motion pages (Modal, Raycast, Trigger) animate a background layer under static copy.
The closest analogue to a fixed-scope audit offer is Ego Eimi's audit page: mono eyebrow with the duration, a big headline with one coloured word, a paragraph listing what you walk away with, and a numbered on-this-page list. It reads like a report before you scroll, and there is no picture.
Magnet: Hero Evidence Ladder
From most to least proof. Pick the highest rung your product can honestly fill.
| Rung | What is on screen | Precedent | Cost |
|---|---|---|---|
| 1. The failure | The thing that goes wrong, shown: a failing call, a bad trace line, a stopped run | Galileo, Trigger | Static JSX/CSS; needs one honest specimen |
| 2. The product | Real UI, cropped, no chrome | Linear, LangSmith, Mastra | A screenshot you will keep current |
| 3. The rhythm | An abstract field that reads as your data (ticks, log rhythm) | Braintrust, Arize | Seeded SVG or canvas; low motion |
| 4. Nothing | Type, a stat row, a numbered contents list | LeftClick, Ego Eimi | Zero, and it forces the copy to work |
Below the ladder sits decorative art: glows, orbs, brand cubes, figurative renders. Two of twenty use it, both as mono brand objects.
You should see: a one-line answer to "what does the art prove?" for your current hero. If the honest answer is "that we like this style", you are below the ladder.
Three directions that fit "your automations failed"
Failure trace. A mono log to the right of the copy: dim rows, one root-cause row lit in the accent with a short serif note, a slow line-by-line reveal that stops on the culprit. Server-rendered list plus CSS keyframes; a couple of kilobytes; reduced motion shows the finished trace. Rung 1.
Typographic dossier. No art. Eyebrow, headline, and a case-file list (01 Symptom · 02 Timeline · 03 Root cause · 04 Fix · 05 Regression test) with one item lit. Rung 4, and the cheapest thing on this page.
Health-tick field. A full-width strip of thin ticks read as uptime: sparse accent ticks, one dark gap where the automation died. Seeded SVG so the server and client agree; CSS opacity. Rung 3.
This site shipped the trace. The dossier lost because the copy already carries the claim and the page below the hero already lists deliverables; a second list would repeat it. The tick field lost because ticks read as "monitoring", and the offer is forensic, not a dashboard.
Two rules travelled with it. The trace is labelled a specimen in the caption, because a fake client log presented as real is the same sin as a fake testimonial. And the figure exposes one sentence to screen readers while the rows are hidden; a log is noise read aloud.
Failure modes
The category costume. Art chosen to look like "AI" when the category itself has moved to showing work.
The second accent. Warm figurative art on a cool or achroma brand. Two accents is no accent.
The fake artifact. A trace, screenshot, or terminal that implies a real customer incident. Label specimens.
The motion that is the message. Animating the headline or the CTA. Every high-motion site in the set animates texture behind still copy.
The ambient loop. This site's was 631KB of video over a 270KB still, behind the fold, on every visit, and readable by nobody. The replacement is a list.
When not to follow the set
Do not copy this into a consumer brand. The twenty are developer and infra sites; consumer heroes carry emotion on purpose.
Do not drop a product screenshot if you have a product people recognise. Rung 2 beats rung 1 when the UI is the proof.
Do not build the trace if you cannot write an honest specimen. Rung 4 is a legitimate answer.
Show the work, not the wonder
The buyer of infrastructure is buying the absence of a failure they have already met. Put that failure on the page and the picture stops being decoration.
The hero this came from is on the homepage, and the offer it sits over is the Reliability Audit.
Your next action: take your current hero up the Hero Evidence Ladder and write the one-line answer to "what does this prove?" before touching a pixel.






