Client: Payy Role: Front-End Developer / Design Engineer Timeline: May 2026 Deliverables: Typography system implementation, custom animation primitives, section-by-section homepage build, redesigned footer, reusable components, asset optimization, forward-looking recommendations

Payy — a stablecoin payments infrastructure company — had a functioning React marketing site that needed to feel as polished and credible as the product it represented. The existing site worked, but lacked the motion, typographic refinement, and visual consistency expected of a category-defining fintech brand.

The focus was implementation, not visual design: systematically elevating the entire homepage in code — introducing a new type system, building a reusable motion foundation, and rebuilding nearly every section for visual cohesion — all within a custom-built React SPA with no UI framework, where every component and animation had to be authored by hand.

I delivered this entire engagement using Claude Code as my development environment, directing it with 15 years of front-end and design-engineering experience. That combination is what made the pace and quality possible: my judgment set the technical direction — how to structure the motion system, where to spend effort, how to keep things performant and accessible — while Claude Code let me execute far faster than a traditional workflow. The AI handled volume; the engineering decisions stayed mine, informed by years of shipping production interfaces.

I implemented a new dual-typeface system — Space Grotesk for sans and Steradian for serif — across the entire site, wiring it into the existing design-token setup alongside updated logo and lockup assets. This set the tonal foundation for the rest of the work.

Rather than one-off animations, I built a small set of motion primitives that the whole site could draw on: a scroll-reveal system with staggered cascades, an eased count-up hook for statistics, and smooth fade transitions between routes — all built on standardized motion tokens and fully respecting prefers-reduced-motion for accessibility. Knowing which details make motion feel intentional rather than decorative is exactly where the experience showed.

I authored several bespoke components beyond standard layouts — an animated hero logo grid with rotating partner logos, corner-highlight accents with a dark-mode variant, and a custom icon system — giving the site interactive detail that went well beyond the defaults of a plain React build.

Every major homepage section was rebuilt in code for fidelity and consistency: a proof band with a stat grid and animated count-up numbers, a restructured stack section with progress-fill motion, refreshed "Missing Layer" and "Feels Familiar" sections, and a unified card pattern carried across all pages. The site's visual rhythm was cleaned up by removing dated dividers and tightening layout.

I built a new footer featuring a background image with a parallax scroll effect, including a dedicated mobile fix to keep the motion smooth on small screens.

Large brand and product images were compressed significantly (multiple files reduced by 20–40%) to keep the visually rich site fast to load.

Beyond the build itself, I shared a set of recommendations to help the Payy team get the most out of the site as it grows. With the visual direction now established in code, a natural next step would be to introduce a dedicated component library, so shared elements can be reused and updated from a single source. Alongside that, splitting the codebase into smaller, self-contained files — following the conventions of a typical React project — would make the site easier to navigate and extend as more people contribute. More broadly, I outlined a handful of front-end best practices to support maintainability and a smooth developer experience over the long term. The aim was to leave the team with a clear, practical path for continuing to evolve the site with confidence.

An entire homepage rebuild delivered end-to-end with Claude Code, guided by 15 years of front-end and design-engineering experience

A new typography system implemented across the site

A reusable, accessibility-aware animation foundation powering scroll reveals, count-ups, and page transitions

Custom components and interactions enhancing visual impact across the site

A new footer with smooth, performant parallax motion

Optimized assets keeping a visually rich site fast and responsive

Practical recommendations — a component library, modular code structure, and front-end best practices — to support long-term maintainability

Payy now has a polished, motion-rich marketing site that matches the technical sophistication of its product — implemented fast, built with engineering craft, and structured to scale across the homepage and supporting pages.