Kavaliero.com is our own project, with no client behind it. We built it to be the proof: it shows what we can do while you use it, and this page explains how it is made.
- Project type
- The studio's own project
- What we did
- Design, development and motion
- Languages
- Spanish and English, each with its own URLs
- Built with
- Next.js, GSAP and Three.js
You should be able to try what we sell before buying it.
A case study is usually told in screenshots. This one has them too, but what it describes is also happening while you scroll it: the knight at the top, the red curtain between one page and the next.
Everything is one square.
The intro builds the knight out of cells sampled from its own SVG. The curtain between pages fills the screen with red cells in 0.42 seconds and clears it in 0.54. The background draws that same square behind every page, and the knight at the top of this one is made of it.
The site's curtain, to scale, between two of its pages.
One function moves the landing.
The opening screen and the three service screens ride the same belt. One continuous function of scroll sets where each of them is, so the speed never breaks and nothing bounces. Along the whole belt, no stretch of scroll is left without motion.
Crystals cut in code.
The blocks on the work page do not come from a model file. Each one is cut when the page loads: a dozen or so planes carve the solid and a smoothing pass rounds its edges. The smoke the pointer leaves is a fluid simulation running in the same WebGL context, which is why the glass bends it.
Every scene knows when to stop.
The automation page opens on a road of light and the Leadesse page on three robots. Every WebGL scene on the site pauses when it leaves the screen or the tab is hidden. Under reduced motion none of them animates: some hold a still and the landing's objects are not loaded.
Two languages, each with its own URLs
Four colours and a single typeface
Red kept scarce: buttons, accents, the full stop
Motion that never touches layout
An intro that preloads the 3D models
Heavy scenes loaded only on approach
Damped springs instead of bounce curves
Analytics without cookies