A website for a software company should probably show what the company can do. So when we rebuilt ours, we set ourselves a rule: no themes, no page builders and no off-the-shelf animation libraries. Everything you see is hand-written HTML, CSS and JavaScript, running on the same platform we use for our clients' websites.
Here's a look at a few of the details, for the curious.
The light behind the home page
The soft, slowly shifting colour behind the home page's headline is drawn live by a small graphics program running on your device's graphics chip. Smooth gradients on screens tend to show visible bands of colour, so the program adds a very fine grain that breaks the bands up. You can't see the grain; you just notice that the colours blend.
If your device can't run it, you see a version built from plain CSS shapes instead, and if you've asked your device to reduce motion, it holds still.
Light and dark
The site follows your device's light or dark setting, and the switch in the header lets you choose for yourself. Pressing it reveals the new theme in a circle growing from the button, using the browser's own transition support rather than a library.
Behind that is a small set of colour roles (background, text, accent and so on) rather than fixed colours. Every section reads its colours from those roles, so the whole site changes theme by swapping one set of values. A short script runs before the page first appears, so dark mode users never see a flash of white.
The blog's cover art
There are no stock photos on this blog. Each post's cover is generated in your browser from a style, a number and a palette: geometric blocks that re-form, tiles of curved lines that turn into new paths, contour maps, orbits and charts. The same number always draws the same picture, so a cover looks identical wherever it appears.
The covers move slowly while they're on screen and stop when they're not, so they cost almost nothing when you aren't looking at them.
Every image on this page was drawn by your browser a moment ago.
Pages that flow into each other
Click a post on the blog's front page and its cover grows into place at the top of the article; go back, and it shrinks into its card again. This uses view transitions, a recent browser feature that animates between two separate pages. Browsers that don't support it simply load the page as normal.
Fast by default
All of this is deliberately light. Each page loads only the styles and scripts it uses, files are versioned so your browser can keep them safely, and the animations run on the graphics chip or in the browser's own animation engine, which keeps scrolling smooth.
Why bother?
Partly because it's fun. But the same habits go into the systems we build for clients: careful attention to detail, a light touch on performance, and respect for people's settings and devices. Software that's pleasant to use gets used, and that's half the battle.
If you'd like something built with the same care, we'd love to hear from you.