SFWA
All work

Flagship · Case study

Rebuilding our own site, premium-first.

We took the SF Web Agents site from a capable-but-ordinary template to an immersive, conversion-focused experience, and used it to prove exactly what we build for clients.

Role
Design & engineering (in-house)
Year
2026
Stack
Next.js · Three.js · framer-motion · Supabase · Resend
Scope
Brand, immersive site, lead system

The challenge

The old site looked like a lot of dev-shop sites: a hero, a services list, a buried contact form. It undersold the craft, gave visitors no obvious next step, and didn't make the case for premium work. We wanted a site that felt high-end, loaded fast, and turned the right visitors into booked calls.

The approach

Immersion with intent. A dark, premium hero and a scroll-driven narrative carry the brand, while a disciplined, conversion-first structure does the selling. We led with what we deliver confidently today, websites and content, and framed AI and automation as the next rung, not the headline.

What we shipped

An immersive, hybrid home

A dark, premium hero over a live agent-network (WebGL with a 2D fallback), flowing into airy light sections, built to feel high-end without sacrificing speed.

Conversion-first architecture

A clear value proposition, one primary action repeated at decision points, a clients strip for proof, and a frictionless qualifying intake.

A real lead system

A qualifying form into Supabase with instant email notifications and an auto-confirmation to the lead, plus an admin dashboard, and a dormant n8n hook for future automation.

Content + SEO + analytics

An MDX Insights blog, full metadata, Open Graph, sitemap, JSON-LD, and Vercel analytics, discoverability and measurement built in from day one.

Under the hood

Built on Next.js (App Router) with TypeScript and Tailwind. The hero network renders in Three.js where WebGL is available and falls back to a hand-built 2D canvas everywhere else, so it's immersive without breaking on any browser. Motion is handled with framer-motion, leads flow through Supabase and Resend, and the whole thing ships on Vercel with a strict performance budget and a full accessibility and reduced-motion pass.

Want this for your site?