Your buyer has fifteen tabs open by Tuesday afternoon. By Friday they remember three brands. Make sure yours is one of them.

It is 9:47 on a Tuesday morning. Your buyer has already opened four tabs in your category this morning. Each one is built on the same Tailwind starter palette (slate-900, indigo-500, the occasional emerald-400 accent). Each one has shadcn cards in a three-column grid. Each one has a soft gradient blob behind the hero and a stock isometric illustration of a dashboard. By the third tab the buyer has stopped reading the H1s. They are scanning for the price page and the founder photo, and the trust budget that would have funded a discovery call is quietly evaporating with every tab.

Your buyer lands on your site. The hero is a 3D character that breathes, tracks their cursor across the canvas, and reacts when they click the call-to-action. The page loads in under two seconds. Their pattern-match breaks. They stay forty-five seconds longer than they did on tab three. They Slack the URL to their colleague with the message "have you seen this".

That is the work. Not visual gimmickry. A hard-engineered moment of pattern interruption that turns category sameness into category memory. Most teams cannot ship this because the engineering depth and the design taste rarely live in the same room. This is the room where they do.

Three things, defined.

One, scenes authored visually. Spline for character animations, product visualisations, hero moments, and scroll-bound narratives where the design team wants to iterate on the canvas without an engineer in the loop. Three.js where the runtime needs to do work Spline cannot reach (custom shaders, procedural geometry, large scenes, deep physics).

Two, motion that earns its frame budget. Every animation justifies the Joule cost it imposes on the user's device. Idle animations are subtle. Scroll-driven motion is bound to scroll position with hardware-accelerated transforms. Click reactions are instant. The site never animates for animation's sake.

Three, integration that performs. Static poster or gradient carries first paint; the 3D runtime imports lazily; mobile defaults to a static fallback with an opt-in toggle; prefers-reduced-motion skips 3D entirely. The page Lighthouse scores still pass.

What this is not: WebGL games, AR or VR product configurators, or interactive 3D dashboards. Those are bigger projects with different shapes. Happy to point you at people who do them well.

• Hero scene authored in Spline or built in Three.js, exported and integrated into your stack with a clean handoff
• Mouse-follow head, click-CTA reactions, idle micro-animations: interactivity that reads as character without becoming distracting
• Scroll-bound 3D sequences for landing pages where the narrative justifies it (camera moves, model swaps, shader transitions)
• Static poster fallback strategy so the Largest Contentful Paint element is text, not canvas
• Mobile fallback with opt-in tap-to-enable, plus prefers-reduced-motion handling for accessibility
• Astro, Next.js, or React integration depending on your existing stack: web components or React islands, your call
• Schema, hreflang, sitemap, and Core Web Vitals hardening so the 3D adds taste without costing rank
• Optional Cloudinary or imgix image pipeline for poster generation, plus a runbook your team can follow for future scene swaps

AI product founders

Pre-seed to Series B. The product is genuinely AI-native and the website should look like it. The default Tailwind starter does not signal seriousness, and a hand-illustrated SVG hero in 2026 reads as "team that has not seen what shipped this year". A 3D character in the hero, a particle field in the second section, and a scroll-bound model swap on the product page is the visual language your buyer expects from an AI-native team. £12k to £30k for the hero-plus-product-page build.

Brand-led B2B (DTC, premium services, fintech)

The marketing director or CMO holds the budget. The brief is "our category looks the same and we need to look different". The 3D work is the proof artefact, not the entire site. Hero scene, two or three motion sections across the site, careful pacing so the brand voice still leads. £20k to £50k for a full landing page or homepage rebuild.

Mid-market agencies and design studios

You hold the client relationship. I deliver as your 3D-web specialist on a per-project fixed fee or day-rate retainer. NDAs and brand-anonymous case rights are standard. Most agency partners run two to four projects per year through the arrangement. £15k to £40k per project, payable on your terms.

Three shapes I turn down on the kickoff call.

"Make our existing WordPress site 3D." The reason is structural. 3D-first means the front-end stack supports lazy-load, code-split, edge rendering, and proper static fallback. Most existing WordPress themes do not, and retrofitting one is more expensive than rebuilding the front-end on Astro or Next.js. The honest answer is to do the rebuild as part of the engagement, not a 3D bolt-on.

"We need an interactive product configurator with measurements and pricing." That is a different project. Product configurators with real-time pricing, BOM logic, and configuration validation are an engineering programme, not a hero scene. Six-figure budgets, three-to-six-month timelines. I can scope and ship it, but it is a separate engagement, not a sub-feature of a 3D web build.

"We have two weeks before the launch." 3D web is a craft surface. Two weeks is enough for one Spline hero embed without interactivity, performance hardening, or proper fallback. The result will look fine in screenshots and break the first time someone visits on an iPhone SE in low-power mode. The right move with a tight timeline is a static design refresh and a planned 3D phase two, not a rushed 3D phase one.

Three forces converged this year.

Mobile GPU performance crossed the threshold where mid-range Android devices can render Spline scenes at sixty frames per second without thermal throttling. The 2024 line of "we cannot ship 3D because the iPhone SE will burn" stopped applying around late 2025. The fallback discipline still matters; the absolute limit no longer does.

AI product launches in 2026 are saturating the same Tailwind shadcn template. Funded teams shipping AI products in the second half of the year will be competing against a hundred other landing pages that look identical. The brands that ship 3D-first this quarter define the visual category for the next eighteen months. The brands that wait until 2027 spend three years catching up.

