capad.fyi · hero revamp · reference sheet

Four directions for the hero

Each one below is a working mockup at real proportions, not a description. Desktop is a 16:10 frame, phone is 390×780. Your five cut-out photos are composited in at actual relative scale, and each frame sizes its own type against its own width, so the phone column is a real phone composition rather than the desktop one squeezed.

The diagnosis driving all four: the current hero has five elements competing at the same optical weight in a centred column — a 220px wordmark, an eyebrow pill, a signature, a paragraph, and a CTA. Five focal points is zero. The tagline, which is the only genuinely good sentence on the page, is the quietest thing in it. Every direction below changes what carries the emphasis.

5 unique photos (you sent 6, two are byte-identical) 13.8 MB of PNG → 83 KB as WebP paper #f1f0ec · ink #0b0b0d ambient blobs + film grain kept
A

Interruption

Keep the wordmark as the monument. Put a person through it. The brand stays loud for search and recognition, but the logo lockup stops being an anonymous object because a human cuts across the baseline.

Fixes: the wordmark keeps its SEO and brand weight, so nothing strategic is lost. You appear, which no current element does. The tagline moves from a centred 440px paragraph nobody reads to a 2-line statement above the wordmark, where it can actually compete.

desktop

developer tools · desktop apps

I build the tools that shouldn’t need to exist. The ones that do frustrated me into building better ones.

capad
Aadarsh Upadhyay  /  available
See the work
shipping in the open
searchts · glyphmaps · grove

phone

developer tools
capad

I build the tools that shouldn’t need to exist.

Aadarsh Upadhyay See the work
Cost to buildLow. One <img>, existing CSS variables, no new dependency.
Runtime JSNone added. The intro cascade already exists.
Keeps from todayWordmark, eyebrow, availability, shipping strip, CTA, full ambient + grain treatment.
RiskThe figure overlaps the wordmark by design, so on a 360px phone the brand name is partly occluded. Needs a legibility check at 360.
MobileReal second composition, not a squeeze. Figure is 34% height and the type sits clear above it.
Verdict: the safest strong choice. Buys personality without touching the SEO-critical structure. If you want one decision and minimal regression risk, this is it.
B

The Portrait

Delete almost everything. One large photograph, one short claim, one button, tiny type for everything else. The image does the emotional work and the type only carries the claim. Borrowed from Victor Furuya, who holds up well on mobile.

Fixes: the most aggressive cut. The 220px wordmark drops to a small corner wordmark. If the logo was competing with your actual argument, this ends the competition. Highest chance of looking expensive; biggest change to brand presence above the fold.

desktop

developer tools · desktop apps
Aadarsh Upadhyay

I build the tools that shouldn’t need to exist. The ones that do frustrated me into building better ones: fast, free, and yours to keep.

See the workavailable
searchts · glyphmaps · grove · beep-beep-oss

phone

developer tools
Aadarsh Upadhyay

I build the tools that shouldn’t need to exist.

See the work
Cost to buildLow. Grid plus one image. Simplest of the four.
Runtime JSNone. Could drop several of the hero's reveal timers.
Keeps from todayEyebrow, CTA, shipping strip, ambient, grain. Drops the 220px wordmark — biggest strategic change of the four.
RiskLoses the brand monument. On a portfolio whose name is also the product, that is a real cost. Search impact is mitigated if the wordmark still appears at smaller size and in the title tag.
MobileVerified pattern on the reference; stacks to photo-over-text cleanly.
Verdict: the most refined and the least risky visually, but it trades away the brand presence that is currently your strongest asset. Pick this if you are willing to let the work and your face carry the name.
C

Kinetic Monument

Invert the hierarchy completely. The name becomes a small mono label and the sentence becomes the monument, set enormous and filling the width. You are small, right, signing it. Borrowed from Rauno Freiberg, who does this on a flat background with zero blur.

Fixes: directly attacks the diagnosis. Right now the best writing on the page is the smallest thing on the page; here it is the largest. It also gives the liquid-glass language something to refract — a huge text edge catches the material far better than a paragraph does.

desktop

Aadarsh Upadhyay developer tools · desktop apps
I build the tools that shouldn’t need to exist.
See the work open for the right problem searchts · glyphmaps · grove

phone

Aadarsh Upadhyay
I build the tools that shouldn’t need to exist.
See the work searchts
glyphmaps
Cost to buildLowest of the four. Type and one small image. Effectively zero new CSS.
Runtime JSNone. The most likely to be faster than today.
Keeps from todayEvery element survives. Nothing is deleted — the name and eyebrow just shrink into the top row. Shipped strip, CTA, availability all intact.
RiskThe statement has to be tuned per breakpoint. Desktop and phone use different photos, which is a deliberate art-direction call, not an oversight.
MobileType-driven, so it reflows natively. No fixed-width risk.
Verdict: best value and the smallest diff — it removes nothing and just re-ranks. Strongest if you want the site to read as opinionated rather than decorative. My pick if you want one change that also helps performance.
D

Sticker Sheet

A physical object: graph-paper card, prints pinned to it at slight rotations with tape, accession labels underneath like a museum record. One accent ink. Three photos per view. Maximum personality, maximum risk.

Fixes: this is the direction with the most obvious soul — it looks photocopied rather than rendered. It also makes your photo assets the hero, which none of the other three do.

desktop

I build the tools that shouldn’t need to exist.
portrait · cut-out studio, 2026
Aadarsh Upadhyay See the work

phone

I build the tools that shouldn’t need to exist.
cut-outs, 2026
Aadarsh Upadhyay See the work
Cost to buildMedium. Per-breakpoint pin positions, and the card needs its own stacking context.
Runtime JSNone strictly required. A scroll-parallax on the pins would be the temptation — resist it, or it re-creates the frame budget you are already fighting.
Keeps from todayKeeps ambient, grain, CTA, the name. Loses the wordmark entirely and the shipping strip. The eyebrow survives only as an accession label.
RiskHighest. The reference site this borrows from is visibly broken on mobile and asks visitors to use a desktop.
MobileNeeds its own composition, shown here, but it is the one to test hardest on a real phone.
Verdict: the most fun and the most likely to make someone say "this site has a person behind it". Also the one most likely to ship something that looks broken on your phone. Only pick this if you want it and will test it hard on mobile.