Skip to content
StyleIn productionGrowing set

Attention

A library of anomalies: familiar things made quietly wrong (fish hanging in dry air, water light with no water), lit by one source and built to stop the eye in half a second and hold it for six.

Attention in the library

NewPro

A basalt stone breaks apart as you scroll, and its pieces rise up the beam of one cold lamp, tumbling slowly and thinning into ash. Scroll back and every piece falls home and the stone closes. The pointer loosens the pieces near it; a click sends a ring through the stone.

sectionwebgl3d
NewPro

An ordered crystal of polished steel balls that pours and pools like water across a concrete floor, lit by one low raking lamp. The terraces and ragged edges of the pile are kept on purpose. Drag the pointer through it and it digs a trench that slumps back in; click and a handful of sixty drops.

backgroundwebgl3d
NewPro

A dozen drops of liquid metal hang in front of the page, and the page is a window. In the LED room, a white box lit by one strip of coloured light, moving the pointer shifts the walls like a real recess and two drops neck, fuse and part. Switch the material between pale iridescent chrome and dark mercury, and the backdrop between the room, a smooth colour gradient and a seamless dusk horizon. One hue control tints the strip, the room and the horizon.

backgroundwebgl3d
New

Bead Button

components

A single bead of water on dark hydrophobic glass is the button. It magnifies the etched plate behind it and shows it upside down, the way real water does, while the label stays upright and crisp. The pointer's approach leans it, a press flattens it and pinches off a satellite droplet that re-merges, and it never runs away.

buttonwaterdroplet
NewPro

A school of butterfly koi hangs in the dry air of a concrete room, inside one shaft of light. The water they belong to is held in the ceiling. The light draws caustics on the floor, and every fish casts its shadow through the beam. Rest the pointer and they come to look; click and they scatter.

herowebgl3d
NewPro

Dry Caustic Room

backgrounds

A high-key white gallery room, seen into one corner. Rippling water light plays down both walls and across the glossy floor, with soft prismatic fringes, and there is no water anywhere. Touch the pointer to the unseen surface and slow rings spread; the caustics bend around them.

backgroundwebglcaustics
NewPro

A footer that is a concrete floor lit edge to edge by water light from a ceiling you cannot see, with rounded top corners. Sharks pass through it, in every direction, and there are no sharks, only their shadows. They swim like real animals: they can only move along their heading. A resting pointer is noticed and avoided or inspected, a click makes them bolt away smoothly, and hovering a link slows the nearest one. Switch to butterfly koi if you prefer.

footersectionwebgl
NewPro

One large jellyfish, centred low in a black void, lit only from inside. The bell is dark transparent glass with gonads, canals and frilled oral arms burning through it. Touch a tentacle and light runs up it to the bell; click and it jets upward and sinks back.

sectionwebgl3d
NewPro

A bloom of tiny moon jellyfish in a near-black void, with no water in the picture: 600 by default, up to 2000 on the count prop, each one small and far like a bloom seen from a distance. The glass is colourless; the only colour is in the organs glowing inside. The swarm has read your page: it drifts around the content, keeps clear of it, and softly lights the words nearest to it. Move the pointer and a current runs through the bloom; click and a ring of it crosses the swarm.

backgroundwebgljellyfish
New

A progress loader drawn as one translucent jellyfish. Progress is light: it rises through the bell from the rim, lights the ring of organs and lets the tentacles grow. With no value it breathes on a five second cycle, and at 100 it exhales, lifts 24 px and fades.

loaderprogressprogressbar