Glowing pyramid — a 3D widget in WebGL

We wanted to skip the model entirely and end up with a widget that drops into any site — Tilda, WordPress, plain HTML — in two lines and with no build step.

The work

• the pyramid is described mathematically: an SDF of an anisotropic octahedron intersected with a half-space, so no model file exists at all;
• volume and glow are accumulated by a raymarch loop, a hundred steps per pixel, gathering colour along the ray;
• the logo is not a texture stuck on top — it is mixed into the material inside the marching loop, so it glows with the same light as the face and sits beneath its surface;
• the palette is exposed as parameters: the R/G/B phases are the main control, and the whole character of the glow follows from them;
• the idle spin is combined with an inverted, damped response to the cursor: the pyramid moves away from the mouse rather than following it;
• performance guards: caps on devicePixelRatio and buffer area, rendering paused off-screen, and the system "reduce motion" setting respected.

The result

A single 30 KB file, 10 KB compressed, with no dependencies and no build step. The live pyramid at the top of this page is that file, not a video.

Everything is computed by the shader, so the weight does not depend on how complex the shape is: the geometry has no vertices, no triangles and no textures. The cost sits elsewhere — in fill rate: a hundred steps for every pixel of every frame. Hence the resolution caps on narrow screens, without which a phone would heat up for the sake of a background decoration.