Interactive websites
Marketing sites that feel like product — scroll-linked, 3D-accented, built in Next.js.
- Next.js
- React Three Fiber
- GSAP
- Framer Motion
Devfrend · a boutique engineering studio
Engineering-grade websites.
We build the parts of your site that the template can't. Next.js, React Three Fiber, GSAP — reviewed by senior engineers, benchmarked against Lighthouse 90+, accessible by default.
§ Recognized by
- AwwwardsSite of the Day nominee
- CSS Design AwardsUI · UX · Innovation
- FWAOf the Day finalist
- GodlyFeatured studio
- HttpsterFeatured 2026
- LovelinksAgency spotlight
§ Services
Four shapes of engagement. All senior. All accountable to numbers.
Design engineering
A design system in code. Tokens, primitives, docs — the bedrock your team can ship against for years.
- TypeScript
- Tailwind v4
- Storybook
- Radix
Performance & a11y audits
A 10-day deep dive. We come back with a report, a PR, and numbers to defend.
- Lighthouse
- axe-core
- WebPageTest
- Chrome DevTools
Launch partner
For founders shipping v1. A senior engineer on your team, end to end, until you're live.
- Next.js
- Vercel
- PostHog
- Sentry
0+shipped projects
0avg. Lighthouse perf
0+years senior exp
0%WCAG 2.1 AA
- Next.js ·
- React ·
- TypeScript ·
- React Three Fiber ·
- GSAP ·
- Framer Motion ·
- Tailwind v4 ·
- Three.js ·
- Lenis ·
- Vercel ·
- PostHog ·
- Sentry ·
- Cal.com ·
- Resend ·
- Storybook ·
- Next.js ·
- React ·
- TypeScript ·
- React Three Fiber ·
- GSAP ·
- Framer Motion ·
- Tailwind v4 ·
- Three.js ·
- Lenis ·
- Vercel ·
- PostHog ·
- Sentry ·
- Cal.com ·
- Resend ·
- Storybook ·
§ Deep-dive
Scroll sideways. Each service, in plain English, with what we hand back.
01websites
Interactive websites
We take a Figma file and turn it into a site where every interaction is designed, measured, and reviewed. Scroll-linked motion, WebGL scenes, magnetic CTAs — the kind of work that gets linked on Awwwards because the motion is good, not decorative.
Deliverables
- ⟶Figma → production Next.js build
- ⟶R3F scenes under 120 kB gzipped
- ⟶GSAP ScrollTrigger pinning + scrub
- ⟶Lighthouse 90+ verified on 3G throttle
02engineering
Design engineering
We embed for 4–8 weeks and leave behind a typed, themed, documented design system. Tokens as CSS variables, primitives in TypeScript, motion specs with codified easings, a Storybook that plays double duty as the team's living style guide.
Deliverables
- ⟶Design tokens (JSON + CSS + Tailwind)
- ⟶Primitive component library (TypeScript)
- ⟶Motion + a11y specifications
- ⟶Storybook with interaction tests
03audits
Performance & a11y audits
We profile your site on real devices under real network conditions, fix the top 20% that moves 80% of the metrics, and ship a PR with before/after Lighthouse + axe-core diffs. No vague recommendations — we leave code.
Deliverables
- ⟶Lighthouse before/after report
- ⟶axe-core audit + WCAG 2.1 AA diff
- ⟶Prioritized fix PR with perf budget
- ⟶4-week follow-up review call
04partner
Launch partner
We pair with your designer (or ours) and take the site from blank repo to devfrend.com. You get one senior engineer, full-time for 6–12 weeks, shipping in your codebase, reviewing your PRs, writing your README.
Deliverables
- ⟶Full-time engineer for 6–12 weeks
- ⟶Site live on Vercel / Cloudflare
- ⟶Analytics + observability wired
- ⟶Handoff doc + runbook
- 01
Discovery
We figure out if we're the right fit.
A 60-minute working session. You walk us through the product, the audience, and the stakes. We leave with a brief and a rough shape of the engagement.
Week 0 - 02
Concept
Two directions, not five.
Two distinct art-direction routes. Figma, annotated. We present both live, you pick the one that fits — or the hybrid that fell out of the conversation.
Week 1 - 03
Design system
Tokens before pixels.
A design system built on CSS custom properties from day one. Every color, radius, easing has a token. Nothing in the file is a one-off.
Week 2 - 04
Build
Engineered, not stitched.
Next.js App Router, React Three Fiber for 3D, GSAP for motion. Code reviewed by senior engineers. Every PR ships with a Lighthouse run.
Weeks 3–5 - 05
Polish
Where the $50K lives.
Micro-interactions, reduced-motion fallbacks, a11y audit, performance budget. The pass that separates a nice site from a memorable one.
Week 6 - 06
Launch
Then we hand you the keys.
Deploy to Vercel, set up analytics, write the runbook. 30 days of warranty support. Then the repo is yours — no lock-in, no retainer.
Week 7
§ Work
Five projects we'd happily walk you through line by line.
Memory MCP
A persistent memory layer for Claude.
AI Chatbot (Devfrend)
A white-label chatbot that feels native, not bolted on.
Devfrend MCP
A single MCP for your whole freelance stack.
OpenClaw
A scroll-driven product site for a dev-tool launch.
InvenSync
A dashboard that replaced four spreadsheets.
§ Clients
What it’s like to work with us.
Drag →
§ About
Built by engineers, not templates.
Twelve years of shipping production frontend. Senior-only team. You talk to the person writing the code.
- 2014
First production React site
Early adopter; learned the hard way that animation is a systems problem, not a styling one.
- 2018
Led frontend at a Series B fintech
Shipped a design system, a performance budget, and the team's first a11y commitment.
- 2022
Started freelancing as Devfrend
Two launches in the first six months, both hit Lighthouse 95+ and got linked on Awwwards.
- 2024
Incorporated Devfrend Agency
Brought on one senior engineer and a motion specialist. Boutique by design.
- 2026
Today
Shipping the site you're reading. Four services, five case studies, and a voice guide we actually follow.
§ Contact
Available worldwide. Talking to you within one business day.
Questions answered.
What does a typical engagement cost?
Our four service shapes range from a fixed-fee $9k audit to a 12-week $70k launch partnership. We send a scoped proposal within 48 hours of the intro call.
Do you work with existing design systems?
Yes. We prefer embedding in yours. If you don't have one, we can ship a lightweight one as part of the build (see service 02).
How small is 'boutique'?
Two senior engineers + a network of three specialists (WebGL, motion, a11y) we bring in per project. You talk to the person building it.
What don't you do?
We don't do WordPress, Shopify themes, Webflow-only builds, or accessibility as a post-hoc retrofit. We'll refer you to people who do those well.
How do you handle accessibility?
WCAG 2.1 AA from day one. We test with keyboard, screen reader (NVDA + VoiceOver), and axe-core. If we miss something, we fix it on our dime.
Can you start this week?
Usually. We hold one slot per quarter for a fast-start engagement — book an intro call and we'll tell you if this quarter's slot is still open.