Our own build

The band under the hero

Every page here gets a moving band under the hero. The homepage has a client marquee, Workflows has a pulsing color strip, and Projects needed its own. Here is how we built the little equalizer under the title, and the versions that didn't make the cut.

3 Bands, one per page
5 Variants tried
CSS No canvas or images
12 Cells, heroes locked

Where it started

We give each page a band right below the hero. It's a small thing, a separator with a bit of motion before you drop into the content. The homepage runs a marquee of client logos. Workflows has a strip of brand-color segments that breathe. When we built the Projects page it wanted one too, but the marquee was taken and the color strip belongs to Workflows. So we needed a third idea that still felt like part of the family.

The idea we shipped

Our whole look is a blueprint grid, so an equalizer felt right: the bouncing bars off a stereo, except built out of square grid cells instead of smooth lines. There's a small Rust library, tui-equalizer, that draws one in a terminal out of block characters. That was the reference. Bars made of stacked squares, lighting up cell by cell. Here is what shipped, the same band you saw on the way in:

Shipped. Brand colors spread across the row, red kept sparse so it reads as an accent.

It's pure CSS. No canvas, no images, no animation library. Each bar is a column of square cells on the grid. The height steps up one whole cell at a time, so the tops always land on a gridline, and a slow, staggered cycle walks a wave across the row. The heights are seeded from a fixed hash, not a random call, so every build renders the exact same pattern. Turn on reduce-motion and the bars just sit at their resting height.

The versions that didn't ship

We tried a handful before landing there. They all still live in the repo.

Level. Colored by height instead of scattered, sky at the base climbing to red at the peaks. Clean, but the red ran too hot for a page that's really about the work.

Nodes and connections. A quiet nod to the graph and network companies we build for, with pulses traveling the edges. We liked it. It just wasn't the one.

Filled. Faint placeholder cells behind the lit ones, so the whole grid shows. Looked great on its own, but the ghost grid fought with the hero's grid wash right above it. Pulled.

The part nobody sees

One detail took the longest, and you'd never notice it, which is the point. The band starts right at the bottom of the hero. But the Projects and Workflows headings are different lengths, so each hero snapped to a different height. Off by one grid cell. Click between the two pages and the band jumped forty pixels. We pinned both heroes to the same twelve-cell height, and now the band holds its spot as you move between them. That kind of steadiness is a pile of small alignments like this one.

Why bother

It's a separator most people will scroll right past. We built it the way we build everything here: close to the code, on our own grid, no framework doing it for us. It's also just fun to make, and this is our own site, so we get to.

Want your site to move like this?

We build sites that sweat the small stuff, down to the separator under the hero.

Start a conversation