The site for Kavaliero's security division: a WebGPU glass hero and a chrome object for every service.
Kavaliero Systems is the division of the studio that protects people and businesses: executive digital protection, security audits, remote oversight of a business, custom software, a WhatsApp agent and websites that keep working when the connection does not.
It is built for owners in Venezuela, including those running a business there from abroad. I designed and built it in Spanish and English.
- 34localized pages
- 19hand-written 3D scene modules
- 545,280triangles in the largest baked model
- 6services, one chrome object each
Scenes
Glass you scroll through
The hero is a WebGPU shader stack: a swirl, a colour flow, fluted glass and film grain, with masks driven by scroll. Without WebGPU, or with reduced motion, it falls back to a plain field.
A mark poured in chrome
The intro builds the logo from a signed distance field in WebGL2, then breaks it into a vortex of particles, in about three seconds.
One object per service
Each service page tells its story around a single chrome object: a padlock, a control tower, a vault, a phone. The copy moves around it as the page scrolls.
Pipeline
Models baked at build time
Procedural geometry is baked into compressed buffers before the build. The browser streams and unpacks them in a worker, so the main thread never parses a model.
190 meshes down to 18
The largest model merges 190 source meshes into 18 draw calls: 545,280 triangles, 9,901 wire segments and 7,800 particles.
A transition on the compositor
The glass page transition runs on the Web Animations API instead of a scripted timeline, after the scripted version measured a 285 ms stall.
Details
PDFs without a library
Articles download as A4 documents written by a small module of the site's own, with no PDF dependency.
A game on the contact page
A quote can be crumpled into a ball and thrown into a box. It works from the keyboard too.
A smoke test for the whole site
One script checks all 34 sitemap URLs for locale parity, a single h1, canonical and hreflang links, the 404 and the share image.
I designed and coded the site myself.
