Two ways to read this site. Pick what feels right, you can switch later from the nav.
London · 2026 · Three.js / WebGL / GSAP
Your buyer has fifteen tabs open by Tuesday afternoon. By Friday they remember three brands. Make sure yours is one of them.
London-based 3D web design agency for AI product founders, brand-led B2B, and white-label agency partners. The hero you are reading is the proof, Three.js geometry, custom GLSL shader, cursor parallax, click the call button and the geometry reacts. Same shape of work I ship for clients, with the performance budget already engineered in.
Click the call button. Watch the geometry react.
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 WebGL scene 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, WebGL scenes that earn their place. Three.js or React Three Fiber for hero moments, scroll-bound product reveals, and procedural geometry. No 3D for the sake of 3D, every scene answers a copy question the static design could not.
Two, GSAP scroll animation that justifies its frame budget. Every animation justifies the Joule cost it imposes on the user's device. Idle motion is subtle. Scroll-driven motion is bound to scroll position via ScrollTrigger with hardware-accelerated transforms. Click reactions are instant. The site never animates for animation's sake.
Three, integration that performs. Static gradient or SVG carries first paint so the LCP element is hero text. The 3D runtime imports lazily. Mobile defaults to a static fallback. prefers-reduced-motion skips WebGL entirely. Lenis smooth scroll on desktop only. Lighthouse Perf 95+ still passes.
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.
WebGL rendering for hero scenes, scroll-driven geometry, and custom shader work. The default when the site is Astro-first or static. Sub-150KB gzipped on first lazy load.
Declarative scene composition on React-first stacks. drei helpers for environment, postprocessing, controls. Same WebGL output as Three.js direct; cleaner authoring for component-heavy apps.
Scroll-tied animation, fade-and-slide reveals, sticky-card stacks, timeline sequencing. ScrollTrigger went free with GSAP 3.13, production-grade, no licence drama.
Smooth scroll on desktop, scroll-tied animation stays smooth, reduced-motion bypass built in. Eight kilobytes. Worth the budget for the polish it delivers.
Hand-written fragment and vertex shaders for noise fields, displacement, post-processing, and cursor-driven gradient halos. The thing Spline cannot reach.
Astro for content-led sites with island hydration. Next.js for React-first apps. Both give the right place to lazy-load Three.js + GSAP without dragging them into every other page bundle.
Three.js or React Three Fiber. Wireframe geometry, particle field, displaced mesh, or character, whichever fits the brief. Cursor parallax, click reactions, idle micro-animation. Same shape as the hero on this page, tuned to your story.
Section reveals, sticky stacks, timeline sequencing, parallax depth. ScrollTrigger throughout.
GLSL fragment and vertex shaders for noise, displacement, and post-processing. Hand-written, not plugin.
Polish layer that ties scroll-driven animation together. Reduced-motion bypass on by default.
Hero text wins LCP, not the canvas. Mobile gets the SVG fallback. Reduced-motion skips WebGL entirely. Verified Lighthouse Perf 95+ on every build. Schema, hreflang, sitemap, IndexNow all hardened so the 3D adds taste without costing rank.
Web components or islands, your call. Clean handoff with documented runbook.
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 WebGL 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.
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 GSAP-driven motion sections across the site, careful pacing so the brand voice still leads.
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.
Structural. 3D-first means the front-end stack supports lazy-load, code-split, edge rendering, and proper static fallback. Most 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.
Different project. 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.
3D web is a craft surface. Two weeks is enough for one Three.js hero embed without interactivity, performance hardening, or proper fallback. The result will look fine in screenshots and break on an iPhone SE in low-power mode. The right move with a tight timeline is a static refresh and a planned 3D phase two.
"Cannot ship 3D because the iPhone SE will burn." Valid then. Stopped applying around Q4.
Mid-range Android crossed 60fps for Three.js scenes without thermal throttling.
Tailwind plus shadcn is now the default. Funded teams shipping this year all look identical. 3D-first this quarter sets the visual category for 18 months.
Brands that wait spend three years catching up on visual category leadership.
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. Immersive 3D sites generate the kind of memorable brand recall that compounds in the AI-search era.
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 Three.js hero scene with custom GLSL shader, cursor parallax, click-CTA reaction, mobile fallback, and prefers-reduced-motion handling, built without Spline, without React Three Fiber, plain Three.js on Astro. The 1995-mode theme switcher in the top-right is itself a craft choice that the off-the-shelf agency template cannot reach. Pattern-interruption animations live on real pages across the site:
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 twelve 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 (contracted modellers handle heavier asset work; I integrate). I am not the best motion designer in the world (the bar there is set by Active Theory and Resn-tier studios on bespoke six-figure projects). I am the right answer when the brief is "ship an immersive 3D landing page that performs, ranks, and converts on a thirty-thousand-pound budget and a six-week timeline". That intersection is the thing.
Single Three.js or R3F hero scene integrated into your existing site. Full performance hardening, static fallback, mobile opt-in. Best for AI founders shipping v1 and brands wanting a single-section refresh.
Hero scene plus three to five GSAP scroll-tied motion sections. Scroll-bound transitions where the narrative supports it. Custom shader work. Schema, hreflang, and Core Web Vitals all hardened. Best for brand-led B2B teams.
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.
Motion updates, scene swaps, performance tuning, additional 3D asset production. For teams that want a long-term WebGL bench without hiring full-time.
Three.js direct when the site is Astro-first or static, and React is not already in the stack. R3F when the site is already a React app and you want declarative scene composition with drei helpers. Same WebGL output; the choice is about the surrounding framework, not the visual ceiling. The hero you are reading is vanilla Three.js on Astro.
GSAP plus ScrollTrigger ties any animation to scroll position. Practical uses: fade-and-slide section reveals, camera moves on a Three.js scene tied to scroll progress, parallax depth, sticky-card stacks, timeline reveals on year markers. ScrollTrigger went free with GSAP 3.13 in 2024, no licence drama.
Static gradient or SVG carries first paint so the LCP element is hero text. The runtime imports lazily once the hero enters the viewport. Mobile defaults to the static fallback. prefers-reduced-motion skips WebGL entirely. Verified Lighthouse Perf 95+ on every build.
Yes, with discipline. The WebGL canvas is decorative; 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 fallback. WCAG 2.1 AA passes when 3D is treated as visual enhancement rather than functional content.
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.
I work as the 3D-web specialist sub-contractor on your client engagements. You hold the client relationship and the design direction. I deliver Three.js implementations, GSAP builds, 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.
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.
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 immersive 3D 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 (Three.js, R3F, or hybrid), a price range, and a delivery window. No deck, no qualification screen.
And yes, the geometry reacts when you click. That part was on purpose.