TRIANGLES
PER BLADE
Each of the two SVG paths is tessellated into roughly 2,400 triangles. Enough to preserve every Bézier curve, light enough to render at 120 fps.
2,400
Two SVG paths, lifted into 3D.
Lit by a custom GLSL shader.
Drag to rotate.
The brand symbol lives as two SVG paths. We hand them, character for character, to THREE.SVGLoader. It returns shapes; THREE.ExtrudeGeometry sweeps each shape along Z with a small bevel and gives us a real triangle mesh — vertices, indices, normals.
Why mesh and not signed distance functions? Because the GC mark is not a Platonic primitive. It is a designed curve, with intent in every Bézier handle. SDFs are great for things that have a closed-form. Logos are closed-form only inside Adobe Illustrator. Mesh is the honest path.
The brand wanted a soap bubble, so the bubble is what the fragment shader paints. Each blade is alpha-blended — clear in the middle, milky at the rim — and the rim is where a cosine-palette spectrum cycles, faking the thin-film interference you see on real soap film.
A live CubeCamera at the origin re-renders the dome (and the other blade) every third frame, so the reflections are not a baked HDRI but the room itself. Two specular lobes — a broad one and a tight one — drop pinpricks of light on top.
The fragment shader is composed like glslify: thinFilm, fresnel, specLobe, sampleEnv, cursorField, clickRipple — six small modules, one frame. Hover anywhere and a hot spot tracks underneath the surface. Click and a ring expands across both blades. Both are uniforms, not videos.
The bubbles drifting around it are an InstancedBufferGeometry — one icosahedron, fifty-six instances, position computed in the vertex shader from a per-instance seed. One draw call. The trick oryzo.ai pulled is the same trick here: make the page itself the artwork.
