Our allotment is looking to build a new website. At the same time, I’ve been experimenting with artificial intelligence. I’ll admit that most AI projects have started to bore me. Yes, we can build quickly — but most attempts simply replicate what already exists, only faster.

I’ve been reading Do Design by Alan Moore — the designer and writer, not the comic-book author of the same name. In it he describes learning to stop the photocopier partway through its cycle, before the heat set the toner — using the machine in a way it was never designed for. That has stuck with me. New technology lets us do new things: to combine things in new ways, even when that isn’t what the technology was built for. That, rather than speed, is the part I find interesting.

A flapping bird

My first attempt at a website was fairly mundane. Its one redeeming feature was the artwork, provided by one of our plotholders. My only real contribution was to try to animate one of her characters — a bird.

I did it by taking her drawing, putting it into Gemini, and combining it with a reference image showing the stages of a bird’s wingbeat. That gave me six static frames, which I cut out and put in order, 1 through 6. Then I had the AI cycle through them one after another while sliding the little bird from the left of the screen to the right. It was janky. It was also, genuinely, fun.

A grid of six illustrated frames of a bird's wing flap, labelled apex, downstroke start, mid-downstroke, power point, retraction and high recovery.
The wing-flap reference, generated with Gemini to break the motion into six stages. Cut out and ordered 1–6, they became the animation.
The finished flip-book: the six frames cycling as the bird crosses the frame — the same animation that now flies across the Royate Hill site.

Wilder, and cutting things out

Not long after, I did some reading — most of which I owe to a Reddit thread collecting the most interesting websites people had come across. (If you’re curious, the ones I liked are on the inspiration page, with credit to that thread.) Among them was Wilder — a visually stunning use of parallax, combined with audio and small animations to create an immersive, naturalistic effect. I was quite taken with it, and had no idea how to reproduce it. So I gave the site to Claude as a reference and asked it to work out what techniques might be behind the effect.

When I studied pop art at school, I remember liking Richard Hamilton’s collage Just what is it that makes today’s homes so different, so appealing? (1956). Perhaps what appealed was the idea that someone not especially artistic could cut out pictures and assemble something of their own. Parallax was exciting in the same way — but it has always been expensive to build. And that, I think, is where AI might genuinely help: not to remove the craft, but to make a difficult, costly technology a little cheaper to work with, and to let us build more interesting things with it.

Richard Hamilton's 1956 pop-art collage: a cut-out modern living room with a bodybuilder holding a giant Tootsie Pop lollipop, a pin-up figure on a sofa, and household objects.
Richard Hamilton, Just what is it that makes today’s homes so different, so appealing? (1956). Kunsthalle Tübingen. Reproduced at low resolution for discussion.

We have bees

Claude couldn’t read the site directly, but between us we established that the effect was most likely a GSAP animation combined with parallax. So I had a go.

“We have bees” was my first attempt. I used Copilot to make two images — a bee and a beehive — in a Victorian botanical illustration style. A little unimaginative, perhaps, but there we go.

A Victorian botanical illustration of a honeybee. A Victorian botanical illustration of a wooden beehive.
The first two images: a bee and a hive, in a Victorian botanical style.

One thing I’ve learned working with AI on images is that it loves an SVG. A mathematical path is more efficient than a raster image, and it gives the model very clear instructions to follow. I found a YouTube tutorial on building a path animation, and used its steps with the AI to produce my first pass at the bees.

Screenshot: bees following curved flight lines across a dark green field toward a hive.
First pass: bees following SVG flight paths in toward the hive.

The trouble with spatial objects

Left to its own devices, AI gets confused trying to reason about objects in space. My next step was to think about how to connect this bee animation to the rest of the story. I took one of the bees’ paths off the edge of the frame and tried to build my first parallax: you’d follow the camera as a bee flew into the scene, the view would settle on that frame, the other bees would animate in, and then a bee would carry you out into the next frame.

You can see the seams. At one point the AI chose a near-vertical entry for a bee and then had it execute a sharp ninety-degree turn — which looks completely unnatural.

Screenshot: the words 'We have bees' on the left, with bees flying along curved paths to a wooden hive on the right.
The first parallax: the camera settles, the swarm animates in — We have bees.

Part of the trick with this style is to sidestep the difficulty of animating deliberate movement altogether. Rather than choreographing everything, you introduce small, subtle movements that read as natural — and it’s those that give the sense of depth.

Storyboarding a walk

At this point it became obvious that I needed to storyboard properly. I went back to the original website, pulled out all the content, and thought about how to thread it into a narrative. I should say that — a small module of film studies at GCSE aside — I’ve had no training in photography or film, so this was largely spontaneous.

A few things felt essential to our site:

A walk around Bristol helped too. Some of the murals near us are wonderfully natural — there’s a frog, a patch of grass, a ladybird — and the painted sheds and bike stores have a homemade charm I wanted to borrow. Walking down the railway line, I passed a big open blue sky with trees framing a space beneath it. All of it fed into the storyboard: the idea of starting above the trees, panning down through the canopy, and following an apple as it falls to the ground — the first transition.

Field notes from a walk around Bristol: local murals and painted sheds for the art, and the railway footpath whose canopy became the opening shot. Click any image to enlarge.
Screenshot: a dandelion seed-head in a meadow, with the words 'Wildflowers everywhere.'
A later scene: a dandelion clock in the meadow, its seeds waiting on the wind.

Keeping the human in it

Copilot’s image generation is good for a quick first pass, but I’m uneasy about removing the human from the artistic side of it altogether. Using photography — my own photographs from the plots, or going back to the idea of collage — is far more appealing than machine-made artwork. I’ve stuck a pin in that for now.

Photographs from the plots — the direction I’d rather take than AI-generated artwork. Click any image to enlarge.

What’s next

GSAP has a whole range of effects. Wilder uses a distortion applied over an SVG to make coral seem to wave underwater. My hope is that by combining gentle idle animation, a few larger effects and something like that distortion, I can build more of a sense of a natural, flowing environment. I’ve also found sunlight and particle effects I’d like to put to use.

None of this is finished. But it’s the first time in a while that AI has felt less like a photocopier running at full speed — and more like one you can stop halfway, to make something it was never meant to make.