Three sites come up again and again when a client shows you what they want: noth.in, buttermax.net and igloo.inc. They live in the same mental bucket, the expensive one, while playing in completely different leagues. The first can be reproduced in two weeks. The last one is months of work by a specialised team. This guide starts from an actual inspection of all three, sets what a 10k budget really buys, then walks the full pipeline: tools, commands, prompts, performance budget and how to price it.
What is actually running under the hood
noth.in: Webflow, plus a custom animation layer
data-wf-site attributes, jQuery 3.5.1 and webflow.js served from the Webflow CDN: this is a Designer-built site, not an app. On top of it sits a ~750KB bundle compiled with Vite and hosted on Netlify, shipping GSAP and injecting a runtime stylesheet that sets opacity:0 on anything carrying the [line], [letter], [opacity] or [scale] attributes. One JS file scans the DOM and animates everything marked that way. Keep that pattern: the sophistication lives in a single layer, not in fifty hand-wired animations.
buttermax.net: Next.js, headless CMS, custom shaders
Next.js on the pages router, served statically, with data injected into __NEXT_DATA__ by a self-hosted headless CMS (Payload-shaped, media on a Google Cloud Storage bucket named bx-site-cms). Scrolling runs through Lenis. The home chunk carries around twenty shader references: thumbnail transitions are WebGL planes, not CSS transform. Case studies are 3 to 5MB .mp4 files streamed from the bucket, never GIFs. The page JSON alone weighs 346KB, which tells you the important part: the content is structured and editable, not hardcoded.
igloo.inc: not a website, a 3D application
The <body> is empty. One Vite entry module, then a 1.5MB App3D chunk loaded on demand. Inside: Three.js and its WebGLRenderer, GSAP with ScrollTrigger, GLB models compressed with Draco and Meshopt, every texture in KTX2 (a GPU format, not PNG), an EffectComposer with bloom, MSDF-rendered text so typography can animate inside the 3D scene, and four Web Workers dedicated to EXR decoding, bitmaps, fonts and audio. There is embedded sound design. This tier does not come out of a prompt: it is a team, a 3D art director and several months.
The three price tiers
- Tier 1, 8k to 15k: the noth.in level. One page or five, monochrome, a licensed typeface, a clean motion layer, one strong visual moment. Reproducible solo with AI. This is what the guide targets.
- Tier 2, 30k to 80k: the buttermax level. Add a full CMS, filmed case studies, custom shaders, a designer and a developer for two months.
- Tier 3, 150k and up: the igloo level. 3D art direction, modelling, sound design, GPU optimisation. AI helps with the code, it replaces neither the modeller nor the art director.
Selling a tier 1 while showing a tier 3 reference is how you guarantee a disappointed client. The first conversation exists to place the project on that scale.
What 10k actually buys
A 10k site is roughly eighteen days of work at 550 a day. The honest split:
- Art direction and references: 2 days
- Designing the key screens, desktop and mobile: 4 days
- Build and integration: 5 days
- Motion layer: 3 days
- Content, SEO, localisation: 2 days
- QA, performance, accessibility, launch: 2 days
AI compresses the build, the integration and part of the motion work: five days instead of twelve, comfortably. It compresses nothing on art direction, on getting content out of the client, or on approval rounds. Reinvest the time you save into detail, because detail is exactly what separates a decent site from an expensive one.
Freeze one stack, forever
Margin does not come from being fast on one project, it comes from repetition. One stack, one in-house starter, reused ten times.
- Next.js (App Router) and TypeScript: static by default, optimised images, one-command Vercel deploys.
- Tailwind for layout, plus a tokens file (colours, type scale, animation durations). Tokens before components, always.
- GSAP and ScrollTrigger: free since 2025, SplitText included. It is the motion layer of all three references.
- Lenis for inertial scrolling. Two lines of code, immediate effect on perceived quality.
- React Three Fiber only when 3D is justified. A well-animated site without 3D beats a badly optimised site with it, every time.
- Sanity or Payload when the client must edit. Otherwise MDX, and do not bill for a CMS nobody will open.
The toolbox beyond AI
- A licensed typeface (Pangram Pangram, Klim, Displaay, Grilli Type): 50 to 300 per project, the best value in the whole budget. noth.in runs on PP Neue Montreal paired with IBM Plex Mono. A paid grotesk plus a monospace is most of the studio effect on its own.
- Figma for three or four key screens, not the whole site. The rest gets decided in the browser, which is faster with AI in the loop.
- Blender and gltf-transform for 3D, or Spline if nobody on the project can model. A GLB always goes through compression before it enters the repo.
- Rive for interactive vector motion: a few kilobytes, drivable by scroll or hover, infinitely lighter than video.
- ffmpeg for background video, Sharp or Squoosh for images.
- Playwright, locally and through its MCP server: this is what lets Claude see the render instead of guessing it.
- Midjourney or Flux for textures and mood visuals, Topaz for upscaling, Runway for a short video loop when the client has no usable footage.
- Vercel and Lighthouse CI for shipping and for catching performance regressions on every commit.
The pipeline with Claude, step by step
Step 0: the constraints file, not the prompt
The leverage is not the opening prompt, it is the CLAUDE.md file at the root of the project. It gets re-read every session and it kills the defaults: Inter, purple gradients, shadowed cards, animation everywhere. That is the prompt at the top of this page. Adapt it, version it, reuse it on every project. Half the failed builds fail because this file never existed.
Step 1: art direction before the first line of code
Never ask for “a site in the style of X”. Hand it the actual code of X. Pull the DOM and the scripts, then have it do the teardown:
curl -sL https://reference-site.com -o ref.html
# then, in Claude Code:
"Read ref.html. List: the platform and framework, the animation libraries,
the exact typefaces, the real palette in hex, the section-by-section
structure, and the animation pattern in use. Guess nothing: for each claim,
quote the line that proves it."The difference is stark. Without the file, Claude describes a generic studio site from memory. With it, you get the real stack, the real font names and the real motion system. The three teardowns at the top of this guide were produced exactly that way. Pull the JS bundle too, that is where Three.js, Draco and KTX2 hide.
Step 2: tokens first, components second
The first thing to generate is a tokens file. Colours (background, text, one accent), a type scale in clamp(), spacing rhythm, animation durations and easings. Everything else references it. Skip this and every section invents its own values, so by the third one the site is a patchwork. Then build three primitives only: the container, the section heading and the button. Nothing else until real content exists.
Step 3: one section at a time
“Build the site” produces plausible mush. One section per exchange, with the real content, and make Claude restate the layout, type scale and motion in three bullets before writing anything. You correct the description, which costs ten seconds, instead of correcting 400 lines of JSX. The hero takes a third of the total time. That is correct: the hero is what people are buying.
Step 4: a motion layer separate from the markup
This is the technical thing all three references share, and the most common mistake when AI improvises. Do not put a useEffect with a tween inside every component. Write one file that scans the DOM and animates anything carrying an attribute:
// motion.ts: written once, for the whole site
gsap.utils.toArray('[data-anim="line"]').forEach((el) => {
const split = new SplitText(el, { type: 'lines' })
gsap.from(split.lines, {
yPercent: 110, opacity: 0,
duration: 0.9, ease: 'expo.out', stagger: 0.06,
scrollTrigger: { trigger: el, start: 'top 85%' },
})
})The markup only ever carries data-anim="line". Everything is tuned from one place, including the prefers-reduced-motion fallback, which is not optional: without it the site is unusable for part of your visitors and it gets dropped from award selections.
Step 5: the visual loop, the real secret
A model that cannot see its own output is coding blind. Wire the Playwright MCP server (claude mcp add playwright npx @playwright/mcp@latest) and close the loop:
"Open http://localhost:3000 with Playwright, screenshot the page at 1440px
wide, then at 390px. Look at both screenshots and critique your own render
against CLAUDE.md: type hierarchy, vertical density, alignment, contrast,
how mobile holds up. Give the five highest-impact fixes ranked by impact,
then apply the first three."Three rounds of that loop beat thirty blind prompts. This is where the gap with a generic site opens up: spacing tightens, typography gains hierarchy, mobile stops breaking.
Step 6: assets, where these sites die
A raw Blender GLB weighs 40MB and kills phones. igloo.inc loads far heavier scenes than yours and stays smooth, because everything is compressed before it reaches the browser. Two commands cover 90% of cases:
# 3D: Draco mesh + KTX2 textures (often -95% in weight)
npx @gltf-transform/cli optimize in.glb out.glb --texture-compress ktx2
# background video: under 2MB, muted, with a poster frame
ffmpeg -i source.mov -an -vf "scale=1600:-2" -c:v libx264 -crf 28
-movflags +faststart hero.mp4
ffmpeg -i hero.mp4 -vframes 1 -q:v 3 hero-poster.jpgImages go through next/image as AVIF with explicit dimensions. Fonts get subset to woff2, two families maximum, and only the display face is preloaded.
Step 7: content, SEO and handover
Real content comes before design, never after. Filler text always hides a layout problem. Then: title and description per page, Open Graph with a real image, Organization structured data, sitemap, and hreflang if the site is multilingual. Hand over with a five-minute Loom showing how to edit content, and a monthly retainer offered in the original quote, not six months later.
The performance budget
A slow site does not look expensive, it looks broken. The thresholds to hold:
- LCP under 2 seconds on 4G mobile, CLS under 0.05, INP under 200ms
- Under 250KB of gzipped JavaScript, excluding the 3D bundle, which loads when it enters the viewport
- Final GLB under 3MB, textures in KTX2
- Hero video under 2MB, with a poster frame
- Lighthouse mobile at 90 minimum on a page without 3D, 75 minimum on a page with a WebGL scene
The five details that read as expensive
- Paid typography. A foundry grotesk plus a monospace for numbers and labels. It is the fastest signal there is, and AI will never reach for it on its own.
- Restraint. One accent, one visual moment, one idea per screen. What you remove matters more than what you add.
- Motion that responds. A cursor that follows with lag, a reveal triggered by scroll. An animation that loops on its own costs the eye nothing.
- Content rhythm. Headline under eight words, manifesto paragraph under forty. Expensive sites have little text, placed very well.
- Transitions. A short loader with a counter, a page-to-page fade, a hover state someone actually thought about. Three details, half a day, and the site changes category.
The mistakes that cost you the project
- Asking for the whole site in one prompt, then spending three days repairing code you never read.
- Letting AI pick the fonts and the palette. It will pick Inter and a purple gradient, like thousands of others.
- Accepting every diff without looking at the render. The code compiles, the page is ugly.
- Stacking animations. Five simultaneous effects are worth less than one executed properly.
- Forgetting
prefers-reduced-motionand keyboard navigation. - Shipping an uncompressed GLB. Gorgeous on your MacBook, unplayable on the client’s phone.
Charging 10k without flinching
The price is not justified by the days spent, it is justified by what the site replaces: an identity that lets them charge more, a funnel that converts, a position competitors do not hold. A readable quote: art direction and mockups, build and motion, content and SEO, launch and training. Two revision rounds included per phase, further rounds billed. What is not included is written plainly: full copywriting, photo shoots, custom 3D scenes. And a monthly retainer from day one, because a living site pays out longer than a delivered one.
AI did not make these sites free. It moved the work: less time on the build, far more on taste, constraints and detail. That is good news, because that part does not copy.