AI search citation patterns reward distinctive entities. ChatGPT, Perplexity, and Google AI Overviews preferentially cite sources with strong entity signals: Wikidata presence, named-author bylines, and (per early Q1 2026 evidence) sites with strong brand recall in user follow-up queries. 3D-first sites generate the kind of memorable brand recall that compounds in the AI-search era. The signal is small today, real, and growing.

The fastest way to evaluate whether a person can ship 3D and motion on the web is to look at the surfaces they have already shipped. This site is one of them.

The page you are on right now ships a Spline scene with mouse-follow head, click-CTA reaction, mobile fallback, and prefers-reduced-motion handling. The 1995-mode theme switcher in the top-right is itself a craft choice that the off-the-shelf agency template cannot reach. /site-migration/ ships a Mario-style scrolling animation as a custom canvas component. /tools/ai-search-keyword-research/ uses a Pacman-style vintage loader during long-running API requests. The vintage animation strips (Snake on /blog/, Pong on /wordpress-support/, Tetris on /hostlist/, Asteroids on /ai-search-optimization/, GameOfLife on /programmatic-seo/, DonkeyKong on /case-studies/, Frogger on /edge-compute/, SpaceInvaders on /wplegends/, PixelTypist on /about/) live on real pages as pattern interruptions. None of them are stock components. All of them ship Lighthouse green.

The agency credibility comes from the day job. I co-founded Seahawk Media, which has shipped over five thousand WordPress and modern-stack sites since 2018. Deluxe Astrology is the multilingual programmatic SEO build I run alongside (ninety-one thousand pages, thirty languages, full hreflang and schema discipline). The combination matters here: 3D-first work that does not understand SEO and Core Web Vitals ships as a portfolio piece nobody can find. 3D-first work that does not understand front-end performance ships as a Lighthouse 47 mobile and tanks the launch. The small intersection of "designs the scene, ships the front-end, owns the SEO consequence" is where I have been working since around 2022.

Three things I do not claim. I am not the strongest 3D modeller in the room (Spline-bought scenes and contracted modellers handle the heavier asset work; I integrate). I am not the best motion designer in the world (the bar there is set by the Active Theory and Resn-tier studios on bespoke six-figure projects). I am the right answer when the brief is "ship a 3D-first hero or landing page that performs, ranks, and converts on a thirty-thousand-pound budget and a six-week timeline". That intersection is the thing.

Spline or Three.js, which one should we use?

Spline for hero scenes, character animations, and product visualisations where the design team wants to author visually and the engineering team wants a clean handoff. Three.js for scroll-bound storytelling, custom shaders, large procedural scenes, and anything that needs deep runtime control. Most projects ship a Spline hero plus Three.js for the deeper sections.

How do you keep performance acceptable with 3D in the hero?

Static gradient or poster carries first paint so the LCP element is the hero text. The runtime imports lazily once the hero enters the viewport. Mobile defaults to the static backdrop with an opt-in tap-to-enable button. prefers-reduced-motion skips 3D entirely. Scene assets are compressed and chunked into a per-page bundle so other pages stay light.

Is 3D web accessible?

Yes, with discipline. The 3D scene is decorative content; it sits behind aria-hidden. All copy and CTAs are real DOM elements that screen readers reach. Keyboard navigation skips the canvas. Reduced-motion users see the static backdrop. WCAG 2.1 AA passes when 3D is treated as visual enhancement rather than functional content.

How long does a build like this take?

Two to four weeks for a hero-only retrofit. Six to twelve weeks for a full landing page with three to five motion sections. Twelve to twenty weeks for a fully scroll-bound multi-page 3D narrative. Asset production is the largest single source of timeline variance.

How does white-label work for agency partners?

I work as the 3D-web specialist sub-contractor on your client engagements. You hold the client relationship and the design direction. I deliver Spline scenes, Three.js implementations, performance hardening, and React or Astro integration on a per-project fixed fee or day-rate retainer. NDAs and brand-anonymous case rights are standard.

What does this cost?

Hero-only retrofit £12k to £20k. Full landing page £20k to £40k. Multi-page 3D narrative £40k to £50k. Retainer £3k to £6k per month for ongoing work.

Hero-only retrofit, £12,000 to £20,000, 2 to 4 weeks

Single Spline or Three.js hero scene, integrated into your existing site with full performance hardening, static fallback, and mobile opt-in. Best for AI founders shipping v1 and brands wanting a single-section refresh.

Full landing page or homepage, £20,000 to £40,000, 6 to 10 weeks

Hero scene plus three to five motion sections across the page. Scroll-bound transitions where the narrative supports it. Custom poster generation pipeline. Schema, hreflang, and Core Web Vitals all hardened. Best for brand-led B2B teams.

Multi-page 3D narrative, £40,000 to £50,000, 12 to 20 weeks

Bespoke 3D asset production, custom shader work, scroll-driven narrative across multiple pages, full white-label agency delivery shape if needed. The version that wins design awards and sets up case-study material for both sides.

Retainer, £3,000 to £6,000 per month

Ongoing motion updates, scene swaps, performance tuning, and additional 3D asset production. Three-month minimum commitment.

The free AI Citation Checker derives five buyer queries for your category and reports whether your brand is cited in the top 10 organic results that ChatGPT and Perplexity pull from, plus whether Google AI Overviews are running on those queries today. Useful as a starting line for the conversation about how 3D-first work plays into AI search visibility.

Book the 30-minute call. Tell me your category, the buyer you most want to remember your brand, and the rough timeline. By the end of the call you have a stack pick (Spline, Three.js, or hybrid), a price range, and a delivery window. No deck, no qualification screen.

And yes, the bot reacts when you click. That part was on purpose.