capad.fyi · hero rebuild, take three · no pane

No box. The page is the hero.

You were right that the old idea was still there. I had kept the centred pane, the stacked type, the eyebrow straddling the top edge and the proof strip straddling the bottom, and then described that as preserving what works. It was the same composition with a different fill.

So all of it is gone. No rounded rectangle, no card, no radius, no shadow, no floating object. The hero is now the page itself: a masthead, a statement at 84px running off the left edge, the picture whole and flush right at full height, and one action on the floor. The wordmark is demoted from monument to masthead — capad is a handle, and your actual sentence is the strong thing.

That also fixes the material problem honestly: glass was doing nothing on the hero because the hero was glass. Glass now starts on the project cards, so it means “interactive” instead of “background”.

Three more things you asked for: the availability chip is replaced by a fact in the masthead, testimonials are Option B as a hover-revealed liquid panel, and the intro is replaced by one reveal primitive that works on any section — hit replay to watch it fire.

no pane · no radius · no shadow statement is the monument picture whole, flush right, never cropped one reveal primitive, any section
1

What went, what arrived

The composition, not the styling.

Gone The paneRadius 40, the hairline, the bevel stack, the drop shadow, the inset sheen. There is no object. The hero is the viewport, which is the only container that was ever big enough for an 84px statement and a full-height picture at once.
Gone CentringEverything was optically centred. It is now hard-left and asymmetric, with the picture carrying the right half. Centring is why the old one read as a card even when it was full-bleed.
Gone The eyebrow pill“Developer tools · desktop apps” was a label floating on the top edge of a box. With no box there is nothing to label, so it is gone. The category is already carried by the work itself.
Gone The chipSee below — replaced rather than restyled.
New HierarchyStatement 84px against a 23px wordmark. Previously it was 220px against 56px, which is why the hero was about its own name.
New The pictureWhole, 824px tall, flush right, top:38px. Nothing is cropped and nothing bleeds off — the ambient gradient does the bleeding, not your face. T4 ink, deckled silhouette, registration offset retained.
Kept One action“See the work” as an ink pill on the floor, right-aligned against the proof line. The hero now has exactly one thing to press.
Kept The system--paper, --ink, --muted, Geist Sans and Mono, .ambient, .grain, the mono eyebrow scale, the dot rail, the real .glass recipe on the cards, and your easing cubic-bezier(.16,1,.3,1).
2

The chip, replaced

Not restyled. Replaced, because the problem was that it was a chip.

Why it was wrongIt was a second call to action sitting inside the composition, one inch above the real one, so the hero had two buttons with different levels of confidence. It also hovered into “read the resume”, so the same object meant three things. And “open for the right problem” asks the reader to imagine a problem, which is work you are doing for them.
New A factAvailability moves to the masthead as your real, already-published string: ● INDIA · REMOTE-FIRST · OPEN TO RELOCATE. It is checkable rather than charming, it is the thing a recruiter actually scans for, and it costs the composition nothing because it sits in the furniture line. The visa-sponsorship clause stays on the resume where it belongs.
ConsequenceThe masthead now carries capad, your name, and availability — three facts, no advertising. The floor carries the proof line and one action. Nothing in the middle asks for anything.
3

The new hero, and the flow into Selected work

Hit replay. The same primitive fires on the hero and on the section below it.

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 work →

shipping in the open  searchts · glyphmaps · grove · beep-beep-oss

selected work

Four things I’m building.

Two shipped, two in progress. Status updates live, straight from the CMS.

searchts shipped

A keyless web unlocker that reads, searches, and transcribes what a naive fetch cannot, from bot-walled pages to whole AI-chat share conversations.

0API keys
3unlock tiers
8AI-chat providers
pythonclimcpweb-unlocker

what people said about this

“from your own IP” is the whole insight. a proxy pool fights the bot-wall; your own IP is already through it, same reason a human’s browser doesn’t trip cloudflare.
Phi Browser · @phibrowser
fetch-time + final_url turns read output into something a reviewer can cite later. redirect + timestamp makes it durable.
Dang_nh · @hikariraina
hover for peer review

