3D and WebGL websites

Our own homepage is one. On desktop it runs 110,000 particles (34,000 on phones), computed live on your GPU, and they morph through eight forms as you scroll. There's no video file. Move your cursor and the particles move away from it.

That's the pitch. It's also the portfolio piece.

What this actually is

Real-time 3D on the open web, built with WebGL, three.js, and custom GLSL shaders. It runs in every modern browser without a plugin or an app, and there's nothing to install. You open a URL and it moves.

Typical work:

• Product configurators where the customer turns the thing and changes it
• Scroll-driven brand experiences that unfold as the visitor moves down the page
• Data and process visualisations that are genuinely spatial
• Hero moments that give a homepage a sense of place

What the work involves

Real-time 3D combines shader programming, GPU profiling, asset optimization, and spatial interaction design. Our portfolio shows those skills in real projects. We pick the technique based on what the visitor needs to understand or control.

Choosing between video and WebGL

Neither medium is automatically smaller or better. A prototype and an asset budget help you work out which one the experience needs.

Performance is the hard part, and it is the part we do

Anyone can put a spinning model on a page. Making it hold 60fps on a three-year-old Android while passing Core Web Vitals is the actual engineering.

In practice, that means instanced geometry, GPU-side animation so the CPU never touches per-particle math, aggressive draw-call batching, and device-tier detection that scales particle counts down on weak hardware. We also hold to a hard rule: the 3D layer never blocks first paint or input.

This site ships a motion toggle and honours prefers-reduced-motion, because an experience that makes someone motion-sick has failed.

What it costs

WebGL and 3D projects typically run $12,000 to $35,000, depending on how much bespoke shader work and 3D asset production they involve. A single hero moment on an otherwise conventional site sits at the low end, and a full configurator with custom models sits at the high end. See pricing for how we scope it.

Common questions

Will this work on phones? Yes, and it has to. We build with a device-tier system that scales the scene down on weaker GPUs so it doesn't drop frames. If a phone can't run it well, it gets a lighter version that still works.

Is it bad for SEO? Not the way we build it. All the text on this site is real HTML in the document, so crawlers and AI answer engines read it without executing a line of JavaScript. The 3D layer is a <canvas> that sits alongside the content and replaces none of it.

What about accessibility? The canvas is aria-hidden, and all the content is reachable and readable without it. Motion respects prefers-reduced-motion, and there's a visible motion toggle. A 3D site that only works for one kind of body is a broken site.

Do you make the 3D models? We produce procedural and generated geometry in-house. For photoreal product models, we work with your existing CAD or bring in a modeller, and that's quoted separately so you can see the cost.

Can you add this to a site I already have? Usually, yes. A self-contained WebGL section can drop into an existing page. We check the host page's performance budget first, because adding 3D to a site that's already slow just makes it slower.

Three.js or Unity/WebGPU? Three.js, for almost everything on the open web today. It has the broadest device support and the smallest footprint. WebGPU makes sense when a project genuinely needs compute shaders and can accept narrower browser support. Either way, we'll tell you which and why.