A service has no product shot. It can still have a room to stand in.

Two lanes of drop-in background: shader fields that recolour to any client in one line and weigh nothing, and Blender-baked seamless loops for when the demo needs real light and a real object. Pick one, copy four lines, ship.

0Camera moves

0Shader fields

0Shader lane, gzipped

0Cycles frames baked

The decision

Two lanes, and the honest reason to pick each

Most atmosphere work does not need Blender. The exception is worth knowing precisely.

Shader lane

No asset. No bake. Recolours live.

Eight full-screen fields in raw WebGL2 — no three.js, no images, nothing to download per client. Change one hex and the whole field follows, instantly, for any brand you ever pitch. This is the right answer roughly four times out of five.

Every field also has a transparent mode: the dark floor drops out and the field's own value becomes coverage, so it composites over whatever is already on the page instead of painting its own background over it.

Costs: it is light and geometry-free by nature. It cannot show an object, and it will never look photographed.

Baked lane

Real light, real depth, real object.

Cycles renders it once on the GPU; the browser just plays frames. You get refraction, soft shadow and true depth of field that no fragment shader will fake — at a cost the page pays once, not every frame.

The subjects are built, not downloaded: a desk mid-work, a signing table, a payment counter. A torus knot reads as "someone is testing a renderer"; these say what the demo is about before anyone reads a word.

Costs: a few hundred KB, and a re-bake to change colour. Use it when the demo needs a thing, not a mood.

Lane one

Shader fields

Structurally different, not eight tints of one noise: warped fbm, a projected grid, sine interference, a cell network, contour bands, a particle field, a ray integral through a volume, and a moiré. Click any one to take over the hero.

Recolouring live — try the swatches

Lane two

Baked plates

Three built scenes — a working desk, a signing table, a payment counter — shot with thirteen different camera moves. Each subject is a script in scenes/, so no licence follows it anywhere. Seamless by construction, and measured rather than asserted.

Loading…

The vocabulary

Thirteen moves, two topologies

A turntable is one move, and the least interesting one. Cycle runs a parameter 0→2π and is seamless by construction. Pingpong plays any path forward then backward — which is what frees the camera to do moves that do not loop at all, at half the render cost. Every row below is baked; hover one to watch it.

Measured

What each option actually costs

Bytes off disk, gzipped where a server would gzip. The rejected row is real: a live glb with three.js was built in this lab, measured, and deleted.

Ship it

Four lines

Updates as you change the brand colour, the density, or the selected field.

shader · aurora