The three-second interview
A hero move in miniature — your search, made touchable.
Every visitor interviews your website. The interview lasts three seconds.
Headline. Visual. Vibe. Verdict. That's the whole interview a stranger gives your website, and only one section is in the room when it happens: the hero. By the time anyone scrolls to your carefully written features, they've already decided how much to believe them.
Most businesses send a stock photo and a committee sentence to this interview — 'Solutions that empower your success' over a photograph of someone else's office — which is why most websites are indistinguishable and most markets feel impossible to stand out in. The market isn't crowded. The first three seconds are.
I obsess over those three seconds professionally. Here's the anatomy of a hero section that wins them — including a teardown of my own, which you're welcome to go tear apart. Literally. It's cloth.
01
Anatomy of a hero that hires you
Four organs, no optional ones:
A claim only you can make
'We build custom software solutions' could hang over ten thousand doors. 'I build worlds. Let me build you one' can hang over exactly one. If your headline is transplantable to a competitor's site without edits, it isn't yours yet.
Evidence, not wallpaper
The hero visual should PROVE the claim, not just decorate it. My claim says builder-of-worlds; behind it runs a world being built — a working loom, live, in your browser. Claim plus evidence in the same glance is what belief feels like.
One honest next step
One primary action, named like a human: 'View the work.' 'Play a round.' 'Get the number.' A hero with four buttons is a hero with none.
Speed as the first impression
The interview starts at first paint. My headline is server-rendered and on screen in under two seconds; the 3D warms up behind it. A gorgeous hero that arrives late already lost.
02
Teardown: what my own hero is doing to you
Scroll up to my homepage sometime and watch the machinery of persuasion with the hood open. The headline paints instantly — that's the LCP, the thing Google times. The loom mounts a breath later on idle, so the spectacle never taxes the speed score. The shuttle follows your cursor on a spring — touch is the fastest route to memory. The cloth carries my name woven in thread, and if you drag your cursor across it, it tears into pixels and heals — one signature effect, rationed, so it stays a signature instead of a circus.
Every choice is doing sales work: the loom proves the 'builder' claim, the interaction proves the craft claim, the speed proves the engineering claim. Nothing in the hero is decoration. That's the standard I build heroes to — including for sites that will never want 3D at all.
03
Which hero format wins — honestly
| Format | Wins when | Loses when |
|---|---|---|
| Static, art-directed | The photography or type IS the brand | It's a stock photo wearing your logo |
| Video | You have real footage that proves the claim | It's drone shots of nothing, autoplaying at 8MB |
| Animated / motion | Motion demonstrates the product or story | It's confetti on a template |
| Interactive 3D | Being unforgettable is the strategy | It's bolted on and eats the speed budget |
The unforgivable choice is the one every competitor already made.
Proof over promises
Open the work. Judge it live.
2026 · Software · Shipped
Black Nile
A conversational website builder where small businesses talk, a site appears, and their own AI answers customers — metered to the credit.
2026 · Writing · Shipped
David Weaver Books
My own bookstore — readers buy straight from me and read in the browser. No middleman, no algorithm between us.
2026 · Software · Shipped
BookWriter
AI book-writing software from an author with thirty books of skin in the game — live, billing, and tested 454 files deep.
Straight answers
Asked often. Answered honestly.
- What is a hero section on a website?
- The full-width opening section — headline, visual, call to action — that owns the first screen. It sets the verdict every later section gets judged against, which is why it deserves disproportionate investment.
- What should a website hero section include?
- Four things, none optional: a claim only you can make, a visual that proves it, one honest next step, and a load strategy that puts the headline on screen in under two seconds. Everything else — badges, tickers, particles — is garnish.
- How much does a custom hero section cost?
- A cinematic motion or 3D hero installed on your existing site starts in the hundreds — the highest impact-per-dollar upgrade in web design, because it transforms the three seconds that judge everything else. Fully bespoke experiences are quoted per vision.
- Do animated hero sections hurt SEO?
- Bolted-on ones do — they delay the LCP and Google notices. Engineered ones don't: server-rendered text paints first, the animation mounts after idle, reduced-motion visitors get a designed still. My homepage runs a full 3D scene with green vitals; the pattern is proven.
- What size should a website hero image be?
- Around 1600–2400px wide, served in modern formats (AVIF/WebP) with responsive variants — usually landing under 200KB. But interrogate the premise first: if your hero is a generic image, size is the least of its problems.
- What's the best hero section headline formula?
- There's no formula, and that's the point — formulas are how every SaaS hero became the same sentence. The test is transplantability: if a competitor could paste your headline over their stock photo, keep writing. Write from the one thing only you can claim.
- Should my hero have a video background?
- Only if the footage proves your claim — real product, real work, real place. Abstract drone footage costs megabytes and says nothing. When in doubt, a composed static beats a meaningless motion every time.
- Can you redesign just my hero section?
- Yes — it's my favorite small commission. One section, disproportionate effect: the rest of your site literally reads differently after the first three seconds change what people believe about you.
Three seconds decide everything after them. Tell me what yours need to say — I'll tell you exactly how we'd say it.