Hare in progress

A PR reviewer in two forms. It checks the branch out, installs it, runs the repo’s own test command, and posts findings as me. Neither can approve a merge.

53app reviews
25bot reviews
0blocking
github-appactionscode-reviewllm
no peer review yet

glyphmaps shipped

Google Maps turn-by-turn on the back of a phone, mirrored onto the Nothing Phone (4a) Pro’s 137-LED Glyph Matrix. No Maps API key.

137LEDs
12maneuvers
2.3 MBAPK
androidkotlinglyph-matrix
no peer review yet

grove in progress

A free Git review companion that sits beside your AI coding editor. The commit graph, diffs, and every in-flight worktree, live.

alphastage
worktreefirst
BYOagent
typescriptelectronreactnode
no peer review yet

also shipped, smaller: CoffeeBreath · Discord Voice Overlay · Dooper · MSU Halls Register

not mine, I just fixed it: wmux

read the build stories →
no seam · nothing to explain
4

The reveal primitive, and why it replaces the intro

You asked for something new that works for any section. This is the whole motion system.

The problemliquid-intro is a one-shot overlay for the first screen: it unmounts after 1.35s, is skipped under 640px, on reduced-motion and on repeat visits, and cannot be reused because it is an overlay rather than a behaviour. Every other section gets a different, weaker .reveal-up / .reveal-title fade from reveal.tsx. So the site has three unrelated motion ideas and one strong one that only the hero gets.
New One attribute[data-rise]. Offset 22px and 12px of blur, resolving to rest on cubic-bezier(.16,1,.3,1) — your existing curve, not a new one. Stagger with --d. That is the entire system: no overlay, no portal, no second timeline.
Why it works anywhereIt is a state transition on an element, not a page-level animation. Hero, Selected work, the timeline, the stack, the manifesto, the colophon — all of them take the same attribute and get the same motion, tuned only by --d. The mock above fires it on nine elements across two different sections to prove it.
Liquid, not slideThe blur is what sells it. A pure translate reads as a slide; 12px of blur resolving to zero reads as something coming into focus through a surface, which is the same trick as .glass and .lens already use. That is why it belongs to this site and not a generic one.
Cost and safetyfilter and transform only — both composited, no layout, no paint of the photograph. prefers-reduced-motion collapses it to opacity:1 outright. It never blocks reading, because the end state is the default and .in is only ever added.
What I would deleteliquid-intro entirely, and fold reveal.tsx into the same data-rise contract. That deletes a component rather than adding one, which is the correct direction.
On the tear. Dropped, and I am not replacing it with anything. The fold from hero to Selected work is now carried by nothing at all — no rule, no seam, no annotation. The hero ends on whitespace, the next section starts on whitespace, and the two materials are different because the cards are glass and the hero is not.
5

Testimonials, Option B, as a hover panel

Hover the searchts card above. Or tab to it — it is focusable, so this is not mouse-only.

The movePeer review belongs to the project it is about, so it lives on the project card. On hover the body lifts and blurs out while a denser glass panel rises through it from 16px down, 10px of blur to zero. Same .glass material at a higher density — rgba(255,255,255,.62) with a stronger backdrop blur, which is your existing .glass.flat value used as a front surface instead of a buried one.
Why it stays liquidBecause it is the same object changing state, not a second card arriving. No layout shift, no reflow, nothing to position absolutely outside the card. The card’s height never moves, which is what stops a hover from making the grid jump — the thing that usually ruins this pattern.
Accessibility:focus-within alongside :hover, and tabindex="0", so it is reachable by keyboard. Under prefers-reduced-motion the transform and blur drop and it becomes a plain opacity fade.
Honest gapOnly searchts has peer review. The other three say so on the card rather than pretending. When you do have a Hare or wmux quote it appears in the same place with no new component. The wmux maintainer note currently belongs to a project that is not one of the four, so it goes on the case study and in the footnote line.
What you give upThe card-flip deck. In exchange the deck section disappears from the homepage entirely, which is one screen shorter, and the social proof arrives while the reader is still looking at the work.