The brief

The client runs an AI agent platform for D2C brands — 200+ agents across 9 departments. The product was solid. The website was one paragraph and a contact form.

They knew it needed work. They just hadn't gotten to it.

What we built

Full rebuild in Next.js + TypeScript + Tailwind + GSAP.

The main things:

— animated hero that actually shows what the product does instead of describing it
— tabbed department explorer (9 verticals, all in one section without it feeling cluttered)
— live agent console UI — gives visitors a sense of the product before they sign up
— bento proof section for stats and client logos

One constraint I kept coming back to: the product is technical but the buyers aren't always developers. Every section had to be clear to a D2C brand owner who doesn't know what an AI agent is.

One thing worth mentioning about GSAP

The services section uses a horizontal scroll — the whole track slides left as you scroll down, pinned to the viewport. The tricky part is calculating how far it needs to travel: track.scrollWidth - window.innerWidth, and that number changes every time the viewport resizes. GSAP handles this cleanly with function-based values — instead of a fixed pixel distance, you pass a function to end and set invalidateOnRefresh: true, so ScrollTrigger re-runs the calculation on every resize automatically. The whole thing is also wrapped in gsap.matchMedia so it only activates on desktop — on mobile it falls back to a normal vertical stack.

Result

Delivered in under 4 weeks. Fixed scope, no surprises.

Live at lancemart.org