The task
Assembling AI agents into workflows is work with nothing to photograph. There is no product to put on the screen, the screenshots are terminals and dashboards, and every competitor writes the same three sentences about automation. A page like that is skimmed and closed.
So the first screen was given one image instead of an explanation: a beekeeper and a hive. The swarm does the work, one person keeps the hive — and the reader gets that before reading a single line.
The mechanics come from a site we took apart in its own code, not by eye: a cursor-driven mask that reveals a second photograph over the first, a field of noise instead of a flat background, and a wireframe drawing that shows through it. We found the shaders and the classes that draw each of those, copied the formulas, and wrote our own code around them. The subject, the photographs, the palette, the copy and the hood are ours.
What we built
One screen, and the cursor is the only control
There is nothing below the fold, because there is nothing below. The headline, one line about the work and one button stand on the left; the man takes the right half and looks straight out of the screen.
The reveal is not a spotlight circle. What follows the cursor is a trail with its own physics: it is smeared along the way the hand moves, and it fades on its own in about a third of a second, so the hood is only there while the reader is doing something. Stop, and the man is bare-headed again.
Two photographs lie under all of this — the same man without the hood and in it. They line up to the pixel, so the face does not shift by even one pixel while the hood appears over it.
Inside the trail there is a real hive
The bees are not a picture and not a sprite. It is a 3D scene: fourteen bees with bodies, stripes, veined wings, antennae and legs, a comb with wax cells and honey, and three flowers they land on.
How they fly was the hard part. Any smooth sine drift reads as swimming rather than flying, so the flight is built out of darts and hovers: a bee hangs, twitches, then throws itself somewhere and brakes. Six darts out of ten keep roughly the previous heading, so the swarm streams across the frame instead of balling up.
The scene is drawn separately, on a transparent background, and mixed in by the same mask that brings the hood: outside the trail there is not a single bee, inside it there is a hood, a swarm, a comb and flowers.
The hood is a drawing, and a wave runs up it
Above the man, a wireframe beekeeper hood shows through the whole time — dome, band, brim, veil, collar. It is a real mesh built in code out of rings, not an outline traced over the photograph: an outline off a photograph gives dirt and skin grain, and it never reads as a drawing.
The drawing is lit by a wave that runs up it. The wave is spaced so that only one edge is ever on the hood: the old one has left before the new one comes in. That is measured rather than eyeballed — at the pitch we use, both ends of the wave sit at six per cent of the peak, and in the quiet phase the hood is black nowhere at all.
The mesh is rendered in the space of the photograph, through a long lens, so it stays put over the man whatever the window size. It sits on the plate to within seven pixels.
The page does not wait for a cursor, and it speaks three languages
Two seconds after anyone stops moving the mouse, the page starts moving it for them: a cursor of its own draws passes across the portrait at different heights, so a reader who never touches anything still sees what the screen can do. The moment a real hand moves, the page hands control back.
A visitor who has asked their system for less motion gets the swarm and the field frozen and the trail replaced by a still shape — the picture stays, the movement goes.
Russian, English and Portuguese are three separate documents rather than one page that swaps strings: each has its own address, its own title and description and the links between the versions, which is what a search engine needs to keep the right one. Lighthouse gives the page 100 for search markup.
Under the hood
The mechanics were read out of the original code rather than guessed at, and every part of them is checked by measurement. Here is what the numbers say about the frame rate, the mask, the plates, the hood and the three languages.
How the reveal is built
The mask is a trail with physics, not a circle
What follows the cursor is a small fluid simulation: two textures at half resolution swapping every frame, the old frame kept at 0.96 of its strength and a capsule stamped from where the cursor was to where it is now.
Two photographs that lined up on their own
The man without the hood and the man in it are two generated frames of 1536 by 1024, the second made from the first as a reference.
The hood is a mesh, fitted to the photograph in code
The wireframe hood is 11 520 triangles built from rings, with the veil widening and drawing in again, seams down the panels, gathers at the top and a drawstring collar.
One wave at a time, and that is a measured claim
The spacing of the wave that lights the drawing is now worked out from the height of the hood itself: both ends drop to 6 per cent, half a period fits on the hood, and in the quiet phase the median pixel is pure background.
Speed
60 frames a second, with sixteen times the room to spare
Measured on a real graphics card at 1440 by 900 with the refresh lock on: 60.0 frames a second at rest and 59.2 with the trail open and the swarm live.
The swarm
Fourteen bees that fly like bees
The swarm is a scene of its own, and it was accepted on numbers: the median step is a fourteenth of the peak, so darts really are that much faster than hovers; more than 190 turns sharper than 90 degrees in half a minute; not one bee leaving the volume and not one going through the comb; landings about four per cent of the time.
Languages
Three languages, three documents
Russian, English and Portuguese are printed as three real files at build time, each with its own address, language attribute, title, description and canonical link, plus the links between the versions. Open the English version
Accessibility
Less motion means less motion
A visitor who has asked their system for less motion gets the field, the wave and the swarm all frozen, and the trail replaced by a still shape.
What came out of it
- The scene holds 60 frames a second, and 59 with the trail open on a desktop machine.
- There is enough room in the drawing for hardware sixteen times weaker before 60 frames are at risk.
- Lighthouse on desktop: 100 for search markup, 96 for practices, with layout shift at zero.
- One screen carries the whole offer in three languages, without a single line of scrolling.
The screen does the job an explanation cannot: the reader moves the cursor, sees a hive appear where a moment ago there was a man in a T-shirt, and takes the point about the swarm and the keeper without being told it. Under the portrait there is one button, and it goes straight to a conversation.
