The art of the possible.

Strandline— a coastal conservation charity, invented for this pageSet in Instrument Serif

Demonstration footage: “Jellyfish” — test-videos.co.uk, CC BY 4.0. It stands in for the film you would bring — the machinery around it is what is being demonstrated.

What it is

A short film served from this site’s own media address, playing quietly where it sits. Scroll on and it follows you down in a small card instead of stopping. Pop it out and your browser carries it in picture-in-picture while you read the rest of the page.

When it earns its place

A piece to camera, a tour of the premises, the work itself moving. Film is the quickest way to show a prospect who you are — and most small-business sites either have none, or an embedded player that brings a tracking script in with it.

What it runs on

A plain video file on the site’s own storage, behind the site’s own domain. No YouTube, no Vimeo, no player library, no tracking — and at this size the storage and delivery run to pennies.

What it is

A pinned drawing that gets drafted as you read — material schedule, type spec, setting out, then motion. Four moves, in the order they actually happen, with the sheet annotating itself as each one lands.

When it earns its place

Anything with stages. How a service works, how a project will run, an annual report a board should actually read. It turns “here is a diagram” into “watch it happen”.

What it runs on

The browser’s own scroll machinery, watched by a few lines of script — and the progress rail beside the steps is drawn by newer browsers straight from scroll position, with no script at all. Nothing extra is fetched, and the whole thing stands still for readers who prefer reduced motion.

Marlowe & Finch— a firm of solicitors, invented for this pageSet in Spectral

What it is

Drag the handle and the card rearranges itself — not because your screen changed, but because its own container did. The component carries its own rules for narrow, middling and wide.

When it earns its place

Any site that outlives one layout: content blocks reused in a sidebar, an email panel, a partner’s page. Components that answer to their container survive being moved.

What it runs on

Container queries — built into every current browser. No script involved.

Pigment Club— a paint and colour studio, invented for this pageSet in Bungee

What it is

Real-time graphics, drawn by your graphics card rather than fetched as a picture. Push it around, or pick a mix. Nothing here is an image file — it is about sixty lines of maths, and it never downloads the same thing twice because there is nothing to download.

When it earns its place

When a brand needs a signature nobody else can copy off a stock library. It suits studios, drinks, paint, anything selling feel rather than facts — and it is the one thing on this page that cannot be screenshotted convincingly.

What it runs on

Under two kilobytes of code and no library at all. It draws only while you are playing with it and freezes the moment you stop, so it costs nothing on a phone battery.

Hollowfield— a music festival, invented for this pageSet in Anton

What it is

A line of type that leans toward your pointer, and buttons that reach for it. Every letter is real text in the page — selectable, searchable, and read aloud correctly — not a picture of a word.

When it earns its place

Festivals, launches, anything with a date and a hook. It is the cheapest way to make a page feel alive, and because the letters are still text it costs nothing in search or accessibility.

What it runs on

About half a kilobyte of code. The letters are split into spans when the page is built rather than by script, so there is nothing to wait for and nothing to break.

Meadowgate— a farm shop and kitchen, invented for this pageSet in Caveat

What it is

A drawn map and a set of opening hours that knows what day it is and says whether the place is open right now. No embedded map, no cookie, no third party watching your visitor arrive.

When it earns its place

Every business with a door. A pasted-in map embed is the most common privacy hole on a small-business site — it loads a tracker before the visitor has read a word, and it is the thing a supplier questionnaire asks about.

What it runs on

A drawing and a few lines of date maths. It weighs less than the map pin on an embedded map, and it is the one panel here that saves money rather than costing it.

Rowan Hall— a small museum, invented for this pageSet in Instrument Serif

What it is

Open one of the objects and the card does not blink out and get replaced — it grows into the view it opened, and the title and the plate carry across the change instead of being drawn again. Close it and the same thing happens in reverse. It is the browser doing the animation, not a script moving things about.

When it earns its place

Any site where people move between a list and a detail — a catalogue, a menu, a team page, a set of case studies. It is the difference between a website and something that feels like an application, and it is most of what people mean when they say a site feels expensive.

What it runs on

A browser feature, used directly — the same one that carries an element across a full page change when a site is built for it. No animation library, no framework, no plugin. Where a browser has not caught up, the view simply changes without the animation and nothing is lost.

Click into the strip, then use Tab, the arrow keys, and space.

Built to WCAG 2.2 AA intent, and tested the same way the rest of this site is: axe on every page, then a keyboard pass by hand. The statement on the accessibility page records what was tested and what still falls short.

What it is

A booking strip you can drive entirely from the keyboard. Tab moves between the controls, arrow keys move within a group, space and enter choose. Beside it, a running transcript of what a screen reader would be saying at each step — shown so that people who never use one can see what it is they are paying for.

When it earns its place

Anywhere someone has to complete something rather than read it. It is also the part of a build most often skipped, because a mouse hides the problem: a form can look finished, pass a glance, and still be impossible to complete with a keyboard or a screen reader.

What it runs on

Ordinary HTML controls with their labels attached, plus about thirty lines to keep the transcript in step. No accessibility widget, no overlay, no third-party plugin — those tend to make matters worse and they are not what the standard asks for.

Ninepenny— a coffee roastery, invented for this pageSet in Fraunces

What it is

Each step of the roasting note settles into place as it comes up the screen, and the rule beside it fills to show how far through you are. Scroll back up and it all runs in reverse, because it is tied to the scroll position rather than played once and finished.

When it earns its place

A process worth walking somebody through — how a treatment works, what happens after a funder says yes, the stages of a build. It holds attention on a long page without resorting to a video or a carousel, both of which cost far more and say less.

What it runs on

Nine lines of CSS and no JavaScript whatsoever — the browser ties the animation to the scroll position itself. It adds nothing to the page weight, and where a browser has not caught up the words simply sit there, which is what they do anyway.

Blackthorn— a veterinary practice, invented for this pageSet in Spectral

What it is

A discharge sheet as it looks on screen, and the same sheet the moment you send it to a printer — the navigation, the buttons and the surrounding page gone, the type resized for paper, the web address of the page printed underneath so whoever picks it up knows where it came from.

When it earns its place

Anywhere something gets printed or saved as a PDF and carried around: aftercare instructions, a price list taken into a meeting, a funder report, a booking confirmation stuck on a fridge. It is the commonest thing a website is asked to do that nobody tests.

What it runs on

One print stylesheet — about thirty lines, no library, nothing extra to download. It costs a visitor nothing at all until the moment they print, which is the point.