Cerebrium builds a 3D product page for every use case

Every product page on Cerebrium runs the same layout. Pink mono eyebrow, hairline rule, a big light grotesk headline with one word in a pink-to-violet gradient, four lines of copy, two buttons. What changes page to page is the 3D object sitting behind it. That discipline is why the site holds together, and it took awwwards Site of the Day on 10 September with a 7.39, plus the Developer Award at 7.5.

Cerebrium sells serverless GPU infrastructure. Cold starts, autoscaling, four regions, 2500-odd containers. None of that has a picture. Montreal agency KOKI-KIKO decided to give it one, and then to give it the same one every time.

The 3D product page as a template

The home hero is a set of magenta ribbons folding over each other against near-black, with a white specular hit riding the crest of one fold like something moving through a wire. Scroll to the voice page and the ribbons are gone, replaced by concentric rings seen head on, a speaker cone or a waveform pushed out from the middle. The headline structure is identical. Only the noun in the gradient changes: scales, voice, LLMs.

This is the part a working designer should steal. One page template plus one render slot gives you a site where every section looks intentional and nothing needs redesigning. The large language models page puts a purple sphere with slabs cutting through it in the same slot. Same eyebrow, same rule, same two buttons.

One light source across every scene

The renders were built in Cinema 4D and Redshift with some Blender, then rebuilt in Three.js. What keeps them looking like one place is a single custom HDRI from Poly Haven, reused across all of it. Every object gets the same magenta fill, the same near-black ground, the same one hot highlight. Célia Lopez did the 3D. Camera moves were baked out of Cinema 4D rather than animated in the browser, which is why the motion lands on the beat instead of drifting.

Mathis Biabiany built the WebGL layer and wrote up the work on Codrops. The first version used Three.js WebGPURenderer with TSL and took about 20 seconds to compile shaders on load. He moved it back to WebGLRenderer, extended standard materials through onBeforeCompile(), and rebuilt the particles as a ping-pong GPGPU sim. The glowing network paths don't animate at all: each one is UV-unwrapped with an opacity mask travelling along Y, with offset, speed and interval randomised so they never pulse in sync.

The pricing page breaks the dark

One page flips the whole scheme. Pricing splits vertically: pale grey on the left with navy type and a "Pay for what you use" headline, black with the render on the right. The compute table sits in a white card and prints real numbers to six decimals. An H100 at $0.000944 per second. CPU at $0.00000655 per vCPU per second. A Per Second / Per Hour toggle sits under it.

Putting the one bright page on pricing is a real decision. Everywhere else the site is atmosphere. Here it turns the lights on, because this is where someone is doing arithmetic.

What the score actually says

The Developer Award breakdown is more honest than the headline number. Animations 8.20, responsive 8.20, accessibility 7.60, semantics and SEO 7.40, WPO 7.00, markup and metadata 6.60. The craft score sits well above the plumbing score, which is the usual shape for a site carrying this much WebGL, and the 7.00 on performance is the price of the renders.

Credits: KOKI-KIKO as agency, Louis Paquet on strategy and creative direction, Célia Lopez on 3D, Mathis Biabiany on WebGL, Deven Caron and Pier-Luc Cossette on build.

The lesson is cheap to apply and has nothing to do with GPUs. Fix the layout, fix the light, then let one element carry all the variation.