Earn a skeptic’s trust in one glance
The brief I gave myself
KettlePay pivoted out of an NFT watch marketplace, and the pivot kept its moat: real ties to the watch world and New York’s diamond district. Those dealers source from Hong Kong constantly, the other side increasingly wants USDT, and crypto simply beats a wire for them — money lands faster, with proof, on six-figure deals where the margin is ~3% (about $1k a transaction). But they were confused by crypto and rightly wary of it.
So the whole site has one job: make a crypto-skeptical luxury dealer trust it at a glance. And for this audience trust is two-sided — it has to feel as safe as a bank, but read as cutting-edge, not old-fashioned. I had two weeks, alone, to design and build it. That constraint became the design tool: every element was triaged by one question — does this earn trust faster? Everything below is an answer to that, and so is everything I cut.
Why it doesn’t look like every other fintech site
The default marketing hero — headline left, product shot right — would have read as safe and generic. For people deciding whether to move real money through crypto, “generic” is the opposite of trustworthy: they needed to feel the team was technically ahead. So I deliberately broke that template and let motion and dimensionality carry the credibility, while keeping the surface calm enough to use. Cutting-edge as a trust signal, not as decoration.
Hero — the product presents itself (take three)
I wanted the app to feel physical the instant you land. First attempt: a true 3D phone in Spline. It looked great and ran badly — three JS bundles, 20 MB+ for every first-time visitor, and jank on scroll. Second attempt: I built a preloader to cover the wait — but that solved the wrong problem. A first impression that has to load before it can earn trust has already lost. What shipped: a video of the app composited onto a phone, then a single CSS 3D transform — the phone lies tilted back and straightens up to meet you as you scroll. Above it, one rotating word — luxury watches, cars, jewelry, yachts, real estate — says “this is for your world” without a sentence of copy.
Why take three won is an engineering argument: a transform animates on the compositor — no layout, no paint, no main-thread work per frame — and video decodes in hardware, with a poster frame so the first paint waits for nothing. The Spline phone was expensive to download and to run; this one is close to free at both ends. Same dimensional feel, a fraction of the weight.
Feature story — proof, paced so it can be digested
A sticky, scroll-paced section walks four capabilities, each shown as real product footage rather than claimed — accept 1000+ cryptos, same-day payouts, wire → USDT (“need USDT for a deal?”, written for the Hong Kong sourcing run), and e-commerce. Rich effects like motion blur are expensive to run live — recomputed every frame on the main thread, the one resource a scroll-driven page can’t spare — so I moved that cost from runtime to render time: pre-rendered in After Effects, shipped as video the browser decodes in hardware. That trades CPU for bandwidth, so the bandwidth had to be engineered too: webm-first dual-source files (the 1000-crypto clip is 344 KB as webm vs the 5.8 MB mp4 fallback), lazy-loaded on scroll-in so none of it competes with the first impression. Immersive, but it still loads like a brochure.
1000+ cryptos — where the motion is the message
The claim is “any coin your buyer holds, zero friction.” A wheel that stutters would contradict that sentence, so the one non-negotiable was an endless, perfectly even glide that also responds to your scroll — the smoothness carries the meaning. Under the hood it’s deliberately one number: a scroll offset advanced by the clock each frame and nudged by your own scrolling, applied as a single transform to a tripled list that wraps without a seam. Everything visual is transform and opacity — nothing forces layout — and the speed is time-based, so even a dropped frame can’t change the pace. This is the actual component from the site, running live:
Traction you watch happen
Numbers sitting still read as a screenshot; on the site they count up as they enter — 200+ merchants, $100M+ processed, 5000+ transactions at launch — so the traction read as momentum, the feeling a young payments company wants in front of a cautious buyer. It’s also the cheapest motion on the site — one trigger, one eased count, nothing but text repainting — because a counter that janks is a counter arguing against the product.
How it works — banking words, crypto invisible
This is the “safe as a bank” half of the thesis, expressed as information architecture. Dealers think in wires, balances, withdrawals — not wallets, gas, or chains. The interactive rail keeps the entire flow in their vocabulary: wire in → get paid in any coin (instantly USD) → wire out, often same-day → one flat 0.75% fee. The crypto happens in the middle, invisibly. And like every animated explainer here, the rail is paced by scroll rather than a clock — the reader’s own pace is the timeline, so the argument can never move faster than the person it has to convince.
Security — making “we block it” visible
Security is where crypto sites usually lose a skeptic, in a wall of compliance text. Instead the section makes the guarding visible — scroll-driven bars and Lottie that grow as you read, turning sanctions screening, Circle & Tier-1 banking, and AML into something you watch working. The interaction is the diagram, and it reassures without shouting. Lottie earns its place here for the same budget reason the demos are webm: flat vector marks ship as kilobytes of keyframes, motion-blurred footage ships as video — each section gets whichever format makes its pixels cheapest.
The people behind it
For five-figure-and-up transfers, the last question is who you’re trusting. The about page lands on the team and the investors (ParaFi, Kronos, IOSG, Signum, Zee Prime, Puzzle) — the moat made personal, and the final beat of the trust argument.
The set piece I built, then benched
There’s a Mapbox hero where “meet our merchants” splits apart as the camera dives into the network — the diamond-district moat made tangible (shown here as the static frame, since it ships unlinked from the nav, on purpose). It’s heavy in a way no optimization rescues — a WebGL map runtime plus tile fetches before the camera even moves — and on a site whose entire job is trust-at-a-glance, weight is the enemy of the first impression — wow isn’t worth more than speed. Deciding not to feature my most impressive build was the same judgment call as cutting the Spline hero. Restraint was the design.
Era 2 — the emerald rebuild (May 2026)
A year in, I rebuilt the site on a design system of my own — ~40 --kp-* tokens, Geist with a Cormorant italic accent — the same trust argument, restated in emerald. The rules got sharper, not looser: I removed ~293KB of unused font preloads that were starving the real LCP text on slow connections. And the one third-party seam in the funnel got closed: the Cal.com embed was replaced with a scheduler I built end-to-end — real free/busy against Google Calendar, Meet links, and timezone math handled properly. Below is that scheduler’s mechanic as a working demo — the availability is mock, the timezone logic is real. Change the zone and watch the same slots restate themselves.
What shipped
Two weeks, solo, design and code: a front door where every interaction makes one argument — presentation, proof, effortlessness, momentum, familiarity, safety, people — and where the cuts (Spline, the map, live effects traded for baked video) make the same argument by protecting the first impression. The bet was that, for this audience, how the site is engineered is itself the proof the money is safe. Underneath, three rules every section follows: keep per-frame work off the main thread, ship each effect in whichever format makes it cheapest, and let nothing stand between the visitor and the first paint. The app it fronts now moves $300M+ a month.
