Colophon
How this site is made.
One idea
A liquid that gathers and clicks. It is the loading screen, the homepage, the cursor, the way between pages, the voice on the contact page and the toy on the page that doesn’t exist. Everything else stays out of its way.
The liquid
Hand-written WebGL shaders, no 3D library. The body is a field of metaballs; under it runs a small GPU fluid simulation, so the cursor, a tap or a scroll stirs it and it settles back. The homepage headline is drawn into a texture and refracted through the surface. The cursor and the page transitions are signed distance fields. A frame-time governor lowers the quality before it lets the frame rate drop.
Type and colour
One typeface, LOOS Extended, in five weights. Ink #231F20, Kliqer red #ED1C24 and a paper tone #F3EFE9.
Motion and sound
GSAP with ScrollTrigger and SplitText, Lenis for smooth scrolling on desktop, and the View Transitions API where the browser supports it. The voice on the contact page is synthesised in the browser with Web Audio; the site ships no audio files.
Build
React and Vite. Every page is prerendered to plain HTML, so the site reads without JavaScript, and it is hosted on Cloudflare Pages. With reduced motion switched on in your system settings, the liquid stands still and the site stays complete.
Credits
Design, development and motion by Kliqer, Amsterdam. Case study images show the clients’ own products and campaigns.
