A tea house homepage where the koi comes to you

Kinmere is a tea house I made up for this piece: loose-leaf tea served beside an old koi pond. The name joins kin, Japanese for gold, with mere, an old English word for a pond. Its homepage hero is the pond itself. The headline, Linger, lies on the pond floor in cream italic type. A red and white koi swims above it and follows your cursor, and a smaller gold koi drifts deeper down.

The brand has one idea, slow down and stay a while, and I wanted the hero to give visitors a reason to do it.

The hero is a single WebGL scene drawn fresh every frame. A ripple simulation runs under the whole page. Every ripple bends the headline beneath it, the way water bends whatever lies on a pond floor, and catches the light as it passes.

The koi is one photo of a fish, wrapped onto a mesh that follows a 24-point spine. The body curves through every turn, the swim wave grows toward the tail and the fins sweep back as it speeds up. It also has a top speed and a turning circle, so it overshoots, curves back and circles your cursor when it gets close, much as a real one does. Its shadow falls on the pond floor below, softened by blurring the koi layer itself.

The fish and the blossoms were generated in Higgsfield with Nano Banana 2.1, each one shot from directly above against black so it would cut out cleanly. The fins needed more work. Higgsfield's background remover gave them a hard edge, and over the water they came out as solid grey shapes. I rebuilt their transparency from the photo itself, using how bright each part of a fin was against the black, so they went back to sheer and you can see the pond through them.

The second fish started as another red and white koi. I swapped it for a gold one, partly so the two would read apart in the water and partly because the name already promised gold.

• Move your cursor and the koi follows. When it gets close, it circles you.
• Every movement leaves ripples that bend the headline and catch the light.
• Click or tap to drop food. Both koi race for it, and the gold one rises from the deep to join in.
• Flick your cursor fast past the koi and it startles, darts off, then comes back.
• Dusk turns your cursor into a lantern. It lights up the headline where it falls, shadows stretch away from it, and fireflies come out.
• Tea blossoms drift on the surface and get pushed aside by the ripples and the passing koi.
• Leave it alone and the koi swims its own slow loop around the pond. On phones you lead with a finger. With reduced motion turned on, the koi swims slower and the cursor ripples and the startle switch off. Without WebGL, a still of the pond takes its place.

The headline says linger, and the page gives you reasons to. Every extra you find, from feeding the koi to switching on dusk, is a reason to stay a little longer. It's also a change from Ilvère, which plays a generated video. Here nothing is recorded: the koi, the water and the light are drawn live in the browser from a few still images, so the scene can answer whatever the visitor